Add "forgot password" link to react-admin's login page

user_1140295 0
Viewed 732

I am building an admin web interface using react-admin and at the moment, I am trying to find a way to add a link under the Login button on react-admin's login page so that I can take the user through the account recovery process.

I have everything in place -- custom routes, custom components, API support for server-side checks and operations, the works. I just need to add that one link component on the login page to integrate the account recovery infrastructure with the rest of the site.

I have been googling for possible solutions and have found a few questions people asked in the past, but most of them were dealing with custom routes etc. and they did not really seem to be related to my issue. I have also looked at the official docs here, but they only talk about changing the background image on the login page.

Has anybody dealt with and solved this problem?

I am using react-admin 3.5.0.

react-admin
1 Answers

Customizing the login page/form is often not attempted because the react-admin team made it easy to just "adopt" that login page (template) into any app set-up. Thanks, guys!!

Ok, not too fast. But what if I seriously want/need to customize the login page?
I met this challenge when I needed to refactor the login fields.

Let's take a closer look at how the <Login> is rendered:

  • First, you actually need to pass the loginPage prop to the <Admin/>;
<Admin loginPage={CustomLoginPage} />
  • Then, within the CustomLoginPage, render the form and include any other relevant info (in this case, your "forgot password" link)
import { Form } from 'react-final-form';

const CustomLoginPage = props => {
   // any other logic
   return (
     <div>
       <Form {...props} render={() => (<form>...</form>)} />
       <a href='...'>Forgot Password?</a>
     </div>
   )
};

This code for the react-admin demo login-page will help you understand that last part further.

user_108494380
Related