From cd70128ff862c3dd2503df683543f747634683ae Mon Sep 17 00:00:00 2001
From: arjunyel <arjunyel@gmail.com>
Date: Fri, 9 Dec 2022 17:23:02 -0600
Subject: [PATCH] Add autocomplete to sign in/up forms

---
 frontend/components/basic/InputField.tsx | 9 ++++++++-
 frontend/pages/login.js                  | 3 +++
 frontend/pages/settings/personal/[id].js | 6 ++++++
 frontend/pages/signup.tsx                | 5 +++++
 frontend/pages/signupinvite.js           | 4 ++++
 5 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/frontend/components/basic/InputField.tsx b/frontend/components/basic/InputField.tsx
index 02bb8a8cc..139304ea6 100644
--- a/frontend/components/basic/InputField.tsx
+++ b/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
diff --git a/frontend/pages/login.js b/frontend/pages/login.js
index a466c7123..2b5d6062c 100644
--- a/frontend/pages/login.js
+++ b/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." />}
diff --git a/frontend/pages/settings/personal/[id].js b/frontend/pages/settings/personal/[id].js
index 928d426b0..b295ece02 100644
--- a/frontend/pages/settings/personal/[id].js
+++ b/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">
diff --git a/frontend/pages/signup.tsx b/frontend/pages/signup.tsx
index cdfb46665..9486191f7 100644
--- a/frontend/pages/signup.tsx
+++ b/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 ||
diff --git a/frontend/pages/signupinvite.js b/frontend/pages/signupinvite.js
index 15c511739..ccd652680 100644
--- a/frontend/pages/signupinvite.js
+++ b/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 ||