improve verify master password form
This commit is contained in:
parent
921e05fbf7
commit
fc2fe84726
|
@ -3,14 +3,23 @@ import React, { useContext, useEffect, useState } from 'react';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
||||||
import { AppContext } from 'pages/_app';
|
import { AppContext } from 'pages/_app';
|
||||||
import { logError } from 'utils/sentry';
|
|
||||||
import { KeyAttributes, User } from 'types/user';
|
import { KeyAttributes, User } from 'types/user';
|
||||||
import VerticallyCentered from 'components/Container';
|
import VerifyMasterPasswordForm, {
|
||||||
import EnteSpinner from 'components/EnteSpinner';
|
VerifyMasterPasswordFormProps,
|
||||||
import VerifyMasterPasswordForm from 'components/VerifyMasterPasswordForm';
|
} from 'components/VerifyMasterPasswordForm';
|
||||||
import { Dialog, Stack, Typography } from '@mui/material';
|
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 [keyAttributes, setKeyAttributes] = useState<KeyAttributes>();
|
||||||
const { setDialogMessage } = useContext(AppContext);
|
const { setDialogMessage } = useContext(AppContext);
|
||||||
const [user, setUser] = useState<User>();
|
const [user, setUser] = useState<User>();
|
||||||
|
@ -22,11 +31,6 @@ export default function AuthenticateUserModal({ open, onClose, callback }) {
|
||||||
content: constants.UNKNOWN_ERROR,
|
content: constants.UNKNOWN_ERROR,
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
onClose();
|
|
||||||
callback(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const main = async () => {
|
const main = async () => {
|
||||||
const user = getData(LS_KEYS.USER);
|
const user = getData(LS_KEYS.USER);
|
||||||
|
@ -47,30 +51,16 @@ export default function AuthenticateUserModal({ open, onClose, callback }) {
|
||||||
main();
|
main();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const useMasterPassword = async (success) => {
|
const useMasterPassword: VerifyMasterPasswordFormProps['callback'] =
|
||||||
try {
|
async () => {
|
||||||
if (!success) {
|
onClose();
|
||||||
throw Error('master password verification failed');
|
onAuthenticate();
|
||||||
}
|
|
||||||
callback(true);
|
|
||||||
} catch (e) {
|
|
||||||
logError(e, 'useMasterPassword failed');
|
|
||||||
callback(false);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!keyAttributes) {
|
|
||||||
return (
|
|
||||||
<VerticallyCentered>
|
|
||||||
<EnteSpinner />
|
|
||||||
</VerticallyCentered>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog
|
<Dialog
|
||||||
open={open}
|
open={open}
|
||||||
onClose={handleClose}
|
onClose={onClose}
|
||||||
sx={{ position: 'absolute' }}
|
sx={{ position: 'absolute' }}
|
||||||
PaperProps={{ sx: { p: 1, maxWidth: '346px' } }}>
|
PaperProps={{ sx: { p: 1, maxWidth: '346px' } }}>
|
||||||
<Stack spacing={3} p={1.5}>
|
<Stack spacing={3} p={1.5}>
|
||||||
|
@ -78,6 +68,7 @@ export default function AuthenticateUserModal({ open, onClose, callback }) {
|
||||||
{constants.PASSWORD}
|
{constants.PASSWORD}
|
||||||
</Typography>
|
</Typography>
|
||||||
<VerifyMasterPasswordForm
|
<VerifyMasterPasswordForm
|
||||||
|
buttonText={constants.AUTHENTICATE}
|
||||||
callback={useMasterPassword}
|
callback={useMasterPassword}
|
||||||
user={user}
|
user={user}
|
||||||
keyAttributes={keyAttributes}
|
keyAttributes={keyAttributes}
|
||||||
|
|
|
@ -9,12 +9,21 @@ import { logError } from 'utils/sentry';
|
||||||
import { CustomError } from 'utils/error';
|
import { CustomError } from 'utils/error';
|
||||||
|
|
||||||
import { Input } from '@mui/material';
|
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({
|
export default function VerifyMasterPasswordForm({
|
||||||
user,
|
user,
|
||||||
keyAttributes,
|
keyAttributes,
|
||||||
callback,
|
callback,
|
||||||
}) {
|
buttonText,
|
||||||
|
}: VerifyMasterPasswordFormProps) {
|
||||||
const verifyPassphrase: SingleInputFormProps['callback'] = async (
|
const verifyPassphrase: SingleInputFormProps['callback'] = async (
|
||||||
passphrase,
|
passphrase,
|
||||||
setFieldError
|
setFieldError
|
||||||
|
@ -39,7 +48,7 @@ export default function VerifyMasterPasswordForm({
|
||||||
keyAttributes.keyDecryptionNonce,
|
keyAttributes.keyDecryptionNonce,
|
||||||
kek
|
kek
|
||||||
);
|
);
|
||||||
callback(true, key, passphrase);
|
callback(key, passphrase);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
logError(e, 'user entered a wrong password');
|
logError(e, 'user entered a wrong password');
|
||||||
throw Error(CustomError.INCORRECT_PASSWORD);
|
throw Error(CustomError.INCORRECT_PASSWORD);
|
||||||
|
@ -62,7 +71,7 @@ export default function VerifyMasterPasswordForm({
|
||||||
<SingleInputForm
|
<SingleInputForm
|
||||||
callback={verifyPassphrase}
|
callback={verifyPassphrase}
|
||||||
placeholder={constants.RETURN_PASSPHRASE_HINT}
|
placeholder={constants.RETURN_PASSPHRASE_HINT}
|
||||||
buttonText={constants.VERIFY_PASSPHRASE}
|
buttonText={buttonText}
|
||||||
hiddenPreInput={
|
hiddenPreInput={
|
||||||
<Input
|
<Input
|
||||||
id="email"
|
id="email"
|
||||||
|
|
|
@ -24,7 +24,9 @@ import isElectron from 'is-electron';
|
||||||
import safeStorageService from 'services/electron/safeStorage';
|
import safeStorageService from 'services/electron/safeStorage';
|
||||||
import VerticallyCentered from 'components/Container';
|
import VerticallyCentered from 'components/Container';
|
||||||
import EnteSpinner from 'components/EnteSpinner';
|
import EnteSpinner from 'components/EnteSpinner';
|
||||||
import VerifyMasterPasswordForm from 'components/VerifyMasterPasswordForm';
|
import VerifyMasterPasswordForm, {
|
||||||
|
VerifyMasterPasswordFormProps,
|
||||||
|
} from 'components/VerifyMasterPasswordForm';
|
||||||
|
|
||||||
export default function Credentials() {
|
export default function Credentials() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
@ -67,11 +69,11 @@ export default function Credentials() {
|
||||||
appContext.showNavBar(true);
|
appContext.showNavBar(true);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const useMasterPassword = async (success, passphrase, key) => {
|
const useMasterPassword: VerifyMasterPasswordFormProps['callback'] = async (
|
||||||
|
key,
|
||||||
|
passphrase
|
||||||
|
) => {
|
||||||
try {
|
try {
|
||||||
if (!success) {
|
|
||||||
throw Error('master password verification failed');
|
|
||||||
}
|
|
||||||
if (isFirstLogin()) {
|
if (isFirstLogin()) {
|
||||||
await generateAndSaveIntermediateKeyAttributes(
|
await generateAndSaveIntermediateKeyAttributes(
|
||||||
passphrase,
|
passphrase,
|
||||||
|
@ -105,6 +107,7 @@ export default function Credentials() {
|
||||||
<FormPaperTitle>{constants.PASSWORD}</FormPaperTitle>
|
<FormPaperTitle>{constants.PASSWORD}</FormPaperTitle>
|
||||||
|
|
||||||
<VerifyMasterPasswordForm
|
<VerifyMasterPasswordForm
|
||||||
|
buttonText={constants.VERIFY_PASSPHRASE}
|
||||||
callback={useMasterPassword}
|
callback={useMasterPassword}
|
||||||
user={user}
|
user={user}
|
||||||
keyAttributes={keyAttributes}
|
keyAttributes={keyAttributes}
|
||||||
|
|
|
@ -798,6 +798,7 @@ const englishConstants = {
|
||||||
<p>This action is not reversible.</p>
|
<p>This action is not reversible.</p>
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
|
AUTHENTICATE: 'Authenticate',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default englishConstants;
|
export default englishConstants;
|
||||||
|
|
Loading…
Reference in a new issue