app/src/containers/SignIn/SignIn.js (view raw)
1import React, {useCallback, useState, useMemo} from 'react';
2import {Redirect} from 'react-router-dom';
3import {useTranslation} from 'react-i18next';
4import {useAuth} from 'strapi-react-context';
5import TextField from '@material-ui/core/TextField';
6import Button from '@material-ui/core/Button';
7import CardContent from '@material-ui/core/CardContent';
8import {CircularProgress} from '@material-ui/core';
9import CardActions from '@material-ui/core/CardActions';
10import {useToast} from '../../contexts/Toast';
11
12export default () => {
13 const {t} = useTranslation();
14 const {login, token, authState} = useAuth();
15 const [isLoading, setIsLoading] = useState(false);
16 const [email, setEmail] = useState('');
17 const [password, setPassword] = useState('');
18 const {addToast} = useToast();
19
20 const canSubmit = useMemo(
21 () => [email, password].filter(s => s.length < 4).length === 0,
22 [email, password]
23 );
24
25 const onSubmit = useCallback(
26 async evt => {
27 if (evt.preventDefault) evt.preventDefault();
28 if (isLoading) {
29 return;
30 }
31 setIsLoading(true);
32 try {
33 await login(email, password);
34 // TODO add to my event if saved in local storage
35 // TODO remove from local storage.
36 } catch (error) {
37 console.log('ERROR', {error});
38 if (error) {
39 addToast(t('signin.errors'));
40 }
41 }
42
43 setIsLoading(false);
44 return false;
45 },
46 [email, password, login, isLoading, addToast, t]
47 );
48
49 if (token) {
50 return <Redirect to="/dashboard" />;
51 }
52 if (authState && authState.user && !authState.user.confirmed) {
53 return <Redirect to="/confirm" />;
54 }
55 return (
56 <form onSubmit={onSubmit}>
57 <CardContent>
58 <TextField
59 label={t('signin.email')}
60 fullWidth
61 required={true}
62 margin="dense"
63 value={email}
64 onChange={({target: {value = ''}}) => setEmail(value)}
65 id="SignInEmail"
66 name="email"
67 type="email"
68 />
69 <TextField
70 label={t('signin.password')}
71 fullWidth
72 required={true}
73 margin="dense"
74 value={password}
75 onChange={({target: {value = ''}}) => setPassword(value)}
76 id="SignInEmail"
77 name="password"
78 type="password"
79 />
80 </CardContent>
81 <CardActions>
82 <Button
83 color="primary"
84 variant="contained"
85 type="submit"
86 disabled={!canSubmit}
87 aria-disabled={!canSubmit}
88 id="SignInSubmit"
89 >
90 {t('signin.login')}
91 {isLoading && <CircularProgress size={20} />}
92 </Button>
93 <Button id="SignInRegister" href="/register">
94 {t('signin.register')}
95 </Button>
96 </CardActions>
97 </form>
98 );
99};