feat: refine LoginPage
This commit is contained in:
parent
3cbb51f8ee
commit
733c817145
@ -51,10 +51,9 @@ export default function LoginPage() {
|
|||||||
const doLogin = async () => {
|
const doLogin = async () => {
|
||||||
if (!validate()) {
|
if (!validate()) {
|
||||||
toast({
|
toast({
|
||||||
|
status: "error",
|
||||||
title: "Invalid Input",
|
title: "Invalid Input",
|
||||||
description: "Please fill in all fields and make sure your email is valid.",
|
description: "Please fill in all fields and make sure your email is valid.",
|
||||||
status: "error",
|
|
||||||
duration: 3000,
|
|
||||||
isClosable: true,
|
isClosable: true,
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@ -62,22 +61,35 @@ export default function LoginPage() {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// authSlice will automatically handle the response
|
// authSlice will automatically handle the response
|
||||||
const user = await login(formState).unwrap();
|
await login(formState).unwrap();
|
||||||
if (user.code === 0) navigate("/");
|
navigate("/");
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
const errTyped = err as { status: number | string; data: Wrap<void> };
|
const errTyped = err as { status: number | string; data: Wrap<void> };
|
||||||
toast({
|
toast({
|
||||||
|
status: "error",
|
||||||
title: "Error",
|
title: "Error",
|
||||||
description: errTyped.status === 200 ? errTyped.data.msg : "Oh no, there was an error!",
|
description: errTyped.status === 200 ? errTyped.data.msg : "Oh no, there was an error!",
|
||||||
status: "error",
|
|
||||||
duration: 3000,
|
|
||||||
isClosable: true,
|
isClosable: true,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const doSSOLogin = () => {
|
||||||
|
toast({
|
||||||
|
status: "error",
|
||||||
|
title: "Error",
|
||||||
|
description: "Not Implemented",
|
||||||
|
isClosable: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const formArea = (
|
const formArea = (
|
||||||
<form>
|
<form
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
void doLogin();
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Stack spacing="5">
|
<Stack spacing="5">
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<FormLabel htmlFor="email">Email</FormLabel>
|
<FormLabel htmlFor="email">Email</FormLabel>
|
||||||
@ -85,7 +97,7 @@ export default function LoginPage() {
|
|||||||
</FormControl>
|
</FormControl>
|
||||||
<PasswordField isDisabled={isLoading} onChange={handleChange} />
|
<PasswordField isDisabled={isLoading} onChange={handleChange} />
|
||||||
{/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
|
{/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
|
||||||
<Button colorScheme={fg} isLoading={isLoading} onClick={doLogin}>
|
<Button type="submit" colorScheme={fg} isLoading={isLoading} onClick={doLogin}>
|
||||||
Sign in
|
Sign in
|
||||||
</Button>
|
</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
@ -101,7 +113,7 @@ export default function LoginPage() {
|
|||||||
</Text>
|
</Text>
|
||||||
<Divider />
|
<Divider />
|
||||||
</HStack>
|
</HStack>
|
||||||
<Button colorScheme={fg2}>
|
<Button colorScheme={fg2} onClick={doSSOLogin}>
|
||||||
<img src={KeyCloakSVG} alt="KeyCloak" width="24" height="24" />
|
<img src={KeyCloakSVG} alt="KeyCloak" width="24" height="24" />
|
||||||
<Text mx={2}>Sign in with SSO</Text>
|
<Text mx={2}>Sign in with SSO</Text>
|
||||||
</Button>
|
</Button>
|
||||||
@ -111,7 +123,7 @@ export default function LoginPage() {
|
|||||||
const header = (
|
const header = (
|
||||||
<Stack spacing="6">
|
<Stack spacing="6">
|
||||||
<Center>
|
<Center>
|
||||||
<RiLoginCircleLine size={64} />
|
<RiLoginCircleLine size={72} />
|
||||||
</Center>
|
</Center>
|
||||||
<Stack spacing={{ base: "2", md: "3" }} textAlign="center">
|
<Stack spacing={{ base: "2", md: "3" }} textAlign="center">
|
||||||
<Heading>Log in to your account</Heading>
|
<Heading>Log in to your account</Heading>
|
||||||
@ -126,7 +138,7 @@ export default function LoginPage() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container maxW="lg" py={12} px={{ base: "0", sm: "8" }}>
|
<Container maxW="lg" py={4} px={{ base: "0", sm: "8" }}>
|
||||||
<Stack spacing="4">
|
<Stack spacing="4">
|
||||||
{header}
|
{header}
|
||||||
<Box
|
<Box
|
||||||
|
Loading…
Reference in New Issue
Block a user