Lesson 10

Forms and user data

17

⚠️ This tutorial uses an old version of Ember. Some things might have changed!

So far, we've created 2 out of the 3 pages we need: Home and Profile. In this chapter, we're going to start on the third one: the Login page.

Creating the design

Let's take a look at what it is we're aiming for:


From our Sketch-file.


Looks simple enough, let's start coding! We'll start by generating the index route:

app/index/template.hbs

Notice how we're setting value=username and value=password as new variables in our markup by not having quotes around them. By doing this, we will then be able to fetch the values in our controller-file with this.get('username') and this.get('password').


And as usual with our routes, we create a corresponding CSS to it to make it look good:

app/styles/index.scss
app/styles/app.scss

Finally, in order to make the CSS work, we want the page's body-tag to have a certain class ("landing-page") only when the user visit the index page.


In order to achieve that, we're going to install an addon called ember-body-class:

Restart the server, then open the route file and add this classNames line:

app/index/route.js

If you visit http://localhost:4200, you should now see the same design as in our mockups.

Adding controller actions

Since we don't have a real backend API we won't be able to add real authentication yet, but we can simulate it for now!


On the index page, we want the user to be able to log in with the username "letme" and the password "in", and then be sent to the Home-page. In all other cases, an error message will be shown.


Whenever we want to add actions like these on route templates, we need a controller, so let's generate one!

We'll start by binding a very simple action to the login-button:

app/index/template.hbs
app/index/controller.js

Going back to the browser, you should now be able to (fake) log in with the username "letme" and the password "in".


And if you type in something other than "letme" and "in", you should see this SweetAlert.


This works well, but that error message is a little too intrusive, we can make it more discrete!


What we'll do is render a certain tag containing the error message depending on if the variable errorMessage is set or not (this is similar to what we did in the Templating with HTMLBars chapter).

app/index/controller.js

Then we put the error message right on top of the input fields, and make sure it only renders if it's set:

app/index/template.hbs


The new error message!


There's a new problem now though: the error message never disappears! We want to hide it as soon as you start changing the username or password again.


Don't worry, thanks to the fact that we have variables for the username, the password and the errorMessage, this is very simple to do. We only need to observe any changes to the username and password variables and, when any of them change, set errorMessage to false to "unrender" it:

app/index/controller.js

That's it! You now know the basics of connecting variables to user inputs, and rendering error messages (or other types of messages) depending on what the input is.


We will revisit this page later once we have a real API set up. But first, in the next chapter, we're going to use the Liquid Fire-library to add some subtle animations to our app!

Comments

icon

Be the first to comment!