added new component passphrase form
This commit is contained in:
parent
6fd74a1089
commit
32f6f2cc5d
116
src/components/PassphraseForm.tsx
Normal file
116
src/components/PassphraseForm.tsx
Normal file
|
@ -0,0 +1,116 @@
|
|||
import React, { useEffect, useState } 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 Button from 'react-bootstrap/Button';
|
||||
import constants from 'utils/strings/constants';
|
||||
import { Formik, FormikHelpers } from 'formik';
|
||||
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
||||
import { useRouter } from 'next/router';
|
||||
import * as Yup from 'yup';
|
||||
import { KeyAttributes } from 'types';
|
||||
import CryptoWorker, { setSessionKeys } from 'utils/crypto';
|
||||
import { Spinner } from 'react-bootstrap';
|
||||
import { propTypes } from 'react-bootstrap/esm/Image';
|
||||
|
||||
interface formValues {
|
||||
passphrase: string;
|
||||
}
|
||||
interface Props {
|
||||
callback: (passphrase: string, setFieldError) => void;
|
||||
title: string;
|
||||
placeholder: string;
|
||||
buttonText: string;
|
||||
alternateOption: { text: string; click: () => void };
|
||||
back: () => void;
|
||||
}
|
||||
|
||||
export default function PassPhraseForm(props: Props) {
|
||||
const [loading, SetLoading] = useState(false);
|
||||
const submitForm = async (
|
||||
values: formValues,
|
||||
{ setFieldError }: FormikHelpers<formValues>
|
||||
) => {
|
||||
SetLoading(true);
|
||||
await props.callback(values.passphrase, setFieldError);
|
||||
SetLoading(false);
|
||||
};
|
||||
return (
|
||||
<Container>
|
||||
<Card
|
||||
style={{ minWidth: '320px', padding: '40px 30px' }}
|
||||
className="text-center"
|
||||
>
|
||||
<Card.Body>
|
||||
<Card.Title style={{ marginBottom: '24px' }}>
|
||||
{props.title}
|
||||
</Card.Title>
|
||||
<Formik<formValues>
|
||||
initialValues={{ passphrase: '' }}
|
||||
onSubmit={submitForm}
|
||||
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="text"
|
||||
placeholder={props.placeholder}
|
||||
value={values.passphrase}
|
||||
onChange={handleChange('passphrase')}
|
||||
onBlur={handleBlur('passphrase')}
|
||||
isInvalid={Boolean(
|
||||
touched.passphrase &&
|
||||
errors.passphrase
|
||||
)}
|
||||
disabled={loading}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<Form.Control.Feedback type="invalid">
|
||||
{errors.passphrase}
|
||||
</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<Button block type="submit" disabled={loading}>
|
||||
{loading ? (
|
||||
<Spinner animation="border" />
|
||||
) : (
|
||||
props.buttonText
|
||||
)}
|
||||
</Button>
|
||||
<br />
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={props.alternateOption.click}
|
||||
>
|
||||
{props.alternateOption.text}
|
||||
</Button>
|
||||
<Button variant="link" onClick={props.back}>
|
||||
{constants.GO_BACK}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Container>
|
||||
);
|
||||
}
|
Loading…
Reference in a new issue