2020-10-01 01:29:24 +00:00
|
|
|
import React, { useEffect, useState } from 'react';
|
2020-09-12 21:53:41 +00:00
|
|
|
import Container from 'components/Container';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import Card from 'react-bootstrap/Card';
|
|
|
|
import Form from 'react-bootstrap/Form';
|
|
|
|
import Button from 'react-bootstrap/Button';
|
|
|
|
import constants from 'utils/strings/constants';
|
|
|
|
import { Formik, FormikHelpers } from 'formik';
|
2020-09-13 06:30:07 +00:00
|
|
|
import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
|
2020-09-12 21:53:41 +00:00
|
|
|
import { useRouter } from 'next/router';
|
|
|
|
import * as Yup from 'yup';
|
|
|
|
import { keyAttributes } from 'types';
|
2020-09-13 06:30:07 +00:00
|
|
|
import { setKey, SESSION_KEYS, getKey } from 'utils/storage/sessionStorage';
|
2020-10-01 11:47:13 +00:00
|
|
|
import * as Comlink from "comlink";
|
|
|
|
|
2020-10-03 14:21:56 +00:00
|
|
|
const CryptoWorker: any = typeof window !== 'undefined'
|
2020-10-01 11:47:13 +00:00
|
|
|
&& Comlink.wrap(new Worker("worker/crypto.worker.js", { type: 'module' }));
|
2020-09-12 21:53:41 +00:00
|
|
|
|
|
|
|
const Image = styled.img`
|
|
|
|
width: 200px;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
max-width: 100%;
|
|
|
|
`;
|
|
|
|
|
|
|
|
interface formValues {
|
|
|
|
passphrase: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function Credentials() {
|
|
|
|
const router = useRouter();
|
|
|
|
const [keyAttributes, setKeyAttributes] = useState<keyAttributes>();
|
|
|
|
const [loading, setLoading] = useState(false);
|
2020-10-01 01:29:24 +00:00
|
|
|
|
2020-09-12 21:53:41 +00:00
|
|
|
useEffect(() => {
|
2020-09-14 09:32:01 +00:00
|
|
|
router.prefetch('/gallery');
|
2020-09-13 06:30:07 +00:00
|
|
|
const user = getData(LS_KEYS.USER);
|
|
|
|
const keyAttributes = getData(LS_KEYS.KEY_ATTRIBUTES);
|
|
|
|
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
|
2020-09-12 21:53:41 +00:00
|
|
|
if (!user?.token) {
|
|
|
|
router.push('/');
|
|
|
|
} else if (!keyAttributes) {
|
|
|
|
router.push('/generate');
|
2020-09-13 06:30:07 +00:00
|
|
|
} else if (key) {
|
2020-09-12 21:53:41 +00:00
|
|
|
router.push('/gallery')
|
|
|
|
} else {
|
|
|
|
setKeyAttributes(keyAttributes);
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const verifyPassphrase = async (values: formValues, { setFieldError }: FormikHelpers<formValues>) => {
|
|
|
|
setLoading(true);
|
|
|
|
try {
|
2020-10-01 11:47:13 +00:00
|
|
|
const cryptoWorker = await new CryptoWorker();
|
2020-09-12 21:53:41 +00:00
|
|
|
const { passphrase } = values;
|
2021-01-18 13:08:14 +00:00
|
|
|
const kek: string = await cryptoWorker.deriveKey(passphrase, keyAttributes.kekSalt);
|
2020-10-01 01:29:24 +00:00
|
|
|
|
2020-10-02 13:06:16 +00:00
|
|
|
if (await cryptoWorker.verifyHash(keyAttributes.kekHash, kek)) {
|
2021-01-18 13:08:14 +00:00
|
|
|
const key: string = await cryptoWorker.decryptB64(keyAttributes.encryptedKey, keyAttributes.keyDecryptionNonce, kek);
|
|
|
|
const sessionKeyAttributes = await cryptoWorker.encryptToB64(key);
|
|
|
|
const sessionKey = sessionKeyAttributes.key;
|
|
|
|
const sessionNonce = sessionKeyAttributes.nonce;
|
|
|
|
const encryptionKey = sessionKeyAttributes.encryptedData;
|
2020-09-13 06:30:07 +00:00
|
|
|
setKey(SESSION_KEYS.ENCRYPTION_KEY, { encryptionKey });
|
2020-10-01 01:29:24 +00:00
|
|
|
setData(LS_KEYS.SESSION, { sessionKey, sessionNonce });
|
2020-09-12 21:53:41 +00:00
|
|
|
router.push('/gallery');
|
|
|
|
} else {
|
|
|
|
setFieldError('passphrase', constants.INCORRECT_PASSPHRASE);
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
setFieldError('passphrase', `${constants.UNKNOWN_ERROR} ${e.message}`);
|
|
|
|
}
|
|
|
|
setLoading(false);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (<Container>
|
2020-09-13 17:15:48 +00:00
|
|
|
<Image alt='vault' src='/vault.svg' />
|
2020-10-01 01:29:24 +00:00
|
|
|
<Card style={{ minWidth: '300px' }}>
|
2020-09-12 21:53:41 +00:00
|
|
|
<Card.Body>
|
|
|
|
<p className="text-center">{constants.ENTER_PASSPHRASE}</p>
|
|
|
|
<Formik<formValues>
|
|
|
|
initialValues={{ passphrase: '' }}
|
|
|
|
onSubmit={verifyPassphrase}
|
|
|
|
validationSchema={Yup.object().shape({
|
|
|
|
passphrase: Yup.string().required(constants.REQUIRED),
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
{({ values, touched, errors, handleChange, handleBlur, handleSubmit }) => (
|
|
|
|
<Form noValidate onSubmit={handleSubmit}>
|
|
|
|
<Form.Group>
|
|
|
|
<Form.Control
|
|
|
|
type="password"
|
|
|
|
placeholder={constants.RETURN_PASSPHRASE_HINT}
|
|
|
|
value={values.passphrase}
|
|
|
|
onChange={handleChange('passphrase')}
|
|
|
|
onBlur={handleBlur('passphrase')}
|
|
|
|
isInvalid={Boolean(touched.passphrase && errors.passphrase)}
|
|
|
|
disabled={loading}
|
|
|
|
/>
|
|
|
|
<Form.Control.Feedback type="invalid">
|
|
|
|
{errors.passphrase}
|
|
|
|
</Form.Control.Feedback>
|
|
|
|
</Form.Group>
|
2020-09-13 06:30:07 +00:00
|
|
|
<Button block type='submit' disabled={loading}>{constants.VERIFY_PASSPHRASE}</Button>
|
2020-09-12 21:53:41 +00:00
|
|
|
</Form>
|
|
|
|
)}
|
|
|
|
</Formik>
|
|
|
|
</Card.Body>
|
|
|
|
</Card>
|
|
|
|
</Container>)
|
|
|
|
}
|