From 92e7168f8a7310b2f16fb259cb0a64ecb1984158 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Sat, 25 Nov 2023 22:47:10 +0000
Subject: [PATCH] chore: improve reset password alert

---
 components/ResetPassword/index.tsx  | 34 +++++++++++++++++++++++++++++
 layout/Attendee/Profile/Profile.tsx | 21 ++----------------
 package-lock.json                   | 15 +++++++++++++
 package.json                        |  1 +
 4 files changed, 52 insertions(+), 19 deletions(-)
 create mode 100644 components/ResetPassword/index.tsx

diff --git a/components/ResetPassword/index.tsx b/components/ResetPassword/index.tsx
new file mode 100644
index 00000000..7f0a252d
--- /dev/null
+++ b/components/ResetPassword/index.tsx
@@ -0,0 +1,34 @@
+import { resetPassword } from "@lib/api";
+import Swal from "sweetalert2";
+
+const onResetPassword = (user: any) => {
+  resetPassword(user.email)
+    .then((_) =>
+      Swal.fire({
+        icon: "success",
+        title: "Password Reset",
+        text: "An email has been sent to your account for you to recover your password!",
+      })
+    )
+    .catch((_) => {
+      Swal.fire({
+        icon: "error",
+        title: "Oops...",
+        text: "Something went wrong!",
+      });
+    });
+};
+
+export default function ResetPassword(user) {
+  return (
+    <button
+      className="inline-block h-auto pl-6 pb-5 text-quinary underline"
+      onClick={(e) => {
+        e.preventDefault();
+        onResetPassword(user);
+      }}
+    >
+      Reset Password
+    </button>
+  );
+}
diff --git a/layout/Attendee/Profile/Profile.tsx b/layout/Attendee/Profile/Profile.tsx
index 9aa249b5..fca4363a 100644
--- a/layout/Attendee/Profile/Profile.tsx
+++ b/layout/Attendee/Profile/Profile.tsx
@@ -7,6 +7,7 @@ import Input from "@components/Input";
 
 import Layout from "@components/Layout";
 import Heading from "@components/Heading";
+import ResetPassword from "@components/ResetPassword";
 
 import { CheckpointTracker, CodeInput } from "./components";
 import CVInput from "./components/CVInput";
@@ -46,16 +47,6 @@ function Profile() {
 
   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();
@@ -152,15 +143,7 @@ function Profile() {
               onChange={(e) => setUsername(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>
 
diff --git a/package-lock.json b/package-lock.json
index 7db802ec..c9e45a6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "react-map-gl": "^6.1.17",
         "react-p5": "^1.3.21",
         "sharp": "^0.30.0",
+        "sweetalert2": "^11.10.1",
         "typewriter-effect": "^2.21.0"
       },
       "devDependencies": {
@@ -8433,6 +8434,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",
@@ -15321,6 +15331,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",
diff --git a/package.json b/package.json
index 4bb17e14..96c31658 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "react-map-gl": "^6.1.17",
     "react-p5": "^1.3.21",
     "sharp": "^0.30.0",
+    "sweetalert2": "^11.10.1",
     "typewriter-effect": "^2.21.0"
   },
   "devDependencies": {