121 lines
3.4 KiB
JavaScript
121 lines
3.4 KiB
JavaScript
import { LockOutlined, LoginOutlined, UserOutlined } from "@ant-design/icons";
|
|
import { Button, Form, Input, Modal, notification } from "antd";
|
|
import {
|
|
Constants,
|
|
EncodeStringToBase64,
|
|
myFetch,
|
|
setUserSessionToLocalStorage,
|
|
} from "../../utils";
|
|
import { useState } from "react";
|
|
|
|
export default function Login() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [api, contextHolder] = notification.useNotification();
|
|
|
|
const showErrorNotification = (errStatus) => {
|
|
if (errStatus === 401) {
|
|
api["error"]({
|
|
message: "Account deactivated",
|
|
description: "Please contact an administrator",
|
|
});
|
|
return;
|
|
}
|
|
|
|
api["error"]({
|
|
message: "Login failed",
|
|
description: "Please check your username and password!",
|
|
});
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (
|
|
username.length > Constants.GLOBALS.MAX_USERNAME_LENGTH ||
|
|
username.length < Constants.GLOBALS.MIN_USERNAME_LENGTH ||
|
|
password.length > Constants.GLOBALS.MAX_PASSWORD_LENGTH ||
|
|
password.length < Constants.GLOBALS.MIN_PASSWORD_LENGTH
|
|
) {
|
|
showErrorNotification();
|
|
return;
|
|
}
|
|
|
|
myFetch("/user/auth/login", "POST", {
|
|
username: username,
|
|
password: EncodeStringToBase64(password),
|
|
})
|
|
.then((data) => {
|
|
setUserSessionToLocalStorage(data.Session);
|
|
window.location.href = "/";
|
|
})
|
|
.catch((errStatus) => showErrorNotification(errStatus));
|
|
};
|
|
|
|
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"
|
|
required
|
|
rules={[
|
|
{ required: true, message: "Please enter your username!" },
|
|
{
|
|
min: Constants.GLOBALS.MIN_USERNAME_LENGTH,
|
|
message: `Please enter a username length of at least ${Constants.GLOBALS.MIN_USERNAME_LENGTH}!`,
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
prefix={<UserOutlined />}
|
|
placeholder="Username"
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
minLength={Constants.GLOBALS.MIN_USERNAME_LENGTH}
|
|
maxLength={Constants.GLOBALS.MAX_USERNAME_LENGTH}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="password"
|
|
required
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "Please enter your Password!",
|
|
},
|
|
{
|
|
min: Constants.GLOBALS.MIN_PASSWORD_LENGTH,
|
|
message: `Please enter a password length of at least ${Constants.GLOBALS.MIN_PASSWORD_LENGTH}!`,
|
|
},
|
|
]}
|
|
>
|
|
<Input.Password
|
|
prefix={<LockOutlined />}
|
|
placeholder="Password"
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
minLength={Constants.GLOBALS.MIN_PASSWORD_LENGTH}
|
|
maxLength={Constants.GLOBALS.MAX_PASSWORD_LENGTH}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|