220 lines
8.7 KiB
HTML
220 lines
8.7 KiB
HTML
{% extends "ewoooc_base.html" %}
|
|
|
|
{% block title %}修改密碼 - EwoooC{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container py-4">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-lg-5">
|
|
<div class="card shadow">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-key me-2"></i>修改密碼
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="alertContainer"></div>
|
|
|
|
<form id="changePasswordForm">
|
|
<div class="mb-3">
|
|
<label for="oldPassword" class="form-label">舊密碼 <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="oldPassword" required>
|
|
<button class="btn btn-outline-secondary" type="button" onclick="togglePassword('oldPassword')">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="newPassword" class="form-label">新密碼 <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="newPassword" required oninput="checkPasswordStrength()">
|
|
<button class="btn btn-outline-secondary" type="button" onclick="togglePassword('newPassword')">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
<div id="passwordStrength" class="mt-2"></div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="confirmPassword" class="form-label">確認新密碼 <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="confirmPassword" required oninput="checkPasswordMatch()">
|
|
<button class="btn btn-outline-secondary" type="button" onclick="togglePassword('confirmPassword')">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
<div id="passwordMatch" class="mt-2"></div>
|
|
</div>
|
|
|
|
<!-- 密碼要求提示 -->
|
|
<div class="alert alert-info">
|
|
<h6 class="alert-heading"><i class="fas fa-info-circle me-2"></i>密碼要求</h6>
|
|
<ul class="mb-0 ps-3">
|
|
{% for req in password_requirements %}
|
|
<li>{{ req }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary" id="submitBtn">
|
|
<i class="fas fa-save me-2"></i>變更密碼
|
|
</button>
|
|
<a href="{{ url_for('dashboard.index') }}" class="btn btn-secondary">
|
|
<i class="fas fa-times me-2"></i>取消
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.getElementById('changePasswordForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const oldPassword = document.getElementById('oldPassword').value;
|
|
const newPassword = document.getElementById('newPassword').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
|
|
// 前端驗證
|
|
if (newPassword !== confirmPassword) {
|
|
showAlert('新密碼與確認密碼不符', 'danger');
|
|
return;
|
|
}
|
|
|
|
if (newPassword === oldPassword) {
|
|
showAlert('新密碼不能與舊密碼相同', 'danger');
|
|
return;
|
|
}
|
|
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>處理中...';
|
|
|
|
try {
|
|
const response = await fetch('/api/change_password', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrfToken
|
|
},
|
|
body: JSON.stringify({
|
|
old_password: oldPassword,
|
|
new_password: newPassword
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
showAlert('密碼變更成功！即將跳轉至登入頁面...', 'success');
|
|
setTimeout(() => {
|
|
window.location.href = '/logout';
|
|
}, 2000);
|
|
} else {
|
|
showAlert(data.message, 'danger');
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>變更密碼';
|
|
}
|
|
} catch (error) {
|
|
console.error('密碼變更失敗:', error);
|
|
showAlert('密碼變更失敗，請稍後再試', 'danger');
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>變更密碼';
|
|
}
|
|
});
|
|
|
|
function togglePassword(inputId) {
|
|
const input = document.getElementById(inputId);
|
|
const icon = input.parentElement.querySelector('.fa-eye, .fa-eye-slash');
|
|
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.remove('fa-eye');
|
|
icon.classList.add('fa-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.remove('fa-eye-slash');
|
|
icon.classList.add('fa-eye');
|
|
}
|
|
}
|
|
|
|
function checkPasswordStrength() {
|
|
const password = document.getElementById('newPassword').value;
|
|
const strengthDiv = document.getElementById('passwordStrength');
|
|
|
|
if (!password) {
|
|
strengthDiv.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
let score = 0;
|
|
let feedback = [];
|
|
|
|
// 長度檢查
|
|
if (password.length >= 8) score++;
|
|
if (password.length >= 12) score++;
|
|
|
|
// 包含檢查
|
|
if (/[a-z]/.test(password)) score++;
|
|
if (/[A-Z]/.test(password)) score++;
|
|
if (/[0-9]/.test(password)) score++;
|
|
if (/[!@#$%^&*]/.test(password)) score++;
|
|
|
|
let strengthText, strengthClass;
|
|
if (score < 3) {
|
|
strengthText = '弱';
|
|
strengthClass = 'text-danger';
|
|
} else if (score < 5) {
|
|
strengthText = '中等';
|
|
strengthClass = 'text-warning';
|
|
} else {
|
|
strengthText = '強';
|
|
strengthClass = 'text-success';
|
|
}
|
|
|
|
strengthDiv.innerHTML = `
|
|
<div class="progress" style="height: 5px;">
|
|
<div class="progress-bar bg-${strengthClass.replace('text-', '')}"
|
|
style="width: ${(score / 6) * 100}%"></div>
|
|
</div>
|
|
<small class="${strengthClass}">密碼強度：${strengthText}</small>
|
|
`;
|
|
}
|
|
|
|
function checkPasswordMatch() {
|
|
const newPassword = document.getElementById('newPassword').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
const matchDiv = document.getElementById('passwordMatch');
|
|
|
|
if (!confirmPassword) {
|
|
matchDiv.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
if (newPassword === confirmPassword) {
|
|
matchDiv.innerHTML = '<small class="text-success"><i class="fas fa-check me-1"></i>密碼相符</small>';
|
|
} else {
|
|
matchDiv.innerHTML = '<small class="text-danger"><i class="fas fa-times me-1"></i>密碼不相符</small>';
|
|
}
|
|
}
|
|
|
|
function showAlert(message, type) {
|
|
const container = document.getElementById('alertContainer');
|
|
container.innerHTML = `
|
|
<div class="alert alert-${type} alert-dismissible fade show" role="alert">
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
`;
|
|
}
|
|
</script>
|
|
{% endblock %}
|