105 lines
2.7 KiB
JavaScript
105 lines
2.7 KiB
JavaScript
import { LockOutlined, LoginOutlined, UserOutlined } from "@ant-design/icons";
|
|
import { Button, Form, Input, Modal, notification } from "antd";
|
|
import PropTypes from "prop-types";
|
|
import { Constants } from "../../utils";
|
|
import { useState } from "react";
|
|
import { Buffer } from "buffer";
|
|
|
|
export default function Login({ setUserSession }) {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [api, contextHolder] = notification.useNotification();
|
|
|
|
const showErrorNotification = () => {
|
|
api["error"]({
|
|
message: "Login Failed!",
|
|
description: "Please check your username and password!",
|
|
});
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (username === "" || password === "") {
|
|
showErrorNotification();
|
|
return;
|
|
}
|
|
|
|
fetch(Constants.API_ADDRESS + "/user/auth/login", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
username: username,
|
|
password: Buffer.from(password).toString("base64"),
|
|
}),
|
|
})
|
|
.then((res) => {
|
|
if (res.status === 200) {
|
|
return res.json();
|
|
}
|
|
|
|
return Promise.reject(res.status);
|
|
})
|
|
.then((data) => {
|
|
setUserSession(data.Session);
|
|
window.location.href = "/";
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
showErrorNotification();
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{contextHolder}
|
|
<Modal
|
|
title="Login"
|
|
open={true}
|
|
closable={false}
|
|
centered
|
|
keyboard={false}
|
|
footer={
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
icon={<LoginOutlined />}
|
|
className="login-form-button"
|
|
onClick={() => handleSubmit()}
|
|
>
|
|
Log in
|
|
</Button>
|
|
}
|
|
>
|
|
<Form>
|
|
<Form.Item name="username">
|
|
<Input
|
|
prefix={<UserOutlined className="site-form-item-icon" />}
|
|
placeholder="Username"
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="password"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "Please input your Password!",
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
prefix={<LockOutlined className="site-form-item-icon" />}
|
|
type="password"
|
|
placeholder="Password"
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Login.propTypes = {
|
|
setUserSession: PropTypes.func.isRequired,
|
|
};
|