chore: improve reset password alert

components/Input/index.tsx

@@ -34,7 +34,7 @@ export function InputBase({
       </label>
       <div
         className={`text-iregular mt-2 flex items-center  ${
-          enabled == false ? "text-gray-500" : textColor 
+          enabled == false ? "text-gray-500" : textColor
         } ${backColor} appearance-none rounded-full border border-gray-300 px-3 py-2 pl-6 placeholder-gray-400 shadow-sm sm:text-sm`}
       >
         {children}

components/Notification/Notification.tsx

@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+
+interface INotificationProps {
+  title: string;
+}
+
+export default function Notification({ title }: INotificationProps) {
+  console.log("Notification");
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!visible) {
+    return null;
+  }
+
+  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={() => setVisible(false)}
+                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>
+  );
+}

components/Notification/index.tsx

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

components/ResetPassword/index.tsx

@@ -0,0 +1,40 @@
+import { useState, useEffect } 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);
+      });
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowNotification(false);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  });
+
+  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" />}
+    </>
+  );
+}

components/Select/index.tsx

@@ -50,7 +50,9 @@ export default function Select({
           {...rest}
         >
           {options.map((option) => (
-            <option key={option.key} value={option.key}>{option.name}</option>
+            <option key={option.key} value={option.key}>
+              {option.name}
+            </option>
           ))}
         </select>
         <ChevronDownIcon

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();
@@ -173,15 +164,7 @@ function Profile({ courses }) {
               onChange={(e) => setCourse(e.currentTarget.value)}
             />
 
-            <button
-              className="inline-block h-auto pl-6 pb-5 text-quinary underline"
-              onClick={(e) => {
-                e.preventDefault();
-                onResetPassword();
-              }}
-            >
-              Reset Password
-            </button>
+            <ResetPassword user={user} />
           </Form>
         </div>