chore: improve reset password alert

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>
+  );
+}

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>
 

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": {