feat: modify login and regitser page content

bigcommerce · Aug 29, 2023 · 03020fd · 03020fd
1 parent c34510c
commit 03020fd
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 72 deletions.
diff --git a/apps/storefront/src/locales/en-US/users.ts b/apps/storefront/src/locales/en-US/users.ts
@@ -3,12 +3,12 @@ export default {
   'intl.user.register.title.registerComplete.warning':
     'Application has been submitted',
   'intl.user.register.title.accountCreated': 'Registration complete!',
-  'intl.user.register.title.accountRegister': 'Account Registration',
+  'intl.user.register.title.accountRegister': 'Account registration',
   'intl.user.register.title.attachments': 'Attachments',
   'intl.user.register.title.bcToB2B.businessAccountApplication':
     'Business Account Application',
   'intl.user.register.title.address': 'Address',
-  'intl.user.register.title.businessDetails': 'Business Details',
+  'intl.user.register.title.businessDetails': 'Business details',
 
   'intl.user.register.step.optional': 'Optional',
   'intl.user.register.step.account': 'Account',
@@ -29,13 +29,13 @@ export default {
   'intl.user.register.registeredAccount.loginb2b':
     'to apply for a business account',
 
-  'intl.user.register.registeredAccount.accountType': 'Account Type',
-  'intl.user.register.registeredAccount.businessAccount': 'Business Account',
-  'intl.user.register.registeredAccount.personalAccount': 'Personal Account',
+  'intl.user.register.registeredAccount.accountType': 'Account type',
+  'intl.user.register.registeredAccount.businessAccount': 'Business account',
+  'intl.user.register.registeredAccount.personalAccount': 'Personal account',
   'intl.user.register.registeredAccount.contactInformation':
-    'Contact Information',
+    'Contact information',
   'intl.user.register.registeredAccount.additionalInformation':
-    'Additional Information',
+    'Additional information',
 
   'intl.user.register.validatorRules.email':
     'Please use a valid email address, such as user@example.com.',
@@ -62,11 +62,11 @@ export default {
   'intl.user.register.tips.registerLogo': 'register Logo',
 
   // complete page
-  'intl.user.register.RegisterComplete.title': 'Complete Registration',
+  'intl.user.register.RegisterComplete.title': 'Complete registration',
   'intl.user.register.RegisterComplete.passwordMatchPrompt':
     'Your passwords do not match.',
   'intl.user.register.RegisterComplete.email': 'email',
-  'intl.user.register.RegisterComplete.confirmPassword': 'Confirm Password',
+  'intl.user.register.RegisterComplete.confirmPassword': 'Confirm password',
 
   // finish page
   'intl.user.register.RegisterFinish.autoApproved.tip':
@@ -95,10 +95,10 @@ export default {
     "Your email address or password is incorrect. Please try again. If you've forgotten your sign in details, just click the 'Forgot your password?' link below.",
 
   'intl.user.login.loginText.forgotPasswordText': 'Forgot your password ?',
-  'intl.user.login.loginText.emailAddress': 'Email Address',
+  'intl.user.login.loginText.emailAddress': 'Email address',
   'intl.user.login.loginText.password': 'Password',
 
-  'intl.user.forgot.forgotText.resetPassword': 'Reset Password',
+  'intl.user.forgot.forgotText.resetPassword': 'Reset password',
   'intl.user.forgot.forgotText.requestEmail':
     'Fill in your email below to request a new password. An email will be sent to the address below containing a link to verify your email address.',
   'intl.user.forgot.forgotText.resetPasswordBtn': 'Reset Password',

diff --git a/apps/storefront/src/pages/login/ForgotPassword.tsx b/apps/storefront/src/pages/login/ForgotPassword.tsx
@@ -63,36 +63,38 @@ function ForgotPassword(props: ForgotPasswordProps) {
     <B3Card setOpenPage={setOpenPage}>
       <Box
         sx={{
+          bgcolor: '#FFFFFF',
+          borderRadius: '4px',
           display: 'flex',
           flexDirection: 'column',
           mr: 'auto',
           ml: 'auto',
           maxWidth: '537px',
         }}
       >
-        {logo && displayStoreLogo && (
-          <LoginImage>
-            <ImageListItem
-              sx={{
-                maxWidth: isMobile ? '175px' : '250px',
-              }}
-              onClick={() => {
-                window.location.href = '/'
-              }}
-            >
-              <img
-                src={`${logo}`}
-                alt={b3Lang('intl.user.register.tips.registerLogo')}
-                loading="lazy"
-              />
-            </ImageListItem>
-          </LoginImage>
-        )}
+        <Box sx={{ mt: '20px' }}>
+          {logo && displayStoreLogo && (
+            <LoginImage>
+              <ImageListItem
+                sx={{
+                  maxWidth: isMobile ? '175px' : '250px',
+                }}
+                onClick={() => {
+                  window.location.href = '/'
+                }}
+              >
+                <img
+                  src={`${logo}`}
+                  alt={b3Lang('intl.user.register.tips.registerLogo')}
+                  loading="lazy"
+                />
+              </ImageListItem>
+            </LoginImage>
+          )}
+        </Box>
         <Box
           sx={{
-            bgcolor: '#FFFFFF',
-            borderRadius: '4px',
-            margin: '30px 0 0 0',
+            margin: '20px 0 0 0',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',

diff --git a/apps/storefront/src/pages/login/Login.tsx b/apps/storefront/src/pages/login/Login.tsx
@@ -268,25 +268,6 @@ export default function Login(props: RegisteredProps) {
           >
             {loginInfo && (
               <>
-                {logo && loginInfo?.displayStoreLogo && (
-                  <LoginImage>
-                    <ImageListItem
-                      sx={{
-                        maxWidth: isMobile ? '70%' : '250px',
-                      }}
-                      onClick={() => {
-                        window.location.href = '/'
-                      }}
-                    >
-                      <img
-                        src={`${logo}`}
-                        alt={b3Lang('intl.user.register.tips.registerLogo')}
-                        loading="lazy"
-                      />
-                    </ImageListItem>
-                  </LoginImage>
-                )}
-
                 {flag && showTipInfo && (
                   <Box
                     sx={{
@@ -330,41 +311,73 @@ export default function Login(props: RegisteredProps) {
                       borderRadius: '4px',
                       margin: '20px 0',
                       display: 'flex',
-                      flexDirection: isMobile ? 'column' : 'row',
+                      flexDirection: 'column',
                       justifyContent: 'center',
                       width: isMobile ? 'auto' : loginAndRegisterContainerWidth,
                     }}
                   >
+                    {logo && loginInfo?.displayStoreLogo && (
+                      <Box sx={{ margin: '20px 0', minHeight: '150px' }}>
+                        <LoginImage>
+                          <ImageListItem
+                            sx={{
+                              maxWidth: isMobile ? '70%' : '250px',
+                            }}
+                            onClick={() => {
+                              window.location.href = '/'
+                            }}
+                          >
+                            <img
+                              src={`${logo}`}
+                              alt={b3Lang(
+                                'intl.user.register.tips.registerLogo'
+                              )}
+                              loading="lazy"
+                            />
+                          </ImageListItem>
+                        </LoginImage>
+                      </Box>
+                    )}
                     <Box
                       sx={{
-                        width: isMobile ? 'auto' : loginContainerWidth,
-                        paddingRight: isMobile ? 0 : '2%',
-                        ml: '16px',
-                        mr: isMobile ? '16px' : '',
-                        pb: registerEnabled ? '' : '36px',
+                        mb: '20px',
+                        display: 'flex',
+                        flexDirection: isMobile ? 'column' : 'row',
+                        justifyContent: 'center',
+                        width: isMobile ? 'auto' : '100%',
                       }}
                     >
-                      <LoginForm
-                        loginInfo={loginInfo}
-                        gotoForgotPassword={gotoForgotPassword}
-                        handleLoginSubmit={handleLoginSubmit}
-                        backgroundColor={backgroundColor}
-                      />
-                    </Box>
-
-                    {registerEnabled && (
                       <Box
                         sx={{
-                          flex: '1',
-                          paddingLeft: isMobile ? 0 : '2%',
+                          width: isMobile ? 'auto' : loginContainerWidth,
+                          paddingRight: isMobile ? 0 : '2%',
+                          ml: '16px',
+                          mr: isMobile ? '16px' : '',
+                          pb: registerEnabled ? '' : '36px',
                         }}
                       >
-                        <LoginPanel
+                        <LoginForm
                           loginInfo={loginInfo}
-                          handleSubmit={handleCreateAccountSubmit}
+                          gotoForgotPassword={gotoForgotPassword}
+                          handleLoginSubmit={handleLoginSubmit}
+                          backgroundColor={backgroundColor}
                         />
                       </Box>
-                    )}
+
+                      {registerEnabled && (
+                        <Box
+                          sx={{
+                            flex: '1',
+                            paddingLeft: isMobile ? 0 : '2%',
+                          }}
+                        >
+                          <LoginPanel
+                            loginInfo={loginInfo}
+                            handleSubmit={handleCreateAccountSubmit}
+                          />
+                        </Box>
+                      )}
+                    </Box>
                   </Box>
 
                   {loginInfo.widgetFooterText && (

diff --git a/apps/storefront/src/pages/login/LoginForm.tsx b/apps/storefront/src/pages/login/LoginForm.tsx
@@ -55,7 +55,7 @@ function LoginForm(props: LoginFormProps) {
           alignItems: 'center',
         }}
       >
-        Sign In
+        Sign in
       </Typography>
       <Box
         sx={{