Merge pull request #242 from eficode/feat/add-input-autocomplete

feat(app-general): add autocomplete to input
eficode · Feb 23, 2021 · 1aa7cc2 · 1aa7cc2
2 parents ab59dc3 + f47c06a
commit 1aa7cc2
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 2 deletions.
diff --git a/packages/game-app/src/_shared/components/PasswordInput/PasswordInput.tsx b/packages/game-app/src/_shared/components/PasswordInput/PasswordInput.tsx
@@ -21,6 +21,7 @@ type Props = {
   errorMessage?: string | null;
   onForgotPassword?: () => void;
   forgotPasswordLabel?: string;
+  autocomplete?: React.ComponentProps<typeof Input>['autocomplete'];
   tabIndex?: React.ComponentProps<typeof Input>['tabIndex'];
 };
 
@@ -37,6 +38,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, Props>(
       forgotPasswordLabel,
       onForgotPassword,
       tabIndex,
+      autocomplete,
     },
     ref,
   ) => {
@@ -62,7 +64,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, Props>(
         <Input
           ref={ref}
           variant={!!errorMessage ? 'defaultError' : 'default'}
-          autoComplete="new-password"
+          autocomplete={autocomplete}
           iconRight={
             <IconButton variant="clearSmall" onClick={toggleType} tabIndex={-1}>
               <StyledIcon variant="small">{type === 'password' ? <EyeIcon /> : <HideIcon />}</StyledIcon>

diff --git a/packages/game-app/src/_shared/components/TextInput/TextInput.tsx b/packages/game-app/src/_shared/components/TextInput/TextInput.tsx
@@ -17,11 +17,24 @@ type Props = {
   type?: string;
   disabled?: boolean;
   tabIndex?: React.ComponentProps<typeof Input>['tabIndex'];
+  autocomplete?: React.ComponentProps<typeof Input>['autocomplete'];
 };
 
 const TextInput = React.forwardRef<HTMLInputElement, Props>(
   (
-    { name, value, errorMessage, label, labelDetails, placeholder, onChange, type = 'text', disabled, tabIndex },
+    {
+      name,
+      value,
+      errorMessage,
+      label,
+      labelDetails,
+      placeholder,
+      onChange,
+      type = 'text',
+      disabled,
+      tabIndex,
+      autocomplete,
+    },
     ref,
   ) => {
     return (
@@ -45,6 +58,7 @@ const TextInput = React.forwardRef<HTMLInputElement, Props>(
           id={name}
           onChange={onChange}
           tabIndex={tabIndex}
+          autocomplete={autocomplete}
         />
         {errorMessage ? <ErrorMessage message={errorMessage} /> : null}
       </InputContainer>

diff --git a/packages/game-app/src/_shared/form/FormTextField/FormTextField.tsx b/packages/game-app/src/_shared/form/FormTextField/FormTextField.tsx
@@ -26,6 +26,7 @@ type Props = {
   CustomInput?: React.ComponentType<React.ComponentProps<typeof TextInput>>;
   disabled?: boolean;
   tabIndex?: React.ComponentProps<typeof TextInput>['tabIndex'];
+  autocomplete?: React.ComponentProps<typeof TextInput>['autocomplete'];
 };
 
 /**

diff --git a/packages/game-app/src/forgotPassword/components/ForgotPassword/ForgotPassword.tsx b/packages/game-app/src/forgotPassword/components/ForgotPassword/ForgotPassword.tsx
@@ -64,6 +64,7 @@ const ForgotPassword: React.FC<Props> = () => {
                     name="email"
                     label={t('forgotPassword.form.email.label')}
                     placeholder={t('forgotPassword.form.email.placeholder')}
+                    autocomplete="email"
                   />
                   <Box textAlign="center" mt={5}>
                     <Button

diff --git a/packages/game-app/src/forgotPassword/components/ResetPassword/ResetPassword.tsx b/packages/game-app/src/forgotPassword/components/ResetPassword/ResetPassword.tsx
@@ -79,6 +79,7 @@ const ResetPassword: React.FC<Props> = () => {
                     placeholder={t('resetPassword.form.password.placeholder')}
                     labelDetails={t('auth.errors.passwordRequirements')}
                     disabled={resetLoading || verifyActionCodeLoading}
+                    autocomplete="new-password"
                   />
                   <Box mt={3}>
                     <FormTextField
@@ -87,6 +88,7 @@ const ResetPassword: React.FC<Props> = () => {
                       label={t('resetPassword.form.repeatPassword.label')}
                       placeholder={t('resetPassword.form.repeatPassword.placeholder')}
                       disabled={resetLoading || verifyActionCodeLoading}
+                      autocomplete="new-password"
                     />
                   </Box>
                   <Box textAlign="center" mt={5}>

diff --git a/packages/game-app/src/login/components/Login/Login.tsx b/packages/game-app/src/login/components/Login/Login.tsx
@@ -57,13 +57,15 @@ const Login: React.FC<Props> = () => {
                   name="email"
                   label={t('login.form.email.label')}
                   placeholder={t('login.form.email.placeholder')}
+                  autocomplete="email"
                 />
                 <Box mt={3}>
                   <FormTextField
                     CustomInput={PasswordInput}
                     name="password"
                     label={t('login.form.password.label')}
                     placeholder={t('login.form.password.placeholder')}
+                    autocomplete="current-password"
                     {...passwordProps}
                   />
                 </Box>

diff --git a/packages/game-app/src/signup/components/Signup/Signup.tsx b/packages/game-app/src/signup/components/Signup/Signup.tsx
@@ -76,13 +76,15 @@ const Signup: React.FC<Props> = () => {
                         name="firstName"
                         label={t('signup.form.firstName.label')}
                         placeholder={t('signup.form.firstName.placeholder')}
+                        autocomplete="given-name"
                       />
                     </Box>
                     <Box flex={1} ml={3}>
                       <FormTextField
                         name="lastName"
                         label={t('signup.form.lastName.label')}
                         placeholder={t('signup.form.lastName.placeholder')}
+                        autocomplete="family-name"
                       />
                     </Box>
                   </Box>
@@ -92,6 +94,7 @@ const Signup: React.FC<Props> = () => {
                       name="email"
                       label={t('signup.form.email.label')}
                       placeholder={t('signup.form.email.placeholder')}
+                      autocomplete="email"
                     />
                   </Box>
                   <Box mt={3} display="flex" flexDirection="row">
@@ -102,6 +105,7 @@ const Signup: React.FC<Props> = () => {
                         label={t('signup.form.password.label')}
                         labelDetails={t('auth.errors.passwordRequirements')}
                         placeholder={t('signup.form.password.placeholder')}
+                        autocomplete="new-password"
                       />
                     </Box>
                     <Box flex={1} ml={3}>
@@ -110,6 +114,7 @@ const Signup: React.FC<Props> = () => {
                         name="repeatPassword"
                         label={t('signup.form.repeatPassword.label')}
                         placeholder={t('signup.form.repeatPassword.placeholder')}
+                        autocomplete="new-password"
                       />
                     </Box>
                   </Box>