How can I allow members to access and edit profile page only? - admin-on-rest

Question

I've created an admin dashboard for administrating members. As an admin I can login in do everything.
I need also to allow these members (regular users) to login, be redirected to their profile page and be able to edit a subset of their properties.
I've searched through the documentation but have been unable to figure how best to accomplish this.
Is there a standard way, and if there is how can do this?

Answer 1

All what you need to manage user permissions on your dashboard is available on the Authorization section of the documentation.
Firstly, at the authentication step, you have to set the current user permission (basically a string of your choices, given by the API and/or stored inside the local storage for example: user, admin, user_X, etc):
if (type === AUTH_GET_PERMISSIONS) {
const { role, id } = params;
return Promise.resolve(`${role}_${id}`);
}
Then, you can check this permission inside your resource declaration:
export const UserEdit = ({ ...props }) =>
<Edit title={<UserTitle />} {...props}>
{permissions =>
<TabbedForm defaultValue={{ role: 'user' }}>
<FormTab label="user.form.summary">
<DisabledInput source="id" />
{permissions === `user_${props.record.id}` &&
<TextInput source="name" validate={required} />
}
</FormTab>
</TabbedForm>}
</Edit>;
And you can also restrict an entire resource to administrators:
<Admin
restClient={restClient}
authClient={authClient}
>
{permissions => [
// Restrict access to the remove view to admin only
<Resource
name="customers"
list={UserList}
edit={UserEdit}
remove={permissions.startsWith('admin') ? UserDelete : null}
/>,
// Only include the categories resource for admin users
permissions.startsWith('admin')
? <Resource name="categories" list={CategoryList} edit={CategoryEdit} />
: null,
]}
</Admin>

Answer 2

You could also try to use my ra-component-factory that tackles those problems in a very elegant way: https://github.com/zifnab87/ra-component-factory it is now listed in contributions of admin-on-rest (https://github.com/marmelab/admin-on-rest/blob/master/docs/Ecosystem.md)
Here is the general skeleton of configuration - it helps you set fields as not visible or read-only, menu-item visibility, action button visibility and even tab arrangement per role and per action.
export default {
props: {
id: {
input: (<TextInput source="id"/>),
field: (<TextField source="id"/>),
},
name: {
input: (<TextInput label="Name" source="name"/>),
field: (<TextField label="Name" source="name"/>),
},
date: {
input: (<DateInput source="date" parse={dateParser} label="Post Date"/>),
field: (<DateField source="date" type="date" label="Post Date"/>),
},
dateGte: { //date Greater than equal
input: (<DateInput source="dateGte" parse={dateParser} label="Date from"/>),
},
dateLte: { // date Less than equal
input: (<DateInput source="dateLte" parse={dateParser} label="Date to"/>),
},
author: {
input: <ReferenceInput label="Author" source="author" reference="authors" allowEmpty>
<SelectInput optionText="name" translate={false}/>
</ReferenceInput>,
field: <ReferenceField label="Author" source="author" reference="authors" sortable={false} linkType={false} allowEmpty={true}>
<ChipField source="name"/>
</ReferenceField>
},
},
role1: {
create: {
props: ["name", "author", "date"],
action: true
},
edit: {
props: ["_id", "name", "author", "date"],
action: true
},
list: {
props: ["id", "name", "author", "date"],
action: true
},
filter: {
props: ["q", "id", "author", "dateGte", "dateLte"],
action: true
},
show: {
props: ["id", "name", "author"],
action: true
},
search: {
action: true
},
delete: {
action: true
},
},
role2: {
create: {
props: [],
action: false
},
edit: {
props: [],
action: false
},
list: {
props: ["id", "name", "author", "date"],
action: false
},
filter: {
props: ["q", "id", "author", "dateGte", "dateLte"],
action: true
},
show: {
props: ["id", "name", "author"],
action: true
},
search: {
action: true
},
delete: {
action: false
},
}
}