Aislo/A07_Register/A07_Register_UI_Auth_Page.ts

import { ROUTES } from "@config/config_frontend";
import { hasMinLength, isBlank, isValidEmail } from "@util/common_util_validate";
import {
  createButton,
  createInputField,
  hideLoadingOverlay,
  showLoadingOverlay,
  showToast,
} from "@ui/ui_template_elements";
import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
import { navigateTo } from "../A00_Common/router";
import { requestRegistration, verifyRegistration } from "./A07_Register_Api_Fetch";
import "./A07_Register_UI_Style.css";

const L = (key: keyof typeof ui_locales): string => ui_locales[key][currentLanguageIndex];

function check(label: string): { root: HTMLLabelElement; input: HTMLInputElement } {
  const root = document.createElement("label");
  root.className = "a07-register__check";
  const input = document.createElement("input");
  input.type = "checkbox";
  root.append(input, document.createTextNode(label));
  return { root, input };
}

export function renderA07Register(root: HTMLElement): void {
  const page = document.createElement("div");
  page.className = "a07-register";
  const card = document.createElement("div");
  card.className = "a07-register__card";
  const title = document.createElement("h1");
  title.className = "a07-register__title";
  title.textContent = L("A07_Register_Title");
  const name = createInputField({ label: L("A07_Register_Field_Name"), type: "text" });
  const email = createInputField({ label: L("A07_Register_Field_Email"), type: "email" });
  const password = createInputField({ label: L("A07_Register_Field_Password"), type: "password" });
  const company = createInputField({ label: L("A07_Register_Field_Company"), type: "text" });
  const companyId = createInputField({ label: L("A07_Register_Field_CompanyId"), type: "number" });
  companyId.root.hidden = true;
  const accountType = document.createElement("select");
  accountType.className = "ui-input";
  accountType.append(
    new Option(L("A07_Register_Type_Master"), "MASTER"),
    new Option(L("A07_Register_Type_Member"), "MEMBER"),
  );
  accountType.addEventListener("change", () => {
    company.root.hidden = accountType.value === "MEMBER";
    companyId.root.hidden = accountType.value !== "MEMBER";
  });
  const terms = check(L("A07_Register_Terms"));
  const privacy = check(L("A07_Register_Privacy"));
  const marketing = check(L("A07_Register_Marketing"));
  const otp = createInputField({ label: L("A07_Register_Field_Otp"), type: "text" });
  otp.root.hidden = true;
  const submit = createButton({ label: L("A07_Register_Submit"), type: "submit" });
  const form = document.createElement("form");
  form.className = "a07-register__form";
  let verifyStep = false;

  async function onA07_Register_Submit_Click(event: Event): Promise<void> {
    event.preventDefault();
    showLoadingOverlay();
    try {
      if (verifyStep) {
        await verifyRegistration(email.input.value.trim(), otp.input.value);
        showToast(L("A07_Register_Success"), "success");
        navigateTo(ROUTES.A06_LOGIN);
        return;
      }
      if (
        [name, email, password].some((field) => isBlank(field.input.value)) ||
        !isValidEmail(email.input.value)
      ) {
        throw new Error(L("A07_Register_Error_Required"));
      }
      if (!hasMinLength(password.input.value, 8)) throw new Error(L("A07_Register_Error_Password"));
      if (!terms.input.checked || !privacy.input.checked)
        throw new Error(L("A07_Register_Error_Terms"));
      await requestRegistration({
        email: email.input.value.trim(),
        password: password.input.value,
        name: name.input.value.trim(),
        account_type: accountType.value as "MASTER" | "MEMBER",
        company_id: accountType.value === "MEMBER" ? Number(companyId.input.value) : null,
        company_name: accountType.value === "MASTER" ? company.input.value.trim() : null,
        terms_version: "1.0",
        terms_agreed: true,
        privacy_agreed: true,
        marketing_agreed: marketing.input.checked,
      });
      verifyStep = true;
      Array.from(form.children).forEach((child) => ((child as HTMLElement).hidden = true));
      otp.root.hidden = false;
      submit.hidden = false;
      submit.querySelector(".ui-btn__label")!.textContent = L("A07_Register_Verify");
      showToast(L("A07_Register_OtpSent"), "info");
    } catch (error) {
      showToast(error instanceof Error ? error.message : L("A07_Register_Error_Request"), "error");
    } finally {
      hideLoadingOverlay();
    }
  }

  form.addEventListener("submit", onA07_Register_Submit_Click);
  form.append(
    accountType,
    company.root,
    companyId.root,
    name.root,
    email.root,
    password.root,
    terms.root,
    privacy.root,
    marketing.root,
    otp.root,
    submit,
  );
  const login = createButton({
    label: L("A07_Register_ToLogin"),
    variant: "ghost",
    onClick: () => navigateTo(ROUTES.A06_LOGIN),
  });
  card.append(title, form, login);
  page.append(card);
  root.append(page);
}