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

Merge pull request 'add permission' (#10) from feature/check-permission into develop

Browse Source 
Reviewed-on: #10
This commit was merged in pull request #10.
This commit is contained in:
Sam Liu
2026-02-01 10:50:29 +00:00
parent ed7e5baaea 468d55d291
commit 2616ad5a7d
7 changed files with 289 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -66,7 +66,10 @@ const AdminSetPasswordForm = ({ data, onSubmit }: FormProps) => {
</form.AppField> </form.AppField>
<form.AppField name="password"> <form.AppField name="password">
{(field) => ( {(field) => (
<field.TextField label={m.change_password_form_new_password()} /> <field.TextField
label={m.change_password_form_new_password()}
type="password"
/>
)} )}
</form.AppField> </form.AppField>
<Field> <Field>

108
src/components/user/ban-user-dialog.tsx
View File

@@ -1,6 +1,8 @@
import useHasPermission from '@/hooks/use-has-permission';
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus'; import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
import { m } from '@/paraglide/messages'; import { m } from '@/paraglide/messages';
import { LockIcon } from '@phosphor-icons/react'; import { LockIcon } from '@phosphor-icons/react';
import { useRouteContext } from '@tanstack/react-router';
import { UserWithRole } from 'better-auth/plugins'; import { UserWithRole } from 'better-auth/plugins';
import { createContext, useContext, useState } from 'react'; import { createContext, useContext, useState } from 'react';
import BanUserForm from '../form/admin-ban-user-form'; import BanUserForm from '../form/admin-ban-user-form';
@@ -39,6 +41,9 @@ type BanContextProps = {
const BanContext = createContext<BanContextProps | null>(null); const BanContext = createContext<BanContextProps | null>(null);
const BanUserAction = ({ data }: ChangeUserStatusProps) => { const BanUserAction = ({ data }: ChangeUserStatusProps) => {
const { session } = useRouteContext({ from: '__root__' });
const isCurrentUser = session?.user.id === data.id;
const { hasPermission, isLoading } = useHasPermission('user', 'ban');
const [_open, _setOpen] = useState(false); const [_open, _setOpen] = useState(false);
const [_openConfirm, _setOpenConfirm] = useState(false); const [_openConfirm, _setOpenConfirm] = useState(false);
const [_confirmData, _setConfirmData] = useState<SubmitValue>({ const [_confirmData, _setConfirmData] = useState<SubmitValue>({
@@ -48,56 +53,61 @@ const BanUserAction = ({ data }: ChangeUserStatusProps) => {
}); });
const prevent = usePreventAutoFocus(); const prevent = usePreventAutoFocus();
return ( if (isCurrentUser || isLoading) return null;
<BanContext
value={{ if (hasPermission) {
open: _open, return (
setOpen: _setOpen, <BanContext
openConfirm: _openConfirm, value={{
setOpenConfirm: _setOpenConfirm, open: _open,
submitData: _confirmData, setOpen: _setOpen,
setSubmitData: _setConfirmData, openConfirm: _openConfirm,
}} setOpenConfirm: _setOpenConfirm,
> submitData: _confirmData,
<Dialog open={_open} onOpenChange={_setOpen}> setSubmitData: _setConfirmData,
<Tooltip> }}
<TooltipTrigger asChild> >
<DialogTrigger asChild> <Dialog open={_open} onOpenChange={_setOpen}>
<Button <Tooltip>
type="button" <TooltipTrigger asChild>
variant="ghost" <DialogTrigger asChild>
size="icon" <Button
className="rounded-full cursor-pointer text-red-500 hover:bg-red-100 hover:text-red-600" 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} /> <LockIcon size={16} />
<span className="sr-only">{m.ui_ban_btn()}</span> {m.ui_ban_btn()}
</Button> </DialogTitle>
</DialogTrigger> <DialogDescription className="sr-only">
</TooltipTrigger> {m.ui_change_role_btn()}
<TooltipContent className="bg-red-500 [&_svg]:bg-red-500 [&_svg]:fill-red-500 text-white"> </DialogDescription>
<Label>{m.ui_ban_btn()}</Label> </DialogHeader>
</TooltipContent> <BanUserForm data={data} />
</Tooltip> </DialogContent>
<DialogContent </Dialog>
className="max-w-80 xl:max-w-xl" <BanUserConfirm data={data} />
{...prevent} </BanContext>
onPointerDownOutside={(e) => e.preventDefault()} );
> }
<DialogHeader> return null;
<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 default BanUserAction;

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

@@ -1,3 +1,4 @@
import useHasPermission from '@/hooks/use-has-permission';
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus'; import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
import { m } from '@/paraglide/messages'; import { m } from '@/paraglide/messages';
import { UserGearIcon } from '@phosphor-icons/react'; import { UserGearIcon } from '@phosphor-icons/react';
@@ -23,45 +24,50 @@ type SetRoleProps = {
const ChangeRoleAction = ({ data }: SetRoleProps) => { const ChangeRoleAction = ({ data }: SetRoleProps) => {
const [_open, _setOpen] = useState(false); const [_open, _setOpen] = useState(false);
const prevent = usePreventAutoFocus(); const prevent = usePreventAutoFocus();
const { hasPermission, isLoading } = useHasPermission('user', 'set-role');
return ( if (isLoading) return null;
<Dialog open={_open} onOpenChange={_setOpen}>
<Tooltip> if (hasPermission) {
<TooltipTrigger asChild> return (
<DialogTrigger asChild> <Dialog open={_open} onOpenChange={_setOpen}>
<Button <Tooltip>
type="button" <TooltipTrigger asChild>
variant="ghost" <DialogTrigger asChild>
size="icon" <Button
className="rounded-full cursor-pointer text-yellow-500 hover:bg-yellow-100 hover:text-yellow-600" type="button"
> variant="ghost"
size="icon"
className="rounded-full cursor-pointer text-yellow-500 hover:bg-yellow-100 hover:text-yellow-600"
>
<UserGearIcon size={16} />
<span className="sr-only">{m.ui_change_role_btn()}</span>
</Button>
</DialogTrigger>
</TooltipTrigger>
<TooltipContent className="bg-yellow-500 [&_svg]:bg-yellow-500 [&_svg]:fill-yellow-500 text-white">
<Label>{m.ui_change_role_btn()}</Label>
</TooltipContent>
</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} /> <UserGearIcon size={16} />
<span className="sr-only">{m.ui_change_role_btn()}</span> {m.ui_change_role_btn()}
</Button> </DialogTitle>
</DialogTrigger> <DialogDescription className="sr-only">
</TooltipTrigger> {m.ui_change_role_btn()}
<TooltipContent className="bg-yellow-500 [&_svg]:bg-yellow-500 [&_svg]:fill-yellow-500 text-white"> </DialogDescription>
<Label>{m.ui_change_role_btn()}</Label> </DialogHeader>
</TooltipContent> <AdminSetUserRoleForm data={data} onSubmit={_setOpen} />
</Tooltip> </DialogContent>
<DialogContent </Dialog>
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>
);
}; };
export default ChangeRoleAction; export default ChangeRoleAction;

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

@@ -1,3 +1,4 @@
import useHasPermission from '@/hooks/use-has-permission';
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus'; import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
import { m } from '@/paraglide/messages'; import { m } from '@/paraglide/messages';
import { PenIcon } from '@phosphor-icons/react'; import { PenIcon } from '@phosphor-icons/react';
@@ -23,44 +24,51 @@ type EditUserProps = {
const EditUserAction = ({ data }: EditUserProps) => { const EditUserAction = ({ data }: EditUserProps) => {
const [_open, _setOpen] = useState(false); const [_open, _setOpen] = useState(false);
const prevent = usePreventAutoFocus(); const prevent = usePreventAutoFocus();
const { hasPermission, isLoading } = useHasPermission('user', 'update');
return ( if (isLoading) return null;
<Dialog open={_open} onOpenChange={_setOpen}>
<Tooltip> if (hasPermission) {
<TooltipTrigger asChild> return (
<DialogTrigger asChild> <Dialog open={_open} onOpenChange={_setOpen}>
<Button <Tooltip>
type="button" <TooltipTrigger asChild>
variant="ghost" <DialogTrigger asChild>
size="icon" <Button
className="rounded-full cursor-pointer text-blue-500 hover:bg-blue-100 hover:text-blue-600" type="button"
> variant="ghost"
<PenIcon size={16} /> size="icon"
<span className="sr-only">{m.ui_edit_user_btn()}</span> className="rounded-full cursor-pointer text-blue-500 hover:bg-blue-100 hover:text-blue-600"
</Button> >
</DialogTrigger> <PenIcon size={16} />
</TooltipTrigger> <span className="sr-only">{m.ui_edit_user_btn()}</span>
<TooltipContent className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white"> </Button>
<Label>{m.ui_edit_user_btn()}</Label> </DialogTrigger>
</TooltipContent> </TooltipTrigger>
</Tooltip> <TooltipContent className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white">
<DialogContent <Label>{m.ui_edit_user_btn()}</Label>
className="max-w-80 xl:max-w-sm" </TooltipContent>
{...prevent} </Tooltip>
onPointerDownOutside={(e) => e.preventDefault()} <DialogContent
> className="max-w-80 xl:max-w-sm"
<DialogHeader> {...prevent}
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-blue-600"> onPointerDownOutside={(e) => e.preventDefault()}
<PenIcon size={16} /> {m.ui_edit_user_btn()} >
</DialogTitle> <DialogHeader>
<DialogDescription className="sr-only"> <DialogTitle className="flex items-center gap-3 text-lg font-bold text-blue-600">
{m.ui_edit_user_btn()} <PenIcon size={16} /> {m.ui_edit_user_btn()}
</DialogDescription> </DialogTitle>
</DialogHeader> <DialogDescription className="sr-only">
<AdminUpdateUserInfoForm data={data} onSubmit={_setOpen} /> {m.ui_edit_user_btn()}
</DialogContent> </DialogDescription>
</Dialog> </DialogHeader>
); <AdminUpdateUserInfoForm data={data} onSubmit={_setOpen} />
</DialogContent>
</Dialog>
);
}
return null;
}; };
export default EditUserAction; export default EditUserAction;

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

@@ -1,3 +1,4 @@
import useHasPermission from '@/hooks/use-has-permission';
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus'; import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
import { m } from '@/paraglide/messages'; import { m } from '@/paraglide/messages';
import { KeyIcon } from '@phosphor-icons/react'; import { KeyIcon } from '@phosphor-icons/react';
@@ -23,45 +24,50 @@ type UpdatePasswordProps = {
const SetPasswordAction = ({ data }: UpdatePasswordProps) => { const SetPasswordAction = ({ data }: UpdatePasswordProps) => {
const [_open, _setOpen] = useState(false); const [_open, _setOpen] = useState(false);
const prevent = usePreventAutoFocus(); const prevent = usePreventAutoFocus();
const { hasPermission, isLoading } = useHasPermission('user', 'set-password');
return ( if (isLoading) return null;
<Dialog open={_open} onOpenChange={_setOpen}>
<Tooltip> if (hasPermission) {
<TooltipTrigger asChild> return (
<DialogTrigger asChild> <Dialog open={_open} onOpenChange={_setOpen}>
<Button <Tooltip>
type="button" <TooltipTrigger asChild>
variant="ghost" <DialogTrigger asChild>
size="icon" <Button
className="rounded-full cursor-pointer text-stone-500 hover:bg-stone-100 hover:text-stone-600" type="button"
> variant="ghost"
<KeyIcon size={16} /> size="icon"
<span className="sr-only">{m.ui_update_password_btn()}</span> className="rounded-full cursor-pointer text-stone-500 hover:bg-stone-100 hover:text-stone-600"
</Button> >
</DialogTrigger> <KeyIcon size={16} />
</TooltipTrigger> <span className="sr-only">{m.ui_update_password_btn()}</span>
<TooltipContent className="bg-stone-500 [&_svg]:bg-stone-500 [&_svg]:fill-stone-500 text-white"> </Button>
<Label>{m.ui_update_password_btn()}</Label> </DialogTrigger>
</TooltipContent> </TooltipTrigger>
</Tooltip> <TooltipContent className="bg-stone-500 [&_svg]:bg-stone-500 [&_svg]:fill-stone-500 text-white">
<DialogContent <Label>{m.ui_update_password_btn()}</Label>
className="max-w-80 xl:max-w-sm" </TooltipContent>
{...prevent} </Tooltip>
onPointerDownOutside={(e) => e.preventDefault()} <DialogContent
> className="max-w-80 xl:max-w-sm"
<DialogHeader> {...prevent}
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-stone-600"> onPointerDownOutside={(e) => e.preventDefault()}
<KeyIcon size={20} /> >
{m.ui_update_password_btn()} <DialogHeader>
</DialogTitle> <DialogTitle className="flex items-center gap-3 text-lg font-bold text-stone-600">
<DialogDescription className="sr-only"> <KeyIcon size={20} />
{m.ui_update_password_btn()} {m.ui_update_password_btn()}
</DialogDescription> </DialogTitle>
</DialogHeader> <DialogDescription className="sr-only">
<AdminSetPasswordForm data={data} onSubmit={_setOpen} /> {m.ui_update_password_btn()}
</DialogContent> </DialogDescription>
</Dialog> </DialogHeader>
); <AdminSetPasswordForm data={data} onSubmit={_setOpen} />
</DialogContent>
</Dialog>
);
}
}; };
export default SetPasswordAction; export default SetPasswordAction;

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

@@ -1,3 +1,4 @@
import useHasPermission from '@/hooks/use-has-permission';
import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus'; import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
import { m } from '@/paraglide/messages'; import { m } from '@/paraglide/messages';
import { usersQueries } from '@/service/queries'; import { usersQueries } from '@/service/queries';
@@ -5,6 +6,7 @@ import { unbanUser } from '@/service/user.api';
import { ReturnError } from '@/types/common'; import { ReturnError } from '@/types/common';
import { LockOpenIcon, ShieldWarningIcon } from '@phosphor-icons/react'; import { LockOpenIcon, ShieldWarningIcon } from '@phosphor-icons/react';
import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useRouteContext } from '@tanstack/react-router';
import { UserWithRole } from 'better-auth/plugins'; import { UserWithRole } from 'better-auth/plugins';
import { useState } from 'react'; import { useState } from 'react';
import { toast } from 'sonner'; import { toast } from 'sonner';
@@ -28,6 +30,9 @@ type UnbanUserProps = {
}; };
const UnbanUserAction = ({ data }: UnbanUserProps) => { const UnbanUserAction = ({ data }: UnbanUserProps) => {
const { session } = useRouteContext({ from: '__root__' });
const isCurrentUser = session?.user.id === data.id;
const { hasPermission, isLoading } = useHasPermission('user', 'ban');
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [_open, _setOpen] = useState(false); const [_open, _setOpen] = useState(false);
@@ -59,61 +64,67 @@ const UnbanUserAction = ({ data }: UnbanUserProps) => {
unbanMutation({ data: { id: data.id } }); unbanMutation({ data: { id: data.id } });
}; };
return ( if (isCurrentUser || isLoading) return null;
<Dialog open={_open} onOpenChange={_setOpen}>
<Tooltip> if (hasPermission) {
<TooltipTrigger asChild> return (
<DialogTrigger asChild> <Dialog open={_open} onOpenChange={_setOpen}>
<Button <Tooltip>
type="button" <TooltipTrigger asChild>
variant="ghost" <DialogTrigger asChild>
size="icon" <Button
className="rounded-full cursor-pointer text-green-500 hover:bg-green-100 hover:text-green-600" type="button"
> variant="ghost"
<LockOpenIcon size={16} /> size="icon"
<span className="sr-only">{m.ui_unban_btn()}</span> 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> </Button>
</DialogTrigger> </DialogFooter>
</TooltipTrigger> </DialogContent>
<TooltipContent className="bg-green-500 [&_svg]:bg-green-500 [&_svg]:fill-green-500 text-white"> </Dialog>
<Label>{m.ui_unban_btn()}</Label> );
</TooltipContent> }
</Tooltip>
<DialogContent return null;
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; export default UnbanUserAction;

29
src/hooks/use-has-permission.ts Normal file
View File

@@ -0,0 +1,29 @@
import { authClient } from '@/lib/auth-client';
import { useEffect, useState } from 'react';
function useHasPermission(resource: string, action: string) {
const [hasPermission, setHasPermission] = useState(false);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const checkPermission = async () => {
try {
const access = await authClient.admin.hasPermission({
permissions: {
[resource]: [action],
},
});
setHasPermission(access.data?.success ?? false);
} catch (error) {
console.error('Permission check failed:', error);
} finally {
setIsLoading(false);
}
};
checkPermission();
}, [resource, action]);
return { hasPermission, isLoading };
}
export default useHasPermission;