lvd-fluentui-loginbox

v0.0.6

Published

4 years ago

A ReactJS login box built using the FluentUI library

0High
0Medium
0Low

alexandru.boia

react reactjs react-components ui-components fluentui login-box

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:

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

| What | Prop Name | Type | Notes | | --- | --- | --- | --- | | Disable component | disabled | boolean | Cascades to all fields and buttons. Defaults to false. | | Configure whether to use framed container layout or not | framed | boolean | If true, it will display the default shadow-box frame. Defaults to true. | | Configure whether to use built-in fixed-width container layout or not | fixed | boolean | If true, it will set the container width to the default width of 500px. Defaults to true. | | Configure whether to center the container or not | centered | boolean | If true, it will attempt to center the container. Defaults to true. | | Set additional container css class name | className | string | Defaults to null. | | Set additional inline css style properties | style | object | Key-value plain javascript object. Defaults to {}. | | Make component readonly | readOnly | boolean | Cascades to all fields. Defaults to false. | | Display fields in underlined style. | underlined | boolean | Defaults to false. | | Component title | titleProps | Title Customization Object | See below. | | Message | messageProps | Message Object | See below. By default no message is shown. | | Username field | userNameProps | Username Customization Object | See below. | | Password field | passwordProps | Password Customization Object | See below. | | Log-in button | loginActionButtonProps | Log-in Action Button Customization Object | See below. | | Forgot password button | passwordRecoveryActionButtonProps | Password Recovery Action Button Customization Object | See below. |

All the default values are defined here.