vuetify login dialog

// App.vue
<template>
  <v-app>
    <v-toolbar app>
      <v-toolbar-title class="headline text-uppercase">
        <span>{{ title }}</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn flat @click="reglogModal = true">
        <span class="mr-2">Masuk/Daftar</span>
      </v-btn>
    </v-toolbar>

    <LoginRegisterModal v-model="reglogModal" />

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import LoginRegisterModal from './components/LoginRegisterModal'

export default {
  name: 'App',
  components: {
    HelloWorld,
    LoginRegisterModal
  },
  data () {
    return {
      title: 'bimbelX',
      reglogModal: false
    }
  }
}
</script>

// LoginRegisterModal.vue
<template>
  <v-dialog
    role="dialog"
    :value="value"
    @input="toggleDialog($event)"
    max-width="450px"
    :persistent="loading"
  >
    <v-card v-if="!loading">
      <v-tabs fixed-tabs
        color="#35B729"
        dark
        slider-color="#FFFFFF"
      >
        <v-tab :disabled="loading">
          Login
        </v-tab>
        <v-tab :disabled="loading">
          Register
        </v-tab>

        <v-tabs-items>
          <v-tab-item>
            <v-form ref="loginModalForm" v-model="loginForm.valid" lazy-validation>
              <v-card-text>
                <v-container grid-list-md>
                  <v-layout wrap>
                    <v-flex xs12>
                      <v-text-field
                        v-model="loginForm.login"
                        label="Email atau username"
                        type="text"
                        name="login"
                        :rules="[rules.required, rules.min]"
                        :disabled="loading">
                      </v-text-field>
                    </v-flex>
                    <v-flex xs12>
                      <v-text-field
                        label="Kata sandi"
                        name="password"
                        v-model="loginForm.password"
                        :type="showPassword ? 'text' : 'password'"
                        :append-icon="showPassword ? 'visibility_off' : 'visibility'"
                        :rules="[rules.required]"
                        @click:append="showPassword = !showPassword"
                        :disabled="loading"
                      ></v-text-field>
                    </v-flex>
                  </v-layout>
                </v-container>
              </v-card-text>
            </v-form>
            <v-card-actions>
              <v-btn :disabled="loading" color="#35B729" flat @click.native="toggleDialog(false)">Tutup</v-btn>
              <v-spacer></v-spacer>
              <v-btn :disabled="loading" color="#35B729" class="white--text" @click.native="masuk">Masuk</v-btn>
            </v-card-actions>
          </v-tab-item>

          <v-tab-item>
            <v-form ref="registerModalForm" v-model="registerForm.valid" lazy-validation>
              <v-card-text>
                <v-container grid-list-md>
                  <v-layout wrap>
                    <v-flex xs12 sm6 md12>
                      <v-text-field
                        v-model="registerForm.nama"
                        label="Nama lengkap"
                        name="nama"
                        :rules="[rules.required]"
                        :disabled="loading"
                        hint="Masukan nama lengkap anda"></v-text-field>
                    </v-flex>
                    <v-flex xs12 sm6 md12>
                      <v-text-field
                        v-model="registerForm.username"
                        label="Username"
                        name="username"
                        :rules="[rules.required, rules.min]"
                        :disabled="loading"
                        hint="Username minimal 6 karakter"></v-text-field>
                    </v-flex>
                    <v-flex xs12>
                      <v-text-field
                        v-model="registerForm.email"
                        label="Email"
                        name="email"
                        type="email"
                        :rules="[rules.required, rules.email]"
                        :disabled="loading"
                        hint="Masukan alamat email yang valid"></v-text-field>
                    </v-flex>
                    <v-flex xs12 sm6 md6>
                      <v-text-field
                        label="Kata sandi"
                        name="password"
                        v-model="registerForm.password"
                        :append-icon="showPassword ? 'visibility_off' : 'visibility'"
                        :rules="[rules.required, rules.min]"
                        :type="showPassword ? 'text' : 'password'"
                        hint="Kata sandi minimal 6 karakter"
                        class="input-group--focused"
                        :disabled="loading"
                        @click:append="showPassword = !showPassword"
                        ></v-text-field>
                    </v-flex>
                    <v-flex xs12 sm6 md6>
                      <v-text-field
                        label="Konfirmasi kata sandi anda"
                        :append-icon="showConfirmPassword ? 'visibility_off' : 'visibility'"
                        :rules="[rules.required, rules.min, rules.passwordMatch]"
                        :type="showConfirmPassword ? 'text' : 'password'"
                        hint="Kata sandi harus 6 karakter"
                        v-model="registerForm.passwordConfirm"
                        :disabled="loading"
                        @click:append="showConfirmPassword = !showConfirmPassword"
                        ></v-text-field>
                    </v-flex>
                  </v-layout>
                </v-container>
              </v-card-text>
            </v-form>
            <v-card-actions>
              <v-btn :disabled="loading" color="#35B729" flat @click.native="toggleDialog(false)">Tutup</v-btn>
              <v-spacer></v-spacer>
              <v-btn color="#35B729" :disabled="loading" class="white--text" @click.native="daftar">Daftar</v-btn>
            </v-card-actions>
          </v-tab-item>
        </v-tabs-items>
      </v-tabs>
    </v-card>
    <v-card
      color="#35B729"
      v-if="loading"
    >
      <v-card-text class="white--text">
        Tunggu sebentar...
        <v-progress-linear
          indeterminate
          color="white"
          class="mb-0"
        ></v-progress-linear>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
// import axios from 'axios'

export default {
  name: 'LoginRegisterModal',
  props: {
    value: Boolean
  },
  data () {
    return {
      showPassword: false,
      showConfirmPassword: false,
      tempPassword: '',
      loading: false,
      rules: {
        required: value => !!value || 'Wajib diisi.',
        min: value => value.length >= 6 || 'Minimal 6 karakter.',
        email: value => {
          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          return pattern.test(value) || 'Alamat email tidak valid.'
        },
        passwordMatch: value => value === this.registerForm.password || 'Password tidak cocok.'
      },
      loginForm: {
        valid: true,
        login: '',
        password: ''
      },
      registerForm: {
        valid: true,
        nama: '',
        username: '',
        email: '',
        password: '',
        passwordConfirm: ''
      }
    }
  },
  methods: {
    daftar: function () {
      if (this.$refs.registerModalForm.validate()) {
        this.loading = true
      }
    },
    masuk: function () {
      if (this.$refs.loginModalForm.validate()) {
        this.loading = true
      }
    },
    toggleDialog (show) {
      this.$emit('input', show)
    }
  }
}
</script>