101 lines
4.1 KiB
PHP
101 lines
4.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>HOSxP Web Service | ล็อกอิน</title>
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon1.ico">
|
|
<link rel="stylesheet" href="css/styles.css" type="text/css" />
|
|
<style>
|
|
body.login-page {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
}
|
|
.login-card {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 40px;
|
|
text-align: center;
|
|
}
|
|
.login-logo {
|
|
margin-bottom: 24px;
|
|
color: var(--primary);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
.btn-block {
|
|
width: 100%;
|
|
padding: 14px;
|
|
font-size: 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="login-page">
|
|
<div class="glass-panel login-card">
|
|
<div class="login-logo">
|
|
<svg style="width:64px;height:64px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
|
</svg>
|
|
</div>
|
|
<h2 style="margin-bottom: 8px;">HOSxP Web Service</h2>
|
|
<p class="text-muted" style="margin-bottom: 30px;">ลงชื่อเข้าใช้เพื่อเริ่มต้นระบบ</p>
|
|
|
|
<form id="loginform" action="authen.php" method="post" onsubmit="return validateForm()">
|
|
<div class="form-group">
|
|
<input type="text" id="username" name="username" class="form-control" placeholder="ชื่อผู้ใช้งาน (Username)" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="password" id="password" name="password" class="form-control" placeholder="รหัสผ่าน (Password)" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="number" id="2fa_auth" name="2fa_auth" class="form-control" placeholder="รหัส OTP 2FA (ถ้ามี)" required />
|
|
</div>
|
|
|
|
<input type="hidden" name="show_ip" value="<?php echo htmlspecialchars($show_ip ?? ''); ?>" />
|
|
<input type="hidden" name="user_os" value="<?php echo htmlspecialchars($user_os ?? ''); ?>" />
|
|
<input type="hidden" name="user_browser" value="<?php echo htmlspecialchars($user_browser ?? ''); ?>" />
|
|
|
|
<div class="form-group" style="margin-top: 30px;">
|
|
<button type="submit" class="btn btn-primary btn-block">เข้าสู่ระบบ</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function validateForm() {
|
|
const user = document.getElementById('username');
|
|
const pass = document.getElementById('password');
|
|
const auth2fa = document.getElementById('2fa_auth');
|
|
let isValid = true;
|
|
|
|
[user, pass, auth2fa].forEach(el => {
|
|
if(!el.value.trim()) {
|
|
el.style.borderColor = 'var(--danger)';
|
|
isValid = false;
|
|
} else {
|
|
el.style.borderColor = 'rgba(0,0,0,0.1)';
|
|
}
|
|
});
|
|
|
|
if(!isValid) {
|
|
user.closest('.login-card').animate([
|
|
{ transform: 'translateX(0)' },
|
|
{ transform: 'translateX(-10px)' },
|
|
{ transform: 'translateX(10px)' },
|
|
{ transform: 'translateX(-10px)' },
|
|
{ transform: 'translateX(10px)' },
|
|
{ transform: 'translateX(0)' }
|
|
], { duration: 400 });
|
|
}
|
|
return isValid;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|