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

Reviewed-on: #10

src/components/form/admin-set-password-form.tsx

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

src/components/user/ban-user-dialog.tsx

@@ -1,6 +1,8 @@
+import useHasPermission from '@/hooks/use-has-permission';
 import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
 import { m } from '@/paraglide/messages';
 import { LockIcon } from '@phosphor-icons/react';
+import { useRouteContext } from '@tanstack/react-router';
 import { UserWithRole } from 'better-auth/plugins';
 import { createContext, useContext, useState } from 'react';
 import BanUserForm from '../form/admin-ban-user-form';
@@ -39,6 +41,9 @@ type BanContextProps = {
 const BanContext = createContext<BanContextProps | null>(null);
 
 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 [_openConfirm, _setOpenConfirm] = useState(false);
   const [_confirmData, _setConfirmData] = useState<SubmitValue>({
@@ -48,56 +53,61 @@ const BanUserAction = ({ data }: ChangeUserStatusProps) => {
   });
   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"
-              >
+  if (isCurrentUser || isLoading) return null;
+
+  if (hasPermission) {
+    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} />
-                <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>
-  );
+                {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>
+    );
+  }
+  return null;
 };
 
 export default BanUserAction;

src/components/user/change-role-dialog.tsx

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

src/components/user/edit-user-dialog.tsx

@@ -1,3 +1,4 @@
+import useHasPermission from '@/hooks/use-has-permission';
 import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
 import { m } from '@/paraglide/messages';
 import { PenIcon } from '@phosphor-icons/react';
@@ -23,44 +24,51 @@ type EditUserProps = {
 const EditUserAction = ({ data }: EditUserProps) => {
   const [_open, _setOpen] = useState(false);
   const prevent = usePreventAutoFocus();
+  const { hasPermission, isLoading } = useHasPermission('user', 'update');
 
-  return (
-    <Dialog open={_open} onOpenChange={_setOpen}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <DialogTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="rounded-full cursor-pointer text-blue-500 hover:bg-blue-100 hover:text-blue-600"
-            >
-              <PenIcon size={16} />
-              <span className="sr-only">{m.ui_edit_user_btn()}</span>
-            </Button>
-          </DialogTrigger>
-        </TooltipTrigger>
-        <TooltipContent className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white">
-          <Label>{m.ui_edit_user_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-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>
-  );
+  if (isLoading) return null;
+
+  if (hasPermission) {
+    return (
+      <Dialog open={_open} onOpenChange={_setOpen}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DialogTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="rounded-full cursor-pointer text-blue-500 hover:bg-blue-100 hover:text-blue-600"
+              >
+                <PenIcon size={16} />
+                <span className="sr-only">{m.ui_edit_user_btn()}</span>
+              </Button>
+            </DialogTrigger>
+          </TooltipTrigger>
+          <TooltipContent className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white">
+            <Label>{m.ui_edit_user_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-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>
+    );
+  }
+
+  return null;
 };
 
 export default EditUserAction;

src/components/user/set-password-dialog.tsx

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

src/components/user/unban-user-dialog.tsx

@@ -1,3 +1,4 @@
+import useHasPermission from '@/hooks/use-has-permission';
 import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
 import { m } from '@/paraglide/messages';
 import { usersQueries } from '@/service/queries';
@@ -5,6 +6,7 @@ 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 { useRouteContext } from '@tanstack/react-router';
 import { UserWithRole } from 'better-auth/plugins';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -28,6 +30,9 @@ type 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 [_open, _setOpen] = useState(false);
@@ -59,61 +64,67 @@ const UnbanUserAction = ({ data }: UnbanUserProps) => {
     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>
+  if (isCurrentUser || isLoading) return null;
+
+  if (hasPermission) {
+    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>
-          </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>
-  );
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return null;
 };
 
 export default UnbanUserAction;

src/hooks/use-has-permission.ts

@@ -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;