sam/fullstack-fuware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Done on function Ban and Unban User with reason and expiration date

Browse Source
This commit is contained in:
Sam Liu
2026-01-21 20:28:04 +07:00
parent e02564b5cd
commit a8745327d6
23 changed files with 511 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
messages/en.json
View File

@@ -27,13 +27,13 @@
"exp_time": [
{
"match": {
"time=1d": "1 day",
"time=7d": "7 days",
"time=15d": "15 days",
"time=1m": "1 month",
"time=6m": "6 month",
"time=1y": "1 year",
"time=0": "Forever"
"time=1": "1 day",
"time=7": "7 days",
"time=15": "15 days",
"time=30": "1 month",
"time=180": "6 month",
"time=365": "1 year",
"time=99999": "Forever"
}
}
],
@@ -133,12 +133,23 @@
"users_page_message_update_info_success": "Edited user information successfully!",
"users_page_message_set_role_success": "Modified user role successfully!",
"users_page_message_banned_success": "Banned {name} successfully!",
"users_page_message_unbanned_success": "Unbanned {name} successfully!",
"users_page_message_select_min_one_day": "Please select expiration at least 1 day!",
"users_page_ui_form_ban_reason": "Ban reason",
"users_page_ui_form_ban_exp": "Ban expiration",
"users_page_ui_select_placeholder_language": "Select language",
"users_page_ui_select_placeholder_role": "Select role",
"users_page_ui_select_placeholder_ban_exp": "Select time",
"backend_INVALID_EMAIL_OR_PASSWORD": "Email or password incorrect!",
"backend_INVALID_PASSWORD": "Password incorrect!",
"backend_YOU_ARE_NOT_ALLOWED_TO_CHANGE_USERS_ROLE": "You are not allowed to change users role"
"users_page_ui_dialog_alert_title": "Unban this user?",
"users_page_ui_dialog_alert_ban_title": "",
"users_page_ui_dialog_alert_description": "Detail: \nName: {name}. \nEmail: {email}",
"users_page_ui_dialog_alert_description_2": "Reason: {reason}. \nExpiration: {exp}",
"backend_message": [
{
"match": {
"code=INVALID_EMAIL_OR_PASSWORD": "Email or password incorrect!",
"code=INVALID_PASSWORD": "Password incorrect!",
"code=YOU_ARE_NOT_ALLOWED_TO_CHANGE_USERS_ROLE": "You are not allowed to change users role"
}
}
]
}

33
messages/vi.json
View File

@@ -27,13 +27,13 @@
"exp_time": [
{
"match": {
"time=1d": "1 ngày",
"time=7d": "7 ngày",
"time=15d": "15 ngày",
"time=1m": "1 tháng",
"time=6m": "6 tháng",
"time=1y": "1 năm",
"time=0": "Vĩnh viễn"
"time=1": "1 ngày",
"time=7": "7 ngày",
"time=15": "15 ngày",
"time=30": "1 tháng",
"time=180": "6 tháng",
"time=365": "1 năm",
"time=99999": "Vĩnh viễn"
}
}
],
@@ -133,12 +133,23 @@
"users_page_message_update_info_success": "Chỉnh sửa thông tin người dùng thành công!",
"users_page_message_set_role_success": "Chỉnh sửa quyền hạn người dùng thành công!",
"users_page_message_banned_success": "Người dùng {name} bị cấm thành công!",
"users_page_message_unbanned_success": "Người dùng {name} bỏ cấm thành công!",
"users_page_message_select_min_one_day": "Chọn ít nhất là 1 ngày!",
"users_page_ui_form_ban_reason": "Lý do cấm",
"users_page_ui_form_ban_exp": "Thời gian cấm",
"users_page_ui_select_placeholder_language": "Hãy chọn ngôn ngữ",
"users_page_ui_select_placeholder_role": "Hãy chọn quyền hạn",
"users_page_ui_select_placeholder_ban_exp": "Hãy chọn thời gian cấm",
"backend_INVALID_EMAIL_OR_PASSWORD": "Email hoặc mật khẩu không đúng!",
"backend_INVALID_PASSWORD": "Mật khẩu hiện tại không đúng!",
"backend_YOU_ARE_NOT_ALLOWED_TO_CHANGE_USERS_ROLE": "Bạn không đủ quyền để chỉnh sửa quyền hạn người dùng!"
"users_page_ui_dialog_alert_title": "Bạn muốn mở khóa người dùng này?",
"users_page_ui_dialog_alert_ban_title": "Bạn muốn khóa người dùng này?",
"users_page_ui_dialog_alert_description": "Chi tiết: \nTên: {name}. \nEmail: {email}",
"users_page_ui_dialog_alert_description_2": "\nLý do: {reason}. \nHiệu lực: {exp}",
"backend_message": [
{
"match": {
"code=INVALID_EMAIL_OR_PASSWORD": "Email hoặc mật khẩu không đúng!",
"code=INVALID_PASSWORD": "Mật khẩu hiện tại không đúng!",
"code=YOU_ARE_NOT_ALLOWED_TO_CHANGE_USERS_ROLE": "Bạn không đủ quyền để chỉnh sửa quyền hạn người dùng!"
}
}
]
}

