2022-03-16 06:26:15 +00:00
|
|
|
import { useSystem } from "@/apis/hooks";
|
2022-05-06 11:58:17 +00:00
|
|
|
import { Environment } from "@/utilities";
|
2022-05-31 15:49:04 +00:00
|
|
|
import {
|
|
|
|
Avatar,
|
|
|
|
Button,
|
|
|
|
Card,
|
|
|
|
Container,
|
|
|
|
Divider,
|
|
|
|
PasswordInput,
|
|
|
|
Stack,
|
|
|
|
TextInput,
|
|
|
|
} from "@mantine/core";
|
|
|
|
import { useForm } from "@mantine/hooks";
|
|
|
|
import { FunctionComponent } from "react";
|
2021-03-25 14:22:43 +00:00
|
|
|
|
2022-03-16 06:26:15 +00:00
|
|
|
const Authentication: FunctionComponent = () => {
|
2022-05-31 15:49:04 +00:00
|
|
|
const { login } = useSystem();
|
2021-03-25 14:22:43 +00:00
|
|
|
|
2022-05-31 15:49:04 +00:00
|
|
|
const form = useForm({
|
|
|
|
initialValues: {
|
|
|
|
username: "",
|
|
|
|
password: "",
|
|
|
|
},
|
|
|
|
});
|
2021-03-25 14:22:43 +00:00
|
|
|
|
|
|
|
return (
|
2022-05-31 15:49:04 +00:00
|
|
|
<Container my="xl" size={400}>
|
|
|
|
<Card shadow="xl">
|
|
|
|
<Stack>
|
|
|
|
<Avatar
|
|
|
|
mx="auto"
|
|
|
|
size={64}
|
2022-06-18 09:25:17 +00:00
|
|
|
src={`${Environment.baseUrl}/images/logo128.png`}
|
2022-05-31 15:49:04 +00:00
|
|
|
></Avatar>
|
|
|
|
<Divider></Divider>
|
|
|
|
<form onSubmit={form.onSubmit(login)}>
|
|
|
|
<Stack>
|
|
|
|
<TextInput
|
2021-03-25 14:22:43 +00:00
|
|
|
placeholder="Username"
|
|
|
|
required
|
2022-05-31 15:49:04 +00:00
|
|
|
{...form.getInputProps("username")}
|
|
|
|
></TextInput>
|
|
|
|
<PasswordInput
|
2021-03-25 14:22:43 +00:00
|
|
|
required
|
2022-05-31 15:49:04 +00:00
|
|
|
placeholder="Password"
|
|
|
|
{...form.getInputProps("password")}
|
|
|
|
></PasswordInput>
|
|
|
|
<Divider></Divider>
|
|
|
|
<Button fullWidth uppercase type="submit">
|
|
|
|
Login
|
|
|
|
</Button>
|
|
|
|
</Stack>
|
|
|
|
</form>
|
|
|
|
</Stack>
|
2021-03-25 14:22:43 +00:00
|
|
|
</Card>
|
2022-05-31 15:49:04 +00:00
|
|
|
</Container>
|
2021-03-25 14:22:43 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-01-22 13:35:11 +00:00
|
|
|
export default Authentication;
|