134 lines
3.5 KiB
HTML
134 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="ko" data-theme="auto">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>비밀번호 재설정 - {{ app_name }}</title>
|
|
<link rel="icon" href="data:,">
|
|
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.min.css">
|
|
<link rel="stylesheet" href="/static/styles.css">
|
|
<style>
|
|
.reset-password-container {
|
|
max-width: 480px;
|
|
margin: 4rem auto;
|
|
padding: 2rem;
|
|
}
|
|
.reset-password-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.reset-password-header h1 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.reset-password-header p {
|
|
color: var(--pico-muted-color);
|
|
}
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
.form-actions button {
|
|
flex: 1;
|
|
}
|
|
.error-message {
|
|
color: var(--pico-del-color);
|
|
background-color: var(--pico-del-background);
|
|
padding: 0.75rem;
|
|
border-radius: 0.25rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.success-message {
|
|
color: var(--pico-ins-color);
|
|
background-color: var(--pico-ins-background);
|
|
padding: 0.75rem;
|
|
border-radius: 0.25rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.password-hint {
|
|
font-size: 0.875rem;
|
|
color: var(--pico-muted-color);
|
|
margin-top: 0.25rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="reset-password-container">
|
|
<div class="reset-password-header">
|
|
<h1>비밀번호 재설정</h1>
|
|
<p>새로운 비밀번호를 설정하세요</p>
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="error-message" role="alert">
|
|
{{ error }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if success %}
|
|
<div class="success-message" role="alert">
|
|
{{ success }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<article>
|
|
<form method="POST" action="/auth/reset-password" id="resetForm">
|
|
<input type="hidden" name="token" value="{{ token }}">
|
|
|
|
<label for="password">
|
|
새 비밀번호
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
placeholder="새 비밀번호"
|
|
required
|
|
autocomplete="new-password"
|
|
minlength="8"
|
|
>
|
|
<small class="password-hint">최소 8자 이상</small>
|
|
</label>
|
|
|
|
<label for="password_confirm">
|
|
비밀번호 확인
|
|
<input
|
|
type="password"
|
|
id="password_confirm"
|
|
name="password_confirm"
|
|
placeholder="비밀번호 확인"
|
|
required
|
|
autocomplete="new-password"
|
|
minlength="8"
|
|
>
|
|
</label>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="contrast">
|
|
비밀번호 재설정
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</article>
|
|
</main>
|
|
|
|
<script>
|
|
// 테마 관리
|
|
const theme = localStorage.getItem('theme') || 'auto';
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
|
|
// 비밀번호 확인 검증
|
|
document.getElementById('resetForm').addEventListener('submit', function(e) {
|
|
const password = document.getElementById('password').value;
|
|
const passwordConfirm = document.getElementById('password_confirm').value;
|
|
|
|
if (password !== passwordConfirm) {
|
|
e.preventDefault();
|
|
alert('비밀번호가 일치하지 않습니다.');
|
|
return false;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|