kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

Merge pull request 'feature/issue-917-sub-email-support' (#931) from feature/issue-917-sub-email-support into dev

Browse Source 
Reviewed-on: baron/baron-sso#931
This commit is contained in:
조찬영
2026-05-29 13:14:11 +09:00
parent 0e83561994 8d9ba3cfea
commit 592c1d1741
10 changed files with 409 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
adminfront/src/features/users/UserCreatePage.tsx
View File

@@ -8,6 +8,8 @@ import {
Plus,
Save,
Trash2,
Mail,
X,
} from "lucide-react";
import * as React from "react";
import { useForm } from "react-hook-form";
@@ -58,7 +60,11 @@ import {
import type { UserSchemaField } from "./userSchemaFields";
import { resolvePersonalTenant } from "./utils/personalTenant";
type UserFormValues = UserCreateRequest & { metadata: Record<string, unknown> };
type UserFormValues = UserCreateRequest & {
metadata: Record<string, unknown> & {
sub_email?: string[];
};
};
type UserCategory = "hanmac" | "external" | "personal";
type PickerTarget = { kind: "appointment"; index: number };
@@ -135,6 +141,8 @@ function UserCreatePage() {
);
const [isResolvingTenant, setIsResolvingTenant] = React.useState(false);
const [newSubEmail, setNewSubEmail] = React.useState("");
const { data: tenantsData } = useQuery({
queryKey: ["tenants", "all"],
queryFn: () => fetchAllTenants(),
@@ -164,10 +172,35 @@ function UserCreatePage() {
position: "",
jobTitle: "",
role: "user",
metadata: {},
metadata: {
sub_email: [],
},
},
});
const currentSubEmails = (watch("metadata.sub_email") as string[]) || [];
const handleAddSubEmail = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter" || e.key === "," || e.key === " ") {
e.preventDefault();
const value = newSubEmail.trim().replace(/,/g, "");
if (value && value.includes("@") && !currentSubEmails.includes(value)) {
setValue("metadata.sub_email", [...currentSubEmails, value], {
shouldDirty: true,
});
setNewSubEmail("");
}
}
};
const handleRemoveSubEmail = (emailToRemove: string) => {
setValue(
"metadata.sub_email",
currentSubEmails.filter((e) => e !== emailToRemove),
{ shouldDirty: true },
);
};
// Lock company for tenant_admin
React.useEffect(() => {
if (profile?.role === "tenant_admin" && profile.tenantSlug) {
@@ -370,10 +403,15 @@ function UserCreatePage() {
const {
hanmacFamily: _hanmacFamily,
userType: _userType,
sub_email: rawSubEmail,
...formMetadata
} = data.metadata ?? {};
const sub_email = Array.isArray(rawSubEmail) ? rawSubEmail : [];
const metadata: Record<string, unknown> = {
...formMetadata,
...(sub_email.length > 0 ? { sub_email } : { sub_email: [] }),
};
const payload: UserCreateRequest = {
@@ -584,6 +622,73 @@ function UserCreatePage() {
)}
</div>
<div className="space-y-2">
<Label
htmlFor="sub_email_input"
className="flex items-center gap-2"
>
{t("ui.admin.users.create.form.sub_email", "보조 이메일")}
</Label>
<div className="flex flex-col gap-2">
<div className="flex flex-wrap gap-2 mb-1">
{currentSubEmails.map((email) => (
<div
key={email}
className="inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 bg-secondary text-secondary-foreground"
>
{email}
<button
type="button"
onClick={() => handleRemoveSubEmail(email)}
className="text-muted-foreground hover:text-foreground ml-1 rounded-full p-0.5 hover:bg-muted transition-colors"
>
<X size={12} />
</button>
</div>
))}
</div>
<div className="relative">
<Input
id="sub_email_input"
value={newSubEmail}
onChange={(e) => setNewSubEmail(e.target.value)}
onKeyDown={handleAddSubEmail}
className="pr-20"
placeholder={t(
"ui.admin.users.create.form.sub_email_placeholder",
"추가할 이메일 입력 후 Enter",
)}
/>
<Button
type="button"
variant="ghost"
size="sm"
className="absolute right-1 top-1 h-8 text-xs font-bold"
onClick={() => {
const value = newSubEmail.trim().replace(/,/g, "");
if (
value &&
value.includes("@") &&
!currentSubEmails.includes(value)
) {
setValue(
"metadata.sub_email",
[...currentSubEmails, value],
{ shouldDirty: true },
);
setNewSubEmail("");
}
}}
>
{t("ui.common.add", "추가")}
</Button>
</div>
<p className="text-[10px] text-muted-foreground mt-1">
* 여러 개 입력 가능. 입력 후 엔터를 눌러 추가하세요.
</p>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label htmlFor="password">

146
adminfront/src/features/users/UserDetailPage.tsx
View File

@@ -17,6 +17,7 @@ import {
Shield,
Trash2,
Users,
X,
} from "lucide-react";
import * as React from "react";
import {
@@ -93,7 +94,10 @@ import {
import { resolvePersonalTenant } from "./utils/personalTenant";
type UserFormValues = Omit<UserUpdateRequest, "metadata"> & {
metadata: Record<string, Record<string, string | number | boolean>>;
email: string;
metadata: Record<string, Record<string, string | number | boolean>> & {
sub_email?: string[];
};
};
type UserCategory = "hanmac" | "external" | "personal";
@@ -408,6 +412,30 @@ function UserDetailPage() {
const isSelf = Boolean(profile?.id && user?.id && profile.id === user.id);
const watchedStatus = watch("status");
const [newSubEmail, setNewSubEmail] = React.useState("");
const currentSubEmails = (watch("metadata.sub_email") as string[]) || [];
const handleAddSubEmail = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter" || e.key === "," || e.key === " ") {
e.preventDefault();
const value = newSubEmail.trim().replace(/,/g, "");
if (value && value.includes("@") && !currentSubEmails.includes(value)) {
setValue("metadata.sub_email", [...currentSubEmails, value], {
shouldDirty: true,
});
setNewSubEmail("");
}
}
};
const handleRemoveSubEmail = (emailToRemove: string) => {
setValue(
"metadata.sub_email",
currentSubEmails.filter((e) => e !== emailToRemove),
{ shouldDirty: true },
);
};
const resetMutation = useMutation({
mutationFn: (newPass: string) => updateUser(userId, { password: newPass }),
onSuccess: (_, newPass) => {
@@ -614,6 +642,7 @@ function UserDetailPage() {
: null);
reset({
email: user.email || "",
name: user.name,
phone: user.phone || "",
role: user.role,
@@ -628,11 +657,20 @@ function UserDetailPage() {
grade: user.grade || "",
position: user.position || "",
jobTitle: user.jobTitle || "",
metadata:
(user.metadata as unknown as Record<
metadata: {
...((user.metadata as unknown as Record<
string,
Record<string, string | number | boolean>
>) || {},
>) || {}),
sub_email: Array.isArray(user.metadata?.sub_email)
? user.metadata.sub_email
: typeof user.metadata?.sub_email === "string"
? user.metadata.sub_email
.split(/[;,\n\r\t]/)
.map((e) => e.trim())
.filter((e) => e.includes("@"))
: [],
},
});
const isUserHanmacFamily = isHanmacFamilyUser(
user,
@@ -751,16 +789,32 @@ function UserDetailPage() {
const {
hanmacFamily: _hanmacFamily,
userType: _userType,
sub_email: rawSubEmail,
...safeMetadata
} = cleanMetadata;
// Parse sub_email
let sub_email: string[] = [];
if (typeof rawSubEmail === "string" && rawSubEmail.trim() !== "") {
sub_email = rawSubEmail
.split(/[;,\n\r\t]/)
.map((e) => e.trim())
.filter((e) => e.includes("@"));
}
const metadata: Record<string, unknown> = {
...safeMetadata,
...(sub_email.length > 0 ? { sub_email } : { sub_email: [] }),
};
const payload: UserUpdateRequest = {
...data,
metadata,
};
// email cannot be updated directly via this API in current backend implementation,
// so we delete it from payload if it spread
// @ts-ignore
delete payload.email;
payload.role = undefined;
if (userCategory === "personal") {
@@ -935,6 +989,16 @@ function UserDetailPage() {
<Mail size={14} className="text-primary/70" />
{user.email}
</div>
{user.metadata?.sub_email &&
Array.isArray(user.metadata.sub_email) &&
user.metadata.sub_email.length > 0 && (
<div className="flex items-center gap-1.5 bg-background px-2.5 py-1 rounded-full border">
<Mail size={14} className="text-primary/40" />
<span className="text-[10px] font-bold">
+{user.metadata.sub_email.length}
</span>
</div>
)}
{user.phone && (
<div className="flex items-center gap-1.5 bg-background px-2.5 py-1 rounded-full border">
<Shield size={14} className="text-primary/70" />
@@ -1055,6 +1119,80 @@ function UserDetailPage() {
</div>
</div>
<div className="grid gap-8 md:grid-cols-2 pt-6 border-t border-dashed">
<div className="space-y-2 col-span-full">
<Label
htmlFor="sub_email_input"
className="text-xs font-bold uppercase text-muted-foreground flex items-center gap-2"
>
<Mail size={14} />
{t("ui.admin.users.detail.form.sub_email", "보조 이메일")}
</Label>
<div className="flex flex-col gap-2">
<div className="flex flex-wrap gap-2 mb-1">
{currentSubEmails.map((email) => (
<Badge
key={email}
variant="secondary"
className="flex items-center gap-1 px-2.5 py-1 text-xs font-medium"
>
{email}
<button
type="button"
onClick={() => handleRemoveSubEmail(email)}
className="text-muted-foreground hover:text-foreground ml-1 rounded-full p-0.5 hover:bg-muted transition-colors"
>
<X size={12} />
</button>
</Badge>
))}
</div>
<div className="relative">
<Input
id="sub_email_input"
value={newSubEmail}
onChange={(e) => setNewSubEmail(e.target.value)}
onKeyDown={handleAddSubEmail}
className="h-11 shadow-sm pr-20"
placeholder={t(
"ui.admin.users.detail.form.sub_email_placeholder",
"추가할 이메일 입력 후 Enter",
)}
/>
<Button
type="button"
variant="ghost"
size="sm"
className="absolute right-1 top-1 h-9 text-xs font-bold"
onClick={() => {
const value = newSubEmail.trim().replace(/,/g, "");
if (
value &&
value.includes("@") &&
!currentSubEmails.includes(value)
) {
setValue(
"metadata.sub_email",
[...currentSubEmails, value],
{ shouldDirty: true },
);
setNewSubEmail("");
}
}}
>
{t("ui.common.add", "추가")}
</Button>
</div>
<p className="text-[10px] text-muted-foreground mt-1">
{t(
"msg.admin.users.detail.sub_email_help",
"* 보조 이메일로도 로그인이 가능하며 계정 찾기 등에 활용될 수 있습니다.",
)}
</p>
</div>
</div>
</div>
<div className="grid gap-8 md:grid-cols-2 pt-6 border-t border-dashed">
<div className="space-y-2">
<Label

8
adminfront/src/features/users/components/UserBulkUploadModal.tsx
View File

@@ -127,9 +127,9 @@ function hanmacEmailStatusClass(preview?: HanmacImportEmailPreview) {
export const downloadUserTemplate = () => {
const headers =
"email,name,phone,role,tenant_slug,department,grade,position,jobTitle,employee_id,tenant_slug1,department1,grade1,position1,jobTitle1,employee_id1";
"email,sub_email,name,phone,role,tenant_slug,department,grade,position,jobTitle,employee_id,tenant_slug1,department1,grade1,position1,jobTitle1,employee_id1";
const example =
"user1@example.com,홍길동,010-1234-5678,user,tenant-slug,개발팀,수석,팀장,프론트엔드,EMP001,second-tenant,센터,책임,,Architecture,EMP002";
"user1@example.com,sub1@test.com;sub2@test.com,홍길동,010-1234-5678,user,tenant-slug,개발팀,수석,팀장,프론트엔드,EMP001,second-tenant,센터,책임,,Architecture,EMP002";
const blob = new Blob([`${headers}\n${example}`], {
type: "text/csv;charset=utf-8;",
});
@@ -297,9 +297,9 @@ export function UserBulkUploadModal({
const downloadTemplate = () => {
const headers =
"email,name,phone,role,tenant_slug,department,grade,position,jobTitle,employee_id,tenant_slug1,department1,grade1,position1,jobTitle1,employee_id1";
"email,sub_email,name,phone,role,tenant_slug,department,grade,position,jobTitle,employee_id,tenant_slug1,department1,grade1,position1,jobTitle1,employee_id1";
const example =
"user1@example.com,홍길동,010-1234-5678,user,tenant-slug,개발팀,수석,팀장,프론트엔드,EMP001,second-tenant,센터,책임,,Architecture,EMP002";
"user1@example.com,sub1@test.com;sub2@test.com,홍길동,010-1234-5678,user,tenant-slug,개발팀,수석,팀장,프론트엔드,EMP001,second-tenant,센터,책임,,Architecture,EMP002";
const blob = new Blob([`${headers}\n${example}`], {
type: "text/csv;charset=utf-8;",
});

5
adminfront/src/features/users/utils/csvParser.ts
View File

@@ -354,9 +354,8 @@ function applySecondaryEmailMetadata(
value: string,
) {
const emails = splitEmailTokens(value);
item.metadata.sub_email = value;
item.metadata.secondary_emails = uniqueEmails([
...metadataEmailList(item.metadata.secondary_emails),
item.metadata.sub_email = uniqueEmails([
...metadataEmailList(item.metadata.sub_email),
...emails,
]);
addWorksmobileAliasEmails(item, emails);

5
adminfront/tests/users_bulk.spec.ts
View File

@@ -302,10 +302,7 @@ test.describe("Users Bulk Upload", () => {
const payload = JSON.parse(bulkPayload);
expect(payload.users[0].tenantSlug).toBe("primary-tenant");
expect(payload.users[0].metadata.employee_id).toBe("EMP001");
expect(payload.users[0].metadata.sub_email).toBe(
"dual.alias@hanmaceng.co.kr",
);
expect(payload.users[0].metadata.secondary_emails).toEqual([
expect(payload.users[0].metadata.sub_email).toEqual([
"dual.alias@hanmaceng.co.kr",
]);
expect(payload.users[0].metadata.aliasEmails).toEqual([

95
adminfront/tests/users_bulk_secondary.spec.ts Normal file
View File

@@ -0,0 +1,95 @@
import { expect, test } from "@playwright/test";
test.describe("Users Bulk Upload Secondary Emails", () => {
test.beforeEach(async ({ page }) => {
await page.addInitScript(() => {
window.localStorage.setItem("locale", "ko");
window.localStorage.setItem("admin_session", "fake-token");
(window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })._IS_TEST_MODE = true;
const authData = {
access_token: "fake-token",
token_type: "Bearer",
profile: { sub: "admin-user", name: "Admin", role: "super_admin" },
expires_at: Math.floor(Date.now() / 1000) + 36000,
};
window.localStorage.setItem("oidc.user:http://localhost:5000/oidc:adminfront", JSON.stringify(authData));
});
await page.route("**/api/v1/user/me", async (route) => {
return route.fulfill({
json: { id: "admin-user", name: "Admin", role: "super_admin", manageableTenants: [] },
headers: { "Access-Control-Allow-Origin": "*" },
});
});
await page.route("**/api/v1/admin/tenants*", async (route) => {
return route.fulfill({
json: { items: [], total: 0, limit: 100, offset: 0 },
headers: { "Access-Control-Allow-Origin": "*" },
});
});
await page.route("**/api/v1/admin/users*", async (route) => {
if(route.request().url().includes("/bulk")) {
return route.continue();
}
return route.fulfill({
json: { items: [], total: 0, limit: 50, offset: 0 },
headers: { "Access-Control-Allow-Origin": "*" },
});
});
await page.route("**/oidc/**", async (route) => {
await route.fulfill({ json: { issuer: "http://localhost:5000/oidc" } });
});
});
test("should parse secondary_emails and send to backend", async ({ page }) => {
let bulkPayload: any = null;
await page.route("**/api/v1/admin/users/bulk", async (route) => {
if (route.request().method() === "POST") {
bulkPayload = route.request().postDataJSON();
return route.fulfill({
json: { results: [{ email: "test@example.com", success: true, userId: "u-1" }] },
headers: { "Access-Control-Allow-Origin": "*" },
});
}
return route.continue();
});
await page.goto("/users");
await expect(page.getByTestId("page-title")).toContainText(/사용자|Users/i, { timeout: 20000 });
await page.getByTestId("user-data-mgmt-btn").click();
await page.getByRole("menuitem", { name: /일괄 임포트|일괄 등록|Bulk Import/i }).click();
// Create a mock CSV with secondary_emails
const csvContent = `email,sub_email,name,phone,role,tenant_slug\ntest@example.com,sub1@test.com;sub2@test.com,홍길동,010-1234-5678,user,tenant-slug`;
const fileChooserPromise = page.waitForEvent('filechooser');
await page.getByText(/파일 선택|Change file|Select file/i).click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles({
name: 'users_with_secondary.csv',
mimeType: 'text/csv',
buffer: Buffer.from(csvContent),
});
await expect(page.getByText(/파싱 중/)).not.toBeVisible();
await expect(page.getByTestId("bulk-start-btn")).toBeEnabled();
await page.getByTestId("bulk-start-btn").click();
await expect(page.getByText(/성공|Success/i)).toBeVisible();
expect(bulkPayload).not.toBeNull();
expect(bulkPayload.users).toHaveLength(1);
// The most important check - does it parse to the metadata
expect(bulkPayload.users[0].metadata.sub_email).toContain("sub1@test.com");
expect(bulkPayload.users[0].metadata.sub_email).toContain("sub2@test.com");
});
});