jinchao/XNSim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V0.27.1.250618_alpha:个人信息页面添加修改密码功能

Browse Source
This commit is contained in:
jinchao 2025-06-18 12:11:04 +08:00
parent 260f8378da
commit 03feef2300
7 changed files with 373 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
Login/.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,62 @@
{
"files.associations": {
"cctype": "cpp",
"clocale": "cpp",
"cmath": "cpp",
"cstdarg": "cpp",
"cstddef": "cpp",
"cstdio": "cpp",
"cstdlib": "cpp",
"cstring": "cpp",
"ctime": "cpp",
"cwchar": "cpp",
"cwctype": "cpp",
"array": "cpp",
"atomic": "cpp",
"bit": "cpp",
"*.tcc": "cpp",
"chrono": "cpp",
"codecvt": "cpp",
"compare": "cpp",
"concepts": "cpp",
"cstdint": "cpp",
"deque": "cpp",
"forward_list": "cpp",
"map": "cpp",
"unordered_map": "cpp",
"vector": "cpp",
"exception": "cpp",
"algorithm": "cpp",
"functional": "cpp",
"iterator": "cpp",
"memory": "cpp",
"memory_resource": "cpp",
"numeric": "cpp",
"optional": "cpp",
"random": "cpp",
"ratio": "cpp",
"string": "cpp",
"string_view": "cpp",
"system_error": "cpp",
"tuple": "cpp",
"type_traits": "cpp",
"utility": "cpp",
"initializer_list": "cpp",
"iomanip": "cpp",
"iosfwd": "cpp",
"iostream": "cpp",
"istream": "cpp",
"limits": "cpp",
"new": "cpp",
"ostream": "cpp",
"ranges": "cpp",
"sstream": "cpp",
"stdexcept": "cpp",
"stop_token": "cpp",
"streambuf": "cpp",
"thread": "cpp",
"cinttypes": "cpp",
"typeinfo": "cpp",
"valarray": "cpp"
}
}

16
Login/login.cpp
View File

@ -510,9 +510,13 @@ extern "C" LOGIN_EXPORT int changePassword(int user_id, const char *old_password
return -1;
}
if (old_password_str == new_password_str) {
return -2;
}
const char *xnCorePath = std::getenv("XNCore");
if (!xnCorePath) {
return -1;
return -3;
}
fs::path dbPath = fs::path(xnCorePath) / "database" / "UserInfo.db";
@ -520,7 +524,7 @@ extern "C" LOGIN_EXPORT int changePassword(int user_id, const char *old_password
{
sqlite3 *db;
if (sqlite3_open(dbPath.string().c_str(), &db) != SQLITE_OK) {
return -1;
return -3;
}
// 首先验证旧密码
@ -543,7 +547,7 @@ extern "C" LOGIN_EXPORT int changePassword(int user_id, const char *old_password
if (encryptedOldPassword != storedPassword) {
sqlite3_finalize(stmt);
sqlite3_close(db);
return -3; // 旧密码错误
return -4; // 旧密码错误
}
// 生成新的加密密码
@ -570,16 +574,16 @@ extern "C" LOGIN_EXPORT int changePassword(int user_id, const char *old_password
// 用户不存在
sqlite3_finalize(stmt);
sqlite3_close(db);
return -2; // 用户不存在
return -5; // 用户不存在
}
}
sqlite3_close(db);
}
return -1; // Default error return
return -6; // Default error return
} catch (const std::exception &) {
return -1;
return -3;
}
}

BIN
Release/database/UserInfo.db
View File

Binary file not shown.

BIN
Release/database/XNSim.db
View File

Binary file not shown.

BIN
XNSimHtml/assets/icons/png/password.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

296
XNSimHtml/components/profile-center.js
View File

