Move auth component

frontend/components/organisms/auth/LoginForm.vue → frontend/components/auth/FormLogin.vue

@@ -6,10 +6,7 @@
     @agree="tryLogin"
   >
     <template #content>
-      <v-form
-        ref="form"
-        v-model="valid"
-      >
+      <v-form v-model="valid">
         <v-alert
           v-show="showError"
           v-model="showError"
@@ -43,11 +40,12 @@
   </base-card>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import { userNameRules, passwordRules } from '@/rules/index'
-import BaseCard from '@/components/molecules/BaseCard'
+import BaseCard from '@/components/molecules/BaseCard.vue'
 
-export default {
+export default Vue.extend({
   components: {
     BaseCard
   },
@@ -55,7 +53,7 @@ export default {
   props: {
     login: {
       type: Function,
-      default: () => {}
+      default: (username: string, password: string) => Promise
     }
   },
   data() {
@@ -70,23 +68,18 @@ export default {
   },
 
   methods: {
-    validate() {
-      return this.$refs.form.validate()
-    },
     tryLogin() {
-      if (this.validate()) {
-        this.login({
-          username: this.username,
-          password: this.password
+      this.login({
+        username: this.username,
+        password: this.password
+      })
+        .then(() => {
+          this.$router.push(this.localePath('/projects'))
+        })
+        .catch(() => {
+          this.showError = true
         })
-          .then((result) => {
-            this.$router.push(this.localePath('/projects'))
-          })
-          .catch(() => {
-            this.showError = true
-          })
-      }
     }
   }
-}
+})
 </script>

frontend/pages/auth.vue

@@ -4,7 +4,7 @@
       <v-container class="fill-height" fluid>
         <v-row align="center" justify="center">
           <v-col cols="12" sm="8" md="4">
-            <login-form
+            <form-login
               :login="authenticateUser"
             />
           </v-col>
@@ -14,17 +14,18 @@
   </v-app>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import { mapActions } from 'vuex'
-import LoginForm from '@/components/organisms/auth/LoginForm'
+import FormLogin from '@/components/auth/FormLogin.vue'
 
-export default {
+export default Vue.extend({
   components: {
-    LoginForm
+    FormLogin
   },
 
   methods: {
     ...mapActions('auth', ['authenticateUser'])
   }
-}
+})
 </script>