Merge branch 'master' into save-key-on-desktop

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,8 @@ export default function Login(props: LoginProps) {
                 fieldType="email"
                 placeholder={constants.ENTER_EMAIL}
                 buttonText={constants.LOGIN}
+                autoComplete="username"
+                hiddenPostInput={<Input hidden type="password" value="" />}
             />
 
             <FormPaperFooter>

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}

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}

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,13 @@ 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}
+                        name={props.fieldType}
                         label={props.placeholder}
                         value={values.inputValue}
                         onChange={handleChange('inputValue')}
@@ -92,6 +98,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 +113,7 @@ export default function SingleInputForm(props: SingleInputFormProps) {
                             ),
                         }}
                     />
+                    {props.hiddenPostInput}
                     <FlexWrapper justifyContent={'flex-end'}>
                         {props.secondaryButtonAction && (
                             <Button

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

src/pages/credentials/index.tsx

@@ -17,7 +17,7 @@ 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';
@@ -28,16 +28,18 @@ import isElectron from 'is-electron';
 import desktopService from 'services/desktopService';
 import VerticallyCentered from 'components/Container';
 import EnteSpinner from 'components/EnteSpinner';
+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 main = async () => {
             const user = getData(LS_KEYS.USER);
+            setUser(user);
             const keyAttributes = getData(LS_KEYS.KEY_ATTRIBUTES);
             let key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
             if (!key && isElectron()) {
@@ -141,6 +143,17 @@ export default function Credentials() {
                     callback={verifyPassphrase}
                     placeholder={constants.RETURN_PASSPHRASE_HINT}
                     buttonText={constants.VERIFY_PASSPHRASE}
+                    hiddenPreInput={
+                        <Input
+                            id="email"
+                            name="email"
+                            autoComplete="username"
+                            type="email"
+                            hidden
+                            value={user?.email}
+                        />
+                    }
+                    autoComplete={'current-password'}
                     fieldType="password"
                 />
 

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}

src/pages/verify/index.tsx

@@ -140,6 +140,7 @@ export default function Verify() {
                 </Typography>
                 <SingleInputForm
                     fieldType="text"
+                    autoComplete="one-time-code"
                     placeholder={constants.ENTER_OTT}
                     buttonText={constants.VERIFY}
                     callback={onSubmit}