9
src/components/DisplayBreakLineMessage.tsx Normal file
View File

@@ -0,0 +1,9 @@
const DisplayBreakLineMessage = ({
children,
}: {
children: React.ReactNode;
}) => {
return <pre className="font-sans text-black text-sm">{children}</pre>;
};
export default DisplayBreakLineMessage;

55
src/components/form/admin-ban-user-form.tsx
View File

@@ -1,13 +1,8 @@
import { m } from '@/paraglide/messages';
import { usersQueries } from '@/service/queries';
import { banUser } from '@/service/user.api';
import { userBanSchema } from '@/service/user.schema';
import { ReturnError } from '@/types/common';
import { WarningIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { UserWithRole } from 'better-auth/plugins';
import { toast } from 'sonner';
import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
import { Button } from '../ui/button';
import { DialogClose, DialogFooter } from '../ui/dialog';
@@ -21,34 +16,14 @@ import {
SelectValue,
} from '../ui/select';
import { Textarea } from '../ui/textarea';
import { useBanContext } from '../user/ban-user-dialog';
type FormProps = {
data: UserWithRole;
onSubmit: (open: boolean) => void;
};
const BanUserForm = ({ data, onSubmit }: FormProps) => {
const queryClient = useQueryClient();
const banUserMutation = useMutation({
mutationFn: banUser,
onSuccess: () => {
queryClient.refetchQueries({
queryKey: usersQueries.all,
});
onSubmit(false);
toast.success(m.users_page_message_banned_success({ name: data.name }), {
richColors: true,
});
},
onError: (error: ReturnError) => {
console.error(error);
toast.error(
(m[`backend_${error.code}` as keyof typeof m] as () => string)(),
{ richColors: true },
);
},
});
const BanUserForm = ({ data }: FormProps) => {
const { setSubmitData, setOpen, setOpenConfirm } = useBanContext();
const form = useForm({
defaultValues: {
@@ -61,7 +36,11 @@ const BanUserForm = ({ data, onSubmit }: FormProps) => {
onSubmit: userBanSchema,
},
onSubmit: async ({ value }) => {
banUserMutation.mutate({ data: value });
setSubmitData(value);
setOpen(false);
setTimeout(() => {
setOpenConfirm(true);
}, 100);
},
});
@@ -147,25 +126,25 @@ const BanUserForm = ({ data, onSubmit }: FormProps) => {
</SelectTrigger>
<SelectContent>
<SelectItem value="1">
{m.exp_time({ time: '1d' })}
{m.exp_time({ time: '1' })}
</SelectItem>
<SelectItem value="7">
{m.exp_time({ time: '7d' })}
{m.exp_time({ time: '7' })}
</SelectItem>
<SelectItem value="15">
{m.exp_time({ time: '15d' })}
{m.exp_time({ time: '15' })}
</SelectItem>
<SelectItem value="30">
{m.exp_time({ time: '1m' })}
{m.exp_time({ time: '30' })}
</SelectItem>
<SelectItem value="180">
{m.exp_time({ time: '6m' })}
{m.exp_time({ time: '180' })}
</SelectItem>
<SelectItem value="365">
{m.exp_time({ time: '1y' })}
{m.exp_time({ time: '365' })}
</SelectItem>
<SelectItem value="99999">
{m.exp_time({ time: '0' })}
{m.exp_time({ time: '99999' })}
</SelectItem>
</SelectContent>
</Select>
@@ -176,11 +155,11 @@ const BanUserForm = ({ data, onSubmit }: FormProps) => {
<Field>
<DialogFooter>
<DialogClose asChild>
<Button variant="destructive" type="button">
<Button variant="outline" type="button">
{m.ui_cancel_btn()}
</Button>
</DialogClose>
<Button type="submit" variant="outline">
<Button type="submit" variant="destructive">
{m.ui_ban_btn()}
</Button>
</DialogFooter>

7
src/components/form/admin-set-password-form.tsx
View File

@@ -33,10 +33,9 @@ const AdminSetPasswordForm = ({ data, onSubmit }: FormProps) => {
},
onError: (error: ReturnError) => {
console.error(error);
toast.error(
(m[`backend_${error.code}` as keyof typeof m] as () => string)(),
{ richColors: true },
);
toast.error(m.backend_message({ code: error.code }), {
richColors: true,
});
},
});

9
src/components/form/admin-set-user-role-form.tsx
View File

@@ -45,10 +45,9 @@ const AdminSetUserRoleForm = ({ data, onSubmit }: SetRoleFormProps) => {
},
onError: (error: ReturnError) => {
console.error(error);
toast.error(
(m[`backend_${error.code}` as keyof typeof m] as () => string)(),
{ richColors: true },
);
toast.error(m.backend_message({ code: error.code }), {
richColors: true,
});
},
});
@@ -111,7 +110,7 @@ const AdminSetUserRoleForm = ({ data, onSubmit }: SetRoleFormProps) => {
>
<SelectTrigger aria-invalid={isInvalid}>
<SelectValue
placeholder={m.users_page_ui_select_placeholder_language()}
placeholder={m.users_page_ui_select_placeholder_role()}
/>
</SelectTrigger>
<SelectContent>

7
src/components/form/admin-update-user-info-form.tsx
View File

@@ -33,10 +33,9 @@ const AdminUpdateUserInfoForm = ({ data, onSubmit }: UpdateUserFormProps) => {
},
onError: (error: ReturnError) => {
console.error(error);
toast.error(
(m[`backend_${error.code}` as keyof typeof m] as () => string)(),
{ richColors: true },
);
toast.error(m.backend_message({ code: error.code }), {
richColors: true,
});
},
});
const form = useForm({

11
src/components/form/change-password-form.tsx
View File

@@ -71,14 +71,9 @@ const ChangePasswordForm = () => {
},
onError: (ctx) => {
console.error(ctx.error.code);
toast.error(
(
m[`backend_${ctx.error.code}` as keyof typeof m] as () => string
)(),
{
richColors: true,
},
);
toast.error(m.backend_message({ code: ctx.error.code }), {
richColors: true,
});
},
},
);

13
src/components/form/profile-form.tsx
View File

@@ -67,16 +67,9 @@ const ProfileForm = () => {
},
onError: (ctx) => {
console.error(ctx.error.code);
toast.error(
(
m[
`backend_${ctx.error.code}` as keyof typeof m
] as () => string
)(),
{
richColors: true,
},
);
toast.error(m.backend_message({ code: ctx.error.code }), {
richColors: true,
});
},
},
);

