diff --git a/.env b/.env
index 661e6802..9d2c9658 100644
--- a/.env
+++ b/.env
@@ -23,6 +23,7 @@ POST_REGISTRATION_REDIRECT_URL=''
SEARCH_CATALOG_URL=''
# ***** Features flags *****
DISABLE_ENTERPRISE_LOGIN=''
+ENABLE_AUTO_GENERATED_USERNAME=''
ENABLE_DYNAMIC_REGISTRATION_FIELDS=''
ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN=''
ENABLE_POST_REGISTRATION_RECOMMENDATIONS=''
diff --git a/src/common-components/ThirdPartyAuth.jsx b/src/common-components/ThirdPartyAuth.jsx
index 3b782036..7dcef3e1 100644
--- a/src/common-components/ThirdPartyAuth.jsx
+++ b/src/common-components/ThirdPartyAuth.jsx
@@ -37,6 +37,7 @@ const ThirdPartyAuth = (props) => {
const isSocialAuthActive = !!providers.length && !currentProvider;
const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
const enterpriseLoginURL = getConfig().LMS_BASE_URL + ENTERPRISE_LOGIN_URL;
+ const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
return (
<>
@@ -61,7 +62,7 @@ const ThirdPartyAuth = (props) => {
)}
- {thirdPartyAuthApiStatus === PENDING_STATE ? (
+ {thirdPartyAuthApiStatus === PENDING_STATE && isThirdPartyAuthActive ? (
diff --git a/src/config/index.js b/src/config/index.js
index fa3613aa..badb6fe7 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -4,6 +4,7 @@ const configuration = {
USER_RETENTION_COOKIE_NAME: process.env.USER_RETENTION_COOKIE_NAME || '',
// Features
DISABLE_ENTERPRISE_LOGIN: process.env.DISABLE_ENTERPRISE_LOGIN || '',
+ ENABLE_AUTO_GENERATED_USERNAME: process.env.ENABLE_AUTO_GENERATED_USERNAME || false,
ENABLE_DYNAMIC_REGISTRATION_FIELDS: process.env.ENABLE_DYNAMIC_REGISTRATION_FIELDS || false,
ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: process.env.ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN || false,
ENABLE_POST_REGISTRATION_RECOMMENDATIONS: process.env.ENABLE_POST_REGISTRATION_RECOMMENDATIONS || false,
diff --git a/src/register/RegistrationFields/CountryField/CountryField.jsx b/src/register/RegistrationFields/CountryField/CountryField.jsx
index c411750b..4f9e06c6 100644
--- a/src/register/RegistrationFields/CountryField/CountryField.jsx
+++ b/src/register/RegistrationFields/CountryField/CountryField.jsx
@@ -97,7 +97,7 @@ const CountryField = (props) => {
};
const getCountryList = () => countryList.map((country) => (
-
+
{country[COUNTRY_DISPLAY_KEY]}
));
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 80ac1f6b..8c5ea79f 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -60,6 +60,7 @@ const RegistrationPage = (props) => {
showConfigurableEdxFields: getConfig().SHOW_CONFIGURABLE_EDX_FIELDS,
showConfigurableRegistrationFields: getConfig().ENABLE_DYNAMIC_REGISTRATION_FIELDS,
showMarketingEmailOptInCheckbox: getConfig().MARKETING_EMAILS_OPT_IN,
+ autoGeneratedUsernameEnabled: getConfig().ENABLE_AUTO_GENERATED_USERNAME,
};
const {
handleInstitutionLogin,
@@ -215,6 +216,9 @@ const RegistrationPage = (props) => {
delete payload.password;
payload.social_auth_provider = currentProvider;
}
+ if (flags.autoGeneratedUsernameEnabled) {
+ delete payload.username;
+ }
// Validating form data before submitting
const { isValid, fieldErrors, emailSuggestion } = isFormValid(
@@ -324,16 +328,18 @@ const RegistrationPage = (props) => {
helpText={[formatMessage(messages['help.text.email'])]}
floatingLabel={formatMessage(messages['registration.email.label'])}
/>
-
+ {!flags.autoGeneratedUsernameEnabled && (
+
+ )}
{!currentProvider && (
{
jest.clearAllMocks();
});
- const populateRequiredFields = (getByLabelText, payload, isThirdPartyAuth = false) => {
+ const populateRequiredFields = (
+ getByLabelText,
+ payload,
+ isThirdPartyAuth = false,
+ autoGeneratedUsernameEnabled = false,
+ ) => {
fireEvent.change(getByLabelText('Full name'), { target: { value: payload.name, name: 'name' } });
- fireEvent.change(getByLabelText('Public username'), { target: { value: payload.username, name: 'username' } });
+ if (!autoGeneratedUsernameEnabled) {
+ fireEvent.change(getByLabelText('Public username'), { target: { value: payload.username, name: 'username' } });
+ }
fireEvent.change(getByLabelText('Email'), { target: { value: payload.email, name: 'email' } });
fireEvent.change(getByLabelText('Country/Region'), { target: { value: payload.country, name: 'country' } });
@@ -299,6 +306,44 @@ describe('RegistrationPage', () => {
});
});
+ it('should submit form without UsernameField when autoGeneratedUsernameEnabled is true', () => {
+ mergeConfig({
+ ENABLE_AUTO_GENERATED_USERNAME: true,
+ });
+ jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
+ const payload = {
+ name: 'John Doe',
+ email: 'john.doe@gmail.com',
+ password: 'password1',
+ country: 'Pakistan',
+ honor_code: true,
+ totalRegistrationTime: 0,
+ };
+
+ store.dispatch = jest.fn(store.dispatch);
+ const { getByLabelText, container } = render(routerWrapper(reduxWrapper()));
+ populateRequiredFields(getByLabelText, payload, false, true);
+ const button = container.querySelector('button.btn-brand');
+ fireEvent.click(button);
+ expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK' }));
+ mergeConfig({
+ ENABLE_AUTO_GENERATED_USERNAME: false,
+ });
+ });
+
+ it('should not display UsernameField when ENABLE_AUTO_GENERATED_USERNAME is true', () => {
+ mergeConfig({
+ ENABLE_AUTO_GENERATED_USERNAME: true,
+ });
+
+ const { queryByLabelText } = render(routerWrapper(reduxWrapper()));
+ expect(queryByLabelText('Username')).toBeNull();
+
+ mergeConfig({
+ ENABLE_AUTO_GENERATED_USERNAME: false,
+ });
+ });
+
it('should not dispatch registerNewUser on empty form Submission', () => {
store.dispatch = jest.fn(store.dispatch);
diff --git a/src/register/components/ConfigurableRegistrationForm.jsx b/src/register/components/ConfigurableRegistrationForm.jsx
index be1f9c27..8c300b7e 100644
--- a/src/register/components/ConfigurableRegistrationForm.jsx
+++ b/src/register/components/ConfigurableRegistrationForm.jsx
@@ -33,7 +33,11 @@ const ConfigurableRegistrationForm = (props) => {
autoSubmitRegistrationForm,
} = props;
- const countryList = useMemo(() => getCountryList(getLocale()), []);
+ /** The reason for adding the entry 'United States' is that Chrome browser aut-fill the form with the 'Unites
+ States' instead of 'United States of America' which does not exist in country dropdown list and gets the user
+ confused and unable to create an account. So we added the United States entry in the dropdown list.
+ */
+ const countryList = useMemo(() => getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]), []);
let showTermsOfServiceAndHonorCode = false;
let showCountryField = false;