refactoring
This commit is contained in:
@@ -0,0 +1,166 @@
|
||||
import { pageRoute } from "../routes.js";
|
||||
|
||||
/* Page-alias administration view. */
|
||||
|
||||
class AliasAdmin {
|
||||
/**
|
||||
* goal : Create a controller for retained page aliases.
|
||||
* pre : api and translate are application services; reloadPages refreshes
|
||||
* the public page and alias catalogue after an administrative edit.
|
||||
* post : The controller is ready to load and mutate aliases.
|
||||
* result : A directly usable alias administration controller.
|
||||
*/
|
||||
constructor(api, translate, reloadPages) {
|
||||
this.api = api;
|
||||
this.translate = translate;
|
||||
this.reloadPages = reloadPages;
|
||||
this.list = document.getElementById("alias-list");
|
||||
this.status = document.getElementById("alias-admin-status");
|
||||
}
|
||||
|
||||
/**
|
||||
* goal : Load retained aliases and render their references and actions.
|
||||
* pre : The current session has administrator permission.
|
||||
* post : The alias list represents the current server state.
|
||||
* result : A promise that resolves when all alias rows have been rendered.
|
||||
*/
|
||||
async load() {
|
||||
this.status.textContent = "";
|
||||
const result = await this.api("/api/admin/aliases");
|
||||
const aliases = result.aliases || [];
|
||||
this.list.replaceChildren();
|
||||
|
||||
if (aliases.length === 0) {
|
||||
const empty = document.createElement("p");
|
||||
empty.className = "muted";
|
||||
empty.textContent = this.translate("no-page-aliases", "No page aliases.");
|
||||
this.list.append(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const alias of aliases) this.list.append(this.#renderAlias(alias));
|
||||
}
|
||||
|
||||
/** Build one alias row, including cleanup and deletion actions. */
|
||||
#renderAlias(alias) {
|
||||
const row = document.createElement("article");
|
||||
row.className = "alias-row";
|
||||
|
||||
const address = document.createElement("div");
|
||||
address.className = "alias-address";
|
||||
const target = document.createElement("a");
|
||||
target.href = pageRoute(alias.targetSlug);
|
||||
target.textContent = alias.targetSlug;
|
||||
address.append(
|
||||
document.createTextNode(
|
||||
`${this.translate("old-address", "Old address")}: ${alias.slug} · ` +
|
||||
`${this.translate("current-address", "Current address")}: `),
|
||||
target
|
||||
);
|
||||
row.append(address);
|
||||
|
||||
const references = alias.references || [];
|
||||
const currentSummary = document.createElement("div");
|
||||
currentSummary.className = "alias-summary";
|
||||
currentSummary.textContent =
|
||||
`${this.translate("current-references", "Current references")}: ${references.length}`;
|
||||
row.append(currentSummary);
|
||||
|
||||
if (references.length > 0) {
|
||||
const referenceList = document.createElement("ul");
|
||||
referenceList.className = "alias-references";
|
||||
for (const reference of references) {
|
||||
const item = document.createElement("li");
|
||||
const link = document.createElement("a");
|
||||
link.href = pageRoute(reference.slug);
|
||||
link.textContent = reference.title;
|
||||
item.append(link);
|
||||
referenceList.append(item);
|
||||
}
|
||||
row.append(referenceList);
|
||||
}
|
||||
|
||||
const historicalCount = Number(alias.historicalReferenceCount || 0);
|
||||
const historicalSummary = document.createElement("div");
|
||||
historicalSummary.className = "alias-summary muted";
|
||||
historicalSummary.textContent =
|
||||
`${this.translate("historical-references", "Historical references")}: ${historicalCount}`;
|
||||
row.append(historicalSummary);
|
||||
|
||||
const historicalReferences = alias.historicalReferences || [];
|
||||
if (historicalReferences.length > 0) {
|
||||
const historyList = document.createElement("ul");
|
||||
historyList.className = "alias-references alias-history";
|
||||
for (const reference of historicalReferences) {
|
||||
const item = document.createElement("li");
|
||||
item.textContent = `${reference.title} · ` +
|
||||
`${this.translate("version", "Version")} ${reference.version}`;
|
||||
historyList.append(item);
|
||||
}
|
||||
row.append(historyList);
|
||||
}
|
||||
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "alias-actions";
|
||||
actions.append(
|
||||
this.#cleanupButton(alias, references),
|
||||
this.#deleteButton(alias, references, historicalCount)
|
||||
);
|
||||
row.append(actions);
|
||||
return row;
|
||||
}
|
||||
|
||||
/** Build the action that replaces current references to an old address. */
|
||||
#cleanupButton(alias, references) {
|
||||
const button = document.createElement("button");
|
||||
button.type = "button";
|
||||
button.textContent = this.translate("cleanup-alias", "Clean up references");
|
||||
button.disabled = references.length === 0;
|
||||
button.addEventListener("click", () => {
|
||||
this.#cleanup(alias).catch((error) => console.error(error));
|
||||
});
|
||||
return button;
|
||||
}
|
||||
|
||||
/** Build the action that removes an unused alias. */
|
||||
#deleteButton(alias, references, historicalCount) {
|
||||
const button = document.createElement("button");
|
||||
button.type = "button";
|
||||
button.textContent = this.translate("delete-alias", "Delete alias");
|
||||
button.disabled = references.length > 0;
|
||||
button.addEventListener("click", () => {
|
||||
this.#delete(alias, historicalCount).catch((error) => console.error(error));
|
||||
});
|
||||
return button;
|
||||
}
|
||||
|
||||
/** Confirm, perform and report reference cleanup for one alias. */
|
||||
async #cleanup(alias) {
|
||||
const question = this.translate(
|
||||
"cleanup-alias-confirm",
|
||||
"Replace all current references to this old address with the current address? Historical versions will not be changed.");
|
||||
if (!window.confirm(question)) return;
|
||||
const result = await this.api(`/api/admin/aliases/${alias.id}/cleanup`, {
|
||||
method: "POST"
|
||||
});
|
||||
await this.reloadPages();
|
||||
await this.load();
|
||||
this.status.textContent =
|
||||
`${this.translate("cleanup-complete", "Cleanup complete")}: ${result.changedPages || 0}`;
|
||||
}
|
||||
|
||||
/** Confirm and remove one alias that has no current references. */
|
||||
async #delete(alias, historicalCount) {
|
||||
const warning = historicalCount > 0
|
||||
? this.translate(
|
||||
"delete-alias-history-confirm",
|
||||
"Delete this alias? Historical page versions still contain this old address and those links may stop resolving.")
|
||||
: this.translate("delete-alias-confirm", "Delete this alias?");
|
||||
if (!window.confirm(warning)) return;
|
||||
await this.api(`/api/admin/aliases/${alias.id}`, { method: "DELETE" });
|
||||
await this.reloadPages();
|
||||
await this.load();
|
||||
}
|
||||
}
|
||||
|
||||
export { AliasAdmin };
|
||||
@@ -0,0 +1,103 @@
|
||||
/* Archived CMap administration view. */
|
||||
|
||||
class ArchivedCmapsAdmin {
|
||||
/**
|
||||
* goal : Create the archived-CMap administration controller.
|
||||
* pre : formatDate formats database timestamps; reloadConceptMaps refreshes
|
||||
* ordinary CMap navigation after a restore.
|
||||
* post : The controller is ready to load and restore archived maps.
|
||||
* result : A directly usable archived-CMap controller.
|
||||
*/
|
||||
constructor(api, translate, formatDate, reloadConceptMaps) {
|
||||
this.api = api;
|
||||
this.translate = translate;
|
||||
this.formatDate = formatDate;
|
||||
this.reloadConceptMaps = reloadConceptMaps;
|
||||
this.list = document.getElementById("archived-cmaps-list");
|
||||
this.status = document.getElementById("archived-cmaps-status");
|
||||
}
|
||||
|
||||
/**
|
||||
* goal : Load and render all archived concept maps.
|
||||
* pre : The current session has administrator permission.
|
||||
* post : The archived-CMap list represents the current server state.
|
||||
* result : A promise that resolves when all map rows have been rendered.
|
||||
*/
|
||||
async load() {
|
||||
this.status.textContent = "";
|
||||
const result = await this.api("/api/admin/cmaps/archived");
|
||||
const conceptMaps = Array.isArray(result.conceptMaps) ? result.conceptMaps : [];
|
||||
this.list.replaceChildren();
|
||||
|
||||
if (conceptMaps.length === 0) {
|
||||
const empty = document.createElement("p");
|
||||
empty.className = "muted";
|
||||
empty.textContent = this.translate(
|
||||
"no-archived-concept-maps", "No archived CMaps.");
|
||||
this.list.append(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const conceptMap of conceptMaps) {
|
||||
this.list.append(this.#renderConceptMap(conceptMap));
|
||||
}
|
||||
}
|
||||
|
||||
/** Build one archived map row and its restore action. */
|
||||
#renderConceptMap(conceptMap) {
|
||||
const row = document.createElement("article");
|
||||
row.className = "archived-cmap-row";
|
||||
|
||||
const title = document.createElement("strong");
|
||||
title.textContent = conceptMap.title;
|
||||
|
||||
const archivedAt = conceptMap.archivedAt
|
||||
? this.formatDate(conceptMap.archivedAt)
|
||||
: "";
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "muted";
|
||||
meta.textContent = [
|
||||
`cmap:${conceptMap.slug}`,
|
||||
archivedAt
|
||||
? `${this.translate("archived", "Archived")} ${archivedAt}`
|
||||
: this.translate("archived", "Archived"),
|
||||
conceptMap.archivedBy
|
||||
? `${this.translate("by", "by")} ${conceptMap.archivedBy}`
|
||||
: ""
|
||||
].filter(Boolean).join(" · ");
|
||||
|
||||
const restore = document.createElement("button");
|
||||
restore.type = "button";
|
||||
restore.textContent = this.translate("restore-concept-map", "Restore CMap");
|
||||
restore.addEventListener("click", () => {
|
||||
this.#restore(conceptMap, restore).catch((error) => console.error(error));
|
||||
});
|
||||
|
||||
row.append(title, meta, restore);
|
||||
return row;
|
||||
}
|
||||
|
||||
/** Confirm and restore one CMap, then refresh both CMap catalogues. */
|
||||
async #restore(conceptMap, button) {
|
||||
const question = this.translate(
|
||||
"restore-concept-map-confirm", "Restore concept map \"{title}\"?")
|
||||
.replace("{title}", conceptMap.title);
|
||||
if (!window.confirm(question)) return;
|
||||
|
||||
button.disabled = true;
|
||||
try {
|
||||
await this.api(
|
||||
`/api/admin/cmaps/archived/${encodeURIComponent(conceptMap.slug)}/restore`,
|
||||
{ method: "POST" });
|
||||
await this.reloadConceptMaps();
|
||||
await this.load();
|
||||
this.status.textContent = this.translate(
|
||||
"concept-map-restored", "CMap restored.");
|
||||
} catch (error) {
|
||||
button.disabled = false;
|
||||
this.status.textContent = error.message;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { ArchivedCmapsAdmin };
|
||||
@@ -0,0 +1,130 @@
|
||||
/* Mail and password-reset administration view. */
|
||||
|
||||
class MailAdmin {
|
||||
/**
|
||||
* goal : Connect mail settings, test delivery and TLS controls to the API.
|
||||
* pre : The mail administration form exists in the document.
|
||||
* post : Save, test and TLS-change events are handled by this controller.
|
||||
* result : A directly usable mail administration controller.
|
||||
*/
|
||||
constructor(api, translate) {
|
||||
this.api = api;
|
||||
this.translate = translate;
|
||||
this.form = document.getElementById("mail-settings-form");
|
||||
this.status = document.getElementById("mail-settings-status");
|
||||
this.testButton = document.getElementById("mail-test-button");
|
||||
this.tls = document.getElementById("mail-smtp-tls");
|
||||
this.acceptUntrusted = document.getElementById(
|
||||
"mail-smtp-accept-untrusted-certificates");
|
||||
|
||||
this.form.addEventListener("submit", (event) => this.#save(event));
|
||||
this.testButton.addEventListener("click", () => this.#test());
|
||||
this.tls.addEventListener("change", () => this.#syncTlsControls());
|
||||
}
|
||||
|
||||
/**
|
||||
* goal : Load stored mail settings and initialize the test recipient.
|
||||
* pre : The current session has administrator permission.
|
||||
* post : All form controls represent the stored server configuration.
|
||||
* result : A promise that resolves after the form has been initialized.
|
||||
*/
|
||||
async load(currentUserEmail = "") {
|
||||
const settings = await this.api("/api/admin/mail-settings");
|
||||
document.getElementById("mail-public-url").value =
|
||||
settings.publicUrl || window.location.origin;
|
||||
document.getElementById("mail-smtp-host").value = settings.smtpHost || "";
|
||||
document.getElementById("mail-smtp-port").value = settings.smtpPort || "587";
|
||||
document.getElementById("mail-smtp-from").value = settings.smtpFrom || "";
|
||||
document.getElementById("mail-smtp-user").value = settings.smtpUser || "";
|
||||
document.getElementById("mail-smtp-password").value = "";
|
||||
this.tls.checked = settings.smtpTls !== false;
|
||||
this.acceptUntrusted.checked = settings.smtpAcceptUntrustedCertificates === true;
|
||||
document.getElementById("mail-reset-limit").value = settings.resetLimit || "2";
|
||||
document.getElementById("mail-test-recipient").value = currentUserEmail;
|
||||
document.getElementById("mail-password-help").textContent = settings.hasPassword
|
||||
? this.translate(
|
||||
"smtp-password-kept", "A password is stored; leave empty to keep it.")
|
||||
: "";
|
||||
this.status.textContent = "";
|
||||
this.acceptUntrusted.disabled = !this.tls.checked;
|
||||
}
|
||||
|
||||
/** Read the mail form using the public server API field names. */
|
||||
#formData() {
|
||||
return {
|
||||
publicUrl: document.getElementById("mail-public-url").value,
|
||||
smtpHost: document.getElementById("mail-smtp-host").value,
|
||||
smtpPort: document.getElementById("mail-smtp-port").value,
|
||||
smtpFrom: document.getElementById("mail-smtp-from").value,
|
||||
smtpUser: document.getElementById("mail-smtp-user").value,
|
||||
smtpPassword: document.getElementById("mail-smtp-password").value,
|
||||
smtpTls: this.tls.checked,
|
||||
smtpAcceptUntrustedCertificates: this.acceptUntrusted.checked,
|
||||
resetLimit: document.getElementById("mail-reset-limit").value
|
||||
};
|
||||
}
|
||||
|
||||
/** Store the current mail settings and retain an omitted password. */
|
||||
async #save(event) {
|
||||
event.preventDefault();
|
||||
try {
|
||||
await this.api("/api/admin/mail-settings", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(this.#formData())
|
||||
});
|
||||
document.getElementById("mail-smtp-password").value = "";
|
||||
document.getElementById("mail-password-help").textContent = this.translate(
|
||||
"smtp-password-kept", "A password is stored; leave empty to keep it.");
|
||||
this.status.textContent = this.translate("saved", "Saved");
|
||||
} catch (error) {
|
||||
this.status.textContent = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
/** Send one test message using the unsaved values currently in the form. */
|
||||
async #test() {
|
||||
const recipient = document.getElementById("mail-test-recipient").value.trim();
|
||||
this.testButton.disabled = true;
|
||||
this.status.textContent = this.translate(
|
||||
"sending-test-mail", "Sending test email…");
|
||||
try {
|
||||
await this.api("/api/admin/mail-settings/test", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ ...this.#formData(), recipient })
|
||||
});
|
||||
this.status.textContent = this.translate(
|
||||
"test-mail-sent", "Test email accepted by SMTP server");
|
||||
} catch (error) {
|
||||
console.error("SMTP test failed", error);
|
||||
this.status.textContent = this.#smtpErrorMessage(error);
|
||||
} finally {
|
||||
this.testButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Translate known TLS failures and retain other server error messages. */
|
||||
#smtpErrorMessage(error) {
|
||||
const message = error && error.message ? error.message : String(error);
|
||||
const certificateFailure = message.includes("certificate verify failed") ||
|
||||
message.includes("TLS certificate verification failed");
|
||||
if (certificateFailure) {
|
||||
return this.translate(
|
||||
"smtp-certificate-verification-failed",
|
||||
"The SMTP server certificate could not be verified. Install a valid certificate, or select the local-server exception if this is a trusted local SMTP server.");
|
||||
}
|
||||
if (message.includes("no protocols available")) {
|
||||
return this.translate(
|
||||
"smtp-no-modern-tls",
|
||||
"The SMTP connection attempted an obsolete TLS protocol. Install the current Racket Wiki version, which negotiates modern TLS automatically.");
|
||||
}
|
||||
return message;
|
||||
}
|
||||
|
||||
/** Disable the certificate exception whenever STARTTLS is disabled. */
|
||||
#syncTlsControls() {
|
||||
this.acceptUntrusted.disabled = !this.tls.checked;
|
||||
if (this.acceptUntrusted.disabled) this.acceptUntrusted.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
export { MailAdmin };
|
||||
@@ -0,0 +1,124 @@
|
||||
import { pageRoute } from "../routes.js";
|
||||
|
||||
/* Orphaned-upload administration view. */
|
||||
|
||||
/** Format a byte count for the administrative upload list. */
|
||||
function formatFileSize(size) {
|
||||
const bytes = Number(size || 0);
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
class OrphanedUploadsAdmin {
|
||||
/**
|
||||
* goal : Create the controller for uploads without current references.
|
||||
* pre : api performs authenticated requests and translate resolves UI keys.
|
||||
* post : The controller is connected to the orphaned-upload list.
|
||||
* result : A directly usable orphaned-upload administration controller.
|
||||
*/
|
||||
constructor(api, translate) {
|
||||
this.api = api;
|
||||
this.translate = translate;
|
||||
this.list = document.getElementById("orphaned-uploads-list");
|
||||
}
|
||||
|
||||
/**
|
||||
* goal : Load orphaned uploads and their last historical uses.
|
||||
* pre : The current session has administrator permission.
|
||||
* post : The upload list represents the current server state.
|
||||
* result : A promise that resolves when all upload rows have been rendered.
|
||||
*/
|
||||
async load() {
|
||||
const result = await this.api("/api/admin/uploads/orphaned");
|
||||
const uploads = result.uploads || [];
|
||||
this.list.replaceChildren();
|
||||
|
||||
if (uploads.length === 0) {
|
||||
const empty = document.createElement("p");
|
||||
empty.className = "muted";
|
||||
empty.textContent = this.translate("no-orphaned-uploads", "No orphaned uploads.");
|
||||
this.list.append(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const upload of uploads) this.list.append(this.#renderUpload(upload));
|
||||
}
|
||||
|
||||
/** Build one upload row with history, view link and deletion action. */
|
||||
#renderUpload(upload) {
|
||||
const row = document.createElement("article");
|
||||
row.className = "orphaned-upload-row";
|
||||
|
||||
const title = document.createElement("strong");
|
||||
title.textContent = upload.originalName;
|
||||
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "muted";
|
||||
meta.textContent = `${upload.mimeType} · ${formatFileSize(upload.size)} · ` +
|
||||
`${this.translate("uploaded-by", "uploaded by")} ${upload.uploadedBy}`;
|
||||
|
||||
const history = this.#uploadHistory(upload);
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "orphaned-upload-actions";
|
||||
|
||||
const view = document.createElement("a");
|
||||
view.href = `/uploads/${encodeURIComponent(upload.ownerSlug)}/` +
|
||||
encodeURIComponent(upload.storedName);
|
||||
view.target = "_blank";
|
||||
view.rel = "noopener";
|
||||
view.textContent = this.translate("view", "View");
|
||||
|
||||
const remove = document.createElement("button");
|
||||
remove.className = "danger";
|
||||
remove.textContent = this.translate("delete", "Delete");
|
||||
remove.addEventListener("click", () => {
|
||||
this.#deleteUpload(upload).catch((error) => console.error(error));
|
||||
});
|
||||
|
||||
actions.append(view, remove);
|
||||
row.append(title, meta, history, actions);
|
||||
return row;
|
||||
}
|
||||
|
||||
/** Build the historical-use portion of one upload row. */
|
||||
#uploadHistory(upload) {
|
||||
const history = document.createElement("div");
|
||||
const lastUses = Array.isArray(upload.lastUses) ? upload.lastUses : [];
|
||||
if (lastUses.length === 0) {
|
||||
history.textContent = this.translate(
|
||||
"never-referenced", "Never referenced by a saved page.");
|
||||
return history;
|
||||
}
|
||||
|
||||
const label = document.createElement("div");
|
||||
label.textContent = `${this.translate("last-used", "Last used")}:`;
|
||||
const uses = document.createElement("ul");
|
||||
uses.className = "orphaned-upload-uses";
|
||||
for (const use of lastUses) {
|
||||
const item = document.createElement("li");
|
||||
const link = document.createElement("a");
|
||||
link.href = pageRoute(use.slug);
|
||||
link.textContent = use.title || use.slug;
|
||||
item.append(link);
|
||||
if (use.version) {
|
||||
item.append(document.createTextNode(
|
||||
` · ${this.translate("version", "Version")} ${use.version}`));
|
||||
}
|
||||
uses.append(item);
|
||||
}
|
||||
history.append(label, uses);
|
||||
return history;
|
||||
}
|
||||
|
||||
/** Confirm and remove one still-orphaned upload, then refresh the list. */
|
||||
async #deleteUpload(upload) {
|
||||
const question = this.translate(
|
||||
"delete-orphaned-upload-confirm", "Delete this orphaned upload?");
|
||||
if (!window.confirm(question)) return;
|
||||
await this.api(`/api/admin/uploads/orphaned/${upload.id}`, { method: "DELETE" });
|
||||
await this.load();
|
||||
}
|
||||
}
|
||||
|
||||
export { OrphanedUploadsAdmin };
|
||||
@@ -0,0 +1,25 @@
|
||||
/* Administration overview. */
|
||||
|
||||
/**
|
||||
* goal : Refresh the software and database versions on the admin overview.
|
||||
* pre : api performs authenticated requests and translate resolves UI keys.
|
||||
* post : The overview shows current and required version information.
|
||||
* result : A promise that resolves after the overview has been updated.
|
||||
*/
|
||||
async function loadAdminOverview(api, translate) {
|
||||
const info = await api("/api/admin/info");
|
||||
document.getElementById("admin-software-version").textContent =
|
||||
info.softwareVersion || "?";
|
||||
|
||||
const schemaVersion = info.databaseSchemaVersion ?? "?";
|
||||
const requiredSchemaVersion = info.requiredDatabaseSchemaVersion ?? "?";
|
||||
const databaseVersion = document.getElementById("admin-database-schema-version");
|
||||
if (schemaVersion === requiredSchemaVersion) {
|
||||
databaseVersion.textContent = String(schemaVersion);
|
||||
} else {
|
||||
databaseVersion.textContent =
|
||||
`${schemaVersion} (${translate("required", "required")}: ${requiredSchemaVersion})`;
|
||||
}
|
||||
}
|
||||
|
||||
export { loadAdminOverview };
|
||||
@@ -0,0 +1,148 @@
|
||||
/*
|
||||
* User administration view.
|
||||
*
|
||||
* UserAdmin owns the user list, its editable controls and the new-user form.
|
||||
* The application remains responsible for permissions, routing, breadcrumbs
|
||||
* and making the surrounding view visible.
|
||||
*/
|
||||
|
||||
class UserAdmin {
|
||||
/**
|
||||
* goal : Connect the user administration controls to the wiki API.
|
||||
* pre : api performs authenticated requests; translate resolves UI keys;
|
||||
* the user administration form and list exist in the document.
|
||||
* post : Submitting the new-user form creates a user and reloads the list.
|
||||
* result : A directly usable controller for the user administration view.
|
||||
*/
|
||||
constructor(api, translate) {
|
||||
this.api = api;
|
||||
this.translate = translate;
|
||||
this.form = document.getElementById("new-user-form");
|
||||
this.list = document.getElementById("user-list");
|
||||
|
||||
this.form.addEventListener("submit", (event) => {
|
||||
this.#createUser(event).catch((error) => console.error(error));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* goal : Refresh the editable user list from the server.
|
||||
* pre : The current session has administrator permission.
|
||||
* post : Every current user has editable identity, role and password fields.
|
||||
* result : A promise that resolves when all rows have been rendered.
|
||||
* internals: The API supplies public user records. #renderUser creates each
|
||||
* row and connects its save and delete operations to that record.
|
||||
*/
|
||||
async load() {
|
||||
const result = await this.api("/api/admin/users");
|
||||
this.list.replaceChildren();
|
||||
for (const user of result.users) {
|
||||
this.list.append(this.#renderUser(user));
|
||||
}
|
||||
}
|
||||
|
||||
/** Create a user from the dedicated form and reload the canonical list. */
|
||||
async #createUser(event) {
|
||||
event.preventDefault();
|
||||
const username = document.getElementById("new-username").value;
|
||||
await this.api("/api/admin/users", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
username,
|
||||
displayName: document.getElementById("new-display-name").value || username,
|
||||
email: document.getElementById("new-email").value,
|
||||
password: document.getElementById("new-password").value,
|
||||
role: document.getElementById("new-role").value,
|
||||
enabled: true
|
||||
})
|
||||
});
|
||||
this.form.reset();
|
||||
await this.load();
|
||||
}
|
||||
|
||||
/** Build one editable user row and connect its actions. */
|
||||
#renderUser(user) {
|
||||
const row = document.createElement("div");
|
||||
row.className = "user-row";
|
||||
|
||||
const username = document.createElement("strong");
|
||||
username.textContent = user.username;
|
||||
|
||||
const displayName = document.createElement("input");
|
||||
displayName.value = user.displayName;
|
||||
|
||||
const email = document.createElement("input");
|
||||
email.type = "email";
|
||||
email.value = user.email || "";
|
||||
email.placeholder = this.translate("email-address", "Email address");
|
||||
|
||||
const role = this.#roleSelect(user.role);
|
||||
|
||||
const enabled = document.createElement("input");
|
||||
enabled.type = "checkbox";
|
||||
enabled.checked = user.enabled;
|
||||
|
||||
const password = document.createElement("input");
|
||||
password.type = "password";
|
||||
password.placeholder = this.translate("new-password", "New password");
|
||||
password.autocomplete = "new-password";
|
||||
|
||||
const save = document.createElement("button");
|
||||
save.textContent = this.translate("save", "Save");
|
||||
save.addEventListener("click", () => {
|
||||
this.#updateUser(user, displayName, email, role, enabled, password)
|
||||
.catch((error) => console.error(error));
|
||||
});
|
||||
|
||||
const remove = document.createElement("button");
|
||||
remove.textContent = this.translate("delete", "Delete");
|
||||
remove.className = "danger";
|
||||
remove.addEventListener("click", () => {
|
||||
this.#deleteUser(user).catch((error) => console.error(error));
|
||||
});
|
||||
|
||||
const actions = document.createElement("div");
|
||||
actions.append(save, remove);
|
||||
row.append(username, displayName, email, role, enabled, password, actions);
|
||||
return row;
|
||||
}
|
||||
|
||||
/** Build the translated role selector for one user row. */
|
||||
#roleSelect(selectedRole) {
|
||||
const select = document.createElement("select");
|
||||
for (const roleName of ["reader", "editor", "admin"]) {
|
||||
const option = document.createElement("option");
|
||||
option.value = roleName;
|
||||
option.textContent = this.translate(`role-${roleName}`, roleName);
|
||||
option.selected = roleName === selectedRole;
|
||||
select.append(option);
|
||||
}
|
||||
return select;
|
||||
}
|
||||
|
||||
/** Store the current controls of one user row. */
|
||||
async #updateUser(user, displayName, email, role, enabled, password) {
|
||||
await this.api(`/api/admin/users/${user.id}`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({
|
||||
displayName: displayName.value,
|
||||
email: email.value,
|
||||
role: role.value,
|
||||
enabled: enabled.checked,
|
||||
password: password.value || undefined
|
||||
})
|
||||
});
|
||||
password.value = "";
|
||||
}
|
||||
|
||||
/** Confirm and remove one user, then reload the canonical list. */
|
||||
async #deleteUser(user) {
|
||||
const question = this.translate("delete-user-confirm", "Delete user {username}?")
|
||||
.replace("{username}", user.username);
|
||||
if (!window.confirm(question)) return;
|
||||
await this.api(`/api/admin/users/${user.id}`, { method: "DELETE" });
|
||||
await this.load();
|
||||
}
|
||||
}
|
||||
|
||||
export { UserAdmin };
|
||||
Reference in New Issue
Block a user