influence/components/common/header/modal/passwordCheck.vue

<template>
  <!-- 비밀번호 확인 -->
  <v-dialog v-model="props.isPwdConfirmModal" persistent width="32.81rem">
    <div class="v-common-dialog-wrapper custom-dialog">
      <div class="modal-tit">
        <strong>{{$t('common.header.passwdCheckModal.title')}}</strong>
        <button class="btn-close" @click="$emit('closeModal')"></button>
      </div>
      <div class="v-common-dialog-content">
        <div class="info-mod">
          <p class="mod-txt">
            {{$t('common.header.passwdCheckModal.desc')}}
          </p>
          <div class="txt-field-box" :class="!isErrorTxt ? 'error' : ''">
            <v-text-field v-model="password" type="password" placeholder="Password" class="custom-input" @keydown.enter="fnClickOk" @input="setInputField()"></v-text-field>
            <i class="ico"></i>
          </div>
          <p class="error-txt" v-if="!isErrorTxt">{{ $t('common.header.valid.errorPasswd') }}</p>
        </div>
      </div>
      <div class="btn-wrap">
        <v-btn class="custom-btn btn-white mini" @click="$emit('closeModal')"><i class="ico"></i>{{$t('common.cancel')}}</v-btn>
        <v-btn class="custom-btn btn-blue mini" @click="fnClickOk"><i class="ico"></i>{{$t('common.confirm')}}</v-btn>
      </div>
    </div>
  </v-dialog>
</template>

<script setup>
/***********************
 *     import
 ************************/
import apiUrl from '@/composables/useApi';
import useUtil from '@/composables/useUtil';
import { useI18n } from 'vue-i18n';
/***********************
 *     plugins inject
 ************************/
  const { $toast, $log, $dayjs, $eventBus } = useNuxtApp()

  // props
  const props = defineProps({
    isPwdConfirmModal: Boolean,
  })
  // 참조가능 데이터 설정
  defineExpose({
    fnInit
  })
  /**
   * @SCRIPT
   * 비밀번호 입력 validation체크
   */
  const setInputField = () => {
    if(useUtil.isNull(password.value) || !/^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,30}$/i.test(password.value)) {
    //if(useUtil.isNull(password.value)) {
      isErrorTxt.value = false
    } else {
      isErrorTxt.value = true
    }
  }
  // 발신 이벤트 선언
  const emit = defineEmits(['closeModal', 'openMyInfoUpdateModal'])
  const i18n = useI18n()
/***********************
 *     data & created
 ************************/
  const password = ref("")
  const isErrorTxt = ref(true)
/***********************
 *     Methods
 ************************/
function fnInit(){
  // 데이터 초기화
  password.value = ""
  isErrorTxt.value = true
}

/**
 * 확인
 */
function fnClickOk(){
  setInputField()
  if(isErrorTxt.value) {
    fnPasswordCheck()
  }
}
/**
 * @API
 * 비밀번호 확인
 */
function fnPasswordCheck(){
  let _req = {
    username: useAuthStore().getAccountId,
    password: btoa(password.value)
  }
  useAxios().post(apiUrl.idPwCheck, _req).then((res) => {
    emit('closeModal')
    emit('openMyInfoUpdateModal')
    $log.debug("[passwordCheck][fnPasswordCheck][success]")
  }).catch((error)=>{
    let errorData = error.response.data
    let errorMessage = ''
    if(errorData.code === '2002') {
      // 비밀번호 불일치 XX회
      errorMessage += i18n.t('login.sendFail')+' '+Number(errorData.reason)+'회 오류'
      $toast.error(errorMessage)
    }
    $log.debug("[passwordCheck][fnPasswordCheck][error]")
  }).finally(()=>{
    $log.debug("[passwordCheck][fnPasswordCheck][finished]")
  })
}
</script>