feat: update front

assets/pages/DashboardPage.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 
 
-const DashboardPage = () => {
+export default function DashboardPage() {
     return (
         <>
             <p>Dashboard</p>
         </>
     );
 };
-
-export default DashboardPage;

assets/pages/LandingPage.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-import Hero from '../components/Hero';
-import Highlights from '../components/Highlights';
-import FAQ from '../components/FAQ';
-import Footer from '../components/Footer';
-
-export default function Index() {
-    return (
-        <>
-            <Hero/>
-            <Box sx={{bgcolor: 'background.default'}}>
-                <Divider/>
-                <Highlights/>
-                <Divider/>
-                <FAQ/>
-                <Divider/>
-                <Footer/>
-            </Box>
-        </>
-    );
-}

assets/pages/LoginPage.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {useState} from 'react';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
@@ -10,28 +11,28 @@ import Footer from "../components/Footer";
 import Link from "@mui/material/Link";
 import {login} from "../utils/api";
 import {useNavigate} from "react-router-dom";
+import {Alert} from "@mui/material";
 
 interface Props {
     setIsAuthenticated: (val: boolean) => void
-    isAuthenticated: boolean
 }
 
-export default function LoginPage({setIsAuthenticated, isAuthenticated}: Props) {
-    const navigate = useNavigate();
+export default function LoginPage({setIsAuthenticated}: Props) {
+    const navigate = useNavigate()
+
+    const [error, setError] = useState<string>('')
+    const [credentials, setCredentials] = useState({email: "", password: ""})
 
     const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-        const data = new FormData(event.currentTarget);
-
+        event.preventDefault()
         try {
-            await login(data.get('email') as string, data.get('password') as string);
+            await login(credentials.email, credentials.password);
             setIsAuthenticated(true)
+            navigate('/');
 
-            navigate('/dashboard');
-
-        } catch (e) {
-            //TODO: handle error
-            setIsAuthenticated(false)
+        } catch (e: any) {
+            setCredentials({email: "", password: ""})
+            setError(e.response.data.message)
         }
     };
 
@@ -53,6 +54,9 @@ export default function LoginPage({setIsAuthenticated, isAuthenticated}: Props)
                         Sign in
                     </Typography>
                     <Box component="form" onSubmit={handleSubmit} noValidate sx={{mt: 1}}>
+                        {
+                            error !== "" && <Alert variant="outlined" severity="error">{error}</Alert>
+                        }
                         <TextField
                             margin="normal"
                             required
@@ -62,6 +66,8 @@ export default function LoginPage({setIsAuthenticated, isAuthenticated}: Props)
                             name="email"
                             autoComplete="email"
                             autoFocus
+                            value={credentials.email}
+                            onChange={(e) => setCredentials({...credentials, email: e.currentTarget.value})}
                         />
                         <TextField
                             margin="normal"
@@ -71,7 +77,9 @@ export default function LoginPage({setIsAuthenticated, isAuthenticated}: Props)
                             label="Password"
                             type="password"
                             id="password"
+                            value={credentials.password}
                             autoComplete="current-password"
+                            onChange={(e) => setCredentials({...credentials, password: e.currentTarget.value})}
                         />
                         <Button
                             type="submit"

assets/pages/TextPage.tsx

@@ -8,31 +8,29 @@ interface Props {
 
 export default function Index({content}: Props) {
     return (
-        <>
-            <Container
+        <Container
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: {xs: 4, sm: 8},
+                py: {xs: 8, sm: 10},
+                textAlign: {sm: 'center', md: 'left'},
+            }}
+        >
+            <Box
                 sx={{
                     display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    gap: {xs: 4, sm: 8},
-                    py: {xs: 8, sm: 10},
-                    textAlign: {sm: 'center', md: 'left'},
+                    justifyContent: 'space-between',
+                    pt: {xs: 4, sm: 8},
+                    width: '100%',
+                    borderTop: '1px solid',
+                    borderColor: 'divider',
                 }}
             >
-                <Box
-                    sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        pt: {xs: 4, sm: 8},
-                        width: '100%',
-                        borderTop: '1px solid',
-                        borderColor: 'divider',
-                    }}
-                >
-                    <div dangerouslySetInnerHTML={{__html: content}}></div>
-                </Box>
-            </Container>
-        </>
+                <div dangerouslySetInnerHTML={{__html: content}}></div>
+            </Box>
+        </Container>
     )
 
 }