From 5f4e57532ca6c2f83e8e174cef36a41610fd0606 Mon Sep 17 00:00:00 2001
From: Lapor Chen <31620109+laporchen@users.noreply.github.com>
Date: Thu, 12 Sep 2024 16:48:21 +0800
Subject: [PATCH] feat: finish password reset page

* add api
* add error alert
* add success state
---
 src/i18n/en.json             |  5 +++--
 src/i18n/zh-tw.json          |  3 ++-
 src/pages/password_reset.vue | 42 ++++++++++++++++++++++++++++++------
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 76b313f..6268337 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -410,7 +410,8 @@
     "email": "Email address",
     "status": {
       "error": "Failed to send an email to you, we cannot find this email.",
-      "success": "Success, please check your inbox."
-    }
+      "success": "Email sent, please check your inbox."
+    },
+    "return-home": "Return Home"
   }
 }
diff --git a/src/i18n/zh-tw.json b/src/i18n/zh-tw.json
index 5b03092..757c381 100644
--- a/src/i18n/zh-tw.json
+++ b/src/i18n/zh-tw.json
@@ -410,6 +410,7 @@
     "status": {
       "error": "找不到該信箱。",
       "success": "發送成功，請檢查你的電子信箱。"
-    }
+    },
+    "return-home": "回到首頁"
   }
 }
diff --git a/src/pages/password_reset.vue b/src/pages/password_reset.vue
index 5dcec57..b4069be 100644
--- a/src/pages/password_reset.vue
+++ b/src/pages/password_reset.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import { useTitle } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 import useVuelidate from "@vuelidate/core";
 import { email } from "@vuelidate/validators";
+import api from "@/models/api";
+
+const router = useRouter();
 
 const rules = {
   email: { email },
@@ -16,9 +20,22 @@ const v$ = useVuelidate(rules, form);
 
 const { t } = useI18n();
 
+const showError = ref(false);
+const success = ref(false);
+
 const handleSubmit = async () => {
   if (!v$.value.$validate()) return;
-  // todo
+
+  const checkEmail = await api.Auth.checkEmail({ email: form.email });
+  if (checkEmail.data.valid === 1) {
+    showError.value = true;
+    return;
+  }
+
+  const res = await api.Auth.sendRecoveryEmail({ email: form.email });
+  if (res.statusText === "OK") {
+    success.value = true;
+  }
 };
 
 useTitle("Forgot Password");
@@ -28,16 +45,19 @@ useTitle("Forgot Password");
   <div class="mx-4 flex max-w-4xl flex-col items-center justify-center gap-4 p-4 md:mx-auto">
     <h1 class="my-12 text-center text-4xl font-bold">{{ t("password_reset.forgot-password") }}</h1>
     <div class="card w-96 max-w-full bg-base-200 shadow-xl">
-      <div class="card-body">
-        <div class="card-title">
+      <div v-if="!success" class="card-body">
+        <div class="card-title flex-col">
+          <div v-if="showError" class="alert alert-error text-base">
+            {{ t("password_reset.status.error") }}
+            <div class="flex-none">
+              <button @click="showError = false" class="btn-ghost btn-sm btn-circle btn">X</button>
+            </div>
+          </div>
           <span class="text-base font-semibold">
             {{ t("password_reset.description") }}
           </span>
         </div>
         <div class="form-control">
-          <label class="label">
-            <span class="label-text">{{ $t("password_reset.email") }}</span>
-          </label>
           <input
             v-model="v$.email.$model"
             type="email"
@@ -55,6 +75,14 @@ useTitle("Forgot Password");
           </button>
         </div>
       </div>
+      <div v-else class="card-body">
+        {{ t("password_reset.status.success") }}
+        <div class="card-actions justify-center">
+          <button class="btn-primary btn" @click="() => router.push('/')">
+            {{ t("password_reset.return-home") }}
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>