2021-05-29 06:27:52 +00:00
|
|
|
import React, {useState, useEffect} from 'react';
|
|
|
|
import {useRouter} from 'next/router';
|
2020-09-09 21:09:51 +00:00
|
|
|
import Card from 'react-bootstrap/Card';
|
|
|
|
import Form from 'react-bootstrap/Form';
|
2020-09-12 21:53:41 +00:00
|
|
|
import FormControl from 'react-bootstrap/FormControl';
|
2020-09-09 21:09:51 +00:00
|
|
|
import Button from 'react-bootstrap/Button';
|
2020-09-12 21:53:41 +00:00
|
|
|
import constants from 'utils/strings/constants';
|
2021-05-29 06:27:52 +00:00
|
|
|
import {Formik, FormikHelpers} from 'formik';
|
2020-09-12 21:53:41 +00:00
|
|
|
import * as Yup from 'yup';
|
2021-05-29 06:27:52 +00:00
|
|
|
import {getOtt} from 'services/userService';
|
2020-09-12 21:53:41 +00:00
|
|
|
import Container from 'components/Container';
|
2021-05-29 06:27:52 +00:00
|
|
|
import {setData, LS_KEYS, getData} from 'utils/storage/localStorage';
|
2021-04-11 05:08:06 +00:00
|
|
|
import SubmitButton from 'components/SubmitButton';
|
2021-05-29 06:27:52 +00:00
|
|
|
|
2020-09-12 21:53:41 +00:00
|
|
|
interface formValues {
|
|
|
|
email: string;
|
|
|
|
}
|
2020-09-09 21:09:51 +00:00
|
|
|
|
|
|
|
export default function Home() {
|
2020-09-12 21:53:41 +00:00
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const router = useRouter();
|
2020-11-21 12:18:03 +00:00
|
|
|
|
2020-09-12 21:53:41 +00:00
|
|
|
useEffect(() => {
|
2020-09-14 09:32:01 +00:00
|
|
|
router.prefetch('/verify');
|
2020-11-21 12:18:03 +00:00
|
|
|
router.prefetch('/signup');
|
2020-09-13 06:30:07 +00:00
|
|
|
const user = getData(LS_KEYS.USER);
|
2020-09-12 21:53:41 +00:00
|
|
|
if (user?.email) {
|
|
|
|
router.push('/verify');
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
2021-02-09 09:33:54 +00:00
|
|
|
const loginUser = async (
|
2021-05-29 06:27:52 +00:00
|
|
|
{email}: formValues,
|
|
|
|
{setFieldError}: FormikHelpers<formValues>,
|
2021-02-09 09:33:54 +00:00
|
|
|
) => {
|
2020-09-12 21:53:41 +00:00
|
|
|
try {
|
|
|
|
setLoading(true);
|
|
|
|
await getOtt(email);
|
2021-05-29 06:27:52 +00:00
|
|
|
setData(LS_KEYS.USER, {email});
|
2020-09-12 21:53:41 +00:00
|
|
|
router.push('/verify');
|
|
|
|
} catch (e) {
|
2021-03-09 06:59:18 +00:00
|
|
|
setFieldError('email', `${constants.UNKNOWN_ERROR} ${e.message}`);
|
2020-09-12 21:53:41 +00:00
|
|
|
}
|
|
|
|
setLoading(false);
|
2021-02-09 09:33:54 +00:00
|
|
|
};
|
2020-09-12 21:53:41 +00:00
|
|
|
|
2020-11-21 12:18:03 +00:00
|
|
|
const register = () => {
|
2021-03-09 06:59:18 +00:00
|
|
|
router.push('/signup');
|
2021-02-09 09:33:54 +00:00
|
|
|
};
|
2020-11-21 12:18:03 +00:00
|
|
|
|
2020-09-12 21:53:41 +00:00
|
|
|
return (
|
2021-03-09 06:59:18 +00:00
|
|
|
<Container>
|
2021-05-29 06:27:52 +00:00
|
|
|
<Card style={{minWidth: '320px'}} className="text-center">
|
|
|
|
<Card.Body style={{padding: '40px 30px'}}>
|
|
|
|
<Card.Title style={{marginBottom: '32px'}}>
|
2021-03-09 06:59:18 +00:00
|
|
|
{constants.LOGIN}
|
|
|
|
</Card.Title>
|
|
|
|
<Formik<formValues>
|
2021-05-29 06:27:52 +00:00
|
|
|
initialValues={{email: ''}}
|
2021-03-09 06:59:18 +00:00
|
|
|
validationSchema={Yup.object().shape({
|
|
|
|
email: Yup.string()
|
|
|
|
.email(constants.EMAIL_ERROR)
|
|
|
|
.required(constants.REQUIRED),
|
|
|
|
})}
|
2021-04-29 07:00:23 +00:00
|
|
|
validateOnChange={false}
|
|
|
|
validateOnBlur={false}
|
2021-03-09 06:59:18 +00:00
|
|
|
onSubmit={loginUser}
|
|
|
|
>
|
|
|
|
{({
|
|
|
|
values,
|
|
|
|
errors,
|
|
|
|
touched,
|
|
|
|
handleChange,
|
|
|
|
handleSubmit,
|
|
|
|
}) => (
|
|
|
|
<Form noValidate onSubmit={handleSubmit}>
|
|
|
|
<Form.Group controlId="formBasicEmail">
|
|
|
|
<Form.Control
|
|
|
|
type="email"
|
|
|
|
placeholder={constants.ENTER_EMAIL}
|
|
|
|
value={values.email}
|
|
|
|
onChange={handleChange('email')}
|
|
|
|
isInvalid={Boolean(
|
2021-05-29 06:27:52 +00:00
|
|
|
touched.email && errors.email,
|
2021-03-09 06:59:18 +00:00
|
|
|
)}
|
2021-05-29 06:27:52 +00:00
|
|
|
autoFocus
|
2020-09-12 21:53:41 +00:00
|
|
|
disabled={loading}
|
2021-03-09 06:59:18 +00:00
|
|
|
/>
|
|
|
|
<FormControl.Feedback type="invalid">
|
|
|
|
{errors.email}
|
|
|
|
</FormControl.Feedback>
|
|
|
|
</Form.Group>
|
2021-04-11 05:08:06 +00:00
|
|
|
<SubmitButton
|
|
|
|
buttonText={constants.LOGIN}
|
|
|
|
loading={loading}
|
|
|
|
/>
|
2021-03-09 06:59:18 +00:00
|
|
|
</Form>
|
|
|
|
)}
|
|
|
|
</Formik>
|
2021-04-11 05:13:36 +00:00
|
|
|
<br />
|
2021-05-23 13:02:05 +00:00
|
|
|
<Button variant="link" onClick={register}>
|
2021-03-09 06:59:18 +00:00
|
|
|
{constants.NO_ACCOUNT}
|
2021-05-23 13:02:05 +00:00
|
|
|
</Button>
|
2021-03-09 06:59:18 +00:00
|
|
|
</Card.Body>
|
|
|
|
</Card>
|
|
|
|
</Container>
|
2021-02-09 09:33:54 +00:00
|
|
|
);
|
2020-09-09 21:09:51 +00:00
|
|
|
}
|