Series: User Auth

Login Form-Validations and Flash Messages

Published on Oct 30, 2015

Users want to know that their login attempt succeeded or failed… and if it failed, they want to know why.

Give them that knowledge with Validations and Flash Messages.


Links

Code

Add ember-cli-flash:

"ember-cli-flash": "1.3.6"

Put a place for flash messages in application.hbs

  <div class="flash-messages">
    {{#each flashMessages.queue as |flash|}}
      {{flash-message flash=flash}}
    {{/each}}
  </div>
  {{outlet}}

Then you can create flash messages during your login action:

    login(){
      let {userName, password} = this.getProperties('userName', 'password');
      this.get("session").login(userName, password).then(()=>{
        this.get('flashMessages').success('You have signed in successfully')
        this.transitionToPreviousRoute()
      }).catch((reason)=>{
        this.get('flashMessages').danger(reason)
      })
    }

To get validations, add the ember-validations addon

"ember-validations": "2.0.0-alpha.4"

Set validations in controller:

import EmberValidations from 'ember-validations';

export default Ember.Controller.extend(EmberValidations, {
  showErrors: false,
  session: Ember.inject.service(),
  validations: {
    userName: {
      presence: true
    },
    password: {
      presence: true,
      length: {minimum: 6}
    }
  },
  //...
  // In the login action, if there's an error, showErrors turns to true
})

A component for displaying errors:

{{#if showErrors}}
  {{#each errors as |error|}}
    <p style="color: red;">{{error}}</p>
  {{/each}}
{{/if}}

The component is used:

<div class="field">
  <label>User Name</label>
  {{input value=userName}}
  {{display-errors errors=errors.userName showErrors=showErrors}}
</div>
<div class="field">
  <label>Password</label>
  {{input value=password type="password"}}
  {{display-errors errors=errors.password showErrors=showErrors}}
</div>

Transcript

Hey and welcome back. So last time we made a login screen but it wasn’t very good at communicating back to the user. For example, we put the error in the console. So, let’s take care of that first with some ember-cli-flash, and this whole episode will act as a review of ember-cli-flash, of the login field, and of the ember validation sequence and tying them all together to make a much better login screen.

So first we’ll install the ember-cli-flash add-on, and of course restart the server.

Then in the top level handlebars, we’ll go ahead and put a place to display the flash messages.

Then in the login controller, we’ll display the error with the flashMessages. As a bonus, we’ll go ahead and display a positive flash message whenever the session login works.

We’ll see this in action real quick.

If you felt that explanation was too fast, you can go back to Episode 57 where we take longer to explain it in more detail.

In the same way when we’re doing the validations, we’ll be taking a lot of content from Episodes 64 and 65, so if you have more questions, go ahead and look those up.

Getting started with Ember-Validations is fairly easy. First, we put this in our package.json. It’s still on alpha.4.

And then, we just run npm install and then we restart the server.

In our login controller, we’ll import the ember-validations mixin and then mix it in. Then we’ll put in our validations hash so we’re making sure that the username is present and that the password is both present and a minimum length of 6.

Now we need to display those errors, and we’ll go ahead and display them in line. We’ll create the display-errors component

and it will be passed two things, showErrors and errors.

In the login controller handlebars, we’ll put the display-errors components and pass them in the specific errors as well as the showErrors property that we’ll be defining soon.

So we can define showErrors as true right off the bat, and then it’ll show all the errors,

but the problem is it’ll show all the errors right off the bat, and users don’t want to start off with a broken form.

So what we’ll do is we’ll start showErrors as false, and then if the login action fails, then we’ll set the showErrors to true.

And we can see our login form behaving how we would want, showing no errors at first and then showing errors once they try to login incorrectly.

So there we have it, the login form is working like we want and we had a whirlwind tour of three previous episodes. So I’ll see you next week when we discuss token authentication and the signup form.

User Auth

Subscribe to our mailing list