From 4d8ac1d9a4713851567b3966a8615ae8e9185c91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?=
 <93675410+MarioRodrigues10@users.noreply.github.com>
Date: Tue, 23 Jan 2024 14:07:05 +0000
Subject: [PATCH] chore: improve reset password alert (#583)

* chore: improve reset password alert

* chore: implement suggestions

* fix: implement suggestions
---
 components/Notification/Notification.tsx | 42 ++++++++++++++++++++++++
 components/Notification/index.tsx        |  1 +
 components/ResetPassword/index.tsx       | 41 +++++++++++++++++++++++
 layout/Attendee/Profile/Profile.tsx      | 22 ++-----------
 package-lock.json                        | 14 ++++++++
 5 files changed, 100 insertions(+), 20 deletions(-)
 create mode 100644 components/Notification/Notification.tsx
 create mode 100644 components/Notification/index.tsx
 create mode 100644 components/ResetPassword/index.tsx

diff --git a/components/Notification/Notification.tsx b/components/Notification/Notification.tsx
new file mode 100644
index 00000000..9a6a18a3
--- /dev/null
+++ b/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;
diff --git a/components/Notification/index.tsx b/components/Notification/index.tsx
new file mode 100644
index 00000000..4dfbd4b0
--- /dev/null
+++ b/components/Notification/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Notification";
diff --git a/components/ResetPassword/index.tsx b/components/ResetPassword/index.tsx
new file mode 100644
index 00000000..9e0ba863
--- /dev/null
+++ b/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}
+        />
+      )}
+    </>
+  );
+}
diff --git a/layout/Attendee/Profile/Profile.tsx b/layout/Attendee/Profile/Profile.tsx
index 4464b19f..e02f00ee 100644
--- a/layout/Attendee/Profile/Profile.tsx
+++ b/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>
 
diff --git a/package-lock.json b/package-lock.json
index 65e72624..1df722c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8475,6 +8475,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.10.1",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.10.1.tgz",
+      "integrity": "sha512-qu145oBuFfjYr5yZW9OSdG6YmRxDf8CnkgT/sXMfrXGe+asFy2imC2vlaLQ/L/naZ/JZna1MPAY56G4qYM0VUQ==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.6.tgz",
@@ -15398,6 +15407,11 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "sweetalert2": {
+      "version": "11.10.1",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.10.1.tgz",
+      "integrity": "sha512-qu145oBuFfjYr5yZW9OSdG6YmRxDf8CnkgT/sXMfrXGe+asFy2imC2vlaLQ/L/naZ/JZna1MPAY56G4qYM0VUQ=="
+    },
     "tailwindcss": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.6.tgz",