lvd-fluentui-loginbox v0.0.6

FluentUI Login Box

A ReactJS login box built using the FluentUI library. It features a basic structure, with customization options for each element:

• a title;
• a message area;
• a username field;
• a password field;
• a log-in button and;
• a password recovery button, which can be hidden.

Here's a screenshot of how it all looks like using the default styling:

Contents

1. Installation
2. Demo
3. Basic Usage
4. Styling
5. Building
6. Customization Options
7. Events
8. Changelog
9. Donate

Installation

npm install --save lvd-fluentui-loginbox

Demo

The demo directory contains a compiled and ready-to-run example. Just open up the index.html file.

Basic Usage

import React from 'react';
import { LoginBox } from 'lvd-fluentui-loginbox';

class LoginPage extends React.Component {
	constructor(props) {
		super(props);

		this._handleLoginRequested =
			this._handleLoginRequested.bind(this);
		this._handleForgotPasswordRequested =
			this._handleForgotPasswordRequested.bind(this);
	}

	_handleLoginRequested(loginValues) {
		//...trigger server side processing
	}

	_handleForgotPasswordRequested(loginValues) {
		//...navigate to password recovery page
	}

	render() {
		return (
			<LoginBox 
				onLoginRequested={this._handleLoginRequested}
				onForgotPasswordRequested={this._handleForgotPasswordRequested}
			/>
		);
	}
}

You can find a full working example here.

Styling

You can either directly include the dist/style.css into your html web page or use the @import directive inside your stylesheet if building using webpack:

@import '~lvd-fluentui-loginbox/dist/style.css';

If you need to customize the default styling or provide a new one altoghether, you may find this component layout diagram useful:

Also see the component itself.

Building

To build the demo application:

npm run build-app

To build the library:

npm run build-dist

To build both in one sitting:

npm run build

Customization Options

All the default values are defined here.

Title Customization Object

A plain javascript object with the following properties:

Example:

<LoginBox 
	...
	titleProps={{
		show: true,
		text: "Log-in to access your account"
	}}
	...
/>

Message Object

A plain javascript object with the following properties:

Example:

<LoginBox 
	...
	messageProps={{
		message: "Invalid credentials provided",
		type: LoginBoxMessageType.error
	}}
	...
/>

Username Customization Object

A plain javascript object with the following properties:

Example:

<LoginBox 
	...
	userNameProps={{
		label: "User:",
		placeholder: "The username you set upon registration.",
		emptyErrorMessage: "The username is required!"
	}}
	...
/>

Password Customization Object

A plain javascript object with the following properties:

Example:

<LoginBox 
	...
	passwordProps={{
		label: "Password:",
		placeholder: "The password you set upon registration.",
		emptyErrorMessage: "The password is required!",
		canReveal: false
	}}
	...
/>

Log-in Action Button Customization Object

A plain javascript object with the following properties:

Example:

<LoginBox 
	...
	loginActionButtonProps={{
		label: "Sign-in"
	}}
	...
/>

Password Recovery Action Button Customization Object

A plain javascript object with the following properties:

Example:

<LoginBox 
	...
	passwordRecoveryActionButtonProps={{
		label: "I forgot my password",
		show: true,
		//align password recovery button to the far-right of the container
		position: PasswordRecoveryButtonPositions.right 
	}}
	...
/>

Login Values Object

The login values are exported as a plain javascript object with the following properties:

Events

Changelog

Version 0.0.6

• Updated type definitions.

Version 0.0.5

• Updated type definitions.

Version 0.0.4

• Added type definitions.

Version 0.0.3

• Added framed prop to allow one to opt-out of the default framed/shadow-boxed container layout;
• Added fixed prop to allow one to opt-out of the default fixed-width container layout;
• Added centered prop to allow one to opt-out of the default container centering;
• Added style prop to allow one to pass arbitrary in-line css styling to the container;
• Added className prop to allow one to pass an additional css class to the container;
• A description can now be passed to both the username and the password fields.

Version 0.0.2

• Added underlined prop to allow one to display the login box fields using the underlined layout built-in FluentUi for the TextField component;
• Added onLoginFormInitialized event, triggered when the component is mounted by React.

Version 0.0.1

• First tracked version.

Donate

I put some of my free time into developing and maintaining this plugin. If helped you in your projects and you are happy with it, you can...