Files
ewoooc/templates/login.html

98 lines
4.3 KiB
HTML

<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登入 - EwoooC</title>
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='images/logo_circle.svg') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-tokens.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/page-login.css') }}">
</head>
<body class="login-body" data-page-group="system">
<main class="login-page">
<section class="login-brand" aria-label="EwoooC 登入品牌區">
<div>
<a class="brand-mark" href="/login">
<span class="brand-mark__icon">
<img src="{{ url_for('static', filename='images/logo_circle.svg') }}" alt="" width="36" height="36">
</span>
<span>EwoooC</span>
</a>
<h1>營運數據工作台</h1>
<p>登入後先看 PChome 業績、價差、缺貨與 AI 建議。</p>
<div class="login-meta" aria-label="服務狀態">
<span class="login-pill">安全登入</span>
<span class="login-pill">工作階段</span>
<span class="login-pill">資料服務</span>
</div>
</div>
<div class="login-footer login-footer--desktop">
EwoooC {{ config.get('SYSTEM_VERSION', '') }}
</div>
</section>
<section class="login-panel-wrap" aria-label="登入表單">
<div class="login-card">
<div class="login-card__head">
<span>安全入口</span>
<h2>登入系統</h2>
</div>
<div class="login-card__body">
{% if error %}
<div class="login-alert" role="alert">{{ error }}</div>
{% endif %}
<form method="POST" action="{{ url_for('login') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="login-field">
<label for="password" class="login-label">密碼</label>
<div class="password-wrapper">
<input
type="password"
class="login-input"
id="password"
name="password"
placeholder="請輸入密碼"
required
autofocus
autocomplete="current-password"
>
<button
type="button"
class="password-toggle"
onclick="togglePassword()"
aria-label="顯示密碼"
>顯示</button>
</div>
</div>
<button type="submit" class="login-submit">登入</button>
</form>
</div>
<div class="login-footer login-footer--mobile">
EwoooC {{ config.get('SYSTEM_VERSION', '') }}
</div>
</div>
</section>
</main>
<script>
function togglePassword() {
const passwordInput = document.getElementById('password');
const toggleButton = document.querySelector('.password-toggle');
if (!passwordInput || !toggleButton) return;
const shouldShow = passwordInput.type === 'password';
passwordInput.type = shouldShow ? 'text' : 'password';
toggleButton.textContent = shouldShow ? '隱藏' : '顯示';
toggleButton.setAttribute('aria-label', shouldShow ? '隱藏密碼' : '顯示密碼');
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('password')?.focus();
});
</script>
</body>
</html>