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,6 +53,9 @@ const BanUserAction = ({ data }: ChangeUserStatusProps) => {
   });
   const prevent = usePreventAutoFocus();
 
+  if (isCurrentUser || isLoading) return null;
+
+  if (hasPermission) {
     return (
       <BanContext
         value={{
@@ -98,6 +106,8 @@ const BanUserAction = ({ data }: ChangeUserStatusProps) => {
         <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,7 +24,11 @@ type SetRoleProps = {
 const ChangeRoleAction = ({ data }: SetRoleProps) => {
   const [_open, _setOpen] = useState(false);
   const prevent = usePreventAutoFocus();
+  const { hasPermission, isLoading } = useHasPermission('user', 'set-role');
 
+  if (isLoading) return null;
+
+  if (hasPermission) {
     return (
       <Dialog open={_open} onOpenChange={_setOpen}>
         <Tooltip>
@@ -62,6 +67,7 @@ const ChangeRoleAction = ({ data }: SetRoleProps) => {
         </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,7 +24,11 @@ type EditUserProps = {
 const EditUserAction = ({ data }: EditUserProps) => {
   const [_open, _setOpen] = useState(false);
   const prevent = usePreventAutoFocus();
+  const { hasPermission, isLoading } = useHasPermission('user', 'update');
 
+  if (isLoading) return null;
+
+  if (hasPermission) {
     return (
       <Dialog open={_open} onOpenChange={_setOpen}>
         <Tooltip>
@@ -61,6 +66,9 @@ const EditUserAction = ({ data }: EditUserProps) => {
         </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,7 +24,11 @@ type UpdatePasswordProps = {
 const SetPasswordAction = ({ data }: UpdatePasswordProps) => {
   const [_open, _setOpen] = useState(false);
   const prevent = usePreventAutoFocus();
+  const { hasPermission, isLoading } = useHasPermission('user', 'set-password');
 
+  if (isLoading) return null;
+
+  if (hasPermission) {
     return (
       <Dialog open={_open} onOpenChange={_setOpen}>
         <Tooltip>
@@ -62,6 +67,7 @@ const SetPasswordAction = ({ data }: UpdatePasswordProps) => {
         </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,6 +64,9 @@ const UnbanUserAction = ({ data }: UnbanUserProps) => {
     unbanMutation({ data: { id: data.id } });
   };
 
+  if (isCurrentUser || isLoading) return null;
+
+  if (hasPermission) {
     return (
       <Dialog open={_open} onOpenChange={_setOpen}>
         <Tooltip>
@@ -114,6 +122,9 @@ const UnbanUserAction = ({ data }: UnbanUserProps) => {
         </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;