@@ -0,0 +1,143 @@
|
||||
(() => {
|
||||
const form = document.querySelector('[data-setting-form]');
|
||||
if (!form) return;
|
||||
|
||||
const status = form.querySelector('[data-setting-status]');
|
||||
const save = form.querySelector('[data-setting-save]');
|
||||
const passwordPop = document.querySelector('[data-setting-password-pop]');
|
||||
const passwordForm = document.querySelector('[data-setting-password-form]');
|
||||
const passwordOpen = document.querySelector('[data-setting-password-open]');
|
||||
const passwordStatus = document.querySelector('[data-setting-password-status]');
|
||||
const passwordSubmit = document.querySelector('[data-setting-password-submit]');
|
||||
let previousOverflow = '';
|
||||
|
||||
function showStatus(message, success = false) {
|
||||
status.textContent = message;
|
||||
status.classList.toggle('is-success', success);
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async event => {
|
||||
event.preventDefault();
|
||||
const data = {};
|
||||
const nickname = form.elements.nickName.value.trim();
|
||||
const introduction = form.elements.introduction.value.trim();
|
||||
|
||||
if (!nickname || [...nickname].length > 40) {
|
||||
showStatus('昵称须为 1 至 40 个字符');
|
||||
form.elements.nickName.focus();
|
||||
return;
|
||||
}
|
||||
if ([...introduction].length > 300) {
|
||||
showStatus('简介不能超过 300 个字符');
|
||||
return;
|
||||
}
|
||||
if (nickname !== form.elements.nickName.defaultValue) data.nickName = nickname;
|
||||
if (introduction !== form.elements.introduction.defaultValue.trim()) data.introduction = introduction;
|
||||
if (!Object.keys(data).length) {
|
||||
showStatus('没有需要保存的修改');
|
||||
return;
|
||||
}
|
||||
|
||||
save.disabled = true;
|
||||
showStatus('保存中…');
|
||||
try {
|
||||
const response = await fetch('/api/auth/profile', {
|
||||
method: 'POST', credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (!response.ok || result.code !== 200) throw new Error(result.tip || '保存失败,请稍后重试');
|
||||
showStatus('保存成功', true);
|
||||
window.setTimeout(() => window.location.reload(), 800);
|
||||
} catch (error) {
|
||||
showStatus(error.message || '保存失败,请稍后重试');
|
||||
save.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
function setPasswordStatus(message, success = false) {
|
||||
if (!passwordStatus) return;
|
||||
passwordStatus.textContent = message || '';
|
||||
passwordStatus.classList.toggle('is-success', success);
|
||||
}
|
||||
|
||||
function openPasswordPop() {
|
||||
if (!passwordPop || !passwordForm) return;
|
||||
passwordForm.reset();
|
||||
setPasswordStatus('');
|
||||
previousOverflow = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
passwordPop.hidden = false;
|
||||
const first = passwordForm.elements.oldPassword;
|
||||
if (first) window.setTimeout(() => first.focus(), 0);
|
||||
}
|
||||
|
||||
function closePasswordPop() {
|
||||
if (!passwordPop || passwordPop.hidden) return;
|
||||
passwordPop.hidden = true;
|
||||
document.body.style.overflow = previousOverflow;
|
||||
if (passwordForm) passwordForm.reset();
|
||||
setPasswordStatus('');
|
||||
if (passwordOpen) passwordOpen.focus();
|
||||
}
|
||||
|
||||
if (passwordOpen) passwordOpen.addEventListener('click', openPasswordPop);
|
||||
if (passwordPop) {
|
||||
passwordPop.querySelectorAll('[data-setting-password-close]').forEach(button => {
|
||||
button.addEventListener('click', closePasswordPop);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', event => {
|
||||
if (event.key === 'Escape' && passwordPop && !passwordPop.hidden) closePasswordPop();
|
||||
});
|
||||
|
||||
if (passwordForm) {
|
||||
passwordForm.addEventListener('submit', async event => {
|
||||
event.preventDefault();
|
||||
const oldPassword = passwordForm.elements.oldPassword.value;
|
||||
const newPassword = passwordForm.elements.newPassword.value;
|
||||
const confirmPassword = passwordForm.elements.confirmPassword.value;
|
||||
|
||||
if (oldPassword.length < 4 || oldPassword.length > 16) {
|
||||
setPasswordStatus('请输入 4–16 位当前密码');
|
||||
passwordForm.elements.oldPassword.focus();
|
||||
return;
|
||||
}
|
||||
if (newPassword.length < 4 || newPassword.length > 16) {
|
||||
setPasswordStatus('请输入 4–16 位新密码');
|
||||
passwordForm.elements.newPassword.focus();
|
||||
return;
|
||||
}
|
||||
if (newPassword !== confirmPassword) {
|
||||
setPasswordStatus('两次输入的新密码不一致');
|
||||
passwordForm.elements.confirmPassword.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
passwordSubmit.disabled = true;
|
||||
passwordSubmit.textContent = '修改中…';
|
||||
setPasswordStatus('');
|
||||
try {
|
||||
const response = await fetch('/api/auth/profile', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ oldPassword, newPassword }),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (!response.ok || result.code !== 200) throw new Error(result.tip || '密码修改失败,请稍后重试');
|
||||
setPasswordStatus('密码修改成功', true);
|
||||
window.setTimeout(() => {
|
||||
closePasswordPop();
|
||||
window.location.reload();
|
||||
}, 600);
|
||||
} catch (error) {
|
||||
setPasswordStatus(error.message || '密码修改失败,请稍后重试');
|
||||
passwordSubmit.disabled = false;
|
||||
passwordSubmit.textContent = '确认修改';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user