7
src/components/form/settings-form.tsx
View File

@@ -35,10 +35,9 @@ const SettingsForm = () => {
},
onError: (error: ReturnError) => {
console.error(error);
toast.error(
(m[`backend_${error.code}` as keyof typeof m] as () => string)(),
{ richColors: true },
);
toast.error(m.backend_message({ code: error.code }), {
richColors: true,
});
},
});

11
src/components/form/signin-form.tsx
View File

@@ -52,14 +52,9 @@ const SignInForm = () => {
},
onError: (ctx) => {
console.error(ctx.error.code);
toast.error(
(
m[`backend_${ctx.error.code}` as keyof typeof m] as () => string
)(),
{
richColors: true,
},
);
toast.error(m.backend_message({ code: ctx.error.code }), {
richColors: true,
});
},
},
);

7
src/components/form/user-settings-form.tsx
View File

@@ -43,10 +43,9 @@ const UserSettingsForm = () => {
},
onError: (error: ReturnError) => {
console.error(error);
toast.error(
(m[`backend_${error.code}` as keyof typeof m] as () => string)(),
{ richColors: true },
);
toast.error(m.backend_message({ code: error.code }), {
richColors: true,
});
},
});

11
src/components/sidebar/nav-user.tsx
View File

@@ -49,14 +49,9 @@ const NavUser = () => {
},
onError: (ctx) => {
console.error(ctx.error.code);
toast.error(
(
m[`backend_${ctx.error.code}` as keyof typeof m] as () => string
)(),
{
richColors: true,
},
);
toast.error(m.backend_message({ code: ctx.error.code }), {
richColors: true,
});
},
},
});

