blob: c84e84363bdd19ef28167b4a86108e3de69b8844 (
plain) (
blame)
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
|
import React, {useState, useEffect, useContext} from 'react';
import login from '../api/login';
import { t } from '../../admin/hocs';
const LoginPanel = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [active, setActive] = useState(false);
useEffect(() => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
emailRegex.test(email) && password.length > 5
? setActive(true)
: setActive(false);
}, [email, password])
const submit = (e) => {
e.preventDefault();
login({email, password});
}
return (
<div className="login-panel">
<form className="login-panel__form" onSubmit={submit}>
<p className="login-panel__header">
{t('login-to-admin')}
</p>
<div className="text-input">
<input
onChange={e => setEmail(e.target.value)}
placeholder={t('user')}
id="admin-user-name"
name="admin-user-name"
type="text"
className="text-input-field"
value={email}
/>
<label htmlFor="admin-user-name" className="text-input-label">{t('user')}</label>
</div>
<div className="text-input">
<input
onChange={e => setPassword(e.target.value)}
placeholder={t('password')}
id="admin-password"
name="admin-password"
type="password"
className="text-input-field"
value={password}
/>
<label htmlFor="admin-password" className="text-input-label">
{t('password')}
</label>
</div>
<div>
<input
type="submit"
className={`login-panel__button${active ? ' active' : ''}`}
value={t('login')}
/>
</div>
</form>
</div>
);
};
export default LoginPanel;
|
