From d31d3d0910cc11b86fe698c394ed752038de0a65 Mon Sep 17 00:00:00 2001
From: xue jiahao <xuejiahao@alicorns.co.jp>
Date: Mon, 13 Jan 2025 15:02:35 +0800
Subject: [PATCH] fix login validator

---
 frontend/src/pages/LoginPage.vue | 66 +++++++++++++++++---------------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index 971bb2d..46580db 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -48,14 +48,14 @@
   </q-layout>>
 </template>
 <script setup lang="ts">
-import { useQuasar } from 'quasar'
+import { useQuasar, QForm } from 'quasar'
 // import { useRouter } from 'vue-router';
 import { ref } from 'vue';
 // import { Auth }  from '../control/auth'
 import { useAuthStore } from 'stores/useAuthStore';
     const authStore = useAuthStore();
     const $q = useQuasar()
-    const loginForm = ref(null);
+    const loginForm = ref<QForm>();
     const loading = ref(false);
     let title = ref('ログイン');
     let email = ref('');
@@ -78,35 +78,41 @@ import { useAuthStore } from 'stores/useAuthStore';
       passwordFieldType.value = visibility.value ? 'text' : 'password'
       visibilityIcon.value =  visibility.value ? 'visibility_off' : 'visibility'
     }
-    const submit = async () =>{
-      loading.value=true;
-      try {
-        const result = await authStore.login(email.value,password.value);
-        loading.value=false;
-        if(result){
-            $q.notify({
-              icon: 'done',
-              color: 'positive',
-              message: 'ログイン成功'
-            });
-        }
-        else{
-            $q.notify({
-              icon: 'error',
-              color: 'negative',
-              message: 'ログイン失敗'
-            });
-        }
-      }catch (error) {
-        console.error(error);
-        loading.value=false;
-        $q.notify({
-              icon: 'error',
-              color: 'negative',
-              message: 'ログイン失敗'
-        });
+    const submit = () => {
+      if (!loginForm.value) {
+        return;
       }
-
+      loginForm.value.validate().then(async (success) => {
+        if (success) {
+          loading.value=true;
+          try {
+            const result = await authStore.login(email.value,password.value);
+            loading.value=false;
+            if(result){
+                $q.notify({
+                  icon: 'done',
+                  color: 'positive',
+                  message: 'ログイン成功'
+                });
+            }
+            else{
+                $q.notify({
+                  icon: 'error',
+                  color: 'negative',
+                  message: 'ログイン失敗'
+                });
+            }
+          } catch (error) {
+            console.error(error);
+            loading.value=false;
+            $q.notify({
+                  icon: 'error',
+                  color: 'negative',
+                  message: 'ログイン失敗'
+            });
+          }
+        }
+      })
     }
 
 </script>