98
src/components/user/ban-user-confirm-dialog.tsx Normal file
View File

@@ -0,0 +1,98 @@
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
import { m } from '@/paraglide/messages';
import { usersQueries } from '@/service/queries';
import { banUser } from '@/service/user.api';
import { ReturnError } from '@/types/common';
import { ShieldWarningIcon } from '@phosphor-icons/react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { UserWithRole } from 'better-auth/plugins';
import { toast } from 'sonner';
import DisplayBreakLineMessage from '../DisplayBreakLineMessage';
import { Button } from '../ui/button';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '../ui/dialog';
import { useBanContext } from './ban-user-dialog';
type BanConfirmProps = {
data: UserWithRole;
};
const BanUserConfirm = ({ data }: BanConfirmProps) => {
const { openConfirm, setOpenConfirm, submitData } = useBanContext();
const queryClient = useQueryClient();
const prevent = usePreventAutoFocus();
const { mutate: banUserMutation } = useMutation({
mutationFn: banUser,
onSuccess: () => {
queryClient.refetchQueries({
queryKey: usersQueries.all,
});
setOpenConfirm(false);
toast.success(m.users_page_message_banned_success({ name: data.name }), {
richColors: true,
});
},
onError: (error: ReturnError) => {
console.error(error);
toast.error(m.backend_message({ code: error.code }), {
richColors: true,
});
},
});
const onConfirm = () => {
banUserMutation({ data: submitData });
};
return (
<Dialog open={openConfirm} onOpenChange={setOpenConfirm}>
<DialogContent
showCloseButton={false}
{...prevent}
onPointerDownOutside={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-red-500">
<div className="rounded-full bg-red-100 p-3">
<ShieldWarningIcon size={30} />
</div>
{m.users_page_ui_dialog_alert_ban_title()}
</DialogTitle>
<DialogDescription className="sr-only">
{m.users_page_ui_dialog_alert_ban_title()}
</DialogDescription>
</DialogHeader>
<DisplayBreakLineMessage>
{m.users_page_ui_dialog_alert_description({
name: data.name,
email: data.email,
})}
{m.users_page_ui_dialog_alert_description_2({
reason: submitData.banReason,
exp: m.exp_time({ time: submitData.banExp }),
})}
</DisplayBreakLineMessage>
<DialogFooter className="bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4">
<DialogClose asChild>
<Button variant="outline" type="button">
{m.ui_cancel_btn()}
</Button>
</DialogClose>
<Button variant="destructive" type="button" onClick={onConfirm}>
{m.ui_confirm_btn()}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};
export default BanUserConfirm;

113
src/components/user/ban-user-dialog.tsx Normal file
View File

@@ -0,0 +1,113 @@
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
import { m } from '@/paraglide/messages';
import { LockIcon } from '@phosphor-icons/react';
import { UserWithRole } from 'better-auth/plugins';
import { createContext, useContext, useState } from 'react';
import BanUserForm from '../form/admin-ban-user-form';
import { Button } from '../ui/button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '../ui/dialog';
import { Label } from '../ui/label';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
import BanUserConfirm from './ban-user-confirm-dialog';
type ChangeUserStatusProps = {
data: UserWithRole;
};
type SubmitValue = {
id: string;
banReason: string;
banExp: number;
};
type BanContextProps = {
open: boolean;
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
openConfirm: boolean;
setOpenConfirm: React.Dispatch<React.SetStateAction<boolean>>;
submitData: SubmitValue;
setSubmitData: React.Dispatch<React.SetStateAction<SubmitValue>>;
};
const BanContext = createContext<BanContextProps | null>(null);
const BanUserAction = ({ data }: ChangeUserStatusProps) => {
const [_open, _setOpen] = useState(false);
const [_openConfirm, _setOpenConfirm] = useState(false);
const [_confirmData, _setConfirmData] = useState<SubmitValue>({
id: '',
banReason: '',
banExp: 0,
});
const prevent = usePreventAutoFocus();
return (
<BanContext
value={{
open: _open,
setOpen: _setOpen,
openConfirm: _openConfirm,
setOpenConfirm: _setOpenConfirm,
submitData: _confirmData,
setSubmitData: _setConfirmData,
}}
>
<Dialog open={_open} onOpenChange={_setOpen}>
<Tooltip>
<TooltipTrigger asChild>
<DialogTrigger asChild>
<Button
type="button"
variant="ghost"
size="icon"
className="rounded-full cursor-pointer text-red-500 hover:bg-red-100 hover:text-red-600"
>
<LockIcon size={16} />
<span className="sr-only">{m.ui_ban_btn()}</span>
</Button>
</DialogTrigger>
</TooltipTrigger>
<TooltipContent className="bg-red-500 [&_svg]:bg-red-500 [&_svg]:fill-red-500 text-white">
<Label>{m.ui_ban_btn()}</Label>
</TooltipContent>
</Tooltip>
<DialogContent
className="max-w-80 xl:max-w-xl"
{...prevent}
onPointerDownOutside={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-red-600">
<LockIcon size={16} />
{m.ui_ban_btn()}
</DialogTitle>
<DialogDescription className="sr-only">
{m.ui_change_role_btn()}
</DialogDescription>
</DialogHeader>
<BanUserForm data={data} />
</DialogContent>
</Dialog>
<BanUserConfirm data={data} />
</BanContext>
);
};
export default BanUserAction;
export function useBanContext() {
const context = useContext(BanContext);
if (!context) {
throw new Error('SHOULD_HAVE_PROVIDER');
}
return context;
}

32
src/components/user/change-role-dialog.tsx
View File

@@ -43,23 +43,23 @@ const ChangeRoleAction = ({ data }: SetRoleProps) => {
<TooltipContent className="bg-yellow-500 [&_svg]:bg-yellow-500 [&_svg]:fill-yellow-500 text-white">
<Label>{m.ui_change_role_btn()}</Label>
</TooltipContent>
<DialogContent
className="max-w-100 xl:max-w-2xl"
{...prevent}
onPointerDownOutside={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-yellow-600">
<UserGearIcon size={16} />
{m.ui_change_role_btn()}
</DialogTitle>
<DialogDescription className="sr-only">
{m.ui_change_role_btn()}
</DialogDescription>
</DialogHeader>
<AdminSetUserRoleForm data={data} onSubmit={_setOpen} />
</DialogContent>
</Tooltip>
<DialogContent
className="max-w-80 xl:max-w-sm"
{...prevent}
onPointerDownOutside={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-yellow-600">
<UserGearIcon size={16} />
{m.ui_change_role_btn()}
</DialogTitle>
<DialogDescription className="sr-only">
{m.ui_change_role_btn()}
</DialogDescription>
</DialogHeader>
<AdminSetUserRoleForm data={data} onSubmit={_setOpen} />
</DialogContent>
</Dialog>
);
};

67
src/components/user/change-user-status-dialog.tsx
View File

@@ -1,67 +0,0 @@
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
import { m } from '@/paraglide/messages';
import { LockIcon } from '@phosphor-icons/react';
import { UserWithRole } from 'better-auth/plugins';
import { useState } from 'react';
import BanUserForm from '../form/admin-ban-user-form';
import { Button } from '../ui/button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '../ui/dialog';
import { Label } from '../ui/label';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
type ChangeUserStatusProps = {
data: UserWithRole;
};
const ChangeUserStatusAction = ({ data }: ChangeUserStatusProps) => {
const [_open, _setOpen] = useState(false);
const prevent = usePreventAutoFocus();
return (
<Dialog open={_open} onOpenChange={_setOpen}>
<Tooltip>
<TooltipTrigger asChild>
<DialogTrigger asChild>
<Button
type="button"
variant="ghost"
size="icon"
className="rounded-full cursor-pointer text-red-500 hover:bg-red-100 hover:text-red-600"
>
<LockIcon size={16} />
<span className="sr-only">{m.ui_ban_btn()}</span>
</Button>
</DialogTrigger>
</TooltipTrigger>
<TooltipContent className="bg-red-500 [&_svg]:bg-red-500 [&_svg]:fill-red-500 text-white">
<Label>{m.ui_ban_btn()}</Label>
</TooltipContent>
<DialogContent
className="max-w-100 xl:max-w-2xl"
{...prevent}
onPointerDownOutside={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-red-600">
<LockIcon size={16} />
{m.ui_ban_btn()}
</DialogTitle>
<DialogDescription className="sr-only">
{m.ui_change_role_btn()}
</DialogDescription>
</DialogHeader>
<BanUserForm data={data} onSubmit={_setOpen} />
</DialogContent>
</Tooltip>
</Dialog>
);
};
export default ChangeUserStatusAction;

30
src/components/user/edit-user-dialog.tsx
View File

@@ -43,22 +43,22 @@ const EditUserAction = ({ data }: EditUserProps) => {
<TooltipContent className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white">
<Label>{m.ui_edit_user_btn()}</Label>
</TooltipContent>
<DialogContent
className="max-w-100 xl:max-w-2xl"
{...prevent}
onPointerDownOutside={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-blue-600">
<PenIcon size={16} /> {m.ui_edit_user_btn()}
</DialogTitle>
<DialogDescription className="sr-only">
{m.ui_edit_user_btn()}
</DialogDescription>
</DialogHeader>
<AdminUpdateUserInfoForm data={data} onSubmit={_setOpen} />
</DialogContent>
</Tooltip>
<DialogContent
className="max-w-80 xl:max-w-sm"
{...prevent}
onPointerDownOutside={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-blue-600">
<PenIcon size={16} /> {m.ui_edit_user_btn()}
</DialogTitle>
<DialogDescription className="sr-only">
{m.ui_edit_user_btn()}
</DialogDescription>
</DialogHeader>
<AdminUpdateUserInfoForm data={data} onSubmit={_setOpen} />
</DialogContent>
</Dialog>
);
};

32
src/components/user/set-password-dialog.tsx
View File

@@ -43,23 +43,23 @@ const SetPasswordAction = ({ data }: UpdatePasswordProps) => {
<TooltipContent className="bg-stone-500 [&_svg]:bg-stone-500 [&_svg]:fill-stone-500 text-white">
<Label>{m.ui_update_password_btn()}</Label>
</TooltipContent>
<DialogContent
className="max-w-100 xl:max-w-2xl"
{...prevent}
onPointerDownOutside={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-stone-600">
<KeyIcon size={20} />
{m.ui_update_password_btn()}
</DialogTitle>
<DialogDescription className="sr-only">
{m.ui_update_password_btn()}
</DialogDescription>
</DialogHeader>
<AdminSetPasswordForm data={data} onSubmit={_setOpen} />
</DialogContent>
</Tooltip>
<DialogContent
className="max-w-80 xl:max-w-sm"
{...prevent}
onPointerDownOutside={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-stone-600">
<KeyIcon size={20} />
{m.ui_update_password_btn()}
</DialogTitle>
<DialogDescription className="sr-only">
{m.ui_update_password_btn()}
</DialogDescription>
</DialogHeader>
<AdminSetPasswordForm data={data} onSubmit={_setOpen} />
</DialogContent>
</Dialog>
);
};

119
src/components/user/unban-user-dialog.tsx Normal file
View File

@@ -0,0 +1,119 @@
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
import { m } from '@/paraglide/messages';
import { usersQueries } from '@/service/queries';
import { unbanUser } from '@/service/user.api';
import { ReturnError } from '@/types/common';
import { LockOpenIcon, ShieldWarningIcon } from '@phosphor-icons/react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { UserWithRole } from 'better-auth/plugins';
import { useState } from 'react';
import { toast } from 'sonner';
import DisplayBreakLineMessage from '../DisplayBreakLineMessage';
import { Button } from '../ui/button';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '../ui/dialog';
import { Label } from '../ui/label';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
type UnbanUserProps = {
data: UserWithRole;
};
const UnbanUserAction = ({ data }: UnbanUserProps) => {
const queryClient = useQueryClient();
const [_open, _setOpen] = useState(false);
const prevent = usePreventAutoFocus();
const { mutate: unbanMutation } = useMutation({
mutationFn: unbanUser,
onSuccess: () => {
queryClient.refetchQueries({
queryKey: usersQueries.all,
});
_setOpen(false);
toast.success(
m.users_page_message_unbanned_success({ name: data.name }),
{
richColors: true,
},
);
},
onError: (error: ReturnError) => {
console.error(error);
toast.error(m.backend_message({ code: error.code }), {
richColors: true,
});
},
});
const onConfirm = () => {
unbanMutation({ data: { id: data.id } });
};
return (
<Dialog open={_open} onOpenChange={_setOpen}>
<Tooltip>
<TooltipTrigger asChild>
<DialogTrigger asChild>
<Button
type="button"
variant="ghost"
size="icon"
className="rounded-full cursor-pointer text-green-500 hover:bg-green-100 hover:text-green-600"
>
<LockOpenIcon size={16} />
<span className="sr-only">{m.ui_unban_btn()}</span>
</Button>
</DialogTrigger>
</TooltipTrigger>
<TooltipContent className="bg-green-500 [&_svg]:bg-green-500 [&_svg]:fill-green-500 text-white">
<Label>{m.ui_unban_btn()}</Label>
</TooltipContent>
</Tooltip>
<DialogContent
showCloseButton={false}
{...prevent}
onPointerDownOutside={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-green-500">
<div className="rounded-full bg-green-100 p-3">
<ShieldWarningIcon size={30} />
</div>
{m.users_page_ui_dialog_alert_title()}
</DialogTitle>
<DialogDescription className="sr-only">
{m.users_page_ui_dialog_alert_title()}
</DialogDescription>
</DialogHeader>
<DisplayBreakLineMessage>
{m.users_page_ui_dialog_alert_description({
name: data.name,
email: data.email,
})}
</DisplayBreakLineMessage>
<DialogFooter className="bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4">
<DialogClose asChild>
<Button variant="outline" type="button">
{m.ui_cancel_btn()}
</Button>
</DialogClose>
<Button variant="destructive" type="button" onClick={onConfirm}>
{m.ui_confirm_btn()}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};
export default UnbanUserAction;

9
src/components/user/user-column.tsx
View File

@@ -4,10 +4,11 @@ import { CheckCircleIcon, XCircleIcon } from '@phosphor-icons/react';
import { ColumnDef } from '@tanstack/react-table';
import { UserWithRole } from 'better-auth/plugins';
import RoleBadge from '../avatar/role-badge';
import BanUserAction from './ban-user-dialog';
import ChangeRoleAction from './change-role-dialog';
import ChangeUserStatusAction from './change-user-status-dialog';
import EditUserAction from './edit-user-dialog';
import SetPasswordAction from './set-password-dialog';
import UnbanUserAction from './unban-user-dialog';
export const userColumns: ColumnDef<UserWithRole>[] = [
{
@@ -66,7 +67,11 @@ export const userColumns: ColumnDef<UserWithRole>[] = [
<EditUserAction data={row.original} />
<SetPasswordAction data={row.original} />
<ChangeRoleAction data={row.original} />
<ChangeUserStatusAction data={row.original} />
{row.original.banned ? (
<UnbanUserAction data={row.original} />
) : (
<BanUserAction data={row.original} />
)}
</div>
);
},

21
src/service/user.api.ts
View File

@@ -4,6 +4,7 @@ import { parseError } from '@/utils/helper';
import { createServerFn } from '@tanstack/react-start';
import { getRequestHeaders } from '@tanstack/react-start/server';
import {
baseUser,
userBanSchema,
userListSchema,
userSetPasswordSchema,
@@ -131,3 +132,23 @@ export const banUser = createServerFn({ method: 'POST' })
throw { message, code };
}
});
export const unbanUser = createServerFn({ method: 'POST' })
.middleware([authMiddleware])
.inputValidator(baseUser)
.handler(async ({ data }) => {
try {
const headers = getRequestHeaders();
const result = await auth.api.unbanUser({
body: {
userId: data.id, // required
},
// This endpoint requires session cookies.
headers,
});
return result;
} catch (error) {
const { message, code } = parseError(error);
throw { message, code };
}
});

16
src/service/user.schema.ts
View File

@@ -1,14 +1,17 @@
import { m } from '@/paraglide/messages';
import z from 'zod';
export const baseUser = z.object({
id: z.string().nonempty(m.users_page_message_user_not_found()),
});
export const userListSchema = z.object({
page: z.coerce.number().min(1).default(1),
limit: z.coerce.number().min(10).max(100).default(10),
keyword: z.string().optional(),
});
export const userSetPasswordSchema = z.object({
id: z.string().nonempty(m.users_page_message_user_not_found()),
export const userSetPasswordSchema = baseUser.extend({
password: z
.string()
.min(5, m.users_page_message_user_min())
@@ -18,8 +21,7 @@ export const userSetPasswordSchema = z.object({
.regex(/[^a-zA-Z0-9]/, m.users_page_message_contain_special()),
});
export const userUpdateInfoSchema = z.object({
id: z.string().nonempty(m.users_page_message_user_not_found()),
export const userUpdateInfoSchema = baseUser.extend({
name: z.string().nonempty(
m.common_is_required({
field: m.profile_form_name(),
@@ -29,13 +31,11 @@ export const userUpdateInfoSchema = z.object({
export const RoleEnum = z.enum(['admin', 'user']);
export const userUpdateRoleSchema = z.object({
id: z.string().nonempty(m.users_page_message_user_not_found()),
export const userUpdateRoleSchema = baseUser.extend({
role: RoleEnum,
});
export const userBanSchema = z.object({
id: z.string().nonempty(m.users_page_message_user_not_found()),
export const userBanSchema = baseUser.extend({
banReason: z.string().nonempty(
m.common_is_required({
field: m.users_page_ui_form_ban_reason(),