From 52e438652c306ea60b80308a2450d1a1381fbfb1 Mon Sep 17 00:00:00 2001 From: Blue Date: Tue, 7 May 2024 16:44:47 +0500 Subject: [PATCH] 2u-main rebase with master (#1246) Rebase 2u-main with master --- .env | 1 + src/common-components/ThirdPartyAuth.jsx | 3 +- src/config/index.js | 1 + .../CountryField/CountryField.jsx | 2 +- src/register/RegistrationPage.jsx | 26 ++++++---- src/register/RegistrationPage.test.jsx | 49 ++++++++++++++++++- .../ConfigurableRegistrationForm.jsx | 6 ++- 7 files changed, 73 insertions(+), 15 deletions(-) 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;