84 lines
4.5 KiB
HTML
84 lines
4.5 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="./style/output.css?v=4.0.14" />
|
|
<title>이메일 인증 - UNIARE</title>
|
|
</head>
|
|
<body class="app-page">
|
|
<nav class="app-nav">
|
|
<div class="app-nav-inner">
|
|
<a href="/" class="app-brand">
|
|
<img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<main class="mx-auto w-full max-w-md px-6 pt-12 pb-16 sm:pt-16 sm:pb-20">
|
|
<section class="rounded-2xl border border-slate-200 bg-white p-7 text-center shadow-lg shadow-slate-900/5">
|
|
<h1 class="text-2xl font-black tracking-tight text-slate-900">이메일 인증</h1>
|
|
<p id="status-msg" class="mt-3 text-sm leading-relaxed text-slate-500">가입한 이메일로 인증 링크를 보냈습니다.</p>
|
|
<form id="resend-form" class="mt-6">
|
|
<label class="mb-1.5 block text-left text-xs font-bold uppercase tracking-wider text-slate-400" for="email">이메일</label>
|
|
<input type="email" id="email" required autocomplete="email" class="box-border block w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/15" />
|
|
<button type="submit" id="resend-submit" class="mt-4 block w-full cursor-pointer rounded-xl border-0 bg-slate-100 px-4 py-3 text-sm font-bold text-slate-700 transition hover:bg-slate-200 disabled:cursor-wait disabled:opacity-70">인증 메일 다시 보내기</button>
|
|
</form>
|
|
<a href="/login.html" class="mt-5 inline-block text-sm font-bold text-blue-600 hover:underline">로그인으로 이동</a>
|
|
</section>
|
|
</main>
|
|
<script src="/script/api.js?v=4.0.14"></script>
|
|
<script src="/script/auth-form.js?v=4.0.14"></script>
|
|
<script>
|
|
const params = new URLSearchParams(location.search);
|
|
const token = params.get('token');
|
|
const email = params.get('email') || '';
|
|
const statusEl = document.getElementById('status-msg');
|
|
const emailEl = document.getElementById('email');
|
|
emailEl.value = email;
|
|
|
|
/**
|
|
* 이메일 인증 토큰 처리
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async function verifyToken() {
|
|
if (!token) return;
|
|
document.getElementById('resend-form').classList.add('hidden');
|
|
statusEl.textContent = '이메일을 인증하는 중입니다...';
|
|
try {
|
|
const result = typeof UaDeckApi.verifyEmail === 'function'
|
|
? await UaDeckApi.verifyEmail(token)
|
|
: await UaAuthForm.request('/auth/verify-email', { token });
|
|
statusEl.textContent = result.message;
|
|
} catch (err) {
|
|
statusEl.textContent = err.message;
|
|
document.getElementById('resend-form').classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
document.getElementById('resend-form').addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
const submitButton = document.getElementById('resend-submit');
|
|
if (submitButton.disabled) return;
|
|
UaAuthForm.setLoading(submitButton, true, '전송 중...');
|
|
let sent = false;
|
|
try {
|
|
const result = typeof UaDeckApi.resendVerification === 'function'
|
|
? await UaDeckApi.resendVerification(emailEl.value)
|
|
: await UaAuthForm.request('/auth/resend-verification', { email: emailEl.value });
|
|
statusEl.textContent = result.message;
|
|
sent = true;
|
|
} catch (err) {
|
|
statusEl.textContent = err.message;
|
|
} finally {
|
|
if (sent) {
|
|
UaAuthForm.startCooldown(submitButton, 60, '다시 보내기');
|
|
} else {
|
|
UaAuthForm.setLoading(submitButton, false);
|
|
}
|
|
}
|
|
});
|
|
verifyToken();
|
|
</script>
|
|
</body>
|
|
</html>
|