118 lines
4.1 KiB
TypeScript
118 lines
4.1 KiB
TypeScript
import type {Route} from "../../.react-router/types/app/pages/+types/HomePage";
|
|
import {flexLeftWeight, iconMStyle, marginRound, maxWidth} from "~/styles";
|
|
import {
|
|
Button,
|
|
em,
|
|
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 {apiPing, apiPingWithPassword} from "~/utils/compare_api.ts";
|
|
import {showErrorMessage, showInfoMessage} from "~/utils/utils";
|
|
import {DashboardPageType} from "~/utils/enums.ts";
|
|
import GlobalAffix from "~/components/GlobalAffix.tsx";
|
|
import WebIcon from "mdi-react/WebIcon";
|
|
|
|
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [
|
|
{ title: "Login" },
|
|
{ name: "description", content: "Login page" },
|
|
];
|
|
}
|
|
|
|
export default function Component() {
|
|
const form = useForm({
|
|
initialValues: {
|
|
// serverAddress: 'http://127.0.0.1:9520',
|
|
serverAddress: 'https://api-grpc-vs-rest.yanfeng.uk',
|
|
password: ''
|
|
},
|
|
|
|
validate: {
|
|
serverAddress: (value) => (value.length == 0 ? "Input the server address." : null),
|
|
password: (value) => (value.length == 0 ? "Input your password." : null),
|
|
},
|
|
});
|
|
|
|
const [isLoggingIn, setIsLoggingIn] = useState(false);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const onClickLogin = (values: {serverAddress:string, password: string}) => {
|
|
setIsLoggingIn(true)
|
|
apiPingWithPassword(values.serverAddress, values.password)
|
|
.then((res) => {
|
|
if (!res.success) {
|
|
showErrorMessage(res.message, "Login failed")
|
|
return
|
|
}
|
|
else {
|
|
navigate(DashboardPageType.Dashboard)
|
|
}
|
|
})
|
|
.catch((e) => showErrorMessage(e.toString(), "Login error"))
|
|
.finally(() => setIsLoggingIn(false))
|
|
}
|
|
|
|
return (
|
|
<Flex gap="md" align="center" justify="center" p={em(20)} h="100vh" w="100vw">
|
|
<Stack align="stretch" justify="center" gap="md" style={{...flexLeftWeight, maxWidth: "800px"}}>
|
|
<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')}*/}
|
|
{/*/>*/}
|
|
|
|
<TextInput
|
|
withAsterisk
|
|
label="Test Server Address"
|
|
placeholder="Server Address"
|
|
leftSection={<WebIcon style={iconMStyle}/>}
|
|
{...form.getInputProps('serverAddress')}
|
|
/>
|
|
|
|
<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>
|
|
|
|
<GlobalAffix/>
|
|
</Stack>
|
|
</Flex>
|
|
)
|
|
}
|