improve verify master password form

src/components/AuthenticateUserModal.tsx

@@ -3,14 +3,23 @@ import React, { useContext, useEffect, useState } from 'react';
 import constants from 'utils/strings/constants';
 import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import { AppContext } from 'pages/_app';
-import { logError } from 'utils/sentry';
 import { KeyAttributes, User } from 'types/user';
-import VerticallyCentered from 'components/Container';
-import EnteSpinner from 'components/EnteSpinner';
-import VerifyMasterPasswordForm from 'components/VerifyMasterPasswordForm';
+import VerifyMasterPasswordForm, {
+    VerifyMasterPasswordFormProps,
+} from 'components/VerifyMasterPasswordForm';
 import { Dialog, Stack, Typography } from '@mui/material';
 
-export default function AuthenticateUserModal({ open, onClose, callback }) {
+interface Iprops {
+    open: boolean;
+    onClose: () => void;
+    onAuthenticate: () => void;
+}
+
+export default function AuthenticateUserModal({
+    open,
+    onClose,
+    onAuthenticate,
+}: Iprops) {
     const [keyAttributes, setKeyAttributes] = useState<KeyAttributes>();
     const { setDialogMessage } = useContext(AppContext);
     const [user, setUser] = useState<User>();
@@ -22,11 +31,6 @@ export default function AuthenticateUserModal({ open, onClose, callback }) {
             content: constants.UNKNOWN_ERROR,
         });
 
-    const handleClose = () => {
-        onClose();
-        callback(false);
-    };
-
     useEffect(() => {
         const main = async () => {
             const user = getData(LS_KEYS.USER);
@@ -47,30 +51,16 @@ export default function AuthenticateUserModal({ open, onClose, callback }) {
         main();
     }, []);
 
-    const useMasterPassword = async (success) => {
-        try {
-            if (!success) {
-                throw Error('master password verification failed');
-            }
-            callback(true);
-        } catch (e) {
-            logError(e, 'useMasterPassword failed');
-            callback(false);
-        }
-    };
-
-    if (!keyAttributes) {
-        return (
-            <VerticallyCentered>
-                <EnteSpinner />
-            </VerticallyCentered>
-        );
-    }
+    const useMasterPassword: VerifyMasterPasswordFormProps['callback'] =
+        async () => {
+            onClose();
+            onAuthenticate();
+        };
 
     return (
         <Dialog
             open={open}
-            onClose={handleClose}
+            onClose={onClose}
             sx={{ position: 'absolute' }}
             PaperProps={{ sx: { p: 1, maxWidth: '346px' } }}>
             <Stack spacing={3} p={1.5}>
@@ -78,6 +68,7 @@ export default function AuthenticateUserModal({ open, onClose, callback }) {
                     {constants.PASSWORD}
                 </Typography>
                 <VerifyMasterPasswordForm
+                    buttonText={constants.AUTHENTICATE}
                     callback={useMasterPassword}
                     user={user}
                     keyAttributes={keyAttributes}

src/components/VerifyMasterPasswordForm.tsx

@@ -9,12 +9,21 @@ import { logError } from 'utils/sentry';
 import { CustomError } from 'utils/error';
 
 import { Input } from '@mui/material';
+import { KeyAttributes, User } from 'types/user';
+
+export interface VerifyMasterPasswordFormProps {
+    user: User;
+    keyAttributes: KeyAttributes;
+    callback: (key: string, passphrase: string) => void;
+    buttonText: string;
+}
 
 export default function VerifyMasterPasswordForm({
     user,
     keyAttributes,
     callback,
-}) {
+    buttonText,
+}: VerifyMasterPasswordFormProps) {
     const verifyPassphrase: SingleInputFormProps['callback'] = async (
         passphrase,
         setFieldError
@@ -39,7 +48,7 @@ export default function VerifyMasterPasswordForm({
                     keyAttributes.keyDecryptionNonce,
                     kek
                 );
-                callback(true, key, passphrase);
+                callback(key, passphrase);
             } catch (e) {
                 logError(e, 'user entered a wrong password');
                 throw Error(CustomError.INCORRECT_PASSWORD);
@@ -62,7 +71,7 @@ export default function VerifyMasterPasswordForm({
         <SingleInputForm
             callback={verifyPassphrase}
             placeholder={constants.RETURN_PASSPHRASE_HINT}
-            buttonText={constants.VERIFY_PASSPHRASE}
+            buttonText={buttonText}
             hiddenPreInput={
                 <Input
                     id="email"

src/pages/credentials/index.tsx

@@ -24,7 +24,9 @@ import isElectron from 'is-electron';
 import safeStorageService from 'services/electron/safeStorage';
 import VerticallyCentered from 'components/Container';
 import EnteSpinner from 'components/EnteSpinner';
-import VerifyMasterPasswordForm from 'components/VerifyMasterPasswordForm';
+import VerifyMasterPasswordForm, {
+    VerifyMasterPasswordFormProps,
+} from 'components/VerifyMasterPasswordForm';
 
 export default function Credentials() {
     const router = useRouter();
@@ -67,11 +69,11 @@ export default function Credentials() {
         appContext.showNavBar(true);
     }, []);
 
-    const useMasterPassword = async (success, passphrase, key) => {
+    const useMasterPassword: VerifyMasterPasswordFormProps['callback'] = async (
+        key,
+        passphrase
+    ) => {
         try {
-            if (!success) {
-                throw Error('master password verification failed');
-            }
             if (isFirstLogin()) {
                 await generateAndSaveIntermediateKeyAttributes(
                     passphrase,
@@ -105,6 +107,7 @@ export default function Credentials() {
                 <FormPaperTitle>{constants.PASSWORD}</FormPaperTitle>
 
                 <VerifyMasterPasswordForm
+                    buttonText={constants.VERIFY_PASSPHRASE}
                     callback={useMasterPassword}
                     user={user}
                     keyAttributes={keyAttributes}

src/utils/strings/englishConstants.tsx

@@ -798,6 +798,7 @@ const englishConstants = {
             <p>This action is not reversible.</p>
         </>
     ),
+    AUTHENTICATE: 'Authenticate',
 };
 
 export default englishConstants;