Add a registration page

[JedWatson]

Registration pages seem to be a common request, so it would be good to add one to the generator (seems a bit specific to build into keystone itself), along with forgotten password retrieval.

[virgafox]

absolutely yes. +1 for this

[arthurtalkgoal]

Anyone successfully made a registration page? I am google reference but seems most are unfollowed request.

[snowkeeper]

Check out the sydjs site code. It has a registration page.

[arthurtalkgoal]

Thanks @snowkeeper sydjs is very cool indeed

[sericaia]

Hello,

I've made a successfull registration page.

There's my jade view

block content
    .container
        if user
            p You are already logged in.
        else
            p Fill form in order to sign up.

            form.contact-form(method="post" ).row.col-sm-8.col-md-6
                input(type='hidden', name='action',  value='user.create')

                .form-group
                    label Name

                    .row
                        .col-sm-6.col-md-6
                            input.form-control.input-box(type='text', name='first', value=formData.first, placeholder='First Name')
                        .col-sm-6.col-md-6
                            input.form-control.input-box(type='text', name='last', value=formData.last, placeholder='Last Name')
                .form-group
                    label Email             
                    input.form-control.input-box(type='email', name='email', value=formData.email, placeholder='Email')
                .form-group
                    label Password
                    .row
                        .col-sm-6.col-md-6
                            input.form-control.input-box(type='password', name='password', value=formData.password, placeholder='Password')
                        .col-sm-6.col-md-6
                            input.form-control.input-box(type='password', name='password_confirm', value=formData.password_confirm, placeholder='Retype password')
                button(type='submit').btn.btn-success Create

As you can see, I've used the same fields that you have in the administration page (where you can add users)

In the controller I simply process the "POST" method declared above in the form. Pay attention to the method and action.

(..)
view.on('post', { action: 'user.create' }, function(next) {
        var newUser = new User.model({
            name: {
                first: locals.formData.first,
                last: locals.formData.last
            }
        });

        var updater = newUser.getUpdateHandler(req);

        updater.process(req.body, {
            fields: 'email, password',
            flashErrors: true,
            logErrors: true
        }, function(err,result) {
            if (err) {      
                data.validationErrors = err.errors; 
            } else {
                req.flash('success', 'Account created. Please sign in.');               
                return res.redirect('/');
            }
            next();
        });

    });

(..)

I hope it helps. I am available to help if there is any doubts.

[morenoh149]

@sericaia it'd be great if you could add that to the generator. Let me know if you need help

[estilles]

@sericaia ... I love the idea! It is very long overdue.

While it works great the way you presented it, I was thinking about your current workflow.

registration --> redirect to home --> prompt to sign in

Alternate Workflows

Two possible alternate workflows you should consider are:

• automatically sign the user in

  registration --> automatic sign-in --> redirect to next page

• verify user email before allowing sign-in

  registration --> send verification request --> redirect and prompt user to verify --> user clicks verification link --> redirect to sign-in/automatic sign-in

  The user can be signed-in with pending verification (i.e. can't access secured resources until verification is complete). However, if the user clicks the verification link is clicked while that session is still active, the user can be signed-in automatically

It seems to me these workflows create a more natural user experience.

Possible Implementation

auto-signin can be easily implemented using the keystone.session.signin() API.

@JedWatson: I think we should consider refactoring and exposing the doSignin() function in keystone.session.signin(), to accommodate use cases like this. (I've ended up duplicating this code to do this in the past.)

email verification can likewise be easy to implement by:

• adding login in the User model to add a random verification key upon user creation
• adding a route to validate links, removing the verification key once verified
• replacing Keystone's auth middleware (using keystone.set('auth', ...)), adding login to check verification is complete

In my opinion, these features should be optional, to give consumers more flexibility.

What do you all think?

[estilles]

Added PR keystonejs/keystone#1205, refactoring and exposing thedoSignin() function in keystone.session.signin in support of this issue.

[sericaia]

@JohnnyEstilles You're totally right and I obviously agree with you that verification of user email before allowing sign-in is necessary ;) I am using nodemailer in other projects.

[estilles]

@sericaia ... Keystone (and by extension generator-keystone) supports Mandrill out of the box. So, if we're going add this feature to the generator we should probably use Mandrill.

Like you, I personally think e-mail verification is "necessary", but that doesn't mean everyone else does. That's why I suggest we make these features optional. Should be relatively easy to do in yeoman. :-)

[darafsheh]

Has this functionality been created? Is there a more clear example of the Auto-login after registration?

[darafsheh]

for example, how do you implement the auto-login feature using the function signinWithUser() in @sericaia code?

[ConghoaTran]

@sericaia I tried but have errors

/var/www/html/registersml/templates/views/registration.jade:15
13| .row
14| .col-sm-6.col-md-6
> 15| input(type='text', name='first', value=formData.first, placeholder='First Name').form-control
16| .col-sm-6.col-md-6
17| input(type='text', name='last', value=formData.last, placeholder='Last Name').form-control
18| .form-group

Cannot read property 'first' of undefined

How to fix it ? Thanks.

[TwinkieWInkie]

@ConghoaTran Hey there, I too walked in to this issue. EDIT: Fixed it properly by stealing stealing the implementation from the contact form

    var locals = res.locals;

    locals.formData = req.body || {};

Also, since I'm still learning keystone, I also noticed I had to declare the route for the POST method.

app.get('/registreer', routes.views.register);

app.post('/registreer', routes.views.register);

[guillaumew]

Just mentionning that this feature would also be useful for me. Keep on the great work! :+1:

[robksawyer]

Is there a newer version (or way of making a registration form) of this anywhere? Keep getting the following (after submission) when using the above examples.

<div class="error"><h1 class="error-title">Sorry, an error occurred loading the page (500)</h1>
<div class="error-message">User is not defined</div></div>

Update: I ended up getting this working with the following implementation (See gist below). Not sure if it's "the right way" since I'm new to KeystoneJS, but it seems to be working at least. https://gist.github.com/robksawyer/c5549bce5452a88d5143e652935e4d9b