93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import type {Route} from "../../../.react-router/types/app/pages/dashboard_sub/+types/DashboardLogin";
|
|
import {flexLeftWeight, iconMStyle, marginRound, maxWidth} from "~/styles";
|
|
import {Button, Flex, Group, Image, Input, MantineProvider, PasswordInput, Stack, Text, TextInput} from "@mantine/core";
|
|
import {useForm} from "@mantine/form";
|
|
import {useEffect, useState} from "react";
|
|
import AccountIcon from "mdi-react/AccountIcon";
|
|
import LockIcon from "mdi-react/LockIcon";
|
|
import {Link} from "react-router";
|
|
import { useNavigate } from "react-router";
|
|
import {apiLogin} from "~/utils/hms_api";
|
|
import {getBaseUserInfo, showErrorMessage, showInfoMessage} from "~/utils/utils";
|
|
import {DashboardPageType} from "~/utils/hms_enums.ts";
|
|
|
|
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [
|
|
{ title: "Login" },
|
|
{ name: "description", content: "Login page" },
|
|
];
|
|
}
|
|
|
|
export default function Component() {
|
|
const form = useForm({
|
|
initialValues: {
|
|
userName: '',
|
|
password: ''
|
|
},
|
|
|
|
validate: {
|
|
userName: (value) => (value.length == 0 ? "Input your username." : null),
|
|
password: (value) => (value.length == 0 ? "Input your password." : null),
|
|
},
|
|
});
|
|
|
|
const [isLoggingIn, setIsLoggingIn] = useState(false);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const onClickLogin = (values: {userName: string, password: string}) => {
|
|
setIsLoggingIn(true)
|
|
apiLogin(values.userName, values.password)
|
|
.then((res) => {
|
|
if (!res.success) {
|
|
showErrorMessage(res.message, "Login failed")
|
|
return
|
|
}
|
|
res.data?.token && localStorage.setItem("hms_token", res.data?.token)
|
|
const userInfo = getBaseUserInfo(res.data?.user_info)
|
|
showInfoMessage(`Welcome ${userInfo?.title} ${userInfo?.name}`, "Login successful", 3000)
|
|
navigate(DashboardPageType.Home)
|
|
})
|
|
.catch((e) => showErrorMessage(e.toString(), "Login error"))
|
|
.finally(() => setIsLoggingIn(false))
|
|
}
|
|
|
|
return (
|
|
<Stack align="stretch" justify="center" gap="md" style={{...flexLeftWeight, "maxWidth": "400px"}}>
|
|
<Text size="1.5em" fw={700}>Log in</Text>
|
|
|
|
<form onSubmit={form.onSubmit((values) => onClickLogin(values))}>
|
|
<Stack gap="xs">
|
|
<TextInput
|
|
withAsterisk
|
|
label="Username"
|
|
placeholder="Username"
|
|
leftSection={<AccountIcon style={iconMStyle}/>}
|
|
{...form.getInputProps('userName')}
|
|
/>
|
|
|
|
<PasswordInput
|
|
withAsterisk
|
|
label="Password"
|
|
placeholder="Password"
|
|
leftSection={<LockIcon style={iconMStyle}/>}
|
|
{...form.getInputProps('password')}
|
|
/>
|
|
|
|
<Text size="sm" c="dimmed" ta="right">
|
|
Forgot Password?
|
|
</Text>
|
|
|
|
<Group justify="space-between">
|
|
<Button onClick={() => navigate(DashboardPageType.RegisterPage)}>Register</Button>
|
|
<Button type="submit" disabled={isLoggingIn}>Login</Button>
|
|
</Group>
|
|
</Stack>
|
|
</form>
|
|
|
|
</Stack>
|
|
)
|
|
}
|