Merge pull request #110 from arjunyel/password-autocomplete

Add autocomplete to sign in/up forms

frontend/components/basic/InputField.tsx

@@ -21,7 +21,10 @@ interface InputFieldProps {
   onChangeHandler: (value: string) => void;
 }
 
-const InputField = (props: InputFieldProps) => {
+const InputField = (
+  props: InputFieldProps &
+    Pick<JSX.IntrinsicElements["input"], "autoComplete" | "id">
+) => {
   const [passwordVisible, setPasswordVisible] = useState(false);
   const router = useRouter();
 
@@ -43,6 +46,8 @@ const InputField = (props: InputFieldProps) => {
           className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none"
           name={props.name}
           readOnly
+          autoComplete={props.autoComplete}
+          id={props.id}
         />
       </div>
     );
@@ -88,6 +93,8 @@ const InputField = (props: InputFieldProps) => {
             } relative peer bg-bunker-800 rounded-md text-gray-400 text-md p-2 w-full min-w-16 outline-none focus:ring-4 duration-200`}
             name={props.name}
             spellCheck="false"
+            autoComplete={props.autoComplete}
+            id={props.id}
           />
           {props.label?.includes("Password") && (
             <button

frontend/pages/login.js

@@ -98,6 +98,7 @@ export default function Login() {
             value={email}
             placeholder=""
             isRequired
+            autocomplete="username"
           />
         </div>
         <div className="flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
@@ -108,6 +109,8 @@ export default function Login() {
             value={password}
             placeholder=""
             isRequired
+            autoComplete="current-password"
+            id="current-password"
           />
         </div>
         {errorLogin && <Error text="Your email and/or password are wrong." />}

frontend/pages/settings/personal/[id].js

@@ -119,6 +119,8 @@ export default function PersonalSettings() {
                   isRequired
                   error={currentPasswordError}
                   errorText="The current password may be wrong"
+                  autoComplete="current-password"
+                  id="current-password"
                 />
                 <div className="py-2"></div>
                 <InputField
@@ -141,6 +143,8 @@ export default function PersonalSettings() {
                     passwordErrorLowerCase &&
                     passwordErrorNumber
                   }
+                  autoComplete="new-password"
+                  id="new-password"
                 />
               </div>
               {passwordErrorLength ||
@@ -283,6 +287,8 @@ export default function PersonalSettings() {
                   isRequired
                   error={backupKeyError}
                   errorText="The current password is wrong"
+                  autoComplete="current-password"
+                  id="current-password"
                 />
               </div>
               <div className="flex flex-row items-center mt-3 w-full w-60">

frontend/pages/signup.tsx

@@ -272,6 +272,7 @@ export default function SignUp() {
           isRequired
           error={emailError}
           errorText={emailErrorMessage}
+          autoComplete="username"
         />
       </div>
       {/* <div className='flex flex-row justify-left mt-4 max-w-md mx-auto'>
@@ -357,6 +358,7 @@ export default function SignUp() {
           isRequired
           errorText="Please input your first name."
           error={firstNameError}
+          autoComplete="given-name"
         />
       </div>
       <div className="mt-2 flex items-center justify-center w-full md:p-2 rounded-lg max-h-24">
@@ -368,6 +370,7 @@ export default function SignUp() {
           isRequired
           errorText="Please input your last name."
           error={lastNameError}
+          autoComplete="family-name"
         />
       </div>
       <div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
@@ -389,6 +392,8 @@ export default function SignUp() {
           error={
             passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase
           }
+          autoComplete="new-password"
+          id="new-password"
         />
         {passwordErrorLength ||
         passwordErrorLowerCase ||

frontend/pages/signupinvite.js

@@ -186,6 +186,7 @@ export default function SignupInvite() {
           isRequired
           errorText="Please input your first name."
           error={firstNameError}
+          autoComplete="given-name"
         />
       </div>
       <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24">
@@ -197,6 +198,7 @@ export default function SignupInvite() {
           isRequired
           errorText="Please input your last name."
           error={lastNameError}
+          autoComplete="family-name"
         />
       </div>
       <div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
@@ -218,6 +220,8 @@ export default function SignupInvite() {
           error={
             passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase
           }
+          autoComplete="new-password"
+          id="new-password"
         />
         {passwordErrorLength ||
         passwordErrorLowerCase ||