audi/app/components/admin/PasswordModal.vue

<template>
  <div class="admin--modal-overlay" @click.self="close">
    <div class="admin--modal admin--modal-sm">
      <div class="admin--modal-header">
        <h4>비밀번호 변경</h4>
        <button @click="close" class="admin--modal-close">&times;</button>
      </div>

      <div class="admin--modal-body">
        <div class="admin--info-box">
          <p><strong>관리자:</strong> {{ admin.name }} ({{ admin.username }})</p>
        </div>

        <form @submit.prevent="save">
          <div class="admin--form-group" v-if="isCurrentUser">
            <label class="admin--label">현재 비밀번호</label>
            <input
              v-model="formData.current_password"
              type="password"
              class="admin--input"
              placeholder="현재 비밀번호 입력"
            />
            <small class="admin--help-text">본인 계정의 경우 현재 비밀번호를 입력해주세요.</small>
          </div>

          <div class="admin--form-group">
            <label class="admin--label">새 비밀번호 *</label>
            <input
              v-model="formData.new_password"
              type="password"
              class="admin--input"
              required
              placeholder="최소 8자 이상"
              minlength="8"
            />
          </div>

          <div class="admin--form-group">
            <label class="admin--label">새 비밀번호 확인 *</label>
            <input
              v-model="formData.new_password_confirm"
              type="password"
              class="admin--input"
              required
              placeholder="새 비밀번호 재입력"
              minlength="8"
            />
          </div>

          <div class="admin--modal-footer">
            <button type="button" @click="close" class="admin--btn-secondary">
              취소
            </button>
            <button type="submit" class="admin--btn-primary" :disabled="saving">
              {{ saving ? '변경 중...' : '변경' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  admin: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['close', 'saved'])

const { post } = useApi()

const saving = ref(false)

// 현재 로그인한 관리자 ID
const currentAdminId = computed(() => {
  if (typeof window === 'undefined') return null
  const user = localStorage.getItem('admin_user')
  if (!user) return null
  try {
    return JSON.parse(user).id
  } catch {
    return null
  }
})

const isCurrentUser = computed(() => {
  return currentAdminId.value === props.admin.id
})

const formData = ref({
  current_password: '',
  new_password: '',
  new_password_confirm: ''
})

const close = () => {
  emit('close')
}

const save = async () => {
  // 비밀번호 확인
  if (formData.value.new_password !== formData.value.new_password_confirm) {
    emit('saved', '새 비밀번호가 일치하지 않습니다.')
    return
  }

  if (formData.value.new_password.length < 8) {
    emit('saved', '비밀번호는 최소 8자 이상이어야 합니다.')
    return
  }

  saving.value = true

  try {
    const requestData = {
      new_password: formData.value.new_password
    }

    // 본인 계정인 경우 현재 비밀번호 포함
    if (isCurrentUser.value && formData.value.current_password) {
      requestData.current_password = formData.value.current_password
    }

    const { data, error } = await post(`/admin/${props.admin.id}/password`, requestData)

    if (error) {
      console.error('[PasswordModal] 변경 실패:', error)
      const errorMessage = error.response?.data?.message || '비밀번호 변경에 실패했습니다.'
      emit('saved', errorMessage)
      return
    }

    if (data?.success) {
      emit('saved', '비밀번호가 변경되었습니다.')
    }
  } finally {
    saving.value = false
  }
}
</script>