134 lines
3.8 KiB
Vue
134 lines
3.8 KiB
Vue
<template>
|
|
<div class="set-password-container">
|
|
<div class="set-password-card">
|
|
<div class="text-center mb-4">
|
|
<i class="bi bi-shield-lock display-1 text-primary"></i>
|
|
<h3 class="mt-3">비밀번호 설정</h3>
|
|
<p class="text-muted">
|
|
비상시 로그인을 위해 비밀번호를 설정해주세요.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
Google 계정으로 로그인되었습니다.<br>
|
|
비밀번호를 설정하면 이메일/비밀번호로도 로그인할 수 있습니다.
|
|
</div>
|
|
|
|
<form @submit.prevent="handleSetPassword">
|
|
<div class="mb-3">
|
|
<label class="form-label">새 비밀번호</label>
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
v-model="newPassword"
|
|
placeholder="8자 이상 입력"
|
|
required
|
|
minlength="8"
|
|
/>
|
|
<small class="text-muted">8자 이상, 영문+숫자 조합 권장</small>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label">비밀번호 확인</label>
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
v-model="confirmPassword"
|
|
placeholder="비밀번호 다시 입력"
|
|
required
|
|
/>
|
|
<small v-if="confirmPassword && newPassword !== confirmPassword" class="text-danger">
|
|
비밀번호가 일치하지 않습니다.
|
|
</small>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary w-100 mb-3"
|
|
:disabled="isSubmitting || !canSubmit"
|
|
>
|
|
<span v-if="isSubmitting">
|
|
<span class="spinner-border spinner-border-sm me-2"></span>설정 중...
|
|
</span>
|
|
<span v-else>
|
|
<i class="bi bi-check-lg me-2"></i>비밀번호 설정
|
|
</span>
|
|
</button>
|
|
|
|
<div class="text-center">
|
|
<a href="/" class="text-muted small">나중에 설정하기 →</a>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="alert alert-danger mt-3" v-if="errorMessage">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>{{ errorMessage }}
|
|
</div>
|
|
|
|
<div class="alert alert-success mt-3" v-if="successMessage">
|
|
<i class="bi bi-check-circle me-2"></i>{{ successMessage }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({ layout: false })
|
|
|
|
const router = useRouter()
|
|
|
|
const newPassword = ref('')
|
|
const confirmPassword = ref('')
|
|
const isSubmitting = ref(false)
|
|
const errorMessage = ref('')
|
|
const successMessage = ref('')
|
|
|
|
const canSubmit = computed(() => {
|
|
return newPassword.value.length >= 8 && newPassword.value === confirmPassword.value
|
|
})
|
|
|
|
async function handleSetPassword() {
|
|
if (!canSubmit.value) return
|
|
|
|
isSubmitting.value = true
|
|
errorMessage.value = ''
|
|
successMessage.value = ''
|
|
|
|
try {
|
|
await $fetch('/api/auth/set-password', {
|
|
method: 'POST',
|
|
body: { password: newPassword.value }
|
|
})
|
|
|
|
successMessage.value = '비밀번호가 설정되었습니다. 메인 페이지로 이동합니다.'
|
|
|
|
setTimeout(() => {
|
|
router.push('/')
|
|
}, 1500)
|
|
} catch (e: any) {
|
|
errorMessage.value = e.data?.message || e.message || '비밀번호 설정에 실패했습니다.'
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.set-password-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 2rem;
|
|
}
|
|
.set-password-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
width: 100%;
|
|
max-width: 450px;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
|
}
|
|
</style>
|