frontend-zackeneule/source/pages/register/logic.ts
2024-04-25 23:30:16 +02:00

214 lines
7.4 KiB
TypeScript

var foobar;
lib_plankton.zoo_page.register(
"register",
async (parameters, target_element) => {
const set_state = function (state) {
target_element.querySelector(".register").setAttribute("rel", state);
};
const set_message = function (message) {
target_element.querySelector(".register-message").textContent = message;
};
const id : int = parseInt(parameters["id"]);
const verification : string = parameters["verification"];
// const verification : string = (new URLSearchParams(location.search)).get("verification");
update_nav({"mode": null});
const form = new lib_plankton.zoo_form.class_form<any, any>(
x => x,
x => x,
new lib_plankton.zoo_input.class_input_group(
[
{
"name": "id",
"input": new lib_plankton.zoo_input.class_input_hidden(),
},
{
"name": "verification",
"input": new lib_plankton.zoo_input.class_input_hidden(),
},
{
"name": "email_mode",
"input": new lib_plankton.zoo_input.class_input_enumeration(
[
{"value": "none", "label": "keine"},
{"value": "number", "label": "nur numerische"},
{"value": "number_and_name", "label": "numerische und namensbasierte"},
]
),
"label": "Partei-E-Mail-Adresse einrichten",
"help": "Die nummernbasierte Partei-E-Mail-Adresse hat folgenden schematischen Aufbau: \"mitglied-<mitglieds-nummer>@dielinke-sachsen.de\", z.B. \"mitglied-11223344@dielinke-sachsen.de\".\n\nDie namensbasierte Partei-E-Mail-Adresse hat folgenden schematischen Aufbau: \"<name-in-kleinbuchstaben-mit-punkten-getrennt>@dielinke-sachsen.de\". Beispiel: \"Karl Liebknecht\" würde die Adresse \"karl.liebknecht@dielinke-sachsen.de\" bekommen.\n\nDie Partei-E-Mail-Adressen können zum Empfangen von E-Mails verwendet werden. Falls es nötig werden sollte, dass du auch E-Mails mit über die Partei-Adresse verschicken kannst, wende dich bitte an den/die Mitgliederbeauftragte:n!"
},
{
"name": "email_redirect",
"input": new lib_plankton.zoo_input.class_input_checkbox(),
"label": "eingehende E-Mails zu privater Adresse umleiten",
"help": "Um die bei der Partei-Adresse eingegangenen E-Mails zu lesen, gibt es zwei Wege: Entweder du hinterlegst das zugehörige Konto im E-Mail-Client-Programm deiner Wahl und kümmerst dich selbst darum die E-Mails regelmäßig abzurufen oder die E-Mails werden an deine private Adresse weitergeleitet, sodass sie bei deinen gewöhnlichen E-Mails mit auftauchen.\n\nWenn du dir unsicher bist, empfehlen wir dir die Umleitung anzuschalten.",
},
{
"name": "name_display",
"input": new lib_plankton.zoo_input.class_input_text(),
"label": "Anzeigename",
"help": "So wirst du bei Online-Diensten anderen angezeigt.",
},
{
"name": "salutation",
"input": new lib_plankton.zoo_input.class_input_text(),
"label": "Anrede/Pronomen (z.B. 'er/ihn')",
},
{
"name": "name_login",
"input": new lib_plankton.zoo_input.class_input_text(
{
"pattern": "^[0-9a-zA-Z_]+$",
}
),
"label": "Anmeldename",
"help": "Dieser Wert ist der Nutzername für die Anmeldung bei den Online-Diensten. Hierfür solltest du etwas kurzes und prägnantes wählen. Diesen Namen bekommt für gewöhnlich niemand zu sehen. Bitte beachte, dass der Name noch verfügbar sein muss!",
},
{
"name": "password",
"input": new lib_plankton.zoo_input.class_input_password(),
"label": "Passwort",
"help": "Das Passwort für die Anmeldung bei den Online-Diensten",
},
{
"name": "password_confirmation",
"input": new lib_plankton.zoo_input.class_input_password(),
"label": "Passwort wiederholen",
},
]
),
[
{
"label": "Senden",
"procedure": async (get_value, get_representation) => {
set_message("wird verarbeitet …");
set_state("wait");
const value : any = await get_value();
if (value.password !== value.password_confirmation) {
set_message("Die Passwörter stimmen nicht überein.");
set_state("fill");
}
else {
try {
await _espe.backend.member_register(
id,
verification,
value
);
set_message("Danke!");
set_state("done");
}
catch (error) {
set_message("Da ist etwas schief gelaufen :/");
set_state("fill");
}
}
},
},
]
);
target_element.appendChild(template_request("register"));
await form.setup(target_element.querySelector(".register-form") as HTMLElement);
await form.input_write(
{
"id": id,
"verification": verification,
"name_login": "",
"name_display": "",
"salutation": "",
"email_mode": "number_and_name",
"email_redirect": true,
"password": "",
"password_confirmation": "",
}
);
set_state("fill");
// ---
{
let dom_service_data_container : HTMLElement = document.createElement("div");
dom_service_data_container.classList.add("register-services_data");
const input_service_use = new lib_plankton.zoo_input.class_input_group(
[
{
"name": "use",
"input": new lib_plankton.zoo_input.class_input_checkbox(
{
"hooks_change": [
(value) => {dom_service_data_container.classList.toggle("show", value);}
]
}
),
"label": "Netz-Dienste nutzen",
}
]
);
const input_service_data = new lib_plankton.zoo_input.class_input_group(
[
{
"name": "name_display",
"input": new lib_plankton.zoo_input.class_input_text(
{
}
),
"label": "Anzeigename",
"help": "So wirst du bei Online-Diensten anderen angezeigt.",
},
{
"name": "name_login",
"input": new lib_plankton.zoo_input.class_input_text(
{
"pattern": "^[0-9a-zA-Z_]+$",
}
),
"label": "Anmeldename",
"help": "Dieser Wert ist der Nutzername für die Anmeldung bei den Online-Diensten. Hierfür solltest du etwas kurzes und prägnantes wählen. Diesen Namen bekommt für gewöhnlich niemand zu sehen. Bitte beachte, dass der Name noch verfügbar sein muss!",
},
{
"name": "password",
"input": new lib_plankton.zoo_input.class_input_password(
),
"label": "Passwort",
"help": "Das Passwort für die Anmeldung bei den Online-Diensten",
},
{
"name": "password_confirmation",
"input": new lib_plankton.zoo_input.class_input_password(
),
"label": "Passwort wiederholen",
},
]
);
await input_service_use.setup(target_element as HTMLElement);
target_element.appendChild(dom_service_data_container);
await input_service_data.setup(dom_service_data_container);
foobar = input_service_use;
await input_service_use.write(true);
/*
const element_use_services : HTMLInputElement = (target_element.querySelector(".register-field-use_services") as HTMLInputElement);
function update_service_data_visibility(show : (null | boolean) = null) : void
{
console.info({show});
show = (show ?? element_use_services.checked);
console.info({show});
target_element.querySelector(".register-services_data").classList.toggle("show", show);
}
element_use_services.addEventListener("change", (event) => {update_service_data_visibility(event.target["checked"]);});
element_use_services.checked = true;
update_service_data_visibility(true);
*/
}
},
);