feat: Auth form visual enhancements - remove css changes, rename const

- Hide preloaders for third party auth providers if they disabled
- Suggested usernames container enlargement for mathing to neighboring inputs

package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
         "@edx/frontend-component-cookie-policy-banner": "2.2.0",
-        "@edx/frontend-platform": "3.1.1",
+        "@edx/frontend-platform": "4.2.0",
         "@edx/paragon": "20.20.0",
         "@fortawesome/fontawesome-svg-core": "6.2.1",
         "@fortawesome/free-brands-svg-icons": "6.2.1",
@@ -3524,9 +3524,9 @@
       }
     },
     "node_modules/@edx/frontend-platform": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-3.1.1.tgz",
-      "integrity": "sha512-vXpuOISGuTpzN7PAGCmvZ1XFxgnsVyc9/WA/IcAFPZaNKsjbTOtDn5oiFI9avjWKSnlFqsvJTYUK9JfPOSNW5A==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.2.0.tgz",
+      "integrity": "sha512-iDoFeccENQKBjqUgdjl5KSwBrjNEj8YW6Ual+6twcHHJUBg3yRoBEphwHIoRREcMgQjhdKVAdWj8eleh4JsEKA==",
       "dependencies": {
         "@cospired/i18n-iso-languages": "2.2.0",
         "@formatjs/intl-pluralrules": "4.3.3",
@@ -3549,13 +3549,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-dom": "^16.9.0",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
         "react-redux": "^7.1.1",
         "react-router-dom": "^5.0.1",
         "redux": "^4.0.4"
@@ -30453,9 +30454,9 @@
       }
     },
     "@edx/frontend-platform": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-3.1.1.tgz",
-      "integrity": "sha512-vXpuOISGuTpzN7PAGCmvZ1XFxgnsVyc9/WA/IcAFPZaNKsjbTOtDn5oiFI9avjWKSnlFqsvJTYUK9JfPOSNW5A==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.2.0.tgz",
+      "integrity": "sha512-iDoFeccENQKBjqUgdjl5KSwBrjNEj8YW6Ual+6twcHHJUBg3yRoBEphwHIoRREcMgQjhdKVAdWj8eleh4JsEKA==",
       "requires": {
         "@cospired/i18n-iso-languages": "2.2.0",
         "@formatjs/intl-pluralrules": "4.3.3",

package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
     "@edx/frontend-component-cookie-policy-banner": "2.2.0",
-    "@edx/frontend-platform": "3.1.1",
+    "@edx/frontend-platform": "4.2.0",
     "@edx/paragon": "20.20.0",
     "@fortawesome/fontawesome-svg-core": "6.2.1",
     "@fortawesome/free-brands-svg-icons": "6.2.1",

src/login/LoginPage.jsx

@@ -167,6 +167,7 @@ class LoginPage extends React.Component {
     const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
     const isSocialAuthActive = !!providers.length && !currentProvider;
     const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
+    const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
     return (
       <>
@@ -184,7 +185,7 @@ class LoginPage extends React.Component {
           </Hyperlink>
         )}
 
-        {thirdPartyAuthApiStatus === PENDING_STATE ? (
+        {thirdPartyAuthApiStatus === PENDING_STATE && isThirdPartyAuthActive ? (
           <Skeleton className="tpa-skeleton mb-3" height={30} count={2} />
         ) : (
           <>

src/register/RegistrationPage.jsx

@@ -131,10 +131,20 @@ class RegistrationPage extends React.Component {
 
       // Exemption for country field's value as we need to set updated value from the store.
       if (focusedField === 'country') { focusedField = ''; }
-      const { [focusedField]: _, ...registrationData } = { ...nextProps.registrationFormData, ...nextState };
-      this.setState({
-        ...registrationData,
-      });
+
+      // For username field's value as we need to wait for usernameSuggestions.
+      // Otherwise, an infinite state update loop error appears.
+      if (focusedField === 'username') {
+        this.setState({
+          ...nextProps.registrationFormData,
+          ...nextState,
+        });
+      } else {
+        const { [focusedField]: _, ...registrationData } = { ...nextProps.registrationFormData, ...nextState };
+        this.setState({
+          ...registrationData,
+        });
+      }
     }
 
     if (this.props.usernameSuggestions.length > 0 && this.state.username === '') {
@@ -607,6 +617,7 @@ class RegistrationPage extends React.Component {
     const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
     const isSocialAuthActive = !!providers.length && !currentProvider;
     const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
+    const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
     return (
       <>
@@ -616,7 +627,7 @@ class RegistrationPage extends React.Component {
           </div>
         )}
 
-        {thirdPartyAuthApiStatus === PENDING_STATE ? (
+        {thirdPartyAuthApiStatus === PENDING_STATE && isThirdPartyAuthActive ? (
           <Skeleton className="tpa-skeleton" height={36} count={2} />
         ) : (
           <>