auth-panels-react

Basic user account creation and authentication panels for React projects.

Demo: https://jaaluh.github.io/auth-panels-react/ (using storybook)

Dependencies

The components were made for a project that uses:

semantic-ui-react

react-router-dom

Usage

npm install --save auth-panels-react

import { LoginPanel, RegisterPanel, ResetPassPanel, ForgotPassPanel } from 'auth-panels-react';

Check example at the bottom of this readme.

Components

Props (- means undefined):

| prop | type | default | | :-------------: |:-------------:| :------------------------------------------:| | onSubmit | function | - (check below for args) | | rootPath | string | '/auth' (used in links) | | style | object | - (overwrites inline styles for panel) | | logo | string | - (source for logo image) | | logoH | string/number | '100px' | | logoText | string | - (text for logo) | | logoStyles | object | - (overwrites inline styles for logo div) | | buttonText | string | 'Log in', 'Register', 'Reset', 'Send email'| | buttonStyles | object | - (overwrites inline styles for button) | | loading | bool | - (show loading indicator + disable submit)| | error | object | - (check error handling section below) |

LoginPanel

onSubmit (email, password)

path (for react-router links): rootPath + '/login'

RegisterPanel

onSubmit (email, password)

path (for react-router links): rootPath + '/register'

ResetPassPanel

onSubmit(password, id)

id comes from props.match.params.id, set by react-router (e.g. /auth/resetpass/someid)

path (for react-router links): rootPath + '/resetpass'

ForgotPassPanel

onSubmit(email)

path (for react-router links): rootPath + '/forgotpass'

Error handling

Panels take error object as a prop:

error:{header: '', content: '', type:''}

Error message with optional header will show under inputs when set.

For RegisterPanel:

error.type='User exists' can be set to highlight email field and show an error text as the label.

For ForgotPassPanel:

error.type='User not found' can be set to highlight email field and show an error text as the label.

Example usage (parent component)

...
const errors = {
	'Unauthorized': 'Wrong username or password',
	'Other': 'Something unexpected happened, try again later'
}

componentWillReceiveProps(nextProps) {
	if (nextProps.location !== this.props.location) {
		// Reset error on panel change
		this.setState({ error: {} });
  	}
}

handleError(err) {
	this.setState({
		loading: false,
		error: {
			content: errors[err.message] || errors['Other'],
			type: err.message
		}
	});
}

login(email, password){
	this.setState({ loading: true, error: {} });
	axios.post('/accountserver/login', {
		email: email,
		password: password
	})
	.then(res => {
		if (res.data.success) {
			this.setState({ loading: false });
			this.props.history.push('/loginsuccess');
		}
		else {
			throw new Error(res.data.payload);
		}
  	})
    .catch(this.handleError);
}

register(){
	// Register stuff
}

render(){
	const panelProps = {
		loading: this.state.loading,
		error: this.state.error,
		logo: logo
	};

	return (
		<Switch>
	
			<Route path='/auth/login' render={props =>
				<LoginPanel onSubmit={this.login} {...panelProps} {...props} />}
			/>

			<Route path='/auth/register' render={props =>
				<RegisterPanel onSubmit={this.register} {...panelProps} {...props} />}
			/>	
	
		</Switch>
	)
...