Merge pull request #110 from arjunyel/password-autocomplete

Add autocomplete to sign in/up forms

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 ||