doccano/frontend/components/organisms/auth/LoginForm.vue

<template>
  <base-card
    title="Login"
    agree-text="Login"
    :disabled="!valid"
    @agree="tryLogin"
  >
    <template #content>
      <v-form
        ref="form"
        v-model="valid"
      >
        <v-text-field
          v-model="username"
          :rules="userNameRules"
          label="Login"
          name="login"
          prepend-icon="person"
          type="text"
          autofocus
        />
        <v-text-field
          id="password"
          v-model="password"
          :rules="passwordRules"
          label="Password"
          name="password"
          prepend-icon="lock"
          type="password"
        />
      </v-form>
    </template>
  </base-card>
</template>

<script>
import { userNameRules, passwordRules } from '@/rules/index'
import BaseCard from '@/components/molecules/BaseCard'

export default {
  components: {
    BaseCard
  },

  props: {
    login: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      valid: false,
      username: '',
      password: '',
      userNameRules,
      passwordRules
    }
  },

  methods: {
    validate() {
      return this.$refs.form.validate()
    },
    async tryLogin() {
      if (this.validate()) {
        await this.login({
          username: this.username,
          password: this.password
        })
        this.$router.push('/projects')
      }
    }
  }
}
</script>