Login

Copy the Login HTML

Your HTML admin template should have a login.html or named similary, HTML page that is used fore login. Open that html file, and copy all the content inside the body tag.

Then head over to HTMLtoJSX to convert the plain HTML to format suitable for react. Uncheck Create class. Paste your copied HTML inside Live HTML Editor tab.

Copy the generated ouput.

In src\ui\tempate\Login.js look for the render function. Replace the returned <div >...</div> with the ouput you got from HTMLtoJSX

Assign the functions

The copied Login.js comes with some functions. And you need to assign thous functions to the current UI

Form on submit

In the code you just paste, find the <form> tag. Change his onSubmitEvent. It should look like this

<form onSubmit={this.handleSubmit}>

Email and Password on Change events

Your Email filed should have the onChange and value set. Should look like this (don't replace className)

<input type="email" value={this.state.username} onChange={this.handleChangeUsername} className="form-control" />

Your Password filed should have the onChange and value set. Should look like this (don't replace className)

<input type="password" value={this.state.password} onChange={this.handleChangePassword} className="form-control" />

Error Display

At appropriate location in your HTML, you should add the error display blog. So you can inform user of any Authentication error.

<h4>{this.props.error}</h4>

Google Login

To display the Google login button, add the following code

{this.props.showGoogleLogin()}