Login Form

Installation

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN

<script src="https://unpkg.com/@pearson-ux/login"></script>

NPM

npm i @pearson-ux/login --save

Demo

Important note This component is styled with a custom css theme. You can see how to implement the theme below.

<pearson-login status="login" />

<pearson-login status="reset" />

<pearson-login status="validate" />

Structure

To add a login component, simply add the <pearson-login> to your markup.

<pearson-login/>

Next lets add which 5 views we would like to display, in this example well load the generic sigup view

<pearson-login status="login" />

API

All attributes in this API are optional.

Attribute	Type	Default	Description
status	String	unset	Choose between login create validate reset `resend
error	String	unset	Adds a custom error message to your form
loading	Bool	false	Displays a loading spinner in the action buttons
token	String	unset	pass a verification token to the component for consumption

Events

The pearson-login component emits several different events:

Event	Description
login	Will fire when a user clicks the login button. The event sends the username and password from the input values in the details object.
resend	Will fire when a user clicks the resend button on the resend validation view. The event sends the email address from the input value in the details object.
forgot	Will fire when a user clicks the send button on the forgot password view. The event sends the email address from the input value to the user in the details object.
reset	Will fire when a user clicks the reset button on the reset password view. The event sends the password from the input value to the user in the details object.
validate	Will fire when a user clicks the verify account button on the verify your account view. The event sends the email and token from the input value to the user in the details object.
create	Will fire when a user clicks the create button on the create account view. The event sends all the input values to the user in the details object.

CSS Theming

Do you want to customize the look of your login form? You'll need to be familar with SCSS and use your own compiler, but you can download the theme scss files here.

The best way to theme is to change the mixins and variable values. To add the theme to your project, link up the compiled style.css file in the head of your HTML file or import it into your react application.