Tr_Code/templates/forgot_password.html

115 lines
2.9 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>
.forgot-password-container {
max-width: 480px;
margin: 4rem auto;
padding: 2rem;
}
.forgot-password-header {
text-align: center;
margin-bottom: 2rem;
}
.forgot-password-header h1 {
margin-bottom: 0.5rem;
}
.forgot-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;
}
.login-link {
text-align: center;
margin-top: 1.5rem;
}
</style>
</head>
<body>
<main class="forgot-password-container">
<div class="forgot-password-header">
<h1>비밀번호 찾기</h1>
<p>부산교통공사 1호선 차량 고장코드 시스템</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/forgot-password">
<label for="employee_id">
사번
<input
type="text"
id="employee_id"
name="employee_id"
placeholder="사번을 입력하세요"
required
value="{{ employee_id or '' }}"
>
<small>등록된 사번을 입력하시면 이메일로 비밀번호 재설정 링크를 전송합니다.</small>
</label>
<div class="form-actions">
<button type="button" class="secondary" onclick="window.location.href='/auth/login'">
취소
</button>
<button type="submit" class="contrast">
재설정 링크 전송
</button>
</div>
</form>
<div class="login-link">
<p>
계정이 기억나셨나요?
<a href="/auth/login">로그인</a>
</p>
</div>
</article>
</main>
<script>
// 테마 관리
const theme = localStorage.getItem('theme') || 'auto';
document.documentElement.setAttribute('data-theme', theme);
</script>
</body>
</html>