fix: Missed favicon in Safari (#1079)

Co-authored-by: Stanislav Lunyachek <lunyachek@MacBook-Pro-M1.local>

package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
         "@edx/frontend-component-cookie-policy-banner": "2.2.2",
-        "@edx/frontend-platform": "4.0.2",
+        "@edx/frontend-platform": "4.2.0",
         "@edx/paragon": "20.30.1",
         "@fortawesome/fontawesome-svg-core": "6.2.1",
         "@fortawesome/free-brands-svg-icons": "6.2.1",
@@ -3501,9 +3501,9 @@
       }
     },
     "node_modules/@edx/frontend-platform": {
-      "version": "4.0.2",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.2.0.tgz",
-      "integrity": "sha512-Ee4ElMiozydlGv/71fMlxZntOPt23Pe69lcD9beWWDtH1Qe+vGGzBxfWnA3iH1X1zGDD23HxQYvm1bgafmuEDw==",
+      "integrity": "sha512-iDoFeccENQKBjqUgdjl5KSwBrjNEj8YW6Ual+6twcHHJUBg3yRoBEphwHIoRREcMgQjhdKVAdWj8eleh4JsEKA==",
       "dependencies": {
         "@cospired/i18n-iso-languages": "2.2.0",
         "@formatjs/intl-pluralrules": "4.3.3",
@@ -3526,13 +3526,14 @@
         "universal-cookie": "4.0.4"
       },
       "bin": {
+        "intl-imports.js": "i18n/scripts/intl-imports.js",
         "transifex-utils.js": "i18n/scripts/transifex-utils.js"
       },
       "peerDependencies": {
         "@edx/paragon": ">= 10.0.0 < 21.0.0",
         "prop-types": "^15.7.2",
-        "react": "^16.9.0",
+        "react": "^16.9.0 || ^17.0.0",
-        "react-dom": "^16.9.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
         "react-redux": "^7.1.1",
         "react-router-dom": "^5.0.1",
         "redux": "^4.0.4"

package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
     "@edx/frontend-component-cookie-policy-banner": "2.2.2",
-    "@edx/frontend-platform": "4.0.2",
+    "@edx/frontend-platform": "4.2.0",
     "@edx/paragon": "20.30.1",
     "@fortawesome/fontawesome-svg-core": "6.2.1",
     "@fortawesome/free-brands-svg-icons": "6.2.1",

public/index.html

@@ -4,6 +4,7 @@
       <title>Authn | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
       <% if (process.env.OPTIMIZELY_URL) { %>
         <script
           src="<%= process.env.OPTIMIZELY_URL %>"

src/base-component/AuthSmallLayout.jsx

@@ -16,7 +16,7 @@ const AuthSmallLayout = ({ username }) => {
       <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
         <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
       </Hyperlink>
-      <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+      <div className="d-flex align-items-center m-3.5">
         <div className="small-yellow-line mt-4.5" />
         <div>
           <h1 className="h5 data-hj-suppress">

src/base-component/MediumLayout.jsx

@@ -23,13 +23,15 @@ const MediumLayout = () => {
             <div>
               <h1
                 className={classNames(
-                  'display-1 text-white mt-5 mb-5 mr-2',
+                  'display-1 text-white mt-5 mb-5 mr-2 main-heading',
                   { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
                 )}
               >
-                <span className="mr-2">{formatMessage(messages['start.learning'])}</span>
+                <span>
-                <span className="text-accent-a d-inline-block">
+                  {formatMessage(messages['start.learning'])}{' '}
-                  {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+                  <span className="text-accent-a d-inline-block">
+                    {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+                  </span>
                 </span>
               </h1>
             </div>

src/base-component/SmallLayout.jsx

@@ -17,17 +17,18 @@ const SmallLayout = () => {
         <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
           <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
         </Hyperlink>
-        <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+        <div className="d-flex align-items-center m-3.5">
           <div className={classNames({ 'small-yellow-line mr-n2.5': getConfig().SITE_NAME === 'edX' })} />
           <h1
             className={classNames(
               'text-white mt-3.5 mb-3.5',
-              { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
             )}
           >
-            <span className="mr-1">{formatMessage(messages['start.learning'])}</span>
+            <span>
-            <span className="text-accent-a d-inline-block">
+              {formatMessage(messages['start.learning'])}{' '}
-              {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+              <span className="text-accent-a d-inline-block">
+                {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+              </span>
             </span>
           </h1>
         </div>

src/i18n/messages/ar.json

@@ -69,7 +69,7 @@
   "non.compliant.password.message": "كلمة مرورك الحالية لا تستسجيب لمتطلبات الأمان الجديدة. لقد أرسلنا للتو رسالة لإعادة ضبط كلمة المرور إلى عنوان البريد الإلكتروني المرتبط بهذا الحساب. شكرًا لك على مساعدتنا في الحفاظ على سلامة بياناتك.",
   "account.locked.out.message.1": "لحماية حسابك، تم إقفاله مؤقتًا. حاول مرة أخرى بعد 30 دقيقة.",
   "enterprise.login.btn.text": "بيانات الشركة أو المدرسة",
-  "username.or.email.format.validation.less.chars.message": "يجب أن يحتوي اسم المستخدم أو البريد الإلكتروني على 3 أحرف على الأقل.",
+  "username.or.email.format.validation.less.chars.message": "يجب أن يحتوي اسم المستخدم أو البريد الإلكتروني على 2 أحرف على الأقل.",
   "email.validation.message": "أدخل اسم المستخدم أو البريد الإلكتروني الخاص بك",
   "password.validation.message": "لم يتم استيفاء معايير كلمة المرور",
   "account.activation.success.message.title": "نجح الأمر! لقد قمت بتفعيل حسابك.",

src/i18n/messages/de_DE.json

@@ -69,7 +69,7 @@
   "non.compliant.password.message": "Ihr aktuelles Passwort entspricht nicht den neuen Sicherheitsanforderungen. Wir haben gerade eine Nachricht zum Zurücksetzen des Passworts an die mit diesem Konto verknüpfte E-Mail-Adresse gesendet. Vielen Dank, dass Sie uns helfen, Ihre Daten zu schützen.",
   "account.locked.out.message.1": "Um Ihr Konto zu schützen, wurde es vorübergehend gesperrt. Versuchen Sie es in 30 Minuten erneut.",
   "enterprise.login.btn.text": "Arbeits- oder Schulzeugnisse",
-  "username.or.email.format.validation.less.chars.message": "Benutzername oder E-Mail müssen mindestens 3 Zeichen lang sein.",
+  "username.or.email.format.validation.less.chars.message": "Benutzername oder E-Mail müssen mindestens 2 Zeichen lang sein.",
   "email.validation.message": "Geben Sie Ihren Benutzernamen oder Ihre E-Mail-Adresse ein",
   "password.validation.message": "Die Passwortkriterien wurden nicht erfüllt",
   "account.activation.success.message.title": "Super! Sie haben Ihr Konto aktiviert.",

src/i18n/messages/es_419.json

@@ -69,7 +69,7 @@
   "non.compliant.password.message": "Tu contraseña actual no cumple con los nuevos requisitos de seguridad. Acabamos de enviar un mensaje de restablecimiento de contraseña a la dirección de correo electrónico asociada a esta cuenta. Gracias por ayudarnos a mantener tus datos seguros.",
   "account.locked.out.message.1": "Para proteger tu cuenta, se ha bloqueado temporalmente. Inténtalo de nuevo en 30 minutos.",
   "enterprise.login.btn.text": "Credenciales de la empresa o de la institución ",
-  "username.or.email.format.validation.less.chars.message": "El nombre de usuario o el correo electrónico deben tener al menos 3 caracteres.",
+  "username.or.email.format.validation.less.chars.message": "El nombre de usuario o el correo electrónico deben tener al menos 2 caracteres.",
   "email.validation.message": "Introduce tu nombre de usuario o correo electrónico",
   "password.validation.message": "No se han cumplido los criterios de la contraseña",
   "account.activation.success.message.title": "Ha sido un éxito. Has activado tu cuenta.",

src/i18n/messages/fr.json

@@ -69,7 +69,7 @@
   "non.compliant.password.message": "Votre mot de passe actuel ne répond pas aux nouvelles exigences de sécurité. Nous venons d'envoyer un message de réinitialisation de mot de passe à l'adresse courriel associée à ce compte. Merci de nous aider à protéger vos données.",
   "account.locked.out.message.1": "Pour protéger votre compte, il a été temporairement verrouillé. Réessayez dans 30 minutes.",
   "enterprise.login.btn.text": "Identifiants de la compagnie ou de l'école",
-  "username.or.email.format.validation.less.chars.message": "Le nom d'utilisateur ou l'adresse courriel doit comporter au moins 3 caractères.",
+  "username.or.email.format.validation.less.chars.message": "Le nom d'utilisateur ou l'adresse courriel doit comporter au moins 2 caractères.",
   "email.validation.message": "Entrez votre nom d'utilisateur ou votre adresse courriel",
   "password.validation.message": "Les critères de mot de passe n'ont pas été remplis",
   "account.activation.success.message.title": "Succès! Vous avez activé votre compte.",

src/i18n/messages/hi.json

@@ -69,7 +69,7 @@
   "non.compliant.password.message": "Your current password does not meet the new security requirements. We just sent a password-reset message to the email address associated with this account. Thank you for helping us keep your data safe.",
   "account.locked.out.message.1": "To protect your account, it's been temporarily locked. Try again in 30 minutes.",
   "enterprise.login.btn.text": "Company or school credentials",
-  "username.or.email.format.validation.less.chars.message": "Username or email must have at least 3 characters.",
+  "username.or.email.format.validation.less.chars.message": "Username or email must have at least 2 characters.",
   "email.validation.message": "Enter your username or email",
   "password.validation.message": "Password criteria has not been met",
   "account.activation.success.message.title": "Success! You have activated your account.",

src/i18n/messages/it_IT.json

@@ -69,7 +69,7 @@
   "non.compliant.password.message": "La tua password attuale non soddisfa i nuovi requisiti di sicurezza. Abbiamo appena inviato un messaggio di reimpostazione della password all'indirizzo e-mail associato a questo account. Grazie per averci aiutato a mantenere i tuoi dati al sicuro.",
   "account.locked.out.message.1": "Per proteggere il tuo account, è stato temporaneamente bloccato. Riprova tra 30 minuti.",
   "enterprise.login.btn.text": "Credenziali aziendali o scolastiche",
-  "username.or.email.format.validation.less.chars.message": "Il nome utente o l'e-mail deve contenere almeno 3 caratteri.",
+  "username.or.email.format.validation.less.chars.message": "Il nome utente o l'e-mail deve contenere almeno 2 caratteri.",
   "email.validation.message": "Inserisci il tuo nome utente o e-mail",
   "password.validation.message": "I criteri della password non sono stati soddisfatti",
   "account.activation.success.message.title": "Completato correttamente! Hai attivato il tuo account. ",

src/i18n/messages/pt_PT.json

@@ -69,7 +69,7 @@
   "non.compliant.password.message": "Your current password does not meet the new security requirements. We just sent a password-reset message to the email address associated with this account. Thank you for helping us keep your data safe.",
   "account.locked.out.message.1": "To protect your account, it's been temporarily locked. Try again in 30 minutes.",
   "enterprise.login.btn.text": "Company or school credentials",
-  "username.or.email.format.validation.less.chars.message": "Username or email must have at least 3 characters.",
+  "username.or.email.format.validation.less.chars.message": "Username or email must have at least 2 characters.",
   "email.validation.message": "Enter your username or email",
   "password.validation.message": "Password criteria has not been met",
   "account.activation.success.message.title": "Sucesso! Você ativou a sua conta.",

src/i18n/messages/ru.json

@@ -69,7 +69,7 @@
   "non.compliant.password.message": "Your current password does not meet the new security requirements. We just sent a password-reset message to the email address associated with this account. Thank you for helping us keep your data safe.",
   "account.locked.out.message.1": "To protect your account, it's been temporarily locked. Try again in 30 minutes.",
   "enterprise.login.btn.text": "Company or school credentials",
-  "username.or.email.format.validation.less.chars.message": "Username or email must have at least 3 characters.",
+  "username.or.email.format.validation.less.chars.message": "Username or email must have at least 2 characters.",
   "email.validation.message": "Enter your username or email",
   "password.validation.message": "Password criteria has not been met",
   "account.activation.success.message.title": "Success! You have activated your account.",

src/i18n/messages/uk.json

@@ -69,7 +69,7 @@
   "non.compliant.password.message": "Your current password does not meet the new security requirements. We just sent a password-reset message to the email address associated with this account. Thank you for helping us keep your data safe.",
   "account.locked.out.message.1": "To protect your account, it's been temporarily locked. Try again in 30 minutes.",
   "enterprise.login.btn.text": "Company or school credentials",
-  "username.or.email.format.validation.less.chars.message": "Username or email must have at least 3 characters.",
+  "username.or.email.format.validation.less.chars.message": "Username or email must have at least 2 characters.",
   "email.validation.message": "Enter your username or email",
   "password.validation.message": "Password criteria has not been met",
   "account.activation.success.message.title": "Success! You have activated your account.",

src/i18n/messages/zh_CN.json

@@ -69,7 +69,7 @@
   "non.compliant.password.message": "Your current password does not meet the new security requirements. We just sent a password-reset message to the email address associated with this account. Thank you for helping us keep your data safe.",
   "account.locked.out.message.1": "To protect your account, it's been temporarily locked. Try again in 30 minutes.",
   "enterprise.login.btn.text": "Company or school credentials",
-  "username.or.email.format.validation.less.chars.message": "Username or email must have at least 3 characters.",
+  "username.or.email.format.validation.less.chars.message": "Username or email must have at least 2 characters.",
   "email.validation.message": "Enter your username or email",
   "password.validation.message": "Password criteria has not been met",
   "account.activation.success.message.title": "Success! You have activated your account.",

src/login/LoginPage.jsx

@@ -148,7 +148,7 @@ class LoginPage extends React.Component {
 
     if (email === '') {
       errors.emailOrUsername = this.props.intl.formatMessage(messages['email.validation.message']);
-    } else if (email.length < 3) {
+    } else if (email.length < 2) {
       errors.emailOrUsername = this.props.intl.formatMessage(messages['username.or.email.format.validation.less.chars.message']);
     } else {
       errors.emailOrUsername = '';

src/login/messages.jsx

@@ -71,8 +71,8 @@ const messages = defineMessages({
   },
   'username.or.email.format.validation.less.chars.message': {
     id: 'username.or.email.format.validation.less.chars.message',
-    defaultMessage: 'Username or email must have at least 3 characters.',
+    defaultMessage: 'Username or email must have at least 2 characters.',
-    description: 'Validation message that appears when username or email address is less than 3 characters',
+    description: 'Validation message that appears when username or email address is less than 2 characters',
   },
   'email.validation.message': {
     id: 'email.validation.message',

src/login/tests/LoginPage.test.jsx

@@ -129,14 +129,14 @@ describe('LoginPage', () => {
     expect(store.dispatch).toHaveBeenCalledWith(loginRequestFailure({ errorCode: 'invalid-form' }));
   });
 
-  it('should match state for invalid email (less than 3 characters), on form submission', () => {
+  it('should match state for invalid email (less than 2 characters), on form submission', () => {
-    const errorState = { emailOrUsername: 'Username or email must have at least 3 characters.', password: '' };
+    const errorState = { emailOrUsername: 'Username or email must have at least 2 characters.', password: '' };
     store.dispatch = jest.fn(store.dispatch);
 
     const loginPage = (mount(reduxWrapper(<IntlLoginPage {...props} />))).find('LoginPage');
 
     loginPage.find('input#password').simulate('change', { target: { value: 'test', name: 'password' } });
-    loginPage.find('input#emailOrUsername').simulate('change', { target: { value: 'te', name: 'email' } });
+    loginPage.find('input#emailOrUsername').simulate('change', { target: { value: 't', name: 'email' } });
     loginPage.find('button.btn-brand').simulate('click');
 
     expect(loginPage.state('errors')).toEqual(errorState);

src/register/registrationFields/UsernameField.jsx

@@ -42,8 +42,8 @@ const UsernameField = (props) => {
     iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />;
     suggestedUsernameDiv = suggestedUsernames();
   } else if (usernameSuggestions.length > 0 && props.value === ' ') {
-    className = 'suggested-username';
+    className = 'username-suggestions d-flex align-items-center';
-    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />;
+    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />;
     suggestedUsernameDiv = suggestedUsernames();
   } else if (usernameSuggestions.length > 0 && errorMessage) {
     suggestedUsernameDiv = suggestedUsernames();

src/register/tests/RegistrationPage.test.jsx

@@ -660,7 +660,7 @@ describe('RegistrationPage', () => {
 
       const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
       registrationPage.find('input#name').simulate('change', { target: { value: 'test name', name: 'name' } });
-      registrationPage.find('button.suggested-username-close-button').at(0).simulate('click');
+      registrationPage.find('button.username-suggestions__close__button').at(0).simulate('click');
       expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
     });
 

src/sass/_base_component.scss

@@ -38,6 +38,11 @@
   max-width: 320px;
 }
 
+.main-heading {
+  position: relative;
+  z-index: 2;
+}
+
 .complete-your-profile {
   font-weight: 700;
   line-height: 1;

src/sass/_registration.scss

@@ -1,3 +1,109 @@
 .register-stateful-button-width {
   min-width: 14.4rem;
 }
+
+.pgn__form-autosuggest__wrapper > .pgn__form-group {
+  margin-bottom: 0 !important;
+}
+
+.email-suggestion-alert-error  {
+  padding: 0.5rem 1rem;
+
+  .email-suggestion__close {
+    float: right;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .email-suggestion__text {
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+  }
+
+  .alert-link  {
+    color: $primary !important;
+
+    &:hover {
+      text-decoration: underline;
+      color: $info-700 !important;
+    }
+  }
+}
+
+.email-suggestion-alert-warning {
+  color: $info-500 !important;
+
+  &:hover {
+    text-decoration: underline;
+    color: $info-700 !important;
+  }
+}
+
+.form-field--checkbox {
+  .pgn__form-label {
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+  }
+  margin-left: 3px;
+}
+
+.username-suggestions--chip {
+  padding: 1px 0.5rem;
+  margin: 0.25rem;
+  border-radius: 0.375rem;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: normal;
+  color: $primary-700;
+}
+
+.username-suggestion--label {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  margin-right: 0.25rem;
+}
+
+.username-suggestions {
+  position: relative;
+  margin-top: -2.5rem;
+  margin-left: 15px;
+}
+
+.username-suggestions__close__button {
+  right: 1rem;
+  position: absolute;
+}
+
+.username-suggestions__error {
+  position: relative;
+  margin-top: -13.7%;
+  margin-bottom: 11%;
+  margin-left: 15px;
+}
+
+.username-scroll-suggested--form-field {
+  width: 20rem;
+  white-space: nowrap;
+  overflow-x: auto;
+  display: inline-flex;
+}
+
+@media (max-width: 372px) {
+  .username-scroll-suggested--form-field {
+    width: 11rem !important;
+  }
+  .username-suggestions__close__button {
+    right: 0.5rem;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, "sm")) {
+  .username-scroll-suggested--form-field {
+    width: 15rem;
+  }
+  .username-suggestions__close__button {
+    right: 0.5rem;
+  }
+}