feat: Auth form visual enhancements

openedx · Mar 1, 2023 · bccdba0 · bccdba0
1 parent f291efc
commit bccdba0
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/src/login/LoginPage.jsx b/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 ThirdPartyAuthPreloader = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
     return (
       <>
@@ -184,7 +185,7 @@ class LoginPage extends React.Component {
           </Hyperlink>
         )}
 
-        {thirdPartyAuthApiStatus === PENDING_STATE ? (
+        {thirdPartyAuthApiStatus === PENDING_STATE && ThirdPartyAuthPreloader ? (
           <Skeleton className="tpa-skeleton mb-3" height={30} count={2} />
         ) : (
           <>

diff --git a/src/register/ThirdPartyAuth.jsx b/src/register/ThirdPartyAuth.jsx
@@ -24,6 +24,7 @@ const ThirdPartyAuth = (props) => {
   const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
   const isSocialAuthActive = !!providers.length && !currentProvider;
   const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
+  const ThirdPartyAuthPreloader = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
   return (
     <>
@@ -33,7 +34,7 @@ const ThirdPartyAuth = (props) => {
         </div>
       )}
 
-      {thirdPartyAuthApiStatus === PENDING_STATE ? (
+      {thirdPartyAuthApiStatus === PENDING_STATE && ThirdPartyAuthPreloader ? (
         <Skeleton className="tpa-skeleton" height={36} count={2} />
       ) : (
         <>

diff --git a/src/register/registrationFields/UsernameField.jsx b/src/register/registrationFields/UsernameField.jsx
@@ -12,7 +12,7 @@ const UsernameField = (props) => {
   const {
     intl, handleSuggestionClick, handleUsernameSuggestionClose, usernameSuggestions, errorMessage,
   } = props;
-  let className = '';
+  let className = 'suggested-usernames-wrapper';
   let suggestedUsernameDiv = <></>;
   let iconButton = <></>;
   const suggestedUsernames = () => (

diff --git a/src/sass/_style.scss b/src/sass/_style.scss
@@ -512,6 +512,10 @@ select.form-control {
   }
 }
 
+.content {
+  width: 100%;
+}
+
 .alert {
   p:last-child {
     margin-bottom: 0;
@@ -587,11 +591,21 @@ select.form-control {
   margin-bottom: 11%;
   margin-left: 15px;
 }
+
+.suggested-usernames-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
 .scroll-suggested-username {
-  width: 21rem;
   white-space: nowrap;
   overflow-x: auto;
   display: inline-flex;
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0.5rem;
+  }
 }
 
 .pgn__form-control-decorator-trailing {