処理中表示追加

frontend/src/pages/LoginPage.vue

@@ -4,10 +4,9 @@
       <q-page class="window-height window-width row justify-center items-center">
         <div class="column q-pa-lg">
           <div class="row">
-            <q-card square class="shadow-24" style="width:400px;height:540px;">
+            <q-card :square="false" class="shadow-24" style="width:400px;height:540px;">
               <q-card-section class="bg-primary">
                 <h4 class="text-h5 text-white q-my-md">{{ title}}</h4>
-
               </q-card-section>
               <q-card-section>
                 <q-form class="q-px-sm q-pt-xl" ref="loginForm">
@@ -31,8 +30,13 @@
               </q-card-section>
 
               <q-card-actions class="q-px-lg">
-                <q-btn unelevated size="lg" color="secondary" @click="submit" class="full-width text-white"
-                  :label="btnLabel" />
+                <q-btn :loading="loading" unelevated size="lg" color="secondary" @click="submit" class="full-width text-white"
+                  label="ログイン" >
+                  <template v-slot:loading>
+                    <q-spinner class="on-left" />
+                    ログイン中...
+                  </template>
+                </q-btn>
               </q-card-actions>
 
             </q-card>
@@ -52,13 +56,13 @@ import { useAuthStore } from 'stores/useAuthStore';
     const authStore = useAuthStore();
     const $q = useQuasar()
     const loginForm = ref(null);
+    const loading = ref(false);
     let title = ref('ログイン');
     let email = ref('');
     let password = ref('');
     let visibility = ref(false);
     let passwordFieldType = ref('password');
     let visibilityIcon = ref('visibility');
-    let btnLabel = ref('ログイン');
     const required = (val:string) => {
       return  (val && val.length > 0 || '必須項目')
     }
@@ -74,26 +78,34 @@ import { useAuthStore } from 'stores/useAuthStore';
       passwordFieldType.value = visibility.value ? 'text' : 'password'
       visibilityIcon.value =  visibility.value ? 'visibility_off' : 'visibility'
     }
-    const submit = () =>{
-      authStore.login(email.value,password.value).then((result)=>{
-        if(result)
-        {
-          $q.notify({
-            icon: 'done',
-            color: 'positive',
-            message: 'ログイン成功'
-          })
+    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: 'ログイン失敗'
-          })
-
+        else{
+            $q.notify({
+              icon: 'error',
+              color: 'negative',
+              message: 'ログイン失敗'
+            });
         }
-      });
+      }catch (error) {
+        console.error(error);
+        loading.value=false;
+        $q.notify({
+              icon: 'error',
+              color: 'negative',
+              message: 'ログイン失敗'
+        });
+      }
 
     }