112 lines
3.8 KiB
HTML
112 lines
3.8 KiB
HTML
<!DOCTYPE html> <!-- Gemini ありがとう -->
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ログイン</title>
|
||
<style>
|
||
/* CSS（見た目）の設定 */
|
||
body {
|
||
font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', sans-serif;
|
||
background-color: #f3f4f6;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
margin: 0;
|
||
}
|
||
.login-box {
|
||
background-color: #ffffff;
|
||
padding: 40px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 320px;
|
||
text-align: center;
|
||
}
|
||
.login-box h2 {
|
||
margin: 0 0 20px;
|
||
color: #333;
|
||
}
|
||
.input-group {
|
||
margin-bottom: 20px;
|
||
text-align: left;
|
||
}
|
||
.input-group label {
|
||
display: block;
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
}
|
||
.input-group input {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
font-size: 16px;
|
||
}
|
||
.login-btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background-color: #2563eb;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
}
|
||
.login-btn:hover {
|
||
background-color: #1d4ed8;
|
||
}
|
||
.error-msg {
|
||
color: #ef4444;
|
||
font-size: 14px;
|
||
margin-top: 15px;
|
||
display: none; /* 初期状態は隠しておく */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="login-box">
|
||
<h2>システムログイン</h2>
|
||
<form id="loginForm">
|
||
<div class="input-group">
|
||
<label for="password">パスワード</label>
|
||
<input type="password" id="password" required placeholder="パスワードを入力">
|
||
</div>
|
||
<button type="submit" class="login-btn">ログイン</button>
|
||
<div id="errorMsg" class="error-msg">パスワードが違います</div>
|
||
</form>
|
||
</div>
|
||
|
||
<script>
|
||
// 【おまけのUX向上】
|
||
// もしログイン画面を開いた時点で「site_auth」クッキーが残っている場合、
|
||
// それは「Nginxにパスワードが違うと弾かれて戻ってきた」証拠です。
|
||
// エラーメッセージを出して、間違ったクッキーはお掃除しておきます。
|
||
if (document.cookie.includes('site_auth=')) {
|
||
document.getElementById('errorMsg').style.display = 'block';
|
||
document.cookie = "site_auth=; path=/; max-age=0"; // クッキーを削除
|
||
}
|
||
|
||
// フォーム送信時の処理
|
||
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
// 入力されたパスワードを取得
|
||
const passwordInput = document.getElementById('password').value;
|
||
|
||
// 入力値をそのままCookie（site_auth）としてセットする
|
||
// encodeURIComponent を挟むことで、記号などが入力されても安全にCookie化します
|
||
document.cookie = "site_auth=" + encodeURIComponent(passwordInput) + "; path=/; max-age=86400";
|
||
|
||
// Nginx（トップページ）へリクエストを送る
|
||
window.location.href = "/";
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |