1 files changed, 36 insertions, 5 deletions
diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx
index 4f53566..4271d60 100644
--- a/client/src/components/AdminLogin.tsx
+++ b/client/src/components/AdminLogin.tsx
@@ -1,16 +1,38 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { Button, Paper, TextField, Typography } from '@mui/material';
+import {
+  Alert,
+  Button,
+  Paper,
+  Snackbar,
+  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 { Credentials } from '../models';
+import type { Credentials, StatusProps } from '../models';
+import { isFetchBaseQueryError } from '../error';
+import type { Data } from '../error';
+
+const Status = ({ error, setOpen }: StatusProps) => {
+  return isFetchBaseQueryError(error) ? (
+    <Alert severity="error" onClose={() => setOpen(false)}>
+      {(error.data as Data).message}
+    </Alert>
+  ) : (
+    <Alert severity="error" onClose={() => setOpen(false)}>
+      Admin login failed
+    </Alert>
+  );
+};
 
 function GuestLogin() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const [login] = useLoginAdminMutation();
+  const [login, { isLoading, error }] = useLoginAdminMutation();
+  const [open, setOpen] = useState<boolean>(false);
 
   const {
     register,
@@ -28,7 +50,7 @@ function GuestLogin() {
       dispatch(setAdmin(await login(data).unwrap()));
       navigate('/dashboard');
     } catch (e) {
-      console.log(e);
+      setOpen(true);
     }
   };
 
@@ -83,6 +105,15 @@ function GuestLogin() {
           Log in
         </Button>
       </Paper>
+      <Snackbar
+        open={!isLoading && open}
+        onClose={() => setOpen(false)}
+        autoHideDuration={5000}
+      >
+        <div>
+          <Status {...({ error, setOpen } as StatusProps)} />
+        </div>
+      </Snackbar>
     </form>
   );
 }