frontend-zackeneule/source/pages/register/logic.ts

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);
			 */
		}
	},
);