DNS/dns-server
1
0
Fork 0
Code Pull Requests Activity

实现修改密码和注销功能

Browse Source
This commit is contained in:
Alex Yang
2025-11-30 11:52:41 +08:00
parent 72aa2846e5
commit dadfd4c78d
4 changed files with 304 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
static/index.html
View File

@@ -149,9 +149,22 @@
<button class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100">
<i class="fa fa-bell text-lg"></i>
</button>
<div class="flex items-center">
<img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
<span class="ml-2 hidden md:block">管理员</span>
<!-- 账户下拉菜单 -->
<div class="relative group" id="account-dropdown">
<button class="flex items-center p-2 rounded-full hover:bg-gray-100 transition-colors focus:outline-none">
<img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
<span class="ml-2 hidden md:block">管理员</span>
<i class="fa fa-caret-down ml-1 text-xs hidden md:block"></i>
</button>
<!-- 下拉菜单 -->
<div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden group-hover:block" id="account-menu">
<button id="change-password-btn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
<i class="fa fa-key mr-2"></i>修改密码
</button>
<button id="logout-btn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
<i class="fa fa-sign-out mr-2"></i>注销
</button>
</div>
</div>
</div>
</header>
@@ -1047,6 +1060,41 @@
</main>
</div>
<!-- 修改密码模态框 -->
<div id="change-password-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-semibold">修改密码</h3>
<button id="close-modal-btn" class="text-gray-500 hover:text-gray-700 focus:outline-none">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<form id="change-password-form">
<div class="mb-4">
<label for="current-password" class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
<input type="password" id="current-password" name="currentPassword" placeholder="请输入当前密码" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
</div>
<div class="mb-4">
<label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
<input type="password" id="new-password" name="newPassword" placeholder="请输入新密码" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
</div>
<div class="mb-6">
<label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
<input type="password" id="confirm-password" name="confirmPassword" placeholder="请再次输入新密码" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
<div id="password-mismatch" class="text-danger text-sm mt-1 hidden">新密码和确认密码不匹配</div>
</div>
<div class="flex items-center justify-end space-x-3">
<button type="button" id="cancel-change-password" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors">取消</button>
<button type="submit" id="save-password-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">保存</button>
</div>
</form>
</div>
</div>
<!-- 脚本 -->
<script src="js/main.js"></script>
<script src="js/api.js"></script>