eomsangdon/Aislo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

260706_2_로그인 인증 검토

Browse Source
This commit is contained in:
eomsangdon
2026-07-07 20:40:10 +09:00
parent f8633bb1fe
commit 5da0260be3
29 changed files with 720 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files
A07_Register/A07_Register_UI_Auth_Page.ts
+128 -47
View File
@@ -14,13 +14,55 @@ 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";
interface AgreementField {
root: HTMLElement;
input: HTMLInputElement;
}
function checkboxWithAccordion(label: string, contentText: string): AgreementField {
const container = document.createElement("div");
container.className = "a07-register__agreement";
const summary = document.createElement("div");
summary.className = "a07-register__agreement-summary";
const input = document.createElement("input");
input.type = "checkbox";
root.append(input, document.createTextNode(label));
return { root, input };
const labelSpan = document.createElement("span");
labelSpan.className = "a07-register__agreement-label";
labelSpan.textContent = label;
summary.append(input, labelSpan);
const details = document.createElement("details");
details.className = "a07-register__agreement-details";
const detailsContent = document.createElement("div");
detailsContent.className = "a07-register__agreement-content";
detailsContent.textContent = contentText;
details.appendChild(detailsContent);
summary.addEventListener("click", (e) => {
if (e.target !== input) {
details.open = !details.open;
}
});
container.append(summary, details);
return { root: container, input };
}
async function loadAgreementText(filename: string): Promise<string> {
const filePath = `resources/legal/${filename}`;
const response = await fetch(filePath);
if (!response.ok) {
console.warn(`Failed to load ${filename}`);
return `[${filename}을 불러올 수 없습니다]`;
}
return await response.text();
}
export function renderA07Register(root: HTMLElement): void {
@@ -31,31 +73,75 @@ export function renderA07Register(root: HTMLElement): void {
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 position = createInputField({
label: L("A07_Register_Field_Position"),
type: "text",
});
const terms = check(L("A07_Register_Terms"));
const privacy = check(L("A07_Register_Privacy"));
const marketing = check(L("A07_Register_Marketing"));
const email = createInputField({ label: L("A07_Register_Field_Email"), type: "email" });
const phone = createInputField({ label: L("A07_Register_Field_Phone"), type: "tel" });
const password = createInputField({ label: L("A07_Register_Field_Password"), type: "password" });
const passwordConfirm = createInputField({
label: L("A07_Register_Field_PasswordConfirm"),
type: "password",
});
const terms: AgreementField = {
root: document.createElement("div"),
input: document.createElement("input"),
};
const privacy: AgreementField = {
root: document.createElement("div"),
input: document.createElement("input"),
};
const marketing: AgreementField = {
root: document.createElement("div"),
input: document.createElement("input"),
};
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;
let termsText = "";
let privacyText = "";
let marketingText = "";
async function loadAgreementTexts(): Promise<void> {
termsText = await loadAgreementText("terms_of_service.txt");
privacyText = await loadAgreementText("privacy_policy.txt");
marketingText = await loadAgreementText("marketing_consent.txt");
const termsField = checkboxWithAccordion(L("A07_Register_Terms"), termsText);
terms.root = termsField.root;
terms.input = termsField.input;
const privacyField = checkboxWithAccordion(L("A07_Register_Privacy"), privacyText);
privacy.root = privacyField.root;
privacy.input = privacyField.input;
const marketingField = checkboxWithAccordion(L("A07_Register_Marketing"), marketingText);
marketing.root = marketingField.root;
marketing.input = marketingField.input;
form.innerHTML = "";
form.append(
name.root,
position.root,
email.root,
phone.root,
password.root,
passwordConfirm.root,
terms.root,
privacy.root,
marketing.root,
otp.root,
submit,
);
}
async function onA07_Register_Submit_Click(event: Event): Promise<void> {
event.preventDefault();
@@ -68,28 +154,34 @@ export function renderA07Register(root: HTMLElement): void {
return;
}
if (
[name, email, password].some((field) => isBlank(field.input.value)) ||
[name, email, password, passwordConfirm].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 (password.input.value !== passwordConfirm.input.value)
throw new Error(L("A07_Register_Error_PasswordMismatch"));
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,
password_confirm: passwordConfirm.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,
position: position.input.value.trim() || null,
phone: phone.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));
Array.from(form.children).forEach((child) => {
if (child !== otp.root && child !== submit) {
(child as HTMLElement).hidden = true;
}
});
otp.root.hidden = false;
submit.hidden = false;
submit.querySelector(".ui-btn__label")!.textContent = L("A07_Register_Verify");
@@ -102,25 +194,14 @@ export function renderA07Register(root: HTMLElement): void {
}
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),
loadAgreementTexts().then(() => {
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);
});
card.append(title, form, login);
page.append(card);
root.append(page);
}