first commit

2024-05-21 13:06:55 +08:00
commit a8877ab28e
33 changed files with 20839 additions and 0 deletions
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -0,0 +1,80 @@
+import { useDisclosure } from '@mantine/hooks';
+import { IconAt } from '@tabler/icons-react';
+import { Paper, Text, TextInput, PasswordInput, Button, rem} from "@mantine/core";
+import {useState} from 'react';
+import {http} from "../middleware/axiosConfig";
+import { useNavigate } from 'react-router-dom';
+
+
+const Login = () => { 
+
+    const navigate = useNavigate();
+
+    const [userField, setUserField] = useState({
+        email:"",
+        password:""
+      });
+
+    const changeFieldHandler = (e) => {
+        setUserField({
+          ...userField,
+          [e.target.email]: e.target.value
+        });
+    }
+
+    const onLogin = async (e) => {
+        try {
+            await http.get("/sanctum/csrf-cookie");
+            const res = await http.post("/api/login", {
+                email: e.email,
+                password: e.password,
+            });
+            if (res.status === 200){
+                navigate("/lists"); 
+            }
+        }
+        catch (err) {
+            console.error(err)
+            console.log("Something's Wrong!");
+        }
+    };
+
+    const icon = <IconAt style={{ width: rem(16), height: rem(16) }} />;
+    const [visible, { toggle }] = useDisclosure(false);
+
+        return (
+            <div>
+            <Paper radius="md" p="xl" withBorder>
+                <Text size="xl" fw={900} variant="gradient"
+            gradient={{ from: 'red', to: 'rgba(227, 0, 0, 1)', deg: 227 }}>WELCOME ADMIN!</Text>
+                <Text size="sm">Please login to access the Admin Account Management Site</Text>
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                        <TextInput
+                            style={{ width: '400px', marginBottom: '10px', marginTop: '15px' }}
+                            label="Email"
+                            leftSectionPointerEvents="none"
+                            leftSection={icon}
+                            withAsterisk
+                            onChange={e => changeFieldHandler(e)}
+                            placeholder="Enter your work email address"
+                    /></div>
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                        <PasswordInput
+                            style={{ width: '400px', marginBottom: '10px' }}
+                            label="Password"
+                            placeholder="Enter your Password"
+                            withAsterisk
+                            onChange={e => changeFieldHandler(e)}
+                            visible={visible}
+                            onVisibilityChange={toggle}
+                    /></div>
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                        <Button variant="filled" color="lime" style={{ margin: 25 }} onClick={e => onLogin(e)}>Log In
+                        </Button>
+                    </div>     
+            </Paper>
+            </div>
+        );
+};
+
+export default Login;