LoginView.vue

LoginView.vue

<!-- src/views/LoginView.vue -->
<template>
  <v-container>
    <v-row>
      <v-col>
        <v-card class="pa-2">
          <v-card-title>로그인</v-card-title>

          <v-card-text>
            <v-form ref="form" v-model="valid" lazy-validation>
              <v-text-field label="이메일" v-model="email" :rules="[rules.required, rules.email]" 
                prepend-icon="mdi-email" type="email" required></v-text-field>

              <v-text-field label="비밀번호" v-model="password" :rules="[rules.required]"
                prepend-icon="mdi-lock" type="password" required></v-text-field>
            </v-form>            
          </v-card-text>

          <v-card-actions>
            <v-btn @click="doPasswordReset"> 비밀번호 재설정 </v-btn>
            <v-spacer></v-spacer>
            <v-btn color="primary" @click="doLogin" :disabled="!valid"> 로그인 </v-btn>
          </v-card-actions>
          
          <v-alert v-if="error" type="error" dismissible @input="resetErrorMsg" class="my-alert">{{ error }}</v-alert>
        </v-card>
      </v-col>
    </v-row>

    <v-row>
      <v-col class="text-center mt-4" cols="8" offset="2">  
        <v-btn color="red" @click="googleLogin" dark>
          <v-icon left>mdi-google</v-icon>
            Google 계정으로 로그인
        </v-btn>
      </v-col>
    </v-row>

  </v-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  data() {
    return {
      email: "",
      password: "",
      valid: false,
      rules: {
        required: (value) => !!value || "Required.",
        email: (value) =>
          /.+@.+\..+/.test(value) || "E-mail must be valid.",
      },
    };
  },
  computed: {
    ...mapGetters('auth',['error'])
  },
  methods: {
    ...mapActions('auth', ['login', 'googleLogin', 'PasswordReset', 'resetError']),
    resetErrorMsg() {
      this.resetError();
    },
    async doPasswordReset() {
      if (!this.email) {
        alert("비밀번호 재설정을 위한 이메일을 입력하세요.");
        return;
      }
      console.log(this.email);
      await this.PasswordReset(this.email);
    },
    async doLogin() {
      if (this.$refs.form.validate()) {
        await this.login({ email: this.email, password: this.password });
      }
    },
  },
};
</script>

<style scoped>
.fill-height {
  height: 100vh;
}
</style>