144 lines
5.3 KiB
JavaScript
144 lines
5.3 KiB
JavaScript
(() => {
|
||
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 = '确认修改';
|
||
}
|
||
});
|
||
}
|
||
|
||
})();
|