2021-05-30 16:56:48 +00:00
|
|
|
import React, { useState } from 'react';
|
2021-05-11 05:03:09 +00:00
|
|
|
import constants from 'utils/strings/constants';
|
2021-05-30 16:56:48 +00:00
|
|
|
import { Form } from 'react-bootstrap';
|
|
|
|
import { Formik, FormikHelpers } from 'formik';
|
2021-05-11 05:03:09 +00:00
|
|
|
import * as Yup from 'yup';
|
|
|
|
import SubmitButton from './SubmitButton';
|
|
|
|
|
|
|
|
interface formValues {
|
|
|
|
passphrase: string;
|
|
|
|
}
|
|
|
|
interface Props {
|
|
|
|
callback: (passphrase: string, setFieldError) => void;
|
|
|
|
fieldType: string;
|
|
|
|
placeholder: string;
|
|
|
|
buttonText: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function SingleInputForm(props: Props) {
|
|
|
|
const [loading, SetLoading] = useState(false);
|
|
|
|
const submitForm = async (
|
|
|
|
values: formValues,
|
2021-05-30 16:56:48 +00:00
|
|
|
{ setFieldError }: FormikHelpers<formValues>,
|
2021-05-11 05:03:09 +00:00
|
|
|
) => {
|
|
|
|
SetLoading(true);
|
|
|
|
await props.callback(values.passphrase, setFieldError);
|
|
|
|
SetLoading(false);
|
|
|
|
};
|
|
|
|
return (
|
|
|
|
<Formik<formValues>
|
2021-05-30 16:56:48 +00:00
|
|
|
initialValues={{ passphrase: '' }}
|
2021-05-11 05:03:09 +00:00
|
|
|
onSubmit={submitForm}
|
|
|
|
validationSchema={Yup.object().shape({
|
|
|
|
passphrase: Yup.string().required(constants.REQUIRED),
|
|
|
|
})}
|
|
|
|
validateOnChange={false}
|
|
|
|
validateOnBlur={false}
|
|
|
|
>
|
2021-05-29 06:27:52 +00:00
|
|
|
{({
|
|
|
|
values, touched, errors, handleChange, handleSubmit,
|
|
|
|
}) => (
|
2021-05-11 05:03:09 +00:00
|
|
|
<Form noValidate onSubmit={handleSubmit}>
|
|
|
|
<Form.Group>
|
|
|
|
<Form.Control
|
|
|
|
type={props.fieldType}
|
|
|
|
placeholder={props.placeholder}
|
|
|
|
value={values.passphrase}
|
|
|
|
onChange={handleChange('passphrase')}
|
|
|
|
isInvalid={Boolean(
|
2021-05-29 06:27:52 +00:00
|
|
|
touched.passphrase && errors.passphrase,
|
2021-05-11 05:03:09 +00:00
|
|
|
)}
|
|
|
|
disabled={loading}
|
2021-05-29 06:27:52 +00:00
|
|
|
autoFocus
|
2021-05-11 05:03:09 +00:00
|
|
|
/>
|
|
|
|
<Form.Control.Feedback type="invalid">
|
|
|
|
{errors.passphrase}
|
|
|
|
</Form.Control.Feedback>
|
|
|
|
</Form.Group>
|
|
|
|
<SubmitButton
|
|
|
|
buttonText={props.buttonText}
|
|
|
|
loading={loading}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<br />
|
|
|
|
</Form>
|
|
|
|
)}
|
|
|
|
</Formik>
|
|
|
|
);
|
|
|
|
}
|