RegisterView.vue

RegisterView.vue

<!-- src/views/RegisterView.vue -->
<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <v-card>
          <v-card-title> 계정 만들기 </v-card-title>

          <v-card-text>
            <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="userRegister">
              <v-text-field v-model="username" :rules="usernameRules" label="이름" prepend-icon="mdi-account" required ></v-text-field>
              <v-text-field v-model="mylogname" :rules="usernameRules" label="마이로그 이름" prepend-icon="mdi-post" required></v-text-field>
              <v-text-field v-model="email" :rules="emailRules" label="이메일" prepend-icon="mdi-email" required></v-text-field>
              <v-text-field v-model="password" :rules="passwordRules" label="비밀번호" prepend-icon="mdi-lock" type="password" required></v-text-field>
              <v-text-field v-model="confirmPassword" :rules="confirmPasswordRules" label="비밀번호 확인" prepend-icon="mdi-lock" type="password" required></v-text-field>

              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn :disabled="!valid" color="primary" type="submit" class="mr-1" >계정 만들기</v-btn>
                <v-btn color="secondary" @click="clear"> 취소 </v-btn>
              </v-card-actions>

              <div class="text-center">
                <v-progress-circular v-if="isLoading" indeterminate :width="7" :size="70" color="grey lighten-1"></v-progress-circular>
              </div>              
                
              <v-alert v-if="error" type="error" class="mt-3" dismissible>{{ error }}</v-alert>

            </v-form>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

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

export default {
  
  data() {
    return {
      valid: false,
      username: '',
      mylogname: '',
      email: '',
      password: '',
      confirmPassword: '',
      usernameRules: [
        (v) => !!v || 'Username is required',
        (v) => (!!v && v.length >= 3) || 'Username must be at least 3 characters',
      ],
      emailRules: [
        (v) => !!v || 'Email is required',
        (v) => (!!v && /.+@.+\..+/.test(v)) || 'E-mail must be valid',
      ],
      passwordRules: [
        (v) => !!v || 'Password is required',
        (v) => (!!v && v.length >= 6) || 'Password must be at least 6 characters',
      ],
      confirmPasswordRules: [
        (v) => !!v || 'Password confirmation is required',
        (v) => (!!v && v === this.password) || 'Passwords do not match',
      ],
    };
  },
  computed: {
    ...mapGetters('auth', ['error', 'isLoading']),
  },
  methods: {
    ...mapActions('auth', ['register']),
    async userRegister() {
      if (this.$refs.form.validate()) {
        await this.register({ 
          email: this.email, 
          password: this.password,
          username: this.username, 
          mylogname: this.mylogname 
        });
      }
    },
    clear() {
      this.$refs.form.reset();
      this.password = '';
      this.confirmPassword = '';
    },
  },
};
</script>

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