blob: 296dc0e5c8acb21b3ec7992488e61065b951eb15 (
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import React, {useState, useEffect} from 'react';
const LoginPanel = ({setUser, t}) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [active, setActive] = useState(false);
useEffect(() => {
if (username.length > 4 && password.length > 4) {
setActive(true);
} else {
setActive(false);
}
}, [username, password])
const usernameValidation = (e) => {
const value = e.target.value;
const regex = /^[0-9a-zA-Z]+$/;
if ((value.length < 20 && value.match(regex)) || value === "") {
setUsername(value);
}
};
const passwordValidation = (e) => {
e.target.value.length < 20 && setPassword(e.target.value);
};
const submit = (e) => {
e.preventDefault();
if (username === 'admin' && password === 'admin') {
setUser('admin');
}
}
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={usernameValidation}
placeholder={t('user')}
id="admin-user-name"
name="admin-user-name"
type="text"
className="text-input-field"
value={username}
/>
<label htmlFor="admin-user-name" className="text-input-label">{t('user')}</label>
</div>
<div className="text-input">
<input
onChange={passwordValidation}
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;
|
