Display error (#123)

* add error alert when trying to login

* Add Sidebar errors

frontend/src/components/nav/Sidebar.tsx

@@ -1,3 +1,4 @@
+import { useAlertQueue } from "hooks/alerts";
 import { api } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { FormEvent, useEffect, useState } from "react";
@@ -10,6 +11,8 @@ interface Props {
 }
 
 const Sidebar = ({ show, onHide }: Props) => {
+  const { addAlert } = useAlertQueue();
+
   const [needToCall, setNeedToCall] = useState<boolean>(true);
   const [email, setEmail] = useState<string>("");
   const [verified, setVerified] = useState<boolean>(false);
@@ -27,7 +30,14 @@ const Sidebar = ({ show, onHide }: Props) => {
     try {
       await auth_api.send_verify_email();
     } catch (error) {
-      console.error(error);
+      if (error instanceof Error) {
+        addAlert(error.message, "error");
+      } else {
+        addAlert(
+          "Unexpected error when trying to send verification email",
+          "error",
+        );
+      }
     }
   };
 
@@ -37,7 +47,11 @@ const Sidebar = ({ show, onHide }: Props) => {
       await auth_api.send_change_email(newEmail);
       setChangeEmailSuccess(true);
     } catch (error) {
-      console.error(error);
+      if (error instanceof Error) {
+        addAlert(error.message, "error");
+      } else {
+        addAlert("Unexpected error when trying to change email", "error");
+      }
     }
   };
 
@@ -47,7 +61,11 @@ const Sidebar = ({ show, onHide }: Props) => {
       await auth_api.change_password(oldPassword, newPassword);
       setChangePasswordSuccess(true);
     } catch (error) {
-      console.error(error);
+      if (error instanceof Error) {
+        addAlert(error.message, "error");
+      } else {
+        addAlert("Unexpected error when trying to change password", "error");
+      }
     }
   };
 

frontend/src/pages/Login.tsx

@@ -1,3 +1,4 @@
+import { useAlertQueue } from "hooks/alerts";
 import { api } from "hooks/api";
 import { setLocalStorageAuth, useAuthentication } from "hooks/auth";
 import { FormEvent, useState } from "react";
@@ -8,6 +9,8 @@ const Login = () => {
   const auth = useAuthentication();
   const auth_api = new api(auth.api);
 
+  const { addAlert } = useAlertQueue();
+
   const navigate = useNavigate();
 
   const [password, setPassword] = useState<string>("");
@@ -20,7 +23,11 @@ const Login = () => {
       setLocalStorageAuth(email);
       navigate("/");
     } catch (err) {
-      console.error(err);
+      if (err instanceof Error) {
+        addAlert(err.message, "error");
+      } else {
+        addAlert("Unexpected error when trying to log in", "error");
+      }
     }
   };