DataMiddleware/SourceCode/DataMiddleware/app/views/templates/base/layout.html

{% extends "base/base.html" %} {% block head %}

<link rel="stylesheet" href="{{ url_for('static', filename='layout.css') }}" />
{% block page_head %}{% endblock %} {% endblock %} {% block content %}
<nav class="navbar navbar-expand-lg navbar-dark">
	<div class="container-fluid">
		<a class="navbar-brand" href="#">IWB</a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav me-auto mb-2 mb-lg-0">
				<li class="nav-item">
					<a class="nav-link active" aria-current="page" href="#">首页</a>
				</li>
			</ul>
			<div class="d-flex align-items-center">
				<div class="dropdown">
					<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
						<div class="rounded-circle me-2 d-flex align-items-center justify-content-center bg-primary text-white" style="width: 32px; height: 32px">{{ current_user.name[0].upper() if current_user and current_user.is_authenticated and current_user.name else '?' }}</div>
						<span>{{ current_user.name if current_user and current_user.is_authenticated and current_user.name else '未登录' }}</span>
					</a>
					<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
						<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#changePasswordModal">修改密码</a></li>
						<li><hr class="dropdown-divider" /></li>
						<li><a class="dropdown-item" href="#" onclick="logout()">注销登录</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</nav>

<div class="container-fluid py-4">{% block page_content %}{% endblock %}</div>

<footer class="footer mt-auto py-3">
	<div class="container text-center">
		<span>© 2024 IWB. All rights reserved.</span>
	</div>
</footer>

<!-- 修改密码模态框 -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="changePasswordModalLabel">修改密码</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form id="changePasswordForm">
					<div class="mb-3">
						<label for="oldPassword" class="form-label">当前密码</label>
						<input type="password" class="form-control" id="oldPassword" required />
					</div>
					<div class="mb-3">
						<label for="newPassword" class="form-label">新密码</label>
						<input type="password" class="form-control" id="newPassword" required />
					</div>
					<div class="mb-3">
						<label for="confirmPassword" class="form-label">确认新密码</label>
						<input type="password" class="form-control" id="confirmPassword" required />
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary" onclick="changePassword()">保存</button>
			</div>
		</div>
	</div>
</div>
{% endblock %} {% block scripts %}
<script>
	function changePassword() {
		const oldPassword = document.getElementById('oldPassword').value
		const newPassword = document.getElementById('newPassword').value
		const confirmPassword = document.getElementById('confirmPassword').value

		if (newPassword !== confirmPassword) {
			alert('新密码与确认密码不匹配')
			return
		}

		fetch('/api/user/change-password', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
			},
			body: JSON.stringify({
				old_password: oldPassword,
				new_password: newPassword,
			}),
		})
			.then((response) => response.json())
			.then((data) => {
				if (data.success) {
					alert('密码修改成功')
					$('#changePasswordModal').modal('hide')
					document.getElementById('changePasswordForm').reset()
				} else {
					alert(data.message || '密码修改失败')
				}
			})
			.catch((error) => {
				console.error('Error:', error)
				alert('发生错误，请稍后重试')
			})
	}

	function logout() {
		fetch('/api/auth/logout', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
			},
		})
			.then((response) => response.json())
			.then((data) => {
				if (data.success) {
					window.location.href = '/login'
				} else {
					alert(data.message || '注销登录失败')
				}
			})
			.catch((error)=> {
				console.error('Error:', error)
				alert('发生错误，请稍后重试')
			})
	}
</script>
{% endblock %}