139 lines
4.9 KiB
JavaScript
139 lines
4.9 KiB
JavaScript
window.SecuritySettings = {
|
|
emits: ['updated'],
|
|
setup(props, { emit }) {
|
|
const { ref, onMounted } = Vue;
|
|
const api = useApi();
|
|
|
|
const loading = ref(false);
|
|
const saving = ref(false);
|
|
const currentUsername = ref('');
|
|
const form = ref({
|
|
current_password: '',
|
|
new_username: '',
|
|
new_password: '',
|
|
confirm_password: '',
|
|
});
|
|
|
|
async function load() {
|
|
loading.value = true;
|
|
const json = await api.getAuthStatus();
|
|
if (json) {
|
|
currentUsername.value = json.username || '';
|
|
form.value.new_username = json.username || '';
|
|
}
|
|
loading.value = false;
|
|
}
|
|
|
|
async function save() {
|
|
const payload = {
|
|
current_password: form.value.current_password || '',
|
|
new_username: (form.value.new_username || '').trim(),
|
|
new_password: form.value.new_password || '',
|
|
};
|
|
|
|
if (!payload.current_password) {
|
|
ElementPlus.ElMessage.warning('请输入当前密码');
|
|
return;
|
|
}
|
|
if (!payload.new_username) {
|
|
ElementPlus.ElMessage.warning('请输入新账号');
|
|
return;
|
|
}
|
|
if (payload.new_password.length < 8) {
|
|
ElementPlus.ElMessage.warning('新密码至少 8 位');
|
|
return;
|
|
}
|
|
if (payload.new_password !== form.value.confirm_password) {
|
|
ElementPlus.ElMessage.warning('两次输入的新密码不一致');
|
|
return;
|
|
}
|
|
|
|
saving.value = true;
|
|
const json = await api.changeCredentials(payload);
|
|
saving.value = false;
|
|
if (!json) return;
|
|
|
|
currentUsername.value = json.username || payload.new_username;
|
|
form.value.current_password = '';
|
|
form.value.new_password = '';
|
|
form.value.confirm_password = '';
|
|
form.value.new_username = currentUsername.value;
|
|
|
|
emit('updated', currentUsername.value);
|
|
window.dispatchEvent(new CustomEvent('webui-auth-updated', {
|
|
detail: { username: currentUsername.value },
|
|
}));
|
|
ElementPlus.ElMessage.success('账号密码已更新');
|
|
}
|
|
|
|
onMounted(load);
|
|
|
|
return {
|
|
loading,
|
|
saving,
|
|
currentUsername,
|
|
form,
|
|
save,
|
|
};
|
|
},
|
|
template: `
|
|
<div class="panel-scroll">
|
|
<el-card shadow="never" class="security-wrap">
|
|
<template #header>
|
|
<div class="plugin-main">
|
|
<span class="plugin-name">管理员账号安全</span>
|
|
<el-tag size="small" type="info">当前账号: {{ currentUsername || '-' }}</el-tag>
|
|
</div>
|
|
</template>
|
|
|
|
<el-skeleton v-if="loading" :rows="6" animated />
|
|
<div v-else>
|
|
<el-alert
|
|
title="密码仅保存为哈希值，修改后会立即写入 main_config.toml"
|
|
type="info"
|
|
:closable="false"
|
|
style="margin-bottom:16px;" />
|
|
|
|
<el-form label-position="top">
|
|
<el-form-item label="当前密码">
|
|
<el-input
|
|
v-model="form.current_password"
|
|
show-password
|
|
autocomplete="current-password"
|
|
placeholder="请输入当前密码" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="新账号">
|
|
<el-input
|
|
v-model="form.new_username"
|
|
autocomplete="username"
|
|
placeholder="请输入新账号" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="新密码（至少 8 位）">
|
|
<el-input
|
|
v-model="form.new_password"
|
|
show-password
|
|
autocomplete="new-password"
|
|
placeholder="请输入新密码" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="确认新密码">
|
|
<el-input
|
|
v-model="form.confirm_password"
|
|
show-password
|
|
autocomplete="new-password"
|
|
placeholder="请再次输入新密码"
|
|
@keyup.enter="save" />
|
|
</el-form-item>
|
|
|
|
<el-button type="primary" :loading="saving" @click="save">
|
|
保存账号密码
|
|
</el-button>
|
|
</el-form>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
`,
|
|
};
|