React Gate Duo

This project was very little based on react-gate . Aims to be simple.

Install

npm install --save react-gate-duo

Examples

import SimpleGate from "react-gate-duo";
// ...other imports here

// React Router Dom (with local credentials)
<Route path="/protected-route" render={props => (
	<SimpleGate localCredentials={{ username: "admin", password: "password" }}>
		<Component {...props} />	
	</SimpleGate>
)}>

// React Router Dom (with an authorization pass)
const isUserLoggedIn = () => {
	if(userSession && userLoggedInTime){
		return true;
	}

	return false;
}

<Route path="/protected-route" render={props => (
	<SimpleGate authorized={isUserLoggedIn()}>
		<Component {...props} />	
	</SimpleGate>
)}>

When using localCredentials prop, when logging in, SimpleGate sets a sessionId and sessionTime. The sessionId is generated randomly. The sessionTime is for a check to see if the visiting user has been to the site within the past 2 days. if not, the visiting user is redirected to a login form. Super simple and not styled. If so, the user is immediately passed to the child.

| Prop Name | Type | Required? | Default | |------------------------|-----------------------------------------|-----------------------------------------|---------| | localCredentials | { username: string, password: string } | If authorized prop not being used | none | | authorized | Function that returns a boolean | If localCredentials prop not being used | none |

Styling

Each classname is in the gateClasses prop object. There is absolutely NO styling implemented by default so everything is up to you.

| Gate Class Prop | Type | Default | |--------------------------------|---------|---------| | inputClassName | String | "" | | formClassName | String | "" | | firstInputClassName | String | "" | | secondInputClassName | String | "" | | submitButtonContainerClassName | String | "" | | submitButtonClassName | String | "" |