260706_1_계정, 로그인, 보안 초안 작성

2026-07-07 19:17:13 +09:00
parent 404941c47a
commit f8633bb1fe
4696 changed files with 6110 additions and 642171 deletions
@@ -0,0 +1,126 @@
+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);
+}