2020-09-12 21:53:41 +00:00
|
|
|
import React, { useState, useEffect, useContext } from 'react';
|
|
|
|
import Container from 'components/Container';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import Card from 'react-bootstrap/Card';
|
|
|
|
import Form from 'react-bootstrap/Form';
|
|
|
|
import constants from 'utils/strings/constants';
|
|
|
|
import { Formik, FormikHelpers } from 'formik';
|
|
|
|
import * as Yup from 'yup';
|
|
|
|
import Button from 'react-bootstrap/Button';
|
2021-03-22 14:06:06 +00:00
|
|
|
import { logoutUser, putAttributes } from 'services/userService';
|
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';
|
2020-09-13 06:30:07 +00:00
|
|
|
import { getKey, SESSION_KEYS, setKey } from 'utils/storage/sessionStorage';
|
2021-02-16 11:43:21 +00:00
|
|
|
import { B64EncryptionResult } from 'services/uploadService';
|
2021-04-03 04:36:15 +00:00
|
|
|
import CryptoWorker from 'utils/crypto';
|
2021-04-03 04:15:25 +00:00
|
|
|
import { generateIntermediateKeyAttributes } from 'utils/crypto';
|
2020-09-12 21:53:41 +00:00
|
|
|
|
|
|
|
const Image = styled.img`
|
|
|
|
width: 200px;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
max-width: 100%;
|
|
|
|
`;
|
|
|
|
|
|
|
|
interface formValues {
|
|
|
|
passphrase: string;
|
|
|
|
confirm: string;
|
|
|
|
}
|
|
|
|
|
2021-04-02 03:56:21 +00:00
|
|
|
export interface KEK {
|
2021-03-18 09:56:40 +00:00
|
|
|
key: string;
|
|
|
|
opsLimit: number;
|
|
|
|
memLimit: number;
|
|
|
|
}
|
|
|
|
|
2020-09-12 21:53:41 +00:00
|
|
|
export default function Generate() {
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [token, setToken] = useState<string>();
|
|
|
|
const router = useRouter();
|
2020-09-13 06:30:07 +00:00
|
|
|
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
|
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);
|
2020-09-12 21:53:41 +00:00
|
|
|
if (!user?.token) {
|
2021-02-09 09:33:54 +00:00
|
|
|
router.push('/');
|
2020-09-13 06:30:07 +00:00
|
|
|
} else if (key) {
|
2020-09-12 21:53:41 +00:00
|
|
|
router.push('/gallery');
|
|
|
|
} else {
|
|
|
|
setToken(user.token);
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
2021-02-09 09:33:54 +00:00
|
|
|
const onSubmit = async (
|
|
|
|
values: formValues,
|
|
|
|
{ setFieldError }: FormikHelpers<formValues>
|
|
|
|
) => {
|
2020-09-12 21:53:41 +00:00
|
|
|
setLoading(true);
|
|
|
|
try {
|
|
|
|
const { passphrase, confirm } = values;
|
|
|
|
if (passphrase === confirm) {
|
2020-10-01 01:29:24 +00:00
|
|
|
const cryptoWorker = await new CryptoWorker();
|
2021-01-18 13:08:14 +00:00
|
|
|
const key: string = await cryptoWorker.generateMasterKey();
|
|
|
|
const kekSalt: string = await cryptoWorker.generateSaltToDeriveKey();
|
2021-04-02 13:42:28 +00:00
|
|
|
let kek: KEK;
|
|
|
|
try {
|
|
|
|
kek = await cryptoWorker.deriveSensitiveKey(
|
|
|
|
passphrase,
|
|
|
|
kekSalt
|
|
|
|
);
|
|
|
|
} catch (e) {
|
|
|
|
setFieldError(
|
|
|
|
'confirm',
|
|
|
|
constants.PASSWORD_GENERATION_FAILED
|
|
|
|
);
|
|
|
|
return;
|
|
|
|
}
|
2021-02-16 11:43:21 +00:00
|
|
|
const encryptedKeyAttributes: B64EncryptionResult = await cryptoWorker.encryptToB64(
|
2021-02-09 09:33:54 +00:00
|
|
|
key,
|
2021-03-18 09:56:40 +00:00
|
|
|
kek.key
|
2021-02-09 09:33:54 +00:00
|
|
|
);
|
2020-11-07 10:27:59 +00:00
|
|
|
const keyPair = await cryptoWorker.generateKeyPair();
|
2021-02-16 11:43:21 +00:00
|
|
|
const encryptedKeyPairAttributes: B64EncryptionResult = await cryptoWorker.encryptToB64(
|
2021-02-09 09:33:54 +00:00
|
|
|
keyPair.privateKey,
|
|
|
|
key
|
|
|
|
);
|
2021-01-18 13:08:14 +00:00
|
|
|
|
2020-09-13 06:30:07 +00:00
|
|
|
const keyAttributes = {
|
2021-01-18 13:08:14 +00:00
|
|
|
kekSalt,
|
|
|
|
encryptedKey: encryptedKeyAttributes.encryptedData,
|
|
|
|
keyDecryptionNonce: encryptedKeyAttributes.nonce,
|
|
|
|
publicKey: keyPair.publicKey,
|
2021-02-09 09:33:54 +00:00
|
|
|
encryptedSecretKey:
|
|
|
|
encryptedKeyPairAttributes.encryptedData,
|
|
|
|
secretKeyDecryptionNonce: encryptedKeyPairAttributes.nonce,
|
2021-03-18 09:56:40 +00:00
|
|
|
opsLimit: kek.opsLimit,
|
|
|
|
memLimit: kek.memLimit,
|
2020-09-13 06:30:07 +00:00
|
|
|
};
|
2021-02-09 09:33:54 +00:00
|
|
|
await putAttributes(
|
|
|
|
token,
|
|
|
|
getData(LS_KEYS.USER).name,
|
|
|
|
keyAttributes
|
|
|
|
);
|
2021-04-01 16:38:51 +00:00
|
|
|
|
|
|
|
setData(
|
|
|
|
LS_KEYS.KEY_ATTRIBUTES,
|
2021-04-03 04:15:25 +00:00
|
|
|
await generateIntermediateKeyAttributes(
|
2021-04-01 16:38:51 +00:00
|
|
|
passphrase,
|
|
|
|
keyAttributes,
|
|
|
|
key
|
|
|
|
)
|
|
|
|
);
|
2020-10-01 01:29:24 +00:00
|
|
|
|
2021-02-09 09:33:54 +00:00
|
|
|
const sessionKeyAttributes = await cryptoWorker.encryptToB64(
|
|
|
|
key
|
|
|
|
);
|
2021-01-18 13:08:14 +00:00
|
|
|
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('confirm', constants.PASSPHRASE_MATCH_ERROR);
|
|
|
|
}
|
|
|
|
} catch (e) {
|
2021-02-09 09:33:54 +00:00
|
|
|
setFieldError(
|
|
|
|
'passphrase',
|
|
|
|
`${constants.UNKNOWN_ERROR} ${e.message}`
|
|
|
|
);
|
2021-04-02 13:42:28 +00:00
|
|
|
} finally {
|
|
|
|
setLoading(false);
|
2020-09-12 21:53:41 +00:00
|
|
|
}
|
2021-02-09 09:33:54 +00:00
|
|
|
};
|
2020-10-01 01:29:24 +00:00
|
|
|
|
2021-02-09 09:33:54 +00:00
|
|
|
return (
|
|
|
|
<Container>
|
2021-03-09 10:04:11 +00:00
|
|
|
{/* <Image alt="vault" src="/vault.png" style={{ paddingBottom: '40px' }} /> */}
|
|
|
|
<Card style={{ maxWidth: '540px', padding: '20px' }}>
|
2021-02-09 09:33:54 +00:00
|
|
|
<Card.Body>
|
2021-03-22 14:06:06 +00:00
|
|
|
<div
|
|
|
|
className="text-center"
|
|
|
|
style={{ marginBottom: '40px' }}
|
|
|
|
>
|
2021-02-09 09:33:54 +00:00
|
|
|
<p>{constants.ENTER_ENC_PASSPHRASE}</p>
|
2021-03-09 07:05:46 +00:00
|
|
|
{constants.PASSPHRASE_DISCLAIMER()}
|
2021-02-09 09:33:54 +00:00
|
|
|
</div>
|
|
|
|
<Formik<formValues>
|
|
|
|
initialValues={{ passphrase: '', confirm: '' }}
|
|
|
|
validationSchema={Yup.object().shape({
|
|
|
|
passphrase: Yup.string().required(
|
|
|
|
constants.REQUIRED
|
|
|
|
),
|
|
|
|
confirm: Yup.string().required(constants.REQUIRED),
|
|
|
|
})}
|
|
|
|
onSubmit={onSubmit}
|
|
|
|
>
|
|
|
|
{({
|
|
|
|
values,
|
|
|
|
touched,
|
|
|
|
errors,
|
|
|
|
handleChange,
|
|
|
|
handleBlur,
|
|
|
|
handleSubmit,
|
|
|
|
}) => (
|
|
|
|
<Form noValidate onSubmit={handleSubmit}>
|
|
|
|
<Form.Group>
|
|
|
|
<Form.Control
|
2021-03-09 10:04:11 +00:00
|
|
|
type="password"
|
2021-02-09 09:33:54 +00:00
|
|
|
placeholder={constants.PASSPHRASE_HINT}
|
|
|
|
value={values.passphrase}
|
|
|
|
onChange={handleChange('passphrase')}
|
|
|
|
onBlur={handleBlur('passphrase')}
|
|
|
|
isInvalid={Boolean(
|
|
|
|
touched.passphrase &&
|
2021-03-22 14:06:06 +00:00
|
|
|
errors.passphrase
|
2021-02-09 09:33:54 +00:00
|
|
|
)}
|
2021-03-09 10:04:11 +00:00
|
|
|
autoFocus={true}
|
2021-02-09 09:33:54 +00:00
|
|
|
disabled={loading}
|
|
|
|
/>
|
|
|
|
<Form.Control.Feedback type="invalid">
|
|
|
|
{errors.passphrase}
|
|
|
|
</Form.Control.Feedback>
|
|
|
|
</Form.Group>
|
|
|
|
<Form.Group>
|
|
|
|
<Form.Control
|
2021-03-09 10:04:11 +00:00
|
|
|
type="password"
|
2021-02-09 09:33:54 +00:00
|
|
|
placeholder={
|
|
|
|
constants.PASSPHRASE_CONFIRM
|
|
|
|
}
|
|
|
|
value={values.confirm}
|
|
|
|
onChange={handleChange('confirm')}
|
|
|
|
onBlur={handleBlur('confirm')}
|
|
|
|
isInvalid={Boolean(
|
|
|
|
touched.confirm && errors.confirm
|
|
|
|
)}
|
|
|
|
disabled={loading}
|
|
|
|
/>
|
|
|
|
<Form.Control.Feedback type="invalid">
|
|
|
|
{errors.confirm}
|
|
|
|
</Form.Control.Feedback>
|
|
|
|
</Form.Group>
|
2021-03-22 14:06:06 +00:00
|
|
|
<Button
|
|
|
|
type="submit"
|
|
|
|
block
|
|
|
|
disabled={loading}
|
|
|
|
style={{ marginTop: '28px' }}
|
|
|
|
>
|
2021-02-09 09:33:54 +00:00
|
|
|
{constants.SET_PASSPHRASE}
|
|
|
|
</Button>
|
|
|
|
</Form>
|
|
|
|
)}
|
|
|
|
</Formik>
|
2021-03-22 14:06:06 +00:00
|
|
|
<div className="text-center" style={{ marginTop: '20px' }}>
|
|
|
|
<a href="#" onClick={logoutUser}>
|
|
|
|
{constants.LOGOUT}
|
|
|
|
</a>
|
|
|
|
</div>
|
2021-02-09 09:33:54 +00:00
|
|
|
</Card.Body>
|
|
|
|
</Card>
|
|
|
|
</Container>
|
|
|
|
);
|
2020-09-12 21:53:41 +00:00
|
|
|
}
|