-
Notifications
You must be signed in to change notification settings - Fork 0
/
Login.js
141 lines (133 loc) · 4.77 KB
/
Login.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import React, { useState, useContext } from 'react';
import { Form, Formik } from 'formik';
import * as Yup from 'yup';
import { Redirect } from 'react-router-dom';
import Card from '../components/common/Card';
import Hyperlink from './../components/common/Hyperlink';
import Label from './../components/common/Label';
import FormInput from './../components/FormInput';
import FormSuccess from './../components/FormSuccess';
import FormError from './../components/FormError';
import GradientBar from './../components/common/GradientBar';
import GradientButton from '../components/common/GradientButton';
import logo from './../images/logo.png';
import { publicFetch } from './../util/fetch';
import { AuthContext } from '../context/AuthContext';
const LoginSchema = Yup.object().shape({
email: Yup.string().required('Email is required'),
password: Yup.string().required('Password is required')
});
const Login = () => {
const authContext = useContext(AuthContext);
const [loginSuccess, setLoginSuccess] = useState();
const [loginError, setLoginError] = useState();
const [loginLoading, setLoginLoading] = useState(false);
const [redirectOnLogin, setRedirectOnLogin] = useState(false);
const submitCredentials = async (credentials) => {
try {
setLoginLoading(true);
const { data } = await publicFetch.post('authenticate', credentials);
authContext.setAuthState(data);
setLoginSuccess(data.message);
setLoginError('');
setTimeout(() => {
setRedirectOnLogin(true);
}, 700);
} catch (error) {
setLoginLoading(false);
const { data } = error.response;
setLoginError(data.message);
setLoginSuccess(null);
}
};
return (
<>
{redirectOnLogin && <Redirect to='/dashboard' />}
<section className="w-full sm:w-1/2 h-screen m-auto p-8 sm:pt-10">
<GradientBar />
<Card>
<div className="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full">
<div>
<div className="w-32 m-auto mb-6">
<img src={logo} alt="Logo" />
</div>
<h2 className="mb-2 text-center text-3xl leading-9 font-extrabold text-gray-900">
Log in to your account
</h2>
<p className="text-gray-600 text-center">
Don't have an account?{' '}
<Hyperlink
to="signup"
text="Sign up now"
/>
</p>
</div>
<Formik
initialValues={{
email: '',
password: ''
}}
onSubmit={values =>
submitCredentials(values)
}
validationSchema={LoginSchema}
>
{() => (
<Form className="mt-8">
{loginSuccess && (
<FormSuccess text={loginSuccess} />
)}
{loginError && (
<FormError text={loginError} />
)}
<div>
<div className="mb-2">
<div className="mb-1">
<Label text="Email" />
</div>
<FormInput
ariaLabel="Email"
name="email"
type="text"
placeholder="Email"
/>
</div>
<div>
<div className="mb-1">
<Label text="Password" />
</div>
<FormInput
ariaLabel="Password"
name="password"
type="password"
placeholder="Password"
/>
</div>
</div>
<div className="mt-6 flex justify-start">
<div className="text-sm leading-5">
<Hyperlink
to="forgot-password"
text="Forgot your password?"
/>
</div>
</div>
<div className="mt-6">
<GradientButton
type="submit"
text="Log In"
loading={loginLoading}
/>
</div>
</Form>
)}
</Formik>
</div>
</div>
</Card>
</section>
</>
);
};
export default Login;