Keystone Greeter

A KeystoneJS signin / registration form (ReactJS)

Install

npm install keystone-greeter

//or add to package.json
"dependencies": {
	"keystone-greeter": "~0.3.3"
}

The compiled client ReactJS file is located at:

node_modules/keystone_greeter/public/snowpi/js/lib/react/build/greeter.js

The client jsx is included at:

node_modules/keystone_greeter/public/snowpi/js/lib/react/jsx/greeter.js

Setup

var keystone = require('keystone');
var greeter = require('keystone-greeter');

// add the greeter in your routes file
keystone.set('routes', function(app) {
	
	/**
	* set the 2nd parameter true to add statics without using keystone.set('static').
	* You must do this to run .init in Keystone's route setup.
	*
	* Set to false if you set init right sfter Keystone.init
	* if false we grab the statics with `keystone.get('static')`
	* convert it to an Array and push our static routes on.
	*
	* DEFAULT: false
	*
	* **/
	
	greeter.init({ keystone: keystone }, true);
	
	greeter.add('/greeter');
	
	// change the first login field
	greeter.setField('login', 'text', 'A-username', {
		label: 'username',
		field: 'username',
		//regex: ["^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$", "gi"],
		model: {
			field: 'email',
			unique: true
		},
		required: true
	});
});

Configuration

Locales

The locales file will be created on first run. You can create additional locales without them being overwritten. Copy the en.json file and replace the values.

node_modules/keystone_greeter/locales
-- node_modules/keystone_greeter/locales/en.json

Debugging

greeter.set('debug', true);

Most items need to be set before calling greeter.add:

The User Model defaults to keystone.get('user model'). Override with:

greeter.set('user model','myUsers')

The greeter uri defaults to /greeter and can be set 3 ways in overriding order:

keystone.set('sign url','/greeter') 

greeter.set('greeter','/greeter') //this overrides keystone.set

//set the page on add
greeter.add('/greeter') //this overrides everything

The success redirect page is inherited from Keystone

//set the redirect 
keystone.set('signin redirect','/')

Set the redirect timer for successful login or registration in milliseconds

greeter.set('redirect timer',0) //default = 5000 (5 seconds)

Style Sheets

Control the stylesheets

greeter.set('greeter style',true), // include default css
greeter.set('keystone style',true), // include /styles/site.min.css
greeter.set('custom style','/styles/custom.css'), // include custom css

The default is to include default greeter css first and /styles/site.min.css second so that your css automatically overrides the greeter out of the box. Custom styles is false unless explicitly set.

Registration

User registration can be toggled before calling greeter.add:

//these are the default values
greeter.set('allow register', true),
greeter.set('new user can admin', false),

Default Fields

this.setField('login', 'text', 'A-username', {
	label: Text('email'),
	field: 'email',
	regex: ["^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$", "gi"],
	model: {
		field: 'email',
		unique: false
	},
	required: true
});
this.setField('login', 'password', 'B-password', {
	label: Text('password'),
	field: 'password',
	regex: ["^(?=.*[0-9]+.*)(?=.*[a-zA-Z]+.*)[0-9a-zA-Z]{6,}$", "g"],
	required: true
});

this.setField('register', 'text', 'A-username', {
	label: Text('email'),
	field: 'email',
	regex: ["^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$", "gi"],
	required: true,
	model: {
		field: 'email',
		unique: true
	},
});
this.setField('register', 'password', 'B-password', {
	label: Text('password'),
	field: 'password',
	required: true,
	regex: ["^(?=.*[0-9]+.*)(?=.*[a-zA-Z]+.*)[0-9a-zA-Z]{6,}$", "g"]
});
this.setField('register', 'password', 'C-confirm', {
	label: Text('confirm'),
	field: 'confirm',
	required: true,
	dependsOn: 'B-password' 
});

this.setField('register', 'text','D-name', {
	label: Text('name'),
	'field': 'name',
	modify: ['first','last'],
	modifyParameter: ' ',
	placeholder: 'first last'
});

Add or change fields

The order is determined by the third parameter.

The first signin form field is username. We will use this to check signins.

	greeter.setField('login', 'text', 'A-username', {
		label: 'username',
		field: 'username',
		//regex: ["^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$", "gi"],
		model: {
			field: 'email',
		},
		required: true
	});
	greeter.setField('register', 'text', 'A-username', {
		label: 'username',
		field: 'username',
		//regex: ["^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$", "gi"],
		required: true,
		model: {
			field: 'email',
			unique: true
		},
	});
    

It can accept a modify Array to split a text field into an Object for registration:

this.setField('register', 'text','D-name', {
	label: Text('name'),
	'field': 'name',
	modify: ['first','last'],
	modifyParameter: ' ',
	placeholder: 'first last'
});

code

function modify(value, modify ) {
				
	if(!value) return false;
	if(!modify.modify) return false;
	
	var save = {};									
	var modifiers = modify.modify;
	var modifyParameter = modify.modifyParameter || ' ';
	
	if(modifiers instanceof Array && modifiers.length > 1) {
		
		var splitName = value.split(' ');
												
		save[modifiers[0]] = splitName[0];
		var cname;
		if(splitName.length > 2) {
			
			for(var i=1;i<=splitName.length;i++) {
				cname+=' ' + (splitName[i] || '');
			}
			
		} else {
			cname = splitName[1] || '';
		}
		save[modifiers[1]] = cname;
	
	} else if(modifiers instanceof Array){
		
		save[modifiers[0]] = req.body.name;
		
	} else if(typeof modifiers === 'string'){
		
		save[modifiers] = req.body.name;
		
	} else {
		
		save = req.body.name;
		
	}
	return save;
}

Return Messages

Change the return message contents

	greeter.set('message valid credentials', 'a valid username and password are required');
	greeter.set('message welcome', 'Welcome back {user}. ');
	greeter.set('message welcome login', 'Welcome back.  Please signin');
	greeter.set('message registration closed', 'registration is currently closed');
	greeter.set('message current user', 'You are currently signed in.  Do you want to <a href="/keystone/signout">sign out</a>? ');
	greeter.set('message bad token', 'bad request token.  <a href="javascript:location.reload()">refresh</a>');
	greeter.set('message username taken', 'the username requested is not available');
	greeter.set('message failed register', 'there was a problem creating your new account.');
	greeter.set('message register all fields', 'please fill in username, password and password again...');

This will overwrite the built in i18n locales text. To continue using locales do something similiar:

var Text = i18n.__;
i18n.configure({
	locales:['en'],
	directory: __dirname + '/locales'
});
greeter.set('message valid credentials', Text('a valid username and password are required'));