From 49220fd20fab12c11a3a10f69ad8d27b626be527 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Fri, 8 Jul 2022 21:03:43 +0530
Subject: [PATCH 01/11] update single input form

---
 src/components/SingleInputForm.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/SingleInputForm.tsx b/src/components/SingleInputForm.tsx
index e35ffdcae..0dcd01fdb 100644
--- a/src/components/SingleInputForm.tsx
+++ b/src/components/SingleInputForm.tsx
@@ -23,6 +23,9 @@ export interface SingleInputFormProps {
     initialValue?: string;
     secondaryButtonAction?: () => void;
     disableAutoFocus?: boolean;
+    hiddenPreInput?: any;
+    hiddenPostInput?: any;
+    autoComplete?: string;
 }
 
 export default function SingleInputForm(props: SingleInputFormProps) {
@@ -81,10 +84,12 @@ export default function SingleInputForm(props: SingleInputFormProps) {
             validateOnBlur={false}>
             {({ values, errors, handleChange, handleSubmit }) => (
                 <form noValidate onSubmit={handleSubmit}>
+                    {props.hiddenPreInput}
                     <TextField
                         variant="filled"
                         fullWidth
                         type={showPassword ? 'text' : props.fieldType}
+                        id={props.fieldType}
                         label={props.placeholder}
                         value={values.inputValue}
                         onChange={handleChange('inputValue')}
@@ -92,6 +97,7 @@ export default function SingleInputForm(props: SingleInputFormProps) {
                         helperText={errors.inputValue}
                         disabled={loading}
                         autoFocus={!props.disableAutoFocus}
+                        autoComplete={props.autoComplete}
                         InputProps={{
                             endAdornment: props.fieldType === 'password' && (
                                 <ShowHidePassword
@@ -106,6 +112,7 @@ export default function SingleInputForm(props: SingleInputFormProps) {
                             ),
                         }}
                     />
+                    {props.hiddenPostInput}
                     <FlexWrapper justifyContent={'flex-end'}>
                         {props.secondaryButtonAction && (
                             <Button

From d161fa2bba8e028f50268b97bc01ff2299aa3088 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Fri, 8 Jul 2022 21:04:14 +0530
Subject: [PATCH 02/11] have a hidden password field in login page for autofill
 suggestion

---
 src/components/Login.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 14b0a4b11..0f2a298d3 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -8,6 +8,7 @@ import FormPaperTitle from './Form/FormPaper/Title';
 import FormPaperFooter from './Form/FormPaper/Footer';
 import LinkButton from './pages/gallery/LinkButton';
 import SingleInputForm, { SingleInputFormProps } from './SingleInputForm';
+import { Input } from '@mui/material';
 
 interface LoginProps {
     signUp: () => void;
@@ -48,6 +49,14 @@ export default function Login(props: LoginProps) {
                 fieldType="email"
                 placeholder={constants.ENTER_EMAIL}
                 buttonText={constants.LOGIN}
+                autoComplete="username"
+                hiddenPostInput={
+                    <Input
+                        hidden
+                        type="password"
+                        autoComplete="current-password"
+                    />
+                }
             />
 
             <FormPaperFooter>

From 7408832f6bef109128ab099b56dd53104117a246 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Fri, 8 Jul 2022 21:06:58 +0530
Subject: [PATCH 03/11] have hidden email on credential page so that password
 managers stores both email and password

---
 src/pages/credentials/index.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/pages/credentials/index.tsx b/src/pages/credentials/index.tsx
index d4838daaf..1ad4495da 100644
--- a/src/pages/credentials/index.tsx
+++ b/src/pages/credentials/index.tsx
@@ -17,22 +17,24 @@ import SingleInputForm, {
 } from 'components/SingleInputForm';
 import { AppContext } from 'pages/_app';
 import { logError } from 'utils/sentry';
-import { KeyAttributes } from 'types/user';
+import { KeyAttributes, User } from 'types/user';
 import FormContainer from 'components/Form/FormContainer';
 import FormPaper from 'components/Form/FormPaper';
 import FormPaperTitle from 'components/Form/FormPaper/Title';
 import FormPaperFooter from 'components/Form/FormPaper/Footer';
 import LinkButton from 'components/pages/gallery/LinkButton';
 import { CustomError } from 'utils/error';
+import { Input } from '@mui/material';
 
 export default function Credentials() {
     const router = useRouter();
     const [keyAttributes, setKeyAttributes] = useState<KeyAttributes>();
     const appContext = useContext(AppContext);
-
+    const [user, setUser] = useState<User>();
     useEffect(() => {
         router.prefetch(PAGES.GALLERY);
         const user = getData(LS_KEYS.USER);
+        setUser(user);
         const keyAttributes = getData(LS_KEYS.KEY_ATTRIBUTES);
         const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
         if (
@@ -116,6 +118,16 @@ export default function Credentials() {
                     callback={verifyPassphrase}
                     placeholder={constants.RETURN_PASSPHRASE_HINT}
                     buttonText={constants.VERIFY_PASSPHRASE}
+                    hiddenPreInput={
+                        <Input
+                            id="email"
+                            type="email"
+                            hidden
+                            value={user?.email}
+                            autoComplete="username"
+                        />
+                    }
+                    autoComplete={'current-password'}
                     fieldType="password"
                 />
 

From efb776f09757871f3fffec68c455bf70e4d3129e Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sat, 9 Jul 2022 12:03:59 +0530
Subject: [PATCH 04/11] add autocomplete and id to sign up form

---
 src/components/SignUp.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
index 207618be3..b1ccfa947 100644
--- a/src/components/SignUp.tsx
+++ b/src/components/SignUp.tsx
@@ -121,6 +121,9 @@ export default function SignUp(props: SignUpProps) {
                         <VerticallyCentered sx={{ mb: 1 }}>
                             <TextField
                                 fullWidth
+                                id="email"
+                                name="email"
+                                autoComplete="username"
                                 type="email"
                                 label={constants.ENTER_EMAIL}
                                 value={values.email}
@@ -133,6 +136,9 @@ export default function SignUp(props: SignUpProps) {
 
                             <TextField
                                 fullWidth
+                                id="password"
+                                name="password"
+                                autoComplete="new-password"
                                 type="password"
                                 label={constants.PASSPHRASE_HINT}
                                 value={values.passphrase}
@@ -144,6 +150,9 @@ export default function SignUp(props: SignUpProps) {
 
                             <TextField
                                 fullWidth
+                                id="confirm-password"
+                                name="confirm-password"
+                                autoComplete="new-password"
                                 type="password"
                                 label={constants.CONFIRM_PASSPHRASE}
                                 value={values.confirm}

From ab9fa272415488fa40f1e12f9013873d99ac44a7 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sat, 9 Jul 2022 12:09:14 +0530
Subject: [PATCH 05/11] add name to single input filed

---
 src/components/SingleInputForm.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SingleInputForm.tsx b/src/components/SingleInputForm.tsx
index 0dcd01fdb..81b9be9c9 100644
--- a/src/components/SingleInputForm.tsx
+++ b/src/components/SingleInputForm.tsx
@@ -90,6 +90,7 @@ export default function SingleInputForm(props: SingleInputFormProps) {
                         fullWidth
                         type={showPassword ? 'text' : props.fieldType}
                         id={props.fieldType}
+                        name={props.fieldType}
                         label={props.placeholder}
                         value={values.inputValue}
                         onChange={handleChange('inputValue')}

From fa25dcad96c778f88b3a4445b2ebf28132103a0f Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sat, 9 Jul 2022 12:10:42 +0530
Subject: [PATCH 06/11] remove hidden password field

---
 src/components/Login.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 0f2a298d3..413053e29 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -8,7 +8,6 @@ import FormPaperTitle from './Form/FormPaper/Title';
 import FormPaperFooter from './Form/FormPaper/Footer';
 import LinkButton from './pages/gallery/LinkButton';
 import SingleInputForm, { SingleInputFormProps } from './SingleInputForm';
-import { Input } from '@mui/material';
 
 interface LoginProps {
     signUp: () => void;
@@ -50,13 +49,6 @@ export default function Login(props: LoginProps) {
                 placeholder={constants.ENTER_EMAIL}
                 buttonText={constants.LOGIN}
                 autoComplete="username"
-                hiddenPostInput={
-                    <Input
-                        hidden
-                        type="password"
-                        autoComplete="current-password"
-                    />
-                }
             />
 
             <FormPaperFooter>

From 3da7982ed53604a16b51813237131a46f6356917 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sat, 9 Jul 2022 12:11:34 +0530
Subject: [PATCH 07/11] update credential fomr

---
 src/pages/credentials/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/credentials/index.tsx b/src/pages/credentials/index.tsx
index 1ad4495da..71d519667 100644
--- a/src/pages/credentials/index.tsx
+++ b/src/pages/credentials/index.tsx
@@ -121,10 +121,11 @@ export default function Credentials() {
                     hiddenPreInput={
                         <Input
                             id="email"
+                            name="email"
+                            autoComplete="username"
                             type="email"
                             hidden
                             value={user?.email}
-                            autoComplete="username"
                         />
                     }
                     autoComplete={'current-password'}

From 3d2088dfd2c489c461c3dcb80ac22c1d93763b75 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sat, 9 Jul 2022 12:17:49 +0530
Subject: [PATCH 08/11] udpate change password form with hidden email and
 autocomplete attributes

---
 src/components/SetPasswordForm.tsx  | 19 ++++++++++++++++---
 src/pages/change-password/index.tsx |  5 ++++-
 src/pages/generate/index.tsx        |  3 +++
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/SetPasswordForm.tsx b/src/components/SetPasswordForm.tsx
index 1bfb9a37f..3922d3b44 100644
--- a/src/components/SetPasswordForm.tsx
+++ b/src/components/SetPasswordForm.tsx
@@ -3,9 +3,10 @@ import constants from 'utils/strings/constants';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
 import SubmitButton from './SubmitButton';
-import { Box, TextField, Typography } from '@mui/material';
+import { Box, Input, TextField, Typography } from '@mui/material';
 
 export interface SetPasswordFormProps {
+    userEmail: string;
     callback: (
         passphrase: string,
         setFieldError: (
@@ -65,9 +66,19 @@ function SetPasswordForm(props: SetPasswordFormProps) {
                         {constants.ENTER_ENC_PASSPHRASE}
                     </Typography>
 
+                    <Input
+                        hidden
+                        name="email"
+                        id="email"
+                        autoComplete="username"
+                        type="email"
+                        value={props.userEmail}
+                    />
                     <TextField
                         fullWidth
-                        variant="filled"
+                        name="password"
+                        id="password"
+                        autoComplete="new-password"
                         type="password"
                         label={constants.PASSPHRASE_HINT}
                         value={values.passphrase}
@@ -79,7 +90,9 @@ function SetPasswordForm(props: SetPasswordFormProps) {
                     />
                     <TextField
                         fullWidth
-                        variant="filled"
+                        name="confirm-password"
+                        id="confirm-password"
+                        autoComplete="new-password"
                         type="password"
                         label={constants.CONFIRM_PASSPHRASE}
                         value={values.confirm}
diff --git a/src/pages/change-password/index.tsx b/src/pages/change-password/index.tsx
index c4f2cc483..1fb3c3c05 100644
--- a/src/pages/change-password/index.tsx
+++ b/src/pages/change-password/index.tsx
@@ -14,7 +14,7 @@ import SetPasswordForm, {
 } from 'components/SetPasswordForm';
 import { SESSION_KEYS } from 'utils/storage/sessionStorage';
 import { PAGES } from 'constants/pages';
-import { KEK, UpdatedKey } from 'types/user';
+import { KEK, UpdatedKey, User } from 'types/user';
 import LinkButton from 'components/pages/gallery/LinkButton';
 import VerticallyCentered from 'components/Container';
 import FormPaper from 'components/Form/FormPaper';
@@ -24,9 +24,11 @@ import FormPaperTitle from 'components/Form/FormPaper/Title';
 export default function ChangePassword() {
     const [token, setToken] = useState<string>();
     const router = useRouter();
+    const [user, setUser] = useState<User>();
 
     useEffect(() => {
         const user = getData(LS_KEYS.USER);
+        setUser(user);
         if (!user?.token) {
             router.push(PAGES.ROOT);
         } else {
@@ -82,6 +84,7 @@ export default function ChangePassword() {
             <FormPaper>
                 <FormPaperTitle>{constants.CHANGE_PASSWORD}</FormPaperTitle>
                 <SetPasswordForm
+                    userEmail={user?.email}
                     callback={onSubmit}
                     buttonText={constants.CHANGE_PASSWORD}
                     back={
diff --git a/src/pages/generate/index.tsx b/src/pages/generate/index.tsx
index 6a07bcb3f..db2294db5 100644
--- a/src/pages/generate/index.tsx
+++ b/src/pages/generate/index.tsx
@@ -24,6 +24,7 @@ import FormTitle from 'components/Form/FormPaper/Title';
 
 export default function Generate() {
     const [token, setToken] = useState<string>();
+    const [user, setUser] = useState<User>();
     const router = useRouter();
     const [recoverModalView, setRecoveryModalView] = useState(false);
     const [loading, setLoading] = useState(true);
@@ -37,6 +38,7 @@ export default function Generate() {
             router.prefetch(PAGES.GALLERY);
             router.prefetch(PAGES.CREDENTIALS);
             const user: User = getData(LS_KEYS.USER);
+            setUser(user);
             if (!user?.token) {
                 router.push(PAGES.ROOT);
             } else if (key) {
@@ -100,6 +102,7 @@ export default function Generate() {
                     <FormPaper>
                         <FormTitle>{constants.SET_PASSPHRASE}</FormTitle>
                         <SetPasswordForm
+                            userEmail={user?.email}
                             callback={onSubmit}
                             buttonText={constants.SET_PASSPHRASE}
                             back={logoutUser}

From ca91ad9efee9b6c7a58844862ca20b69d153403b Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sat, 9 Jul 2022 14:56:40 +0530
Subject: [PATCH 09/11] add back the hidden password field for autofill

---
 src/components/Login.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 413053e29..43271137f 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -8,6 +8,7 @@ import FormPaperTitle from './Form/FormPaper/Title';
 import FormPaperFooter from './Form/FormPaper/Footer';
 import LinkButton from './pages/gallery/LinkButton';
 import SingleInputForm, { SingleInputFormProps } from './SingleInputForm';
+import { Input } from '@mui/material';
 
 interface LoginProps {
     signUp: () => void;
@@ -49,6 +50,15 @@ export default function Login(props: LoginProps) {
                 placeholder={constants.ENTER_EMAIL}
                 buttonText={constants.LOGIN}
                 autoComplete="username"
+                hiddenPostInput={
+                    <Input
+                        hidden
+                        id="password"
+                        name="password"
+                        type="password"
+                        autoComplete="current-password"
+                    />
+                }
             />
 
             <FormPaperFooter>

From ab5a61708da743599818e8df62fbaa9ddb4e53d6 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sat, 9 Jul 2022 15:49:19 +0530
Subject: [PATCH 10/11] make value attribute to constant empty string and don't
 allow editing

---
 src/components/Login.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 43271137f..4ecae93fd 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -50,15 +50,7 @@ export default function Login(props: LoginProps) {
                 placeholder={constants.ENTER_EMAIL}
                 buttonText={constants.LOGIN}
                 autoComplete="username"
-                hiddenPostInput={
-                    <Input
-                        hidden
-                        id="password"
-                        name="password"
-                        type="password"
-                        autoComplete="current-password"
-                    />
-                }
+                hiddenPostInput={<Input hidden type="password" value="" />}
             />
 
             <FormPaperFooter>

From fdca2ec218dedfe6380c3e11613c3b2c6b0106e7 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sat, 9 Jul 2022 15:52:02 +0530
Subject: [PATCH 11/11] add one time code autocomplete to ott

---
 src/pages/verify/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/verify/index.tsx b/src/pages/verify/index.tsx
index 417bde587..231340f4a 100644
--- a/src/pages/verify/index.tsx
+++ b/src/pages/verify/index.tsx
@@ -134,6 +134,7 @@ export default function Verify() {
                 </Typography>
                 <SingleInputForm
                     fieldType="text"
+                    autoComplete="one-time-code"
                     placeholder={constants.ENTER_OTT}
                     buttonText={constants.VERIFY}
                     callback={onSubmit}