<template>
  <v-app>
    <v-main>
      <v-container
        align-center
        justify-center
      >
        <v-card class="elevation-12">
          <v-card-text>
            <v-form>
              <v-text-field
                v-model="email"
                label="Email"
                type="text"
              />
              <v-text-field
                v-model="password"
                :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                :type="showPassword ? 'text' : 'password'"
                label="Password"
                @click:append="showPassword = !showPassword"
                @keyup.enter="loginSubmit"
              />
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer />
            <v-btn
              color="primary"
              @click="loginSubmit"
            >
              로그인
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "Login",

  data: () => ({
    showPassword: false,
    email: '',
    password: '',
  }),

  methods: {
    notifyError: async function (message) {
      await this.$dialog.notify.error(message)
    },

    loginSubmit() {
      let loginData = {};
      loginData.email = this.email;
      loginData.password = this.password;

      try {
        this.$store.dispatch('accountStore/LOGIN', loginData)
          .then(() => {
            this.$router.push(this.$route.query.redirect || '/')
          })
          .catch((message) => {
            this.notifyError(message);
          })
      } catch (e) {
        this.notifyError('로그인 정보를 확인해주세요.');
      }
    },
  }
}
</script>

<style scoped>

</style>
