blob: baf21f6cd09811edd9b2b9d4c43dc28790001ebd (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
import { useSystem } from "@/apis/hooks";
import { Environment } from "@/utilities";
import {
Avatar,
Button,
Card,
Container,
Divider,
PasswordInput,
Stack,
TextInput,
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { FunctionComponent } from "react";
const Authentication: FunctionComponent = () => {
const { login } = useSystem();
const form = useForm({
initialValues: {
username: "",
password: "",
},
});
return (
<Container my="xl" size={400}>
<Card shadow="xl">
<Stack>
<Avatar
mx="auto"
size={64}
src={`${Environment.baseUrl}/images/logo128.png`}
></Avatar>
<Divider></Divider>
<form
onSubmit={form.onSubmit((values) => {
login(values);
})}
>
<Stack>
<TextInput
name="Username"
placeholder="Username"
required
{...form.getInputProps("username")}
></TextInput>
<PasswordInput
name="Password"
required
placeholder="Password"
{...form.getInputProps("password")}
></PasswordInput>
<Divider></Divider>
<Button fullWidth uppercase type="submit">
Login
</Button>
</Stack>
</form>
</Stack>
</Card>
</Container>
);
};
export default Authentication;
|
