131 lines
3.5 KiB
JavaScript
131 lines
3.5 KiB
JavaScript
import { LoginOutlined } from "@ant-design/icons";
|
|
import { Button, Form, Modal, Tabs, notification } from "antd";
|
|
import {
|
|
EncodeStringToBase64,
|
|
myFetch,
|
|
myFetchContentType,
|
|
setUserSessionToLocalStorage,
|
|
} from "../../utils";
|
|
import { useState } from "react";
|
|
import {
|
|
MyAccountNameFormInput,
|
|
MyPasswordFormInput,
|
|
MyUsernameFormInput,
|
|
} from "../../Components/MyFormInputs";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export default function Login() {
|
|
const { t } = useTranslation();
|
|
const [form] = Form.useForm();
|
|
|
|
const [api, contextHolder] = notification.useNotification();
|
|
|
|
const [selectedMethod, setSelectedMethod] = useState("1");
|
|
const [isRequesting, setIsRequesting] = useState(false);
|
|
|
|
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 accountName and password!",
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{contextHolder}
|
|
<Modal
|
|
open={true}
|
|
closable={false}
|
|
centered
|
|
keyboard={false}
|
|
footer={
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
icon={<LoginOutlined />}
|
|
loading={isRequesting}
|
|
onClick={() => {
|
|
form
|
|
.validateFields()
|
|
.then((values) => {
|
|
setIsRequesting(true);
|
|
|
|
let body = {
|
|
accountName: values.accountName.toLocaleLowerCase(),
|
|
password: EncodeStringToBase64(values.password),
|
|
};
|
|
|
|
if (selectedMethod === "2") {
|
|
body.username = values.username;
|
|
}
|
|
|
|
myFetch(
|
|
`/user/auth/${selectedMethod === "1" ? "login" : "signup"}`,
|
|
"POST",
|
|
body,
|
|
{},
|
|
myFetchContentType.JSON,
|
|
"",
|
|
true
|
|
)
|
|
.then((data) => {
|
|
console.log(data.XAuthorization);
|
|
|
|
setUserSessionToLocalStorage(data.XAuthorization);
|
|
window.location.href = "/";
|
|
})
|
|
.catch((errStatus) => {
|
|
showErrorNotification(errStatus);
|
|
setIsRequesting(false);
|
|
});
|
|
})
|
|
.catch((info) => {
|
|
console.log("Validate Failed:", info);
|
|
});
|
|
}}
|
|
>
|
|
{selectedMethod === "1" ? t("login.login") : t("login.signUp")}
|
|
</Button>
|
|
}
|
|
>
|
|
<Tabs
|
|
defaultActiveKey="1"
|
|
items={[
|
|
{
|
|
key: "1",
|
|
label: t("login.login"),
|
|
},
|
|
{
|
|
key: "2",
|
|
label: t("login.signUp"),
|
|
},
|
|
]}
|
|
centered
|
|
onChange={(activeKey) => {
|
|
setSelectedMethod(activeKey);
|
|
}}
|
|
/>
|
|
|
|
<Form form={form} layout="vertical" requiredMark={false}>
|
|
{selectedMethod === "2" && <MyUsernameFormInput />}
|
|
|
|
<MyAccountNameFormInput
|
|
disableAccountNameCheck={selectedMethod === "1"}
|
|
hasFeedback={selectedMethod === "2"}
|
|
/>
|
|
|
|
<MyPasswordFormInput />
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|