Search code examples
reactjsreact-routeradmin-on-rest

admin-on-rest: implement a login page with a link to a registration page

I am trying to implement a login page in admin on rest with a link to a registration form. I am quite a newbie in react and frontend development in general.

I duplicated the login page from the admin on rest demo, but I can't figure out how to add the link in the bottom. I tried adding a component from react-router but I keep getting all sorts of errors. Is there any example I can follow?

EDIT: I am trying to add a registration page with a custom route but the page is displayed inside the admin UI. This is what it looks like:

screenshot of the registration UI

Solution

  • admin-on-rest is a frontend framework but it's also a bunch of components you can use/integrate in your own app.

    It's important to understand how react is working to work with admin-on-rest. Afaik you have to know about redux, redux-form, react-router and redux-saga.

    There is a short description how to add a login page and how to customize the login page.

    But this is not an example.

    Here is the source code of the login page. If you really want to duplicate the page you can add a link to the registration page in the render method.

    First create a file called

    login.js

    and duplicate the original login page. Import the Link-Component:

    import { Link } from 'react-router-dom';

    Afterwards use the Link somewhere, for example between </form> and </Card> (between line 106 and 107).

    <Link to={{pathname: "/register"}} >Registration</Link>

    In your

    app.js

    import your created login page:

    import Login from './login';

    and use it:

    <Admin loginPage={Login} authClient={authClient} restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>

    EDIT:

    Now you have a "Registration"-Link in your Login page.

    Now, it's time to create the registration page. I am not a admin-on-rest expert, but I think the idea of admin-on-rest is to show always the menu and check the authorization. I think the most of the admin app's will not have a registration page, which must be visible for users which have not logged in and they should not see the menu on the left side. It's similar to a login page. So you have to create custom route to a custom page (without a authorization check) with a custom layout.

    Create a new file called

    MyLayout.js

    with the content of

    Layout.js

    and remove the lines 

    injectTapEventPlugin()

    and

    <Sidebar>
  {menu}
</Sidebar>

    to hide the menu on the left side.

    Then create a file called

    customRoutes.js

    with the following content:

    import React from 'react';
import { Route } from 'react-router-dom';
import Register from './Register';

export default [
    <Route exact path="/register" component={Register} />
];

    and a file called

    Register.js

    with

    import React from 'react';
import { Card, CardText } from 'material-ui/Card';
import { ViewTitle } from 'admin-on-rest';

const Register = () => (
    <Card>
        <ViewTitle title="Register" />
        <CardText>             
            <div>This is the register page.</div>
        </CardText>
    </Card>
);

export default Register;

    In your

    app.js:

    import MyLayout from './MyLayout';
import customRoutes from './customRoutes';
import MyLayout from './MyLayout';
import authClient from './authClient';


<Admin appLayout={MyLayout} loginPage={Login} authClient={authClient} customRoutes={customRoutes} restClient={myApiRestClient}>

    This is just an (ugly) example.

    Hope this helps. :)