feat: change notification style

src/components/Alert.jsx

@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+import { Alert as _Alert } from "@material-tailwind/react";
+
+import { DEFAULT_CONFIG } from "../hooks";
+
+export function Alert({ notifyConfig = DEFAULT_CONFIG }) {
+  return (
+    <_Alert
+      open={notifyConfig.message !== ""}
+      animate={{
+        mount: { y: 0 },
+        unmount: { y: -100 },
+      }}
+      variant={notifyConfig.config.variant}
+      color={notifyConfig.config.color}
+      className="fixed top-5 right-10 min-w-[350px] w-fit"
+    >
+      {notifyConfig.message}
+    </_Alert>
+  );
+}
+
+Alert.propTypes = {
+  notifyConfig: PropTypes.object,
+};

src/components/index.js

@@ -0,0 +1 @@
+export * from "./Alert";

src/hooks/index.js

@@ -0,0 +1 @@
+export * from "./useNotify";

src/hooks/useNotify.js

@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+export const DEFAULT_CONFIG = {
+  message: "",
+  config: {
+    variant: "ghost",
+    color: "gray",
+    duration: 2500,
+  },
+};
+
+export function useNotify() {
+  const [notifyConfig, setNotifyConfig] = useState(DEFAULT_CONFIG);
+
+  const clearNotification = async () => {
+    setTimeout(() => {
+      setNotifyConfig(DEFAULT_CONFIG);
+    }, [notifyConfig.config.duration]);
+  };
+
+  const notify = (message, updatedConfig = {}) => {
+    setNotifyConfig({
+      message,
+      config: { ...DEFAULT_CONFIG.config, ...updatedConfig },
+    });
+    clearNotification();
+  };
+
+  return [notify, notifyConfig];
+}

src/pages/login/Login.jsx

@@ -1,18 +1,24 @@
 import { GoogleAuthProvider } from "firebase/auth";
 import { ManualLoginForm } from "./ManualLoginForm";
+import { Alert } from "../../components";
+
+import { useNotify } from "../../hooks";
+import { useAuth } from "../../security/hooks";
 
 import imageLogin from "../../assets/images/form.jpg";
 import googleIcon from "../../assets/images/google.svg";
 import formekouLogo from "../../assets/images/formekou.png";
 
-import { useAuth } from "../../security/hooks";
-
-//TODO: create useNotify() hooks and gen api client to call properly the user
 export function Login() {
   const authentification = useAuth();
+  const [notify, notifyConfig] = useNotify();
 
   const loginWithGoogle = async () => {
-    await authentification.login(GoogleAuthProvider);
+    try {
+      await authentification.login(GoogleAuthProvider);
+    } catch (error) {
+      notify("Oops, An error occured, please try again !!", { color: "red" });
+    }
   };
 
   return (
@@ -42,6 +48,7 @@ export function Login() {
           <ManualLoginForm />
         </div>
       </div>
+      <Alert notifyConfig={notifyConfig} />
     </main>
   );
 }

src/pages/login/ManualLoginForm.jsx

@@ -3,91 +3,104 @@ import { useForm } from "react-hook-form";
 import { Button, Input } from "@material-tailwind/react";
 import { Email, Lock, Person } from "@mui/icons-material";
 
+import { Alert } from "../../components";
+
+import { useNotify } from "../../hooks";
 import { useAuth } from "../../security/hooks";
+
 import { postSignup } from "../../security/authProvider";
 
 export function ManualLoginForm() {
   const [isCreate, setIsCreate] = useState(false);
+  const [notify, notifyConfig] = useNotify();
   const [isLoading, setIsLoading] = useState(false);
   const { register, handleSubmit } = useForm();
   const authentification = useAuth();
 
   const loginManually = async ({ ...data }) => {
     setIsLoading(true);
     if (!isCreate) {
-      delete data.lastName;
-      await authentification.login(data);
-      setIsLoading(false);
+      try {
+        delete data.lastName;
+        await authentification.login(data);
+      } catch (error) {
+        notify("Oops, An error occured, please try again !!", { color: "red" });
+      } finally {
+        setIsLoading(false);
+      }
       return;
     }
 
     try {
       await postSignup(data);
       setIsCreate(false);
+      notify("Account created! You can now log in", { color: "green" });
     } catch (error) {
-      alert("Signup failed");
-      console.log(error);
+      notify("Oops, Signup failed, please try again !!", { color: "red" });
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <form
-      action="submit"
-      className="space-y-6 py-6"
-      onSubmit={handleSubmit(loginManually)}
-    >
-      <Input
-        required
-        type="email"
-        name="Email"
-        label="Email"
-        size="lg"
-        icon={<Email />}
-        {...register("email")}
-      />
-      <Input
-        required
-        type="password"
-        label="Password"
-        size="lg"
-        icon={<Lock />}
-        {...register("password")}
-      />
-      {isCreate ? (
+    <>
+      <form
+        action="submit"
+        className="space-y-6 py-6"
+        onSubmit={handleSubmit(loginManually)}
+      >
         <Input
           required
-          icon={<Person />}
-          type="text"
+          type="email"
+          name="Email"
+          label="Email"
           size="lg"
-          label="Lastname"
-          {...register("lastName")}
+          icon={<Email />}
+          {...register("email")}
         />
-      ) : (
+        <Input
+          required
+          type="password"
+          label="Password"
+          size="lg"
+          icon={<Lock />}
+          {...register("password")}
+        />
+        {isCreate ? (
+          <Input
+            required
+            icon={<Person />}
+            type="text"
+            size="lg"
+            label="Lastname"
+            {...register("lastName")}
+          />
+        ) : (
+          <Button
+            variant="text"
+            size="sm"
+            className="block ms-auto font-normal text-main"
+          >
+            Forgot password
+          </Button>
+        )}
+        <Button
+          loading={isLoading}
+          type="submit"
+          className="bg-main hover:bg-blue-600 w-full"
+        >
+          {isCreate ? "Create Account" : "Login"}
+        </Button>
         <Button
           variant="text"
           size="sm"
-          className="block ms-auto font-normal text-main"
+          className="block font-normal text-main"
+          onClick={() => setIsCreate((prev) => !prev)}
         >
-          Forgot password
+          {isCreate ? "Already have an account" : "Create new Account"}
         </Button>
-      )}
-      <Button
-        loading={isLoading}
-        type="submit"
-        className="bg-main hover:bg-blue-600 w-full"
-      >
-        {isCreate ? "Create Account" : "Login"}
-      </Button>
-      <Button
-        variant="text"
-        size="sm"
-        className="block font-normal text-main"
-        onClick={() => setIsCreate((prev) => !prev)}
-      >
-        {isCreate ? "Already have an account" : "Create new Account"}
-      </Button>
-    </form>
+      </form>
+      <Alert notifyConfig={notifyConfig} />
+    </>
   );
 }

src/security/hooks/useAuth.js

@@ -17,16 +17,10 @@ export function useAuth() {
   };
 
   const login = async (provider) => {
-    try {
-      await authFirebase.login(provider);
-      const userConnected = await getWhoAmi();
-      setUser(userConnected);
-      navigate("/profile");
-    } catch (error) {
-      //TODO: show notification properly
-      alert("Connexion failed");
-      console.log(error);
-    }
+    await authFirebase.login(provider);
+    const userConnected = await getWhoAmi();
+    setUser(userConnected);
+    navigate("/profile");
   };
 
   return { user, setUser, isConnected, logout, login };