ProfileView.vue

ProfileView.vue

<!-- src/views/ProfileView.vue -->
<template>
  <v-container>
    <v-row>
      <v-col>
        <v-card class="pa-2">
          <v-card-title>
            <span class="text-h6">계정 정보</span>
          </v-card-title>

          <v-card-text>
            <v-form ref="form" v-model="valid" lazy-validation>

              <!-- Email Field (Non-Editable) -->
              <v-text-field label="이메일" v-model="editableUserInfo.email" disabled readonly></v-text-field>
              <!-- usernam Field -->
              <v-text-field label="이름" v-model="editableUserInfo.username" :rules="[rules.required]"></v-text-field>
              <!-- mylogname Field -->
              <v-text-field label="마이로그 이름" v-model="editableUserInfo.mylogname" :rules="[rules.required]"></v-text-field>
              <!-- Age Field -->
              <!-- <v-text-field label="Age" v-model="editableUserInfo.age" :rules="[rules.required, rules.numeric]" type="number" ></v-text-field> -->
            </v-form>
          </v-card-text>

          <v-card-actions class="mt-n8">
            <v-spacer></v-spacer>
            <v-btn color="primary" @click="saveChanges" :disabled="!valid">수정</v-btn>
            <v-btn color="grey" @click="cancelEdit">취소</v-btn>
          </v-card-actions>

          <v-card-actions class="mt-2">
            <v-btn @click="showForm = !showForm">
              <v-icon left>mdi-lock</v-icon>비밀번호 변경
            </v-btn>
            <v-spacer></v-spacer>
            <v-btn color="red" @click="doGoogleAccount" dark>  
              <v-icon left>mdi-google</v-icon>Google 연동
            </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-if="showForm">
      <v-col>
        <v-card class="pa-2">
          <v-card-title style="font-size:1em" class="mt-n2">
            비밀번호 변경
          </v-card-title>

          <v-card-text  class="mt-n4">
            <v-form ref="form" v-model="valid" lazy-validation> 
              <v-text-field v-model="oldPassword" :rules="passwordRules" label="현재 비밀번호" prepend-icon="mdi-lock" type="password" required></v-text-field>
              <v-text-field v-model="newPassword" :rules="passwordRules" label="새 비밀번호" prepend-icon="mdi-lock" type="password" required></v-text-field>
            </v-form>
          </v-card-text>

          <v-card-actions class="mt-n8">
            <v-spacer></v-spacer>
            <v-btn @click="doChangePassword" :disabled="!valid">
              <v-icon left>mdi-lock</v-icon>비밀번호 변경
            </v-btn>       
          </v-card-actions>

        </v-card>       
      </v-col>
    </v-row>

  </v-container>
</template>

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

export default {
  data() {
    return {
      editableUserInfo: {
        email: "",
        username: "",
        mylogname: "",
        id: "", // Add an id to identify the document in Firestore
      },
      showForm: false,
      oldPassword:"",
      newPassword:"",
      valid: false,
      validPassword: false,
      rules: {
        required: (value) => !!value || "Required.",
        numeric: (value) => !isNaN(parseInt(value)) || "Must be a number.",
      },
      passwordRules: [
        (v) => !!v || 'Password is required',
        (v) => (!!v && v.length >= 6) || 'Password must be at least 6 characters',
      ],
    };
  },
  computed: {
    ...mapGetters('auth', ["user", "error"]),
    getUserInfo() {
      return this.user;
    },
    getError() {
      return this.error;
    },
  },
  watch: {
    getUserInfo: {
      handler(newValue) {
        this.editableUserInfo = { ...newValue }; // Clone the userInfo to editableUserInfo
      },
      immediate: true,
    },
  },
  methods: {
    ...mapActions('auth', ['changePassword', "updateUserInfo", "addGoogleAccount", "resetError"]),
    saveChanges() {
      this.updateUserInfo(this.editableUserInfo);
    },
    cancelEdit() {
      this.editableUserInfo = { ...this.userInfo }; // Reset form to original data
    },
    async doGoogleAccount() {
      await this.addGoogleAccount();
    },
    async doChangePassword() {
      if (!this.oldPassword || !this.newPassword ) {
        alert("비밀번호를 입력하세요.");
        return;
      }

      this.changePassword({
        oldPassword: this.oldPassword, 
        newPassword: this.newPassword
      });

    },
    resetErrorMsg() {
      this.resetError();
    }
  },
  created() {
    const user = this.$store.state.auth.user;
    this.editableUserInfo = user;    
  },
};
</script>

<style scoped>
.my-alert {
  margin: 20px 0;
}
</style>