feat: add branded login and editable admin credentials

This commit is contained in:
Андрей Бобырев
2026-06-06 13:09:23 +03:00
parent 4c635858c7
commit 578378f6d8
6 changed files with 410 additions and 46 deletions

View File

@@ -100,6 +100,12 @@ const i18n = {
panelLanguage: "Panel language",
theme: "Theme",
bindAddress: "Bind address",
authSettingsTitle: "Login credentials",
authCurrentPassword: "Current password",
authUsername: "Username",
authNewPassword: "New password",
authSave: "Save login",
authSaved: "Login updated",
dashboard: "Dashboard",
noKeys: "No keys yet",
noBackups: "No backups yet",
@@ -327,6 +333,12 @@ const i18n = {
panelLanguage: "Язык панели",
theme: "Тема",
bindAddress: "Адрес привязки",
authSettingsTitle: "Данные входа",
authCurrentPassword: "Текущий пароль",
authUsername: "Логин",
authNewPassword: "Новый пароль",
authSave: "Сохранить вход",
authSaved: "Данные входа обновлены",
dashboard: "Обзор",
noKeys: "Ключей пока нет",
noBackups: "Бекапов пока нет",
@@ -636,6 +648,31 @@ async function setLanguage(lang) {
}
}
async function updateAuthSettings(eventObj) {
eventObj.preventDefault();
const form = eventObj.currentTarget;
const btn = form.querySelector("button[type='submit']");
const body = {
current_password: form.current_password.value,
username: form.username.value.trim(),
new_password: form.new_password.value,
};
btn.disabled = true;
try {
await api("/api/settings/auth", {
method: "POST",
body: JSON.stringify(body),
});
form.current_password.value = "";
form.new_password.value = "";
toast(t("authSaved"));
} catch (err) {
toast(err.message);
} finally {
btn.disabled = false;
}
}
function setPage(page, push = true) {
const next = $(`[data-page="${page}"]`) ? page : "dashboard";
state.page = next;
@@ -1744,6 +1781,7 @@ $("#createBackupBtn").addEventListener("click", createBackup);
$("#loadLogsBtn").addEventListener("click", loadLogs);
$("#repairStatsBtn").addEventListener("click", repairStats);
$("#collectStatsBtn").addEventListener("click", collectStats);
$("#authSettingsForm").addEventListener("submit", updateAuthSettings);
window.addEventListener("hashchange", () => setPage((location.hash || "#dashboard").slice(1), false));
setPage((location.hash || "#dashboard").slice(1), false);

View File

@@ -11,7 +11,7 @@
document.documentElement.dataset.theme = theme;
}());
</script>
<link rel="stylesheet" href="/styles.css?v=2.5.0-admin18">
<link rel="stylesheet" href="/styles.css?v=2.5.0-admin19">
</head>
<body>
<div class="app-shell">
@@ -342,6 +342,22 @@
<strong id="settingsBind">127.0.0.1:1984</strong>
</div>
</div>
<form id="authSettingsForm" class="settings-form">
<h3 data-i18n="authSettingsTitle">Login credentials</h3>
<label>
<span data-i18n="authCurrentPassword">Current password</span>
<input name="current_password" type="password" autocomplete="current-password" required>
</label>
<label>
<span data-i18n="authUsername">Username</span>
<input name="username" autocomplete="username" value="admin" required maxlength="48">
</label>
<label>
<span data-i18n="authNewPassword">New password</span>
<input name="new_password" type="password" autocomplete="new-password" required minlength="4">
</label>
<button type="submit" data-i18n="authSave">Save login</button>
</form>
</section>
<section class="panel">
@@ -393,6 +409,6 @@
</div>
</div>
</div>
<script src="/app.js?v=2.5.0-admin18" type="module"></script>
<script src="/app.js?v=2.5.0-admin19" type="module"></script>
</body>
</html>

View File

@@ -1253,6 +1253,33 @@ td small {
padding: 12px;
}
.settings-form {
display: grid;
gap: 12px;
margin-top: 16px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel-soft);
padding: 14px;
}
.settings-form h3 {
margin: 0;
font-size: 16px;
}
.settings-form label {
display: grid;
gap: 6px;
color: var(--muted);
font-weight: 800;
font-size: 12px;
}
.settings-form button {
justify-self: start;
}
.backup-item span,
.event small {
display: block;