lib_plankton.zoo_page.register(
	"password_change_exec",
	(parameters, target_element) => {
		function set_state(
			state : ("load" | "fill" | "wait" | "done"),
			messages : Array<string> = []
		) : void
		{
			target_element.querySelector(".password_change_exec").setAttribute("rel", state);
			target_element.querySelector(".password_change_exec-message").textContent = "";
			let dom_list = document.createElement("ul");
			messages.forEach(
				message => {
					let dom_message = document.createElement("li");
					dom_message.textContent = message;
					dom_list.appendChild(dom_message);
				}
			);
			target_element.querySelector(".password_change_exec-message").appendChild(dom_list);
		}
		
		const id : int = parseInt(parameters.id);
		const token : string = parameters.token;
		
		update_nav({"mode": null});
		target_element.appendChild(template_request("password_change_exec"));
		target_element.querySelector(".password_change_exec-title").textContent = lib_plankton.translate.get("page.password_change_exec.title");
		set_state(
			"load",
			[
			]
		);
		
		const form = new lib_plankton.zoo_form.class_form<
			{
				password_value : string;
				password_confirmation : string;
			},
			{
				password_value : string;
				password_confirmation : string;
			}
		>(
			x => x,
			x => x,
			new lib_plankton.zoo_input.class_input_group(
				[
					{
						"name": "password_value",
						"input": new lib_plankton.zoo_input.class_input_password(),
						"label": lib_plankton.translate.get("page.password_change_exec.form.field.password_value.label"),
					},
					{
						"name": "password_confirmation",
						"input": new lib_plankton.zoo_input.class_input_password(),
						"label": lib_plankton.translate.get("page.password_change_exec.form.field.password_confirmation.label"),
					},
				]
			),
			[
				{
					"label": lib_plankton.translate.get("page.password_change_exec.form.submit"),
					"procedure": async (get_value, get_representation) => {
						const value = await get_value();
						set_state(
							"wait",
							[
							]
						);
						let flaws : Array<{incident : string; details : Record<string, any>;}>;
						if (! (value.password_value === value.password_confirmation)) {
							flaws = [
								{"incident": "password_mismatch", "details": {}},
							];
						}
						else {
							try {
								flaws = await _espe.backend.member_password_change_execute(
									id,
									token,
									value.password_value
								);
							}
							catch (error) {
								flaws = [
									{"incident": "unhandled_error", "details": {}},
								];
							}
						}
						if (flaws.length > 0) {
							set_state(
								"fill",
								flaws.map(
									flaw => lib_plankton.string.coin(
										lib_plankton.translate.get("page.password_change_exec.flaw." + flaw.incident),
										flaw.details
									)
								)
							);
						}
						else {
							set_state(
								"done",
								[
									lib_plankton.translate.get("page.password_change_exec.status.success")
								]
							);
						}
					},
				}
			]
		);
		form.setup(target_element.querySelector(".password_change_exec-form") as HTMLElement);
	}
);