beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

updated the login component

Browse source
This commit is contained in:
Abhinav-grd 2021-02-13 17:23:36 +05:30
parent 9f673a4057
commit 3d8d5ae8a6
1 changed files with 79 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
src/pages/index.tsx
View file

@ -10,6 +10,7 @@ import * as Yup from 'yup';
import { getOtt } from 'services/userService'; import { getOtt } from 'services/userService';
import Container from 'components/Container'; import Container from 'components/Container';
import { setData, LS_KEYS, getData } from 'utils/storage/localStorage'; import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
import { Alert } from 'react-bootstrap';
interface formValues { interface formValues {
email: string; email: string;
@ -18,6 +19,7 @@ interface formValues {
export default function Home() { export default function Home() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const router = useRouter(); const router = useRouter();
const [showMessage, setShowMessage] = useState(false);
useEffect(() => { useEffect(() => {
router.prefetch('/verify'); router.prefetch('/verify');
@ -38,77 +40,91 @@ export default function Home() {
setData(LS_KEYS.USER, { email }); setData(LS_KEYS.USER, { email });
router.push('/verify'); router.push('/verify');
} catch (e) { } catch (e) {
setFieldError('email', `${constants.UNKNOWN_ERROR} ${e.message}`); if (e.response.status == 403) {
setFieldError('email', `${constants.USER_DOESNOT_EXIST}`);
} else {
setFieldError(
'email',
`${constants.UNKNOWN_ERROR} ${e.message}`
);
}
} }
setLoading(false); setLoading(false);
}; };
const register = () => { const register = () => {
router.push('/signup'); setShowMessage(true);
setTimeout(() => setShowMessage(false), 15000);
}; };
return ( return (
<Container> <>
<Card style={{ minWidth: '300px' }} className="text-center"> <div style={{ display: showMessage ? 'block' : 'none' }}>
<Card.Body> <Alert variant="info">{constants.WEB_SIGNUPS_DISABLED}</Alert>
<Card.Title style={{ marginBottom: '20px' }}> </div>
{constants.LOGIN}
</Card.Title> <Container>
<Formik<formValues> <Card style={{ minWidth: '300px' }} className="text-center">
initialValues={{ email: '' }} <Card.Body>
validationSchema={Yup.object().shape({ <Card.Title style={{ marginBottom: '20px' }}>
email: Yup.string() {constants.LOGIN}
.email(constants.EMAIL_ERROR) </Card.Title>
.required(constants.REQUIRED), <Formik<formValues>
})} initialValues={{ email: '' }}
onSubmit={loginUser} validationSchema={Yup.object().shape({
> email: Yup.string()
{({ .email(constants.EMAIL_ERROR)
values, .required(constants.REQUIRED),
errors, })}
touched, onSubmit={loginUser}
handleChange, >
handleBlur, {({
handleSubmit, values,
}) => ( errors,
<Form noValidate onSubmit={handleSubmit}> touched,
<Form.Group controlId="formBasicEmail"> handleChange,
<Form.Control handleBlur,
type="email" handleSubmit,
placeholder={constants.ENTER_EMAIL} }) => (
value={values.email} <Form noValidate onSubmit={handleSubmit}>
onChange={handleChange('email')} <Form.Group controlId="formBasicEmail">
onBlur={handleBlur('email')} <Form.Control
isInvalid={Boolean( type="email"
touched.email && errors.email placeholder={constants.ENTER_EMAIL}
)} value={values.email}
onChange={handleChange('email')}
onBlur={handleBlur('email')}
isInvalid={Boolean(
touched.email && errors.email
)}
disabled={loading}
/>
<FormControl.Feedback type="invalid">
{errors.email}
</FormControl.Feedback>
</Form.Group>
<Button
variant="primary"
type="submit"
block
disabled={loading} disabled={loading}
/> style={{ marginBottom: '12px' }}
<FormControl.Feedback type="invalid"> >
{errors.email} {constants.SUBMIT}
</FormControl.Feedback> </Button>
</Form.Group> </Form>
<Button )}
variant="primary" </Formik>
type="submit" <Card.Link
block href="#"
disabled={loading} onClick={register}
style={{ marginBottom: '12px' }} style={{ fontSize: '14px' }}
> >
{constants.SUBMIT} Don't have an account?
</Button> </Card.Link>
</Form> </Card.Body>
)} </Card>
</Formik> </Container>
<Card.Link </>
href="#"
onClick={register}
style={{ fontSize: '14px' }}
>
Don't have an account?
</Card.Link>
</Card.Body>
</Card>
</Container>
); );
} }