291 lines
7.6 KiB
HTML
291 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sena DB API - Login Test</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
max-width: 1000px;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.login-section {
|
|
padding: 50px 40px;
|
|
}
|
|
|
|
.response-section {
|
|
background: #f8f9fa;
|
|
padding: 50px 40px;
|
|
border-left: 1px solid #e0e0e0;
|
|
overflow-y: auto;
|
|
max-height: 600px;
|
|
}
|
|
|
|
h2 {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
color: #555;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
padding: 12px 15px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: 14px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn:disabled {
|
|
background: #ccc;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #6c757d;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #5a6268;
|
|
}
|
|
|
|
.response-content {
|
|
background: white;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.response-title {
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
pre {
|
|
background: #2d2d2d;
|
|
color: #f8f8f2;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.status {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.status.success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status.error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.endpoint-info {
|
|
background: #e7f3ff;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
margin-bottom: 20px;
|
|
font-size: 13px;
|
|
color: #004085;
|
|
}
|
|
|
|
.endpoint-info code {
|
|
background: white;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.response-section {
|
|
border-left: none;
|
|
border-top: 1px solid #e0e0e0;
|
|
}
|
|
}
|
|
|
|
.example-data {
|
|
background: #fff3cd;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-bottom: 15px;
|
|
font-size: 12px;
|
|
color: #856404;
|
|
}
|
|
|
|
.loading {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid #ffffff;
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
animation: spin 0.6s linear infinite;
|
|
vertical-align: middle;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Login Section -->
|
|
<div class="login-section">
|
|
<h2>🔐 Login Test</h2>
|
|
<p class="subtitle">Test quy trình đăng nhập API</p>
|
|
|
|
<div class="endpoint-info">
|
|
<strong>Endpoints:</strong><br>
|
|
POST <code>/api/auth/login</code> - Đăng nhập<br>
|
|
POST <code>/api/auth/register</code> - Đăng ký<br>
|
|
POST <code>/api/auth/verify-token</code> - Verify token<br>
|
|
POST <code>/api/auth/logout</code> - Đăng xuất<br>
|
|
GET <code>/api/users</code> - Danh sách users
|
|
</div>
|
|
|
|
<div class="example-data">
|
|
<strong>✅ API sẵn sàng!</strong> Hệ thống đã có đầy đủ các endpoint: login, register, verify-token, logout.
|
|
</div>
|
|
|
|
<form id="loginForm">
|
|
<div class="form-group">
|
|
<label for="username">Username hoặc Email:</label>
|
|
<input type="text" id="username" name="username" placeholder="Nhập username hoặc email" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Password:</label>
|
|
<input type="password" id="password" name="password" placeholder="Nhập mật khẩu" required>
|
|
</div>
|
|
|
|
<button type="submit" class="btn" id="loginBtn">
|
|
Đăng nhập
|
|
</button>
|
|
</form>
|
|
|
|
<button class="btn btn-secondary" id="registerBtn">
|
|
Đăng ký tài khoản mới
|
|
</button>
|
|
|
|
<button class="btn btn-secondary" id="verifyTokenBtn">
|
|
Verify Token
|
|
</button>
|
|
|
|
<button class="btn btn-secondary" id="logoutBtn">
|
|
Đăng xuất
|
|
</button>
|
|
|
|
<button class="btn btn-secondary" id="getAllUsersBtn">
|
|
Lấy danh sách Users
|
|
</button>
|
|
|
|
<button class="btn btn-secondary" id="testHealthBtn">
|
|
Test Health Endpoint
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Response Section -->
|
|
<div class="response-section">
|
|
<h2>📊 Kết quả</h2>
|
|
<p class="subtitle">Response từ API server</p>
|
|
|
|
<div id="responseContainer">
|
|
<div class="response-content">
|
|
<p style="color: #666; text-align: center;">Chưa có request nào được gửi</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/login.js"></script>
|
|
</body>
|
|
</html>
|