Add admin dashboard

1 files changed, 90 insertions, 0 deletions

diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx
new file mode 100644
index 0000000..d9c1260
--- /dev/null
+++ b/client/src/components/AdminLogin.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { Button, Paper, TextField, Typography } from '@mui/material';
+import { useForm } from 'react-hook-form';
+import { setAdmin } from '../slices/auth/adminSlice';
+import { useLoginAdminMutation } from '../slices/api/adminSlice';
+import type { AdminLoginRequest } from '../slices/api/adminSlice';
+
+function GuestLogin() {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const [login] = useLoginAdminMutation();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<AdminLoginRequest>({
+    defaultValues: {
+      username: '',
+      password: '',
+    },
+  });
+
+  const onSubmit = async (data: AdminLoginRequest) => {
+    try {
+      dispatch(setAdmin(await login(data).unwrap()));
+      navigate('/dashboard');
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  return (
+    <form
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'start',
+      }}
+      noValidate
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <Paper
+        elevation={3}
+        sx={{
+          '&:hover': { boxShadow: 8 },
+          width: { xs: '90%', md: 400 },
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          mt: 16,
+          p: 2,
+          borderRadius: '8px',
+        }}
+      >
+        <Typography variant="h6">Admin Login</Typography>
+        <TextField
+          label="Username"
+          variant="outlined"
+          margin="normal"
+          fullWidth
+          error={!!errors.username}
+          helperText={errors.username?.message}
+          required
+          {...register('username', { required: 'This field is required' })}
+        />
+        <TextField
+          label="Password"
+          variant="outlined"
+          margin="normal"
+          fullWidth
+          error={!!errors.password}
+          helperText={errors.password?.message}
+          required
+          {...register('password', { required: 'This field is required' })}
+        />
+        <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}>
+          Log in
+        </Button>
+      </Paper>
+    </form>
+  );
+}
+
+export default GuestLogin;