Let us take a look at the template that can be used to allow a user to register at your site.
The template will contain a form that will accept a user’s username, first and last name, email address, and password. Create a template named join.swig and place it within / templates/views/auth directory.
1 {% extends "../../layouts/default.swig" %}
2
3 {% block content %}
4 <div class="container">
5 <div class="panel panel-primary">
6 <div class="panel-heading">Create An Account At IncTicket</div>
7 <div class="panel-body">
8 <div class="col-md-6">
9 <form action="/join" method="post" class="form-horizontal">
10 <fieldset>
11 <div class="form-group required">
12 <label class="col-md-4 control-label">User Name*</label>
13 <div class="col-md-8">
14 <input class="form-control" id="username" placeholder="Pick a user n\
15 ame" name="username" type="text" value="{{form.username}}">
16 </div>
17 </div>
18 <div class="form-group required">
19 <label class="col-md-4 control-label">First Name*</label>
20 <div class="col-md-8">
21 <input class="form-control" id="firstname"
placeholder="First name" \
22 name="firstname" type="text" value="{{form.firstname}}">
23 </div>
24 </div>
25 <div class="form-group required">
26 <label class="col-md-4 control-label">Last Name*</label>
27 <div class="col-md-8">
28 <input class="form-control" id="lastname"
placeholder="Last name" na\
29 me="lastname" type="text" value="{{form.lastname}}">
30 </div>
31 </div>
32 <div class="form-group required">
33 <label class="col-md-4 control-label">Email Address*</label>
34 <div class="col-md-8">
35 <input class="form-control" id="email" placeholder="Email address" n\
36 ame="email" type="email" value="{{form.email}}">
37 </div>
38 </div>
39 <div class="form-group required">
40 <label class="col-md-4 control-label">Password*</label>
41 <div class="col-md-8">
42 <input class="form-control" id="password" name="password"
placeholde\
43 r="password" type="password">
44 </div>
45 </div>
46 <div class="form-group">
47 <label class="col-md-4 control-label"></label>
48 <div class="col-md-8">
49
50 <div style="clear:both"></div>
51 <button class="btn btn-primary" type="submit">Join</
button>
52 </div>
53 </div>
54 </fieldset>
55 </form>
56 </div>
57 </div>
58 </div>
59 </div>
60 {% endblock %}
The rendered markup will look like that below:
Figure 7-2. Sign-Up Screen
In the form, we have defined input fields for capturing the necessary data from the user. The form will POST to the /join url. If there are errors during user authentication such as an invalid email or password, we display those errors using the FlashMessages.
renderMessages method that is offered by KeystoneJS.
■Note the FlashMessages.renderMessages code is in our default.swig layout file. this will help show messages on every page that extend the layout file.
Create the view named join.js under /routes/views/auth directory with the following code:
1 var keystone = require('keystone'), 2 async = require('async'); 23 body.email || !req.body.password) {
24 req.flash('error', 'Please enter a
33 function(cb) {
73 email: req.body.email, 100 }, req, res, onSuccess, onFail);
101
In the code above, we begin by checking if the user has already signed in. If yes, we then redirect the user to the /tickets route. We assign the request body to a local variable named form (req.body). This is useful for us to repopulate the form if there is an error such as a duplicate username or a duplicate email.
To test this, submit the form with an existing username. In the below screenshot, we submit the form twice with the username johndoe. The application indicates that a duplicate username has been detected; however notice that the other form fields such as
first name, last name, and email address have been populated with the values that were submitted. This provides for a good user experience on the sign-up page.
To set the values back to the form, we populate the locals.form object with the request body in the view. During the rendering of the template, we set the form input value from the locals object. At the first render, the value will be empty. However when a post back to the server is performed, then the value will contain the user input.
1 <input class="form-control" id="firstname" placeholder="First name"
name="first\
2 name" type="text" value="{{form.firstname}}">
If you notice, we use the async.series() method to perform a series of checks during sign-up. First, we check if all the necessary form variables have been filled. Next, check if the user has input a duplicate username followed by a check for a duplicate email address. If all these conditions pass, we create a new user object from the user model and save it, followed by a call to the keystone.session.signin method to sign in the user.
The async.series method takes an array of functions and executes each one in order, not starting on one until the previous has finished. The async object automatically passes each function a callback argument. Once we manually call the callback, async knows that it’s safe to move on to the next function.