chore: improve reset password alert (#583)

* chore: improve reset password alert

* chore: implement suggestions

* fix: implement suggestions

components/Notification/Notification.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect } from "react";
+
+interface INotificationProps {
+  title: string;
+  onClose: () => void;
+}
+
+const Notification: React.FC<INotificationProps> = ({ title, onClose }) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose();
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div className="fixed right-4 top-0 z-50 h-16 w-72">
+      <div className="pointer-events-auto min-w-full overflow-hidden rounded-lg bg-quinary shadow-lg ring-1 ring-black ring-opacity-5 ">
+        <div className="min-w-full p-4 ">
+          <div className="flex items-start">
+            <div className="flex-shrink-0"></div>
+            <div className="ml-3 w-0 flex-1 pt-0.5">
+              <p className="text-md font-medium text-white">{title}</p>
+            </div>
+            <div className="ml-4 flex flex-shrink-0">
+              <button
+                onClick={onClose}
+                className="inline-flex rounded-md bg-quinary text-white hover:text-primary focus:outline-none"
+              >
+                <span className="sr-only">Close</span>
+                <span className="h-5 w-5">X</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Notification;

components/Notification/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Notification";

components/ResetPassword/index.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { resetPassword } from "@lib/api";
+import Notification from "@components/Notification";
+
+export default function ResetPassword(user: any) {
+  const [showNotification, setShowNotification] = useState(false);
+
+  const onResetPassword = (user: any) => {
+    resetPassword(user.email)
+      .then((_) => {
+        setShowNotification(true);
+      })
+      .catch((_) => {
+        setShowNotification(false);
+      });
+  };
+
+  const handleNotificationClose = () => {
+    setShowNotification(false);
+  };
+
+  return (
+    <>
+      <button
+        className="inline-block h-auto pl-6 pb-5 text-quinary underline"
+        onClick={(e) => {
+          e.preventDefault();
+          onResetPassword(user);
+        }}
+      >
+        Reset Password
+      </button>
+      {showNotification && (
+        <Notification
+          title="Password reset email sent"
+          onClose={handleNotificationClose}
+        />
+      )}
+    </>
+  );
+}

layout/Attendee/Profile/Profile.tsx

@@ -9,6 +9,7 @@ import Select from "@components/Select";
 import Layout from "@components/Layout";
 import Button from "@components/Button";
 import Heading from "@components/Heading";
+import ResetPassword from "@components/ResetPassword";
 
 import { CheckpointTracker, CodeInput } from "./components";
 import CVInput from "./components/CVInput";
@@ -54,16 +55,6 @@ function Profile({ courses }) {
 
   const levelEntries = [10, 30, 60, 100, 150];
 
-  const onResetPassword = () => {
-    resetPassword(user.email)
-      .then((_) =>
-        alert(
-          "An email has been sent to your account for you to recover your password"
-        )
-      )
-      .catch((_) => alert("An error occured"));
-  };
-
   const handleSubmitForm = (e: React.FormEvent) => {
     e.preventDefault();
     const formData = new FormData();
@@ -172,16 +163,7 @@ function Profile({ courses }) {
               enabled={editing}
               onChange={(e) => setCourse(e.currentTarget.value)}
             />
-
-            <button
-              className="inline-block h-auto select-none pl-6 pb-5 text-quinary underline"
-              onClick={(e) => {
-                e.preventDefault();
-                onResetPassword();
-              }}
-            >
-              Reset Password
-            </button>
+            <ResetPassword user={user} />
           </Form>
         </div>