82 lines
2.5 KiB
JavaScript
82 lines
2.5 KiB
JavaScript
// Willkommensstrecke: Passwort setzen über den Link aus der
|
||
// Einladungsnachricht. Läuft ohne Anmeldung.
|
||
"use strict";
|
||
|
||
import { get, post } from "../api.js";
|
||
import { el, mount } from "../dom.js";
|
||
|
||
export async function welcomeView(root, { token, toLogin }) {
|
||
let preview;
|
||
try {
|
||
preview = await get(`/api/auth/welcome/${encodeURIComponent(token)}`);
|
||
} catch (err) {
|
||
mount(root,
|
||
el("section.card", {},
|
||
el("h1", {}, "Einladung"),
|
||
el("p.error", {}, err.message),
|
||
el("button.primary", { type: "button", onclick: toLogin }, "Zur Anmeldung")));
|
||
return;
|
||
}
|
||
|
||
const nameField = el("input", {
|
||
type: "text",
|
||
maxLength: 80,
|
||
value: preview.display_name || "",
|
||
placeholder: "wird anderen Mitgliedern angezeigt",
|
||
});
|
||
const passField = el("input", {
|
||
type: "password",
|
||
autocomplete: "new-password",
|
||
onkeydown: (ev) => { if (ev.key === "Enter") submit(); },
|
||
});
|
||
const repeatField = el("input", {
|
||
type: "password",
|
||
autocomplete: "new-password",
|
||
onkeydown: (ev) => { if (ev.key === "Enter") submit(); },
|
||
});
|
||
const error = el("p.error", { hidden: true });
|
||
const notice = el("p.notice", { hidden: true });
|
||
const button = el("button.primary", { type: "button" }, "Zugang einrichten");
|
||
|
||
async function submit() {
|
||
error.hidden = true;
|
||
if (passField.value !== repeatField.value) {
|
||
error.textContent = "Die beiden Eingaben stimmen nicht überein.";
|
||
error.hidden = false;
|
||
return;
|
||
}
|
||
button.disabled = true;
|
||
try {
|
||
const result = await post("/api/auth/welcome/complete", {
|
||
token,
|
||
password: passField.value,
|
||
display_name: nameField.value.trim() || null,
|
||
});
|
||
notice.textContent = result.detail;
|
||
notice.hidden = false;
|
||
setTimeout(toLogin, 1500);
|
||
} catch (err) {
|
||
error.textContent = err.message;
|
||
error.hidden = false;
|
||
button.disabled = false;
|
||
}
|
||
}
|
||
|
||
button.addEventListener("click", submit);
|
||
|
||
mount(root,
|
||
el("section.card", {},
|
||
el("h1", {}, "Willkommen"),
|
||
el("p.lead", {},
|
||
`Für ${preview.email} wurde ein Zugang eingerichtet. `,
|
||
"Leg jetzt dein Passwort fest – danach kannst du dich anmelden."),
|
||
el("label", {}, "Anzeigename ", el("span.hint", {}, "(freiwillig)")), nameField,
|
||
el("label", {}, "Passwort ", el("span.hint", {}, "(mindestens 12 Zeichen)")), passField,
|
||
el("label", {}, "Wiederholen"), repeatField,
|
||
error,
|
||
notice,
|
||
button));
|
||
|
||
passField.focus();
|
||
}
|