157 lines
7.0 KiB
HTML
157 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Thay đổi mật khẩu - EuroTile Worker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="account.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Thay đổi mật khẩu</h1>
|
|
<div style="width: 32px;"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="form-container">
|
|
<div class="card">
|
|
<h3 class="card-title mb-3">Cập nhật mật khẩu</h3>
|
|
|
|
<form id="passwordForm">
|
|
<!-- Current Password -->
|
|
<div class="form-group">
|
|
<label class="form-label">Mật khẩu hiện tại *</label>
|
|
<div class="password-input-container">
|
|
<input type="password" class="form-input" id="currentPassword" required>
|
|
<button type="button" class="password-toggle" onclick="togglePassword('currentPassword')">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Password -->
|
|
<div class="form-group">
|
|
<label class="form-label">Mật khẩu mới *</label>
|
|
<div class="password-input-container">
|
|
<input type="password" class="form-input" id="newPassword" required minlength="6">
|
|
<button type="button" class="password-toggle" onclick="togglePassword('newPassword')">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
<p class="form-help">Mật khẩu phải có ít nhất 6 ký tự</p>
|
|
</div>
|
|
|
|
<!-- Confirm New Password -->
|
|
<div class="form-group">
|
|
<label class="form-label">Nhập lại mật khẩu mới *</label>
|
|
<div class="password-input-container">
|
|
<input type="password" class="form-input" id="confirmPassword" required minlength="6">
|
|
<button type="button" class="password-toggle" onclick="togglePassword('confirmPassword')">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
<p class="form-help" id="passwordMatch"></p>
|
|
</div>
|
|
|
|
<!-- Security Tips -->
|
|
<div class="security-tips">
|
|
<h4>Gợi ý bảo mật:</h4>
|
|
<ul>
|
|
<li>Sử dụng ít nhất 8 ký tự</li>
|
|
<li>Kết hợp chữ hoa, chữ thường và số</li>
|
|
<li>Bao gồm ký tự đặc biệt (!@#$%^&*)</li>
|
|
<li>Không sử dụng thông tin cá nhân</li>
|
|
<li>Thường xuyên thay đổi mật khẩu</li>
|
|
</ul>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="history.back()">
|
|
Hủy bỏ
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" onclick="changePassword()">
|
|
<i class="fas fa-key"></i>
|
|
Đổi mật khẩu
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword(fieldId) {
|
|
const field = document.getElementById(fieldId);
|
|
const button = field.nextElementSibling;
|
|
const icon = button.querySelector('i');
|
|
|
|
if (field.type === 'password') {
|
|
field.type = 'text';
|
|
icon.classList.remove('fa-eye');
|
|
icon.classList.add('fa-eye-slash');
|
|
} else {
|
|
field.type = 'password';
|
|
icon.classList.remove('fa-eye-slash');
|
|
icon.classList.add('fa-eye');
|
|
}
|
|
}
|
|
|
|
function validatePasswordMatch() {
|
|
const newPassword = document.getElementById('newPassword').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
const matchMessage = document.getElementById('passwordMatch');
|
|
|
|
if (confirmPassword && newPassword !== confirmPassword) {
|
|
matchMessage.textContent = 'Mật khẩu không khớp';
|
|
matchMessage.style.color = 'var(--danger-color)';
|
|
return false;
|
|
} else if (confirmPassword && newPassword === confirmPassword) {
|
|
matchMessage.textContent = 'Mật khẩu khớp';
|
|
matchMessage.style.color = 'var(--success-color)';
|
|
return true;
|
|
} else {
|
|
matchMessage.textContent = '';
|
|
return true;
|
|
}
|
|
}
|
|
|
|
document.getElementById('confirmPassword').addEventListener('input', validatePasswordMatch);
|
|
document.getElementById('newPassword').addEventListener('input', validatePasswordMatch);
|
|
|
|
function changePassword() {
|
|
const form = document.getElementById('passwordForm');
|
|
const currentPassword = document.getElementById('currentPassword').value;
|
|
const newPassword = document.getElementById('newPassword').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity();
|
|
return;
|
|
}
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
alert('Mật khẩu mới và xác nhận mật khẩu không khớp!');
|
|
return;
|
|
}
|
|
|
|
if (newPassword.length < 6) {
|
|
alert('Mật khẩu mới phải có ít nhất 6 ký tự!');
|
|
return;
|
|
}
|
|
|
|
// Simulate password change
|
|
alert('Mật khẩu đã được thay đổi thành công!');
|
|
window.location.href = 'account.html';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |