feat: refine LoginPage

src/pages/LoginPage.tsx

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