-
Notifications
You must be signed in to change notification settings - Fork 2
/
Login.jsx
70 lines (64 loc) · 1.96 KB
/
Login.jsx
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
import {
selectErrors,
setPassword,
setUsername,
useLoginMutation,
} from "@/store/login";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Form, Input, Typography } from "antd";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import "./Login.css";
export default function Login() {
const errors = useSelector(selectErrors);
const dispatch = useDispatch();
const usernameChanged = (e) => dispatch(setUsername(e.target.value));
const passwordChanged = (e) => dispatch(setPassword(e.target.value));
const [login] = useLoginMutation();
const onFinish = async (values) => {
if (!(errors.username || errors.password)) {
const res = await login(values);
console.log(res);
}
};
return (
<div className="root">
<Typography.Title style={{ color: "#fff" }}>Sign In</Typography.Title>
<Form name="normal_login" className="form-box" onFinish={onFinish}>
<Form.Item
name="username"
validateStatus={errors.username ? "error" : "success"}
help={errors.username}
>
<Input
prefix={<UserOutlined />}
placeholder="Username"
className="form-input"
onChange={usernameChanged}
/>
</Form.Item>
<Form.Item
name="password"
validateStatus={errors.password ? "error" : "success"}
help={errors.password}
>
<Input
prefix={<LockOutlined />}
type="password"
placeholder="Password"
className="form-input"
onChange={passwordChanged}
/>
</Form.Item>
<div style={{ width: "100%", textAlign: "right" }}>
<a href="">Forgot password?</a>
</div>
<Form.Item>
<Button type="primary" htmlType="Login" className="login-button">
Log in
</Button>
</Form.Item>
</Form>
</div>
);
}