foreign-sapphire•10mo ago

custom page as a resource

Hello guys, first of all, thx for such a great project! I have a custom page for changing password, and I would like to navigate users to it through users/edit.tsx page, but there is a problem. I have written this page as clone, because in resources there is limitation and in any other way casbin librarary's accessControl won't allow me to put anything else than (list)|(show)|(edit)|(create). How can I define this page as a separate resource or at least how to give specific user roles access to it through casbin without writing clone which is not definitely what this page stands for. Thanks in advance.

12 Replies

kapa.ai•10mo ago

Hi @Aristoteles. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, you can create custom pages and use them as resources. You can use the resource prop to specify a custom resource for your components. This is applicable for List, Edit, Show, and Create components. Here's an example of how you can define a custom resource for an Edit component:

import { Edit } from "@refinedev/antd";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Edit resource="posts">  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

import { Edit } from "@refinedev/antd";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Edit resource="posts">  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

In this example, the Edit component reads the resource information from the route by default. If you want to use a custom resource for the Edit component, you can use the resource prop. If you have multiple resources with the same name, you can pass the identifier instead of the name of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the name of the resource defined in the <Refine/> component. For more information, refer to the identifier section of the <Refine/> component documentation (https://refine.dev/docs/core/refine-component/#identifier). Regarding the access control with Casbin, unfortunately, the provided knowledge sources do not contain information on how to integrate Casbin with Refine. You may need to refer to the Casbin documentation or seek help from the Refine community for this specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@836997860243406849> kapa.ai is still learning and improving, please let us know how it did by reacting below

foreign-sapphireOP•10mo ago

@kapa.ai I would like to have change-password resource or smth similar is it possible to achieve somehow?

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can create a custom page for changing the password and define it as a separate resource in Refine. Here's an example of how you can define a custom resource:

resources={
[
  ....,
  {
    name: "change-password",
    list: "/change-password", // path for the page
  }
]
}

resources={
[
  ....,
  {
    name: "change-password",
    list: "/change-password", // path for the page
  }
]
}

In this example, change-password is the name of the resource and /change-password is the path for the page. You can replace these with your own values. You can then use the useUpdatePassword hook provided by Refine to handle the password update process on this page. Here's an example of how you can use this hook:

import { useUpdatePassword } from "@refinedev/core";  
  
const { mutate } = useUpdatePassword();  
  
const handleUpdatePassword = ({ password, confirmPassword }) => {  
 mutate({ password, confirmPassword }});  
};

import { useUpdatePassword } from "@refinedev/core";  
  
const { mutate } = useUpdatePassword();  
  
const handleUpdatePassword = ({ password, confirmPassword }) => {  
 mutate({ password, confirmPassword }});  
};

In this example, mutate is a function that you can call to update the password. You can call this function when the form on your page is submitted. For more information, refer to the Refine documentation on the useUpdatePassword hook (https://refine.dev/docs/authentication/hooks/use-update-password#usage) and the Refine documentation on resources (https://discord.com/channels/837692625737613362/1192112683927998464). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@836997860243406849> kapa.ai is still learning and improving, please let us know how it did by reacting below

foreign-sapphireOP•10mo ago

So I can't put this logic in resource of the users as I see @kapa.ai So I can't put this logic in resource of the users as I see

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided in the knowledge sources, it seems that you cannot directly put the change password logic within the users resource. However, you can create a separate resource for changing the password as mentioned in the previous response. If you want to navigate users to the change password page from the users/edit.tsx page, you can use the navigate function from the useNavigation hook provided by Refine. Here's an example:

import { useNavigation } from "@refinedev/core";

const { navigate } = useNavigation();

// Call this function when you want to navigate to the change password page
const handleChangePassword = () => {
  navigate("/change-password");
};

import { useNavigation } from "@refinedev/core";

const { navigate } = useNavigation();

// Call this function when you want to navigate to the change password page
const handleChangePassword = () => {
  navigate("/change-password");
};

In this example, navigate is a function that you can call to navigate to a different page. You can call this function when you want to navigate to the change password page. For more information, refer to the Refine documentation on the useNavigation hook (https://refine.dev/docs/api-references/hooks/navigation/use-navigation). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@836997860243406849> kapa.ai is still learning and improving, please let us know how it did by reacting below

foreign-sapphireOP•10mo ago

@kapa.ai so if I would like to make a custom page for users to change-password I have to do it this way? resources={[ { name: 'users', list: '/users', create: '/users/create', edit: '/users/edit/:id', show: '/users/show/:id', meta: { canDelete: false, }, }, { name: 'users', edit: '/users/change-password/:id', }]}

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided in the knowledge sources, it seems that you cannot have two resources with the same name. Each resource should have a unique name. However, you can create a custom route for changing the password within the users resource. Here's an example:

resources={[
{
  name: 'users',
  list: '/users',
  create: '/users/create',
  edit: '/users/edit/:id',
  show: '/users/show/:id',
  changePassword: '/users/change-password/:id',
  meta: {
    canDelete: false,
  },
}]}

resources={[
{
  name: 'users',
  list: '/users',
  create: '/users/create',
  edit: '/users/edit/:id',
  show: '/users/show/:id',
  changePassword: '/users/change-password/:id',
  meta: {
    canDelete: false,
  },
}]}

In this example, changePassword is a custom route for changing the password. You can replace this with your own value. Please note that this is a hypothetical example and the actual implementation may vary. The provided knowledge sources do not contain information on how to create custom routes within a resource in Refine. You may need to refer to the Refine documentation or seek help from the Refine community for this specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@836997860243406849> kapa.ai is still learning and improving, please let us know how it did by reacting below

conscious-sapphire•10mo ago

Hello @Aristoteles , Do you want to make a /change-password page and restrict users from accessing this page according to their role? Do I understand correctly?

custom page as a resource

Did you find this page helpful?