fix: update signup form (#2678)

tolgee · Nov 18, 2024 · 74c142c · 74c142c
1 parent 9be6041
commit 74c142c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 31 deletions.
diff --git a/webapp/src/component/security/Login/LoginCredentialsForm.tsx b/webapp/src/component/security/Login/LoginCredentialsForm.tsx
@@ -101,10 +101,12 @@ export function LoginCredentialsForm(props: LoginViewCredentialsProps) {
           name="username"
           label={<T keyName="login_email_label" />}
           minHeight={false}
+          autoComplete="username email"
         />
         <TextField
           name="password"
           type="password"
+          autoComplete="password"
           label={<T keyName="login_password_label" />}
           minHeight={false}
         />

diff --git a/webapp/src/component/security/SignUp/SignUpForm.tsx b/webapp/src/component/security/SignUp/SignUpForm.tsx
@@ -23,13 +23,19 @@ import { PasswordLabel } from '../SetPasswordField';
 import { ResourceErrorComponent } from '../../common/form/ResourceErrorComponent';
 import { Alert } from '../../common/Alert';
 import { SpendingLimitExceededDescription } from '../../billing/SpendingLimitExceeded';
+import { LabelHint } from 'tg.component/common/LabelHint';
 
 const StyledInputFields = styled('div')`
   display: grid;
   align-items: start;
   padding-bottom: 12px;
 `;
 
+const StyledSeparator = styled('div')`
+  height: 32px;
+  justify-self: center;
+`;
+
 const PasswordFieldWithValidation = React.lazy(
   () => import('tg.component/security/PasswordFieldWithValidation')
 );
@@ -122,14 +128,47 @@ export const SignUpForm = (props: Props) => {
       >
         <StyledInputFields>
           <Error loadable={props.loadable} />
+
+          <TextField
+            autoComplete="name"
+            name="name"
+            label={<T keyName="sign_up_form_full_name" />}
+          />
+          {orgRequired && (
+            <TextField
+              autoComplete="organization"
+              name="organizationName"
+              label={
+                <LabelHint title={t('sign_up_form_organization_hint')}>
+                  <T keyName="sign_up_form_organization_name" />
+                </LabelHint>
+              }
+            />
+          )}
+          {userSourceField && (
+            <TextField
+              autoComplete="off"
+              name="userSource"
+              label={
+                <>
+                  <T keyName="sign_up_form_user_source" /> (
+                  <T keyName="sign_up_form_optional_label" />)
+                </>
+              }
+            />
+          )}
+
+          <StyledSeparator />
+
           <TextField
             name="email"
             label={<T keyName="sign_up_form_email" />}
-            autoComplete="email"
+            autoComplete="username email"
           />
           <PasswordFieldWithValidation
             label={<PasswordLabel />}
             inputProps={{ type: showPassword ? 'text' : 'password' }}
+            autoComplete="password"
             InputProps={{
               endAdornment: (
                 <Tooltip
@@ -150,37 +189,18 @@ export const SignUpForm = (props: Props) => {
               ),
             }}
           />
-          <TextField
-            autoComplete="name"
-            name="name"
-            label={<T keyName="sign_up_form_full_name" />}
-          />
-          {orgRequired && (
-            <TextField
-              autoComplete="organization"
-              name="organizationName"
-              label={<T keyName="sign_up_form_organization_name" />}
-            />
-          )}
-          {userSourceField && (
-            <TextField
-              autoComplete="off"
-              name="userSource"
-              label={<T keyName="sign_up_form_user_source" />}
-            />
-          )}
+          <Box mt={1}>
+            <Typography variant="caption" fontSize={14}>
+              <T
+                keyName="sign-up-terms-and-conditions-message"
+                params={{
+                  Link: <Link href="https://tolgee.io/docs/terms_of_use" />,
+                }}
+              />
+            </Typography>
+          </Box>
         </StyledInputFields>
       </StandardForm>
-      <Box mt={1}>
-        <Typography variant="caption" fontSize={14}>
-          <T
-            keyName="sign-up-terms-and-conditions-message"
-            params={{
-              Link: <Link href="https://tolgee.io/docs/terms_of_use" />,
-            }}
-          />
-        </Typography>
-      </Box>
     </>
   );
 };
diff --git a/webapp/src/component/security/SignUp/SignUpView.tsx b/webapp/src/component/security/SignUp/SignUpView.tsx
@@ -29,7 +29,7 @@ export type SignUpType = {
 
 const StyledRightPart = styled('div')`
   display: grid;
-  align-content: end;
+  padding-bottom: 90px;
 `;
 
 export const SignUpView: FunctionComponent = () => {