api login v3

loginv3/components/dekstop.vue

@@ -37,15 +37,17 @@
                       </p>
                     </v-sheet>
                   </div>
+                  <!-- bg-primary-lighten text-primary  -->
+                  <!-- icon="mdi-information-slab-circle-outline" -->
                   <v-alert
-                    color="primary"
                     density="compact"
-                    type="info"
-                    style="width: 100% !important;"
-                    class="bg-primary-lighten text-primary mt-4 mb-3 w-100"
-                    text="Enter the registered account"
+                    :text="alert.message"
+                    :type="alert.type"
+                    class="mt-4 mb-3 w-100"
+                    variant="tonal"
                   >
                   </v-alert>
+
                   <v-text-field
                     class="mt-3"
                     v-model="email"
@@ -87,7 +89,10 @@
                     >
                       {{ $t("message.login") }}
                       <template v-slot:loader>
-                        <v-progress-linear indeterminate></v-progress-linear>
+                        <!-- <v-progress-linear indeterminate></v-progress-linear> -->
+                        <v-progress-circular
+                          indeterminate
+                        ></v-progress-circular>
                       </template>
                     </v-btn>
                   </div>
@@ -111,8 +116,11 @@
     },
     computed: {
       // Akses state dari store
-      count() {
-        return this.$store.state.login.count;
+      loading() {
+        return this.$store.state.login.loading;
+      },
+      alert() {
+        return this.$store.state.login.alert;
       },
       email: {
         get() {
@@ -133,6 +141,9 @@
     },
     methods: {
       // Dispatch action ke store
+      login() {
+        this.$store.dispatch("login/login");
+      },
       increment() {
         this.$store.dispatch("increment");
       },

loginv3/components/login.vue

@@ -18,6 +18,7 @@
       "mobile-component": MobileComponent,
       "dekstop-component": DekstopComponent,
     },
+    mounted() {},
     data() {
       return {
         visible: false,

loginv3/components/mobile.vue

@@ -27,12 +27,11 @@
             </v-sheet>
           </div>
           <v-alert
-            color="primary"
             density="compact"
-            type="info"
-            style="width: 100% !important;"
-            class="bg-primary-lighten text-primary mt-4 mb-3 w-100"
-            text="Enter the registered account"
+            :text="alert.message"
+            :type="alert.type"
+            class="mt-4 mb-3 w-100"
+            variant="tonal"
           >
           </v-alert>
           <v-text-field
@@ -76,7 +75,7 @@
             >
               {{ $t("message.login") }}
               <template v-slot:loader>
-                <v-progress-linear indeterminate></v-progress-linear>
+                <v-progress-circular indeterminate></v-progress-circular>
               </template>
             </v-btn>
           </div>
@@ -96,8 +95,11 @@
     },
     computed: {
       // Akses state dari store
-      count() {
-        return this.$store.state.login.count;
+      loading() {
+        return this.$store.state.login.loading;
+      },
+      alert() {
+        return this.$store.state.login.alert;
       },
       email: {
         get() {
@@ -118,6 +120,9 @@
     },
     methods: {
       // Dispatch action ke store
+      login() {
+        this.$store.dispatch("login/login");
+      },
       increment() {
         this.$store.dispatch("increment");
       },