v2.3
This commit is contained in:
Luftmensch
@@ -0,0 +1,651 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
|
||||
<head>
|
||||
<script>
|
||||
var savedTheme = localStorage.getItem('audit_theme');
|
||||
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
}
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/png" href="{{ url_for('icon', path='/icon.png') }}">
|
||||
<title>Quản lý Công cụ - Admin - VNPT-MEDIA</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: var(--bg-main);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 15px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: var(--text-main);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #c0392b;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
margin-bottom: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.tools-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.tools-table th,
|
||||
.tools-table td {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.tools-table th {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tools-table tr:hover {
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 5px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-available {
|
||||
background: rgba(46, 204, 113, 0.2);
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
||||
.status-unavailable {
|
||||
background: rgba(231, 76, 60, 0.2);
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.os-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Upload Form */
|
||||
.upload-form {
|
||||
background: var(--table-row-hover);
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.upload-form:hover {
|
||||
border-color: #667eea;
|
||||
background: var(--empty-state-bg);
|
||||
}
|
||||
|
||||
.upload-form.dragover {
|
||||
border-color: #667eea;
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 12px 15px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--input-border);
|
||||
background: var(--card-bg);
|
||||
color: var(--text-main);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.form-group select option {
|
||||
background: var(--input-bg);
|
||||
color: var(--input-text);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-group input[type="file"] {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: rgba(46, 204, 113, 0.2);
|
||||
color: #2ecc71;
|
||||
border: 1px solid rgba(46, 204, 113, 0.3);
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: rgba(231, 76, 60, 0.2);
|
||||
color: #e74c3c;
|
||||
border: 1px solid rgba(231, 76, 60, 0.3);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.tools-table {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tools-table th,
|
||||
.tools-table td {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include 'header.html' %}
|
||||
<div class="container">
|
||||
<!-- Top Navigation Tabs -->
|
||||
<div class="top-nav-tabs"
|
||||
style="display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; background: rgba(25, 118, 210, 0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(25, 118, 210, 0.1);">
|
||||
<a href="{{ url_for('index') }}" class="nav-tab"
|
||||
style="padding: 10px 20px; background: var(--card-bg); color: var(--text-main); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 14px; transition: all 0.3s ease; border: 1px solid var(--border-color); box-shadow: 0 2px 5px rgba(0,0,0,0.05);">🏠 Trang chủ</a>
|
||||
<a href="{{ url_for('my_files') }}" class="nav-tab"
|
||||
style="padding: 10px 20px; background: var(--card-bg); color: var(--text-main); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 14px; transition: all 0.3s ease; border: 1px solid var(--border-color); box-shadow: 0 2px 5px rgba(0,0,0,0.05);">📁 File của tôi</a>
|
||||
{% if user_info and user_info.role == 'admin' %}
|
||||
<a href="{{ url_for('admin_tools') }}" class="nav-tab"
|
||||
style="padding: 10px 20px; background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 14px; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(25, 118, 210, 0.3);">⚙️ Quản trị</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if user_info and user_info.role == 'admin' %}
|
||||
<!-- Admin Sub Navigation Tabs (Dark mode style) -->
|
||||
<div class="admin-sub-tabs"
|
||||
style="display: flex; justify-content: center; gap: 8px; margin-bottom: 25px; flex-wrap: wrap;">
|
||||
<a href="{{ url_for('admin_tools') }}" class="sub-tab"
|
||||
style="padding: 8px 16px; background: #667eea; color: white; text-decoration: none; border-radius: 20px; font-weight: 600; font-size: 13px; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(102, 126, 234, 0.3);">🔧 Cài đặt chung</a>
|
||||
<a href="{{ url_for('admin_users_page') }}" class="sub-tab"
|
||||
style="padding: 8px 16px; background: rgba(255, 255, 255, 0.1); color: var(--text-main); text-decoration: none; border-radius: 20px; font-weight: 600; font-size: 13px; transition: all 0.3s ease; border: 1px solid var(--input-border);">👥 Người dùng & Đơn vị</a>
|
||||
<a href="{{ url_for('list_outputs') }}" class="sub-tab"
|
||||
style="padding: 8px 16px; background: rgba(255, 255, 255, 0.1); color: var(--text-main); text-decoration: none; border-radius: 20px; font-weight: 600; font-size: 13px; transition: all 0.3s ease; border: 1px solid var(--input-border);">📂 Tất cả File</a>
|
||||
<a href="{{ url_for('server_stats_page') }}" class="sub-tab"
|
||||
style="padding: 8px 16px; background: rgba(255, 255, 255, 0.1); color: var(--text-main); text-decoration: none; border-radius: 20px; font-weight: 600; font-size: 13px; transition: all 0.3s ease; border: 1px solid var(--input-border);">📊 Thống kê</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="header">
|
||||
<h1>🔧 Quản lý Công cụ Đánh giá</h1>
|
||||
<div class="header-actions">
|
||||
<a href="{{ url_for('index') }}" class="btn btn-secondary">← Về trang chủ</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if message %}
|
||||
<div class="alert alert-{{ message.type }}">
|
||||
{{ message.text }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Upload New Tool -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">📤 Tải lên Công cụ mới</h2>
|
||||
</div>
|
||||
<form action="tools/upload" method="post" enctype="multipart/form-data" class="upload-form" id="uploadForm">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Hệ điều hành *</label>
|
||||
<select name="os_type" required>
|
||||
<option value="">-- Chọn OS --</option>
|
||||
{% for os_key, meta in os_metadata.items() %}
|
||||
<option value="{{ os_key }}">{{ meta.icon }} {{ meta.display_name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Phiên bản OS (vd: 22.04, 24.04, 2019) *</label>
|
||||
<input type="text" name="os_version_label" placeholder="22.04" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Tên công cụ *</label>
|
||||
<input type="text" name="tool_name" placeholder="Ubuntu 22.04 Hardening" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Phiên bản script (vd: v2.0.0) *</label>
|
||||
<input type="text" name="version" placeholder="v2.0.0" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group" style="grid-column: 1 / -1;">
|
||||
<label>File công cụ (.sh, .py, .ps1, .zip) *</label>
|
||||
<input type="file" name="tool_file" accept=".sh,.py,.ps1,.zip,.tar.gz" required>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">⬆️ Tải lên</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Current Tools -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">📦 Công cụ hiện có</h2>
|
||||
</div>
|
||||
|
||||
{% if tools_list %}
|
||||
<table class="tools-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Hệ điều hành</th>
|
||||
<th>Phiên bản OS</th>
|
||||
<th>Tên công cụ</th>
|
||||
<th>Script ver.</th>
|
||||
<th>Cập nhật</th>
|
||||
<th>Trạng thái</th>
|
||||
<th>Thao tác</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for tool in tools_list %}
|
||||
<tr>
|
||||
<td><span class="os-icon">{{ tool.icon }}</span>{{ tool.display_name }}</td>
|
||||
<td>{{ tool.os_version_label or '-' }}</td>
|
||||
<td>{{ tool.name }}</td>
|
||||
<td><code>{{ tool.version }}</code></td>
|
||||
<td>{{ tool.updated }}</td>
|
||||
<td>
|
||||
{% if tool.available %}
|
||||
<span class="status-badge status-available">✓ Có sẵn</span>
|
||||
{% else %}
|
||||
<span class="status-badge status-unavailable">✗ Chưa có</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="white-space: nowrap;">
|
||||
{% if tool.available %}
|
||||
<div style="display: inline-flex; gap: 6px; align-items: center;">
|
||||
<a href="{{ url_for('download_tool', version_key=tool.version_key) }}"
|
||||
class="btn btn-secondary" style="padding: 5px 10px; font-size: 12px; white-space: nowrap;">⬇️ Tải</a>
|
||||
<form action="tools/delete/{{ tool.version_key }}" method="post" style="display: inline; margin: 0;"
|
||||
onsubmit="return confirm('Bạn có chắc muốn xóa công cụ này?')">
|
||||
<button type="submit" class="btn btn-danger"
|
||||
style="padding: 5px 10px; font-size: 12px; white-space: nowrap;">🗑️ Xóa</button>
|
||||
</form>
|
||||
</div>
|
||||
{% else %}
|
||||
<span style="color: var(--text-muted);">-</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">📭</div>
|
||||
<p>Chưa có công cụ nào được tải lên.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Upload Documentation Form -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">⬆️ Tải lên Tài liệu Cấu hình mới</h2>
|
||||
</div>
|
||||
<form action="{{ url_for('admin_docs_upload') }}" method="post" enctype="multipart/form-data">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Tên tài liệu *</label>
|
||||
<input type="text" name="doc_name" placeholder="VD: Hướng dẫn Hardening OS" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Phiên bản tài liệu (vd: v1.0) *</label>
|
||||
<input type="text" name="doc_version" placeholder="v1.0" value="v1.0" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group" style="grid-column: 1 / -1;">
|
||||
<label>File tài liệu (.pdf, .docx, .xlsx, .zip) *</label>
|
||||
<input type="file" name="doc_file" required>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">⬆️ Tải lên Tài liệu</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Current Documentation -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">📚 Quản lý Tài liệu Cấu hình hiện có</h2>
|
||||
</div>
|
||||
|
||||
{% if docs_list %}
|
||||
<table class="tools-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tên tài liệu</th>
|
||||
<th>Tên file</th>
|
||||
<th>Phiên bản</th>
|
||||
<th>Kích thước</th>
|
||||
<th>Cập nhật</th>
|
||||
<th>Trạng thái</th>
|
||||
<th>Thao tác</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for doc in docs_list %}
|
||||
<tr>
|
||||
<td><strong>📄 {{ doc.name }}</strong></td>
|
||||
<td><code>{{ doc.file }}</code></td>
|
||||
<td><code>{{ doc.version }}</code></td>
|
||||
<td>{{ doc.size }}</td>
|
||||
<td>{{ doc.updated }}</td>
|
||||
<td>
|
||||
{% if doc.available %}
|
||||
<span class="status-badge status-available">✓ Có sẵn</span>
|
||||
{% else %}
|
||||
<span class="status-badge status-unavailable">✗ Lỗi file</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="white-space: nowrap;">
|
||||
{% if doc.available %}
|
||||
<div style="display: inline-flex; gap: 6px; align-items: center;">
|
||||
<a href="{{ url_for('download_doc', doc_key=doc.doc_key) }}"
|
||||
class="btn btn-secondary" style="padding: 5px 10px; font-size: 12px; white-space: nowrap;">⬇️ Tải</a>
|
||||
<form action="{{ url_for('admin_docs_delete', doc_key=doc.doc_key) }}" method="post" style="display: inline; margin: 0;"
|
||||
onsubmit="return confirm('Bạn có chắc muốn xóa tài liệu này?')">
|
||||
<button type="submit" class="btn btn-danger"
|
||||
style="padding: 5px 10px; font-size: 12px; white-space: nowrap;">🗑️ Xóa</button>
|
||||
</form>
|
||||
</div>
|
||||
{% else %}
|
||||
<form action="{{ url_for('admin_docs_delete', doc_key=doc.doc_key) }}" method="post" style="display: inline; margin: 0;"
|
||||
onsubmit="return confirm('Bạn có chắc muốn xóa bản ghi này?')">
|
||||
<button type="submit" class="btn btn-danger"
|
||||
style="padding: 5px 10px; font-size: 12px; white-space: nowrap;">🗑️ Xóa</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">📭</div>
|
||||
<p>Chưa có tài liệu cấu hình nào được tải lên.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Email Notification Settings -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">⚙️ Cài đặt Hệ thống</h2>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: flex-start; gap: 30px; flex-wrap: wrap;">
|
||||
<!-- Email Toggle Block -->
|
||||
<div style="flex: 1; min-width: 280px;">
|
||||
<p style="color: var(--text-muted); font-size: 13px; margin-bottom: 15px;">
|
||||
Bật / Tắt chức năng gửi email thông báo khi xử lý file hoàn tất.
|
||||
</p>
|
||||
|
||||
{% if not email_module_available %}
|
||||
<!-- Module không có sẵn -->
|
||||
<div style="display: flex; align-items: center; gap: 15px; padding: 18px 20px; background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.3); border-radius: 12px;">
|
||||
<span style="font-size: 32px;">📧</span>
|
||||
<div>
|
||||
<div style="font-weight: 600; font-size: 15px; color: #e74c3c;">Không khả dụng</div>
|
||||
<div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">
|
||||
Module <code style="background: rgba(255,255,255,0.1); padding: 1px 6px; border-radius: 4px;">email_notifier</code> chưa được cài đặt trên server này.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% elif email_enabled %}
|
||||
<!-- Module có, đang BẬT -->
|
||||
<div style="display: flex; align-items: center; gap: 15px; padding: 18px 20px; background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.3); border-radius: 12px; margin-bottom: 15px;">
|
||||
<span style="font-size: 32px;">✅</span>
|
||||
<div>
|
||||
<div style="font-weight: 600; font-size: 15px; color: #2ecc71;">Đang BẬT</div>
|
||||
<div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">
|
||||
Hệ thống sẽ gửi email thông báo sau mỗi lần xử lý file thành công.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form action="email/disable" method="post">
|
||||
<button type="submit" class="btn btn-danger" style="width: 100%;">
|
||||
🔕 Tắt gửi Email
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{% else %}
|
||||
<!-- Module có, đang TẮT -->
|
||||
<div style="display: flex; align-items: center; gap: 15px; padding: 18px 20px; background: var(--card-bg); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; margin-bottom: 15px;">
|
||||
<span style="font-size: 32px;">🔕</span>
|
||||
<div>
|
||||
<div style="font-weight: 600; font-size: 15px; color: var(--text-muted);">Đang TẮT</div>
|
||||
<div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">
|
||||
Không gửi email sau khi xử lý. Nhấn bên dưới để bật.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form action="email/enable" method="post">
|
||||
<button type="submit" class="btn btn-primary" style="width: 100%;">
|
||||
📧 Bật gửi Email
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<p style="margin-top: 12px; font-size: 11px; color: #666; font-style: italic;">
|
||||
⚠️ Lưu ý: cài đặt này chỉ giữ trong phiên chạy hiện tại. Khi khởi động lại server, email sẽ trở về trạng thái <strong>TẮT</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Email Stats -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">👥 Thống kê Người dùng (VNPT Email)</h2>
|
||||
</div>
|
||||
|
||||
{% if email_stats and email_stats|length > 0 %}
|
||||
<div style="overflow-x: auto;">
|
||||
<table class="tools-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Người dùng</th>
|
||||
<th>Email</th>
|
||||
<th>Số lần Upload</th>
|
||||
<th>Tổng File</th>
|
||||
<th>Lần đầu</th>
|
||||
<th>Gần nhất</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for stat in email_stats %}
|
||||
<tr>
|
||||
<td style="font-weight: 600; color: var(--text-main);">{{ stat.display_name }}</td>
|
||||
<td style="color: #90caf9;">{{ stat.email }}</td>
|
||||
<td><span class="status-badge" style="background: rgba(102,126,234,0.2); color: #8ba4f9;">{{ stat.total_uploads }}</span></td>
|
||||
<td><span class="status-badge status-available">{{ stat.total_files }}</span></td>
|
||||
<td style="font-size: 13px; color: var(--text-muted);">{{ stat.first_seen }}</td>
|
||||
<td style="font-size: 13px; color: var(--text-muted);">{{ stat.last_seen }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">📭</div>
|
||||
<p>Chưa có dữ liệu thống kê từ người dùng.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Drag and drop support
|
||||
const uploadForm = document.getElementById('uploadForm');
|
||||
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
uploadForm.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
uploadForm.addEventListener(eventName, () => uploadForm.classList.add('dragover'), false);
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
uploadForm.addEventListener(eventName, () => uploadForm.classList.remove('dragover'), false);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,225 @@
|
||||
<script>
|
||||
// Theme initialization (Anti-FOUC)
|
||||
(function() {
|
||||
var savedTheme = localStorage.getItem('audit_theme');
|
||||
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg-main: #f4f6f9;
|
||||
--card-bg: #ffffff;
|
||||
--text-main: #2b3445;
|
||||
--text-muted: #7d879c;
|
||||
--border-color: #e3e9ef;
|
||||
--border-color-light: #f1f5f9;
|
||||
--primary-color: #1976d2;
|
||||
--hover-bg: #f8f9fa;
|
||||
--input-bg: #ffffff;
|
||||
--input-text: #2b3445;
|
||||
--input-border: #ced4da;
|
||||
--sub-tab-bg: #e3f2fd;
|
||||
--sub-tab-text: #1565c0;
|
||||
--sub-tab-border: #bbdefb;
|
||||
--sub-tab-active-bg: #1565c0;
|
||||
--sub-tab-active-text: #ffffff;
|
||||
--empty-state-bg: #f8f9fa;
|
||||
--table-header-bg: #f1f5f9;
|
||||
--table-header-text: #475569;
|
||||
--table-row-hover: #f8fafc;
|
||||
--table-border: #e2e8f0;
|
||||
--modal-bg: #ffffff;
|
||||
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
--success-color: #2e7d32;
|
||||
--success-bg: #e8f5e9;
|
||||
--danger-color: #c62828;
|
||||
--danger-bg: #ffebee;
|
||||
--warning-color: #e65100;
|
||||
--warning-bg: #fff3e0;
|
||||
--info-color: #0277bd;
|
||||
--info-bg: #e1f5fe;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-main: #0f172a;
|
||||
--card-bg: #1e293b;
|
||||
--text-main: #f1f5f9;
|
||||
--text-muted: #94a3b8;
|
||||
--border-color: #334155;
|
||||
--border-color-light: #1e293b;
|
||||
--primary-color: #3b82f6;
|
||||
--hover-bg: #334155;
|
||||
--input-bg: #0f172a;
|
||||
--input-text: #f1f5f9;
|
||||
--input-border: #475569;
|
||||
--sub-tab-bg: #1e293b;
|
||||
--sub-tab-text: #e2e8f0;
|
||||
--sub-tab-border: #334155;
|
||||
--sub-tab-active-bg: #3b82f6;
|
||||
--sub-tab-active-text: #ffffff;
|
||||
--empty-state-bg: #1e293b;
|
||||
--table-header-bg: #334155;
|
||||
--table-header-text: #e2e8f0;
|
||||
--table-row-hover: #1e293b;
|
||||
--table-border: #334155;
|
||||
--modal-bg: #1e293b;
|
||||
--shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
--success-color: #4caf50;
|
||||
--success-bg: rgba(76, 175, 80, 0.1);
|
||||
--danger-color: #ef5350;
|
||||
--danger-bg: rgba(244, 67, 54, 0.1);
|
||||
--warning-color: #ff9800;
|
||||
--warning-bg: rgba(255, 152, 0, 0.1);
|
||||
--info-color: #29b6f6;
|
||||
--info-bg: rgba(3, 169, 244, 0.1);
|
||||
}
|
||||
|
||||
.global-header {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Đẩy toàn bộ nội dung body xuống để không bị header che mất */
|
||||
body {
|
||||
margin-top: 60px !important;
|
||||
background-color: var(--bg-main);
|
||||
color: var(--text-main);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-logo span {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 3px 8px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.header-user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.header-user-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-user-role {
|
||||
font-size: 12px;
|
||||
color: #bbdefb;
|
||||
}
|
||||
|
||||
.header-action-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 6px 15px;
|
||||
border-radius: 5px;
|
||||
font-weight: 600;
|
||||
transition: background 0.3s;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.header-action-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
padding: 6px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.header-guest {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 6px 15px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="global-header">
|
||||
<div class="header-logo">
|
||||
🛡️ Audit Hardening Tool <span>VNPT-MEDIA</span>
|
||||
</div>
|
||||
<div class="header-user-info">
|
||||
<button id="themeToggleBtn" class="header-action-btn theme-toggle-btn" title="Chuyển đổi giao diện Sáng/Tối">
|
||||
<span id="themeIcon">🌞</span>
|
||||
</button>
|
||||
{% if is_logged_in and user_info %}
|
||||
<div class="header-user-details">
|
||||
<span class="header-user-name">👤 {{ user_info.full_name or user_info.username }}</span>
|
||||
{% if user_info.role %}
|
||||
<span class="header-user-role">{{ user_info.role|upper }} {% if user_info.unit_name %} | {{ user_info.unit_name }}{% endif %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<a href="{{ url_for('logout') }}" class="header-action-btn">🚪 Đăng xuất</a>
|
||||
{% else %}
|
||||
<div class="header-guest">
|
||||
👤 Khách
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const toggleBtn = document.getElementById('themeToggleBtn');
|
||||
const themeIcon = document.getElementById('themeIcon');
|
||||
|
||||
function updateIcon() {
|
||||
if (document.documentElement.getAttribute('data-theme') === 'dark') {
|
||||
themeIcon.textContent = '🌙';
|
||||
} else {
|
||||
themeIcon.textContent = '🌞';
|
||||
}
|
||||
}
|
||||
|
||||
updateIcon();
|
||||
|
||||
toggleBtn.addEventListener('click', function() {
|
||||
let currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
let newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('audit_theme', newTheme);
|
||||
updateIcon();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,599 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
|
||||
<head>
|
||||
<script>
|
||||
var savedTheme = localStorage.getItem('audit_theme');
|
||||
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
}
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/png" href="{{ url_for('icon', path='/icon.png') }}">
|
||||
<title>Đăng nhập - Công cụ Kiểm tra Hardening - VNPT-MEDIA</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-main: #f4f6f9;
|
||||
--card-bg: #ffffff;
|
||||
--text-main: #2b3445;
|
||||
--text-muted: #7d879c;
|
||||
--border-color: #e3e9ef;
|
||||
--border-color-light: #f1f5f9;
|
||||
--primary-color: #1976d2;
|
||||
--hover-bg: #f8f9fa;
|
||||
--input-bg: #ffffff;
|
||||
--input-text: #2b3445;
|
||||
--input-border: #ced4da;
|
||||
--empty-state-bg: #f8f9fa;
|
||||
--success-color: #2e7d32;
|
||||
--success-bg: #e8f5e9;
|
||||
--danger-color: #c62828;
|
||||
--danger-bg: #ffebee;
|
||||
--warning-color: #e65100;
|
||||
--warning-bg: #fff3e0;
|
||||
--info-color: #0277bd;
|
||||
--info-bg: #e1f5fe;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-main: #0f172a;
|
||||
--card-bg: #1e293b;
|
||||
--text-main: #f1f5f9;
|
||||
--text-muted: #94a3b8;
|
||||
--border-color: #334155;
|
||||
--border-color-light: #1e293b;
|
||||
--primary-color: #3b82f6;
|
||||
--hover-bg: #334155;
|
||||
--input-bg: #0f172a;
|
||||
--input-text: #f1f5f9;
|
||||
--input-border: #475569;
|
||||
--empty-state-bg: #1e293b;
|
||||
--success-color: #4caf50;
|
||||
--success-bg: rgba(76, 175, 80, 0.1);
|
||||
--danger-color: #ef5350;
|
||||
--danger-bg: rgba(244, 67, 54, 0.1);
|
||||
--warning-color: #ff9800;
|
||||
--warning-bg: rgba(255, 152, 0, 0.1);
|
||||
--info-color: #29b6f6;
|
||||
--info-bg: rgba(3, 169, 244, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: var(--bg-main);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 20px 10px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background:
|
||||
linear-gradient(135deg, transparent 0%, transparent 48%, rgba(33, 150, 243, 0.05) 48%, rgba(33, 150, 243, 0.05) 52%, transparent 52%, transparent 100%),
|
||||
linear-gradient(45deg, transparent 0%, transparent 48%, rgba(33, 150, 243, 0.08) 48%, rgba(33, 150, 243, 0.08) 52%, transparent 52%, transparent 100%),
|
||||
linear-gradient(135deg, transparent 0%, transparent 48%, rgba(33, 150, 243, 0.03) 48%, rgba(33, 150, 243, 0.03) 52%, transparent 52%, transparent 100%);
|
||||
background-size: 300px 300px, 400px 400px, 500px 500px;
|
||||
background-position: 0 0, 100px 100px, 200px 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 400px 400px 0;
|
||||
border-color: transparent rgba(33, 150, 243, 0.03) transparent transparent;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.menu-icon span {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #1976d2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: var(--card-bg);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
padding: 50px 55px;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
gap: 0;
|
||||
margin-bottom: 35px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid var(--sub-tab-border);
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
flex: 1;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-color);
|
||||
letter-spacing: 0.35em;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
padding-right: 0.35em; /* compensate last letter-spacing */
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #1976d2;
|
||||
border-radius: 50% 0 50% 50%;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.logo-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 14px 18px;
|
||||
background-color: var(--input-bg);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.password-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.password-wrapper input {
|
||||
padding-right: 45px;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-login:hover {
|
||||
background: #1565c0;
|
||||
}
|
||||
|
||||
/* SSO Portal Button */
|
||||
.sso-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 20px 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.sso-divider::before,
|
||||
.sso-divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-sso {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: linear-gradient(135deg, #0d47a1, #1976d2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-sso:hover {
|
||||
background: linear-gradient(135deg, #1565c0, #1e88e5);
|
||||
box-shadow: 0 4px 15px rgba(25, 118, 210, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.sso-info {
|
||||
margin-top: 10px;
|
||||
padding: 10px 14px;
|
||||
background-color: var(--info-bg);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid #1976d2;
|
||||
font-size: 12px;
|
||||
color: var(--primary-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.help-text a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.help-text a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.help-text strong {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
text-align: center;
|
||||
color: var(--primary-color);
|
||||
font-size: 13px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.footer strong {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 12px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: var(--danger-bg);
|
||||
color: var(--danger-color);
|
||||
border: 1px solid #ef9a9a;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: var(--success-bg);
|
||||
color: var(--success-color);
|
||||
border: 1px solid #a5d6a7;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-container {
|
||||
padding: 30px 25px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 38px;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.logo-icon::after {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
body {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
padding: 25px 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 32px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.logo-icon::after {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-guest {
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 11px;
|
||||
margin-top: 20px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="menu-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="login-container">
|
||||
<div class="logo">
|
||||
<img src="{{ url_for('icon', path='/icon.png') }}" alt="VNPT-MEDIA Logo">
|
||||
<span class="logo-text">VNPT-MEDIA</span>
|
||||
</div>
|
||||
|
||||
{% if message %}
|
||||
<div class="alert alert-{{ message.type }}">
|
||||
{{ message.text }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="login" id="loginForm">
|
||||
<div class="form-group">
|
||||
<div style="position: relative;">
|
||||
<input
|
||||
type="email"
|
||||
id="emailInput"
|
||||
name="username"
|
||||
placeholder="ten.nv@vnpt.vn"
|
||||
required
|
||||
autocomplete="email"
|
||||
style="padding-left: 44px;"
|
||||
oninput="validateEmailDomain(this)"
|
||||
>
|
||||
<span style="position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:17px;pointer-events:none;">✉️</span>
|
||||
</div>
|
||||
<div id="emailHint" style="margin-top:6px;font-size:12px;color: var(--danger-color);display:none;">
|
||||
⚠️ Vui lòng nhập email có đuôi <strong>@vnpt.vn</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="password-wrapper">
|
||||
<input type="password" id="password" name="password" placeholder="Mật khẩu" required autocomplete="current-password">
|
||||
<span class="password-toggle" onclick="togglePassword()">👁</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: nowrap;">
|
||||
<span style="font-size: 14px; color: var(--text-muted); white-space: nowrap;">🔐 Mã xác thực 2FA (OTP)</span>
|
||||
<span style="
|
||||
background: linear-gradient(135deg, #1565c0, #1976d2);
|
||||
color: white;
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
">RADIUS</span>
|
||||
</div>
|
||||
<input type="text" name="otp" id="otp"
|
||||
maxlength="6" pattern="[0-9]*" inputmode="numeric"
|
||||
autocomplete="one-time-code"
|
||||
style="letter-spacing: 8px; text-align: center; font-size: 18px; font-weight: 600;">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-login">🔑 Đăng nhập qua RADIUS</button>
|
||||
</form>
|
||||
|
||||
{% if sso_enabled %}
|
||||
<div class="sso-divider">hoặc</div>
|
||||
|
||||
<div style="text-align:center; margin-bottom: 10px;">
|
||||
<div class="sso-info">
|
||||
🌐 <strong>Đăng nhập qua SSO Portal:</strong><br>
|
||||
Truy cập hệ thống bằng tài khoản tập đoàn VNPT-MEDIA.<br>
|
||||
SSO Portal sẽ tự động chuyển hướng bạn về đây sau khi xác thực.
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function togglePassword() {
|
||||
const passwordInput = document.getElementById('password');
|
||||
const toggle = document.querySelector('.password-toggle');
|
||||
|
||||
if (passwordInput.type === 'password') {
|
||||
passwordInput.type = 'text';
|
||||
toggle.textContent = '🙈';
|
||||
} else {
|
||||
passwordInput.type = 'password';
|
||||
toggle.textContent = '👁';
|
||||
}
|
||||
}
|
||||
|
||||
// Validate domain @vnpt.vn khi người dùng gõ
|
||||
function validateEmailDomain(input) {
|
||||
const hint = document.getElementById('emailHint');
|
||||
const val = input.value.trim().toLowerCase();
|
||||
// Chỉ hiện cảnh báo khi người dùng đã gõ @ nhưng domain sai
|
||||
if (val.includes('@') && !val.endsWith('@vnpt.vn')) {
|
||||
hint.style.display = 'block';
|
||||
input.style.borderColor = '#e53935';
|
||||
} else {
|
||||
hint.style.display = 'none';
|
||||
input.style.borderColor = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Chặn submit nếu domain sai
|
||||
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||||
const emailVal = document.getElementById('emailInput').value.trim().toLowerCase();
|
||||
if (!emailVal.endsWith('@vnpt.vn')) {
|
||||
e.preventDefault();
|
||||
document.getElementById('emailHint').style.display = 'block';
|
||||
document.getElementById('emailInput').style.borderColor = '#e53935';
|
||||
document.getElementById('emailInput').focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-focus OTP field after password
|
||||
document.getElementById('password').addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Tab' || e.key === 'Enter') {
|
||||
if (e.key === 'Enter') e.preventDefault();
|
||||
document.getElementById('otp').focus();
|
||||
}
|
||||
});
|
||||
|
||||
// OTP: only allow digits
|
||||
document.getElementById('otp').addEventListener('input', function(e) {
|
||||
this.value = this.value.replace(/[^0-9]/g, '');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user