@ -65,6 +65,11 @@ class ProfileCenter extends HTMLElement {
display: inline-block;
}
.avatar-wrapper {
position: relative;
display: inline-block;
}
.avatar {
width: 100px;
height: 100px;
@ -78,12 +83,12 @@ class ProfileCenter extends HTMLElement {
.avatar-edit-btn {
position: absolute;
bottom: 15px;
right: 0;
width: 32px;
height: 32px;
bottom: 5px;
right: 5px;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
background: rgba(255,255,255,0.95);
border: 2px solid #667eea;
cursor: pointer;
display: flex;
@ -91,6 +96,7 @@ class ProfileCenter extends HTMLElement {
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 5;
}
.avatar-edit-btn:hover {
@ -100,9 +106,9 @@ class ProfileCenter extends HTMLElement {
}
.avatar-edit-btn img {
width: 16px;
height: 16px;
opacity: 0.7;
width: 14px;
height: 14px;
opacity: 0.8;
}
.avatar-edit-btn:hover img {
@ -319,6 +325,131 @@ class ProfileCenter extends HTMLElement {
color: #6c757d;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal {
background: white;
border-radius: 12px;
padding: 24px;
width: 90%;
max-width: 400px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
transform: scale(0.9);
transition: transform 0.3s ease;
}
.modal-overlay.active .modal {
transform: scale(1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.modal-title {
font-size: 18px;
font-weight: 600;
color: #333;
}
.modal-close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #6c757d;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close:hover {
color: #333;
}
.form-group {
margin-bottom: 16px;
}
.form-label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: #333;
}
.form-input {
width: 100%;
padding: 10px 12px;
border: 1px solid #ced4da;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
.form-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}
.modal-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 24px;
}
.btn-small {
padding: 8px 16px;
font-size: 14px;
}
.modal-message {
margin-bottom: 16px;
padding: 12px;
border-radius: 6px;
font-size: 14px;
text-align: center;
}
.modal-message.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.modal-message.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
@media (max-width: 768px) {
:host {
padding: 10px;
@ -340,10 +471,12 @@ class ProfileCenter extends HTMLElement {
<div class="profile-container">
<div class="profile-header">
<div class="avatar-section">
<div class="avatar-wrapper">
<img id="userAvatar" class="avatar" src="assets/icons/png/user.png" alt="用户头像">
<div id="avatarEditBtn" class="avatar-edit-btn">
<img src="assets/icons/png/sliders_b.png" alt="编辑头像">
</div>
</div>
<input id="avatarFileInput" type="file" class="file-input" accept="image/*">
<div id="uploadLoading" class="upload-loading" style="display: none;">上传中...</div>
<h1 id="userName" class="username">加载中...</h1>
@ -414,6 +547,10 @@ class ProfileCenter extends HTMLElement {
<img src="assets/icons/png/sliders.png" alt="编辑">
编辑信息
</button>
<button id="changePasswordBtn" class="btn btn-primary">
<img src="assets/icons/png/password.png" alt="修改密码">
修改密码
</button>
<button id="saveBtn" class="btn btn-primary" style="display: none;">
<img src="assets/icons/png/check-square.png" alt="保存">
保存更改
@ -425,6 +562,35 @@ class ProfileCenter extends HTMLElement {
</div>
</div>
</div>
<!-- 修改密码模态框 -->
<div id="changePasswordModal" class="modal-overlay">
<div class="modal">
<div class="modal-header">
<h3 class="modal-title">修改密码</h3>
<button class="modal-close" id="closePasswordModal">&times;</button>
</div>
<div id="passwordModalMessage" class="modal-message" style="display: none;"></div>
<form id="changePasswordForm">
<div class="form-group">
<label class="form-label" for="oldPassword">当前密码</label>
<input type="password" id="oldPassword" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label" for="newPassword">新密码</label>
<input type="password" id="newPassword" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label" for="confirmPassword">确认新密码</label>
<input type="password" id="confirmPassword" class="form-input" required>
</div>
<div class="modal-actions">
<button type="button" class="btn btn-secondary btn-small" id="cancelPasswordChange">取消</button>
<button type="submit" class="btn btn-primary btn-small">确认修改</button>
</div>
</form>
</div>
</div>
`;
}
@ -515,12 +681,14 @@ class ProfileCenter extends HTMLElement {
const editBtn = this.shadowRoot.getElementById('editBtn');
const saveBtn = this.shadowRoot.getElementById('saveBtn');
const cancelBtn = this.shadowRoot.getElementById('cancelBtn');
const changePasswordBtn = this.shadowRoot.getElementById('changePasswordBtn');
const avatarEditBtn = this.shadowRoot.getElementById('avatarEditBtn');
const avatarFileInput = this.shadowRoot.getElementById('avatarFileInput');
editBtn.addEventListener('click', () => this.startEditing());
saveBtn.addEventListener('click', () => this.saveChanges());
cancelBtn.addEventListener('click', () => this.cancelEditing());
changePasswordBtn.addEventListener('click', () => this.showChangePasswordModal());
// 头像编辑按钮点击事件
avatarEditBtn.addEventListener('click', () => {
@ -750,6 +918,118 @@ class ProfileCenter extends HTMLElement {
img.src = url;
});
}
showChangePasswordModal() {
const modal = this.shadowRoot.getElementById('changePasswordModal');
modal.classList.add('active');
// 添加模态框事件监听器
this.addPasswordModalListeners();
}
addPasswordModalListeners() {
const modal = this.shadowRoot.getElementById('changePasswordModal');
const closeBtn = this.shadowRoot.getElementById('closePasswordModal');
const cancelBtn = this.shadowRoot.getElementById('cancelPasswordChange');
const form = this.shadowRoot.getElementById('changePasswordForm');
// 关闭按钮事件
closeBtn.addEventListener('click', () => this.hideChangePasswordModal());
// 取消按钮事件
cancelBtn.addEventListener('click', () => this.hideChangePasswordModal());
// 点击模态框背景关闭
modal.addEventListener('click', (e) => {
if (e.target === modal) {
this.hideChangePasswordModal();
}
});
// 表单提交事件
form.addEventListener('submit', (e) => {
e.preventDefault();
this.handlePasswordChange();
});
}
hideChangePasswordModal() {
const modal = this.shadowRoot.getElementById('changePasswordModal');
modal.classList.remove('active');
// 清空表单
const form = this.shadowRoot.getElementById('changePasswordForm');
form.reset();
// 隐藏消息
const messageElement = this.shadowRoot.getElementById('passwordModalMessage');
messageElement.style.display = 'none';
}
async handlePasswordChange() {
const oldPassword = this.shadowRoot.getElementById('oldPassword').value;
const newPassword = this.shadowRoot.getElementById('newPassword').value;
const confirmPassword = this.shadowRoot.getElementById('confirmPassword').value;
// 验证输入
if (!oldPassword || !newPassword || !confirmPassword) {
this.showPasswordModalMessage('请填写所有密码字段', 'error');
return;
}
if (newPassword !== confirmPassword) {
this.showPasswordModalMessage('新密码和确认密码不匹配', 'error');
return;
}
if (newPassword.length < 6) {
this.showPasswordModalMessage('新密码长度至少6位', 'error');
return;
}
try {
const response = await fetch('/api/change-password', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userId: this.userInfo.id,
oldPassword: oldPassword,
newPassword: newPassword
}),
credentials: 'include'
});
const result = await response.json();
if (result.success) {
this.showPasswordModalMessage('密码修改成功', 'success');
setTimeout(() => {
this.hideChangePasswordModal();
}, 1500);
} else {
this.showPasswordModalMessage('密码修改失败: ' + result.message, 'error');
}
} catch (error) {
console.error('修改密码失败:', error);
this.showPasswordModalMessage('修改密码失败', 'error');
}
}
showPasswordModalMessage(message, type) {
const messageElement = this.shadowRoot.getElementById('passwordModalMessage');
messageElement.textContent = message;
messageElement.className = `modal-message ${type}`;
messageElement.style.display = 'block';
// 如果是成功消息，3秒后自动隐藏
if (type === 'success') {
setTimeout(() => {
messageElement.style.display = 'none';
}, 3000);
}
}
}
customElements.define('profile-center', ProfileCenter);

10
XNSimHtml/routes/auth.js
View File

@ -230,6 +230,16 @@ router.post('/change-password', (req, res) => {
if (result === 0) {
res.json({ success: true, message: '密码修改成功' });
} else if(result === -1){
res.status(400).json({ success: false, message: '新密码或旧密码为空' });
} else if(result === -2){
res.status(400).json({ success: false, message: '新密码与旧密码相同' });
} else if(result === -3){
res.status(400).json({ success: false, message: '内部错误' });
} else if(result === -4){
res.status(400).json({ success: false, message: '旧密码错误' });
} else if(result === -5){
res.status(400).json({ success: false, message: '用户不存在' });
} else {
res.status(400).json({ success: false, message: '密码修改失败', error: `错误码：${result}` });
}