209 lines
6.0 KiB
HTML
209 lines
6.0 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>
|
|
.signup-container {
|
|
max-width: 580px;
|
|
margin: 3rem auto;
|
|
padding: 2rem;
|
|
}
|
|
.signup-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.signup-header h1 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.signup-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;
|
|
}
|
|
.password-hint {
|
|
font-size: 0.875rem;
|
|
color: var(--pico-muted-color);
|
|
margin-top: 0.25rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="signup-container">
|
|
<div class="signup-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/signup" id="signupForm">
|
|
<div class="grid">
|
|
<label for="employee_id">
|
|
사번 <span style="color: var(--pico-del-color);">*</span>
|
|
<input
|
|
type="text"
|
|
id="employee_id"
|
|
name="employee_id"
|
|
placeholder="예: 123456"
|
|
required
|
|
value="{{ employee_id or '' }}"
|
|
>
|
|
</label>
|
|
|
|
<label for="name">
|
|
이름 <span style="color: var(--pico-del-color);">*</span>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
placeholder="홍길동"
|
|
required
|
|
value="{{ name or '' }}"
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<label for="department_id">
|
|
소속 부서 <span style="color: var(--pico-del-color);">*</span>
|
|
<select id="department_id" name="department_id" required>
|
|
<option value="">부서를 선택하세요</option>
|
|
{% for dept in departments %}
|
|
<option value="{{ dept.id }}" {% if department_id|string == dept.id|string %}selected{% endif %}>
|
|
{{ dept.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<small>본인이 소속된 부서를 선택하세요.</small>
|
|
</label>
|
|
|
|
<label for="email">
|
|
이메일 <span style="color: var(--pico-del-color);">*</span>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
placeholder="example@humetro.busan.kr"
|
|
required
|
|
autocomplete="email"
|
|
value="{{ email or '' }}"
|
|
>
|
|
<small>humetro.busan.kr 도메인의 우리회사 외부이메일만 사용 가능합니다.</small>
|
|
</label>
|
|
|
|
<div class="grid">
|
|
<label for="password">
|
|
비밀번호 <span style="color: var(--pico-del-color);">*</span>
|
|
<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">
|
|
비밀번호 확인 <span style="color: var(--pico-del-color);">*</span>
|
|
<input
|
|
type="password"
|
|
id="password_confirm"
|
|
name="password_confirm"
|
|
placeholder="비밀번호 확인"
|
|
required
|
|
autocomplete="new-password"
|
|
minlength="8"
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<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);
|
|
|
|
// 비밀번호 확인 검증
|
|
document.getElementById('signupForm').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;
|
|
}
|
|
});
|
|
|
|
// 이메일 도메인 검증
|
|
document.getElementById('email').addEventListener('blur', function(e) {
|
|
const email = e.target.value.toLowerCase();
|
|
if (email && !email.endsWith('@humetro.busan.kr')) {
|
|
alert('humetro.busan.kr 도메인의 이메일만 사용 가능합니다.');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|