forked from baron/baron-sso
Merge pull request 'feature/issue-917-sub-email-support' (#931) from feature/issue-917-sub-email-support into dev
Reviewed-on: baron/baron-sso#931
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user