feat: update front

assets/pages/DashboardPage.tsx

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

assets/pages/LandingPage.tsx

@@ -1,32 +1,14 @@
 import * as React from 'react';
-import {PaletteMode} from '@mui/material';
-import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
-import {createTheme, ThemeProvider} from '@mui/material/styles';
-import AppAppBar from '../components/AppAppBar';
 import Hero from '../components/Hero';
 import Highlights from '../components/Highlights';
 import FAQ from '../components/FAQ';
 import Footer from '../components/Footer';
 
-interface ToggleCustomThemeProps {
-    showCustomTheme: Boolean;
-    toggleCustomTheme: () => void;
-}
-
 export default function Index() {
-    const [mode, setMode] = React.useState<PaletteMode>('light');
-    const defaultTheme = createTheme({palette: {mode}});
-
-    const toggleColorMode = () => {
-        setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
-    };
-
     return (
-        <ThemeProvider theme={defaultTheme}>
-            <CssBaseline/>
-            <AppAppBar mode={mode} toggleColorMode={toggleColorMode}/>
+        <>
             <Hero/>
             <Box sx={{bgcolor: 'background.default'}}>
                 <Divider/>
@@ -36,6 +18,6 @@ export default function Index() {
                 <Divider/>
                 <Footer/>
             </Box>
-        </ThemeProvider>
+        </>
     );
 }

assets/pages/LoginPage.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Footer from "../components/Footer";
+import Link from "@mui/material/Link";
+import {login} from "../utils/api";
+import {useNavigate} from "react-router-dom";
+
+interface Props {
+    setIsAuthenticated: (val: boolean) => void
+    isAuthenticated: boolean
+}
+
+export default function LoginPage({setIsAuthenticated, isAuthenticated}: Props) {
+    const navigate = useNavigate();
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        const data = new FormData(event.currentTarget);
+
+        try {
+            await login(data.get('email') as string, data.get('password') as string);
+            setIsAuthenticated(true)
+
+            navigate('/dashboard');
+
+        } catch (e) {
+            //TODO: handle error
+            setIsAuthenticated(false)
+        }
+    };
+
+    return (
+        <>
+            <Container component="main" maxWidth="xs">
+                <Box
+                    sx={{
+                        marginTop: 20,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Avatar sx={{m: 1, bgcolor: 'secondary.main'}}>
+                        <LockOutlinedIcon/>
+                    </Avatar>
+                    <Typography component="h1" variant="h5">
+                        Sign in
+                    </Typography>
+                    <Box component="form" onSubmit={handleSubmit} noValidate sx={{mt: 1}}>
+                        <TextField
+                            margin="normal"
+                            required
+                            fullWidth
+                            id="email"
+                            label="Email Address"
+                            name="email"
+                            autoComplete="email"
+                            autoFocus
+                        />
+                        <TextField
+                            margin="normal"
+                            required
+                            fullWidth
+                            name="password"
+                            label="Password"
+                            type="password"
+                            id="password"
+                            autoComplete="current-password"
+                        />
+                        <Button
+                            type="submit"
+                            fullWidth
+                            variant="contained"
+                            sx={{mt: 3}}
+                        >
+                            Sign In
+                        </Button>
+
+                    </Box>
+                </Box>
+                <Link href="/login/oauth">
+                    <Button
+                        type="button"
+                        fullWidth
+                        color='secondary'
+                        variant="contained"
+                        sx={{mt: 3, mb: 2}}
+                    >
+                        Single Sign-On
+                    </Button>
+                </Link>
+                <Footer/>
+            </Container>
+        </>
+    );
+}

assets/pages/TextPage.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Container from "@mui/material/Container";
+
+interface Props {
+    content: string
+}
+
+export default function Index({content}: Props) {
+    return (
+        <>
+            <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',
+                        justifyContent: 'space-between',
+                        pt: {xs: 4, sm: 8},
+                        width: '100%',
+                        borderTop: '1px solid',
+                        borderColor: 'divider',
+                    }}
+                >
+                    <div dangerouslySetInnerHTML={{__html: content}}></div>
+                </Box>
+            </Container>
+        </>
+    )
+
+}