207 lines
7.1 KiB
Vue
207 lines
7.1 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout: false
|
|
})
|
|
|
|
const form = reactive({
|
|
email: '',
|
|
password: ''
|
|
})
|
|
|
|
const pending = ref(false)
|
|
const errorMessage = ref('')
|
|
const showPassword = ref(false)
|
|
const emailInput = ref(null)
|
|
const passwordInput = ref(null)
|
|
const route = useRoute()
|
|
|
|
const { data: bootstrapStatus } = await useFetch('/api/auth/bootstrap-status', {
|
|
default: () => ({
|
|
hasUsers: true,
|
|
needsAdminSetup: false
|
|
})
|
|
})
|
|
|
|
/**
|
|
* 관리자 로그인 제출 가능 여부
|
|
* @returns {boolean} 제출 가능 여부
|
|
*/
|
|
const canSubmitAdminLogin = computed(() => Boolean(form.email.trim()) && Boolean(form.password))
|
|
|
|
const googleStatusMessage = computed(() => {
|
|
const status = String(route.query.google || '')
|
|
if (status === 'admin-not-linked') {
|
|
return '연결된 관리자 Google 계정을 찾을 수 없습니다. 먼저 관리자 계정에서 Google 계정을 연결해 주세요.'
|
|
}
|
|
if (status === 'email-unverified') {
|
|
return 'Google 계정의 이메일 확인 상태를 확인할 수 없습니다.'
|
|
}
|
|
if (status === 'cancelled') {
|
|
return 'Google 로그인이 취소되었습니다.'
|
|
}
|
|
return ''
|
|
})
|
|
|
|
/**
|
|
* 관리자 Google 로그인으로 이동한다.
|
|
* @returns {void}
|
|
*/
|
|
const startGoogleAdminLogin = () => {
|
|
if (import.meta.client) {
|
|
window.location.href = '/api/auth/google/start?mode=admin&redirect=/admin'
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 브라우저/비밀번호 관리자 자동완성 값을 로그인 폼 상태에 반영한다.
|
|
* @returns {void}
|
|
*/
|
|
const syncAdminLoginAutofill = () => {
|
|
const emailValue = emailInput.value?.value || ''
|
|
const passwordValue = passwordInput.value?.value || ''
|
|
|
|
if (emailValue && emailValue !== form.email) {
|
|
form.email = emailValue
|
|
}
|
|
if (passwordValue && passwordValue !== form.password) {
|
|
form.password = passwordValue
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 관리자 로그인 제출
|
|
* @returns {Promise<void>} 로그인 처리 결과
|
|
*/
|
|
const submitLogin = async () => {
|
|
syncAdminLoginAutofill()
|
|
|
|
pending.value = true
|
|
errorMessage.value = ''
|
|
|
|
try {
|
|
await $fetch('/admin/api/auth/login', {
|
|
method: 'POST',
|
|
body: {
|
|
email: form.email.trim(),
|
|
password: form.password
|
|
},
|
|
credentials: 'include'
|
|
})
|
|
|
|
if (import.meta.client) {
|
|
window.location.assign('/admin')
|
|
return
|
|
}
|
|
|
|
await navigateTo('/admin')
|
|
} catch (error) {
|
|
const statusCode = Number(error?.statusCode || error?.response?.status || 0)
|
|
|
|
if (statusCode === 401) {
|
|
errorMessage.value = '이메일 또는 비밀번호를 확인해 주세요.'
|
|
} else if (statusCode >= 500) {
|
|
errorMessage.value = '서버 또는 데이터베이스 연결을 확인해 주세요.'
|
|
} else {
|
|
errorMessage.value = '로그인에 실패했습니다. 잠시 후 다시 시도해 주세요.'
|
|
}
|
|
} finally {
|
|
pending.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
syncAdminLoginAutofill()
|
|
window.setTimeout(syncAdminLoginAutofill, 100)
|
|
window.setTimeout(syncAdminLoginAutofill, 500)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<main class="admin-login min-h-screen bg-[#0a0b0d] text-[#f5f7fa] [color-scheme:dark]">
|
|
<div class="mx-auto flex min-h-screen w-full max-w-[1280px] items-center justify-end px-5 py-12 sm:px-10 lg:px-16">
|
|
<section class="admin-login__panel w-full max-w-[430px] p-5 sm:p-8">
|
|
<p class="admin-login__eyebrow text-right text-xs font-semibold uppercase text-[#9ba3af]">
|
|
Admin
|
|
</p>
|
|
<h1 class="admin-login__title text-right mt-2 text-2xl font-semibold leading-tight">
|
|
관리자 로그인
|
|
</h1>
|
|
<p class="mt-2 text-right text-sm text-[#9ba3af]">
|
|
관리자 계정으로 로그인해 콘텐츠와 사이트 설정을 관리하세요.
|
|
</p>
|
|
<p
|
|
v-if="bootstrapStatus?.needsAdminSetup"
|
|
class="mt-5 rounded-[10px] border border-[#b03b43]/50 bg-[#b03b43]/10 px-3 py-2 text-right text-xs text-[#e5acb1]"
|
|
>
|
|
등록된 관리자가 없습니다.
|
|
<NuxtLink class="font-semibold text-[#7eb8ff] underline-offset-2 hover:underline" to="/signup">
|
|
관리자 등록으로 이동
|
|
</NuxtLink>
|
|
</p>
|
|
|
|
<form class="admin-login__form mt-8 space-y-5" @submit.prevent="submitLogin">
|
|
<label class="admin-login__field block space-y-1.5">
|
|
<span class="admin-login__label text-xs text-[#d8dee6]">이메일</span>
|
|
<input
|
|
ref="emailInput"
|
|
v-model="form.email"
|
|
class="auth-form-input admin-login__input h-10 w-full rounded-[8px] border border-[#1a212a] bg-transparent px-3 text-sm outline-none transition-colors focus:border-[#2f6feb]"
|
|
type="email"
|
|
autocomplete="username"
|
|
required
|
|
@change="syncAdminLoginAutofill"
|
|
@focus="syncAdminLoginAutofill"
|
|
@input="syncAdminLoginAutofill"
|
|
>
|
|
</label>
|
|
<label class="admin-login__field block space-y-1.5">
|
|
<span class="admin-login__label text-xs text-[#d8dee6]">비밀번호</span>
|
|
<span class="flex items-center rounded-[8px] border border-[#1a212a] transition-colors focus-within:border-[#2f6feb]">
|
|
<input
|
|
ref="passwordInput"
|
|
v-model="form.password"
|
|
class="auth-form-input admin-login__input h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
autocomplete="current-password"
|
|
required
|
|
@change="syncAdminLoginAutofill"
|
|
@focus="syncAdminLoginAutofill"
|
|
@input="syncAdminLoginAutofill"
|
|
>
|
|
<AuthPasswordVisibilityToggle v-model="showPassword" />
|
|
</span>
|
|
</label>
|
|
<p v-if="errorMessage" class="admin-login__error text-right text-xs text-[#e5acb1]" aria-live="polite">
|
|
{{ errorMessage }}
|
|
</p>
|
|
<button
|
|
class="admin-login__button ml-auto block h-9 rounded-[8px] bg-[#2f6feb] px-8 text-xs font-medium text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
|
|
type="submit"
|
|
:disabled="pending || !canSubmitAdminLogin"
|
|
>
|
|
{{ pending ? '확인 중' : '로그인' }}
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-5 border-t border-[#1a212a] pt-5">
|
|
<button
|
|
class="admin-login__google-button flex h-10 w-full items-center justify-center gap-2 rounded-[8px] border border-[#1a212a] bg-white text-sm font-semibold text-[#15171a] transition hover:bg-[#f1f3f4]"
|
|
type="button"
|
|
@click="startGoogleAdminLogin"
|
|
>
|
|
<span class="text-lg font-bold text-[#4285f4]">G</span>
|
|
Google로 로그인
|
|
</button>
|
|
</div>
|
|
<p v-if="googleStatusMessage" class="mt-4 text-right text-xs text-[#e5acb1]" aria-live="polite">
|
|
{{ googleStatusMessage }}
|
|
</p>
|
|
|
|
<NuxtLink class="mt-6 flex justify-end text-xs text-[#9ba3af] hover:opacity-80" to="/">
|
|
사이트로 돌아가기
|
|
</NuxtLink>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</template>
|