Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we add the sign in form and a sign out button. We also see how to selectively add content based on whether the user is signed in or out. Download the Beginning of the Project or the Completed Project
[Master Class] [Designer and Developer Workflow] [Signing In and Out]
0:00
So we've gone ahead, and we've created a user session and the controller for it,
0:05
and some helper methods.
0:09
So now that we have all this code in place,
0:11
we should be able to start creating the login form.
0:13
Now, in our user sessions controller, we've generated the controller,
0:17
and we're going to have a new, create, and destroy method associated with it.
0:20
However, the thing that we haven't done is added it to our routes file.
0:25
So let's go ahead and do that.
0:28
We're going to open up our config, routes.rb,
0:31
and here we need to just define that our user session is a resource.
0:35
So let's go ahead and say, resource, and that's going to be singular,
0:41
and we'll go ahead and say, user session. And we'll go ahead and say, :user_session.
0:46
So let's see if this works.
0:53
We should now be able to go to user_session/new,
0:55
and we are now seeing our user_session/new HTML file here,
1:02
and this is what was generated in our scaffold,
1:07
and what we need to put our login form into.
1:10
So now that we have our routes set up, our controller, and our view,
1:13
let's go ahead and edit that view, so we have a proper login form.
1:16
So I'm going to go into app, views, user_sessions, new.
1:24
So now in this new.html file, we'll go ahead and just create a simple login form.
1:29
Now this is all stuff that Nick is eventually going to go ahead and design,
1:33
so we'll just put in some placeholder.
1:37
So let's just create an h1--let's go ahead and say h2, and we'll say Log In.
1:39
And now we just need to create a form, and this is going to take pretty much the same form
1:45
that we normally have of using form_for, and we can have our user error explanation here.
1:49
So I'm just going to copy this as a starting point,
1:57
so we're creating a form_for, and we're creating it for our user_session.
2:02
We want the URL of it to point to our user_session_path.
2:09
So right here is simply where we're going to display any errors,
2:16
so let's just go ahead and just change this to user_session.
2:20
This was all generated before, and we might change this,
2:25
but let's just change this from user to user_sessions,
2:28
so we have proper error displays.
2:31
And remember, @user_session is set in our new and create controller action,
2:36
so we'll be able to access it here.
2:44
So let's just see how good we're doing here.
2:46
So now we have Log In, and we have an empty form.
2:51
So now all we need to do is pretty much just sort of take the same format--
2:54
I'm going to copy the formatting we have here.
2:58
I'm not sure, ultimately, what the markup Nick will use,
3:00
but I'll use this field class div with a label and a text field inside of it
3:03
just to be consistent, so when Nick is going through the content
3:09
to update the markup, he'll have something to work with.
3:12
We have a field here for email, which is the user email that they're going to login with.
3:16
And we'll go ahead and create another field for the password,
3:21
and we want this to be a password_field,
3:30
and let's just create another field for the login button. It's just f.submit.
3:34
And we'll go ahead and just say the field for that is "Log In",
3:41
so now let's see where we are.
3:47
Cool! We have a basic login form here, so let's see what happens if we just type in
3:49
some bad information here.
3:55
So we got, "Email is not valid."
3:59
Now this is because when we try to submit it, and we tried to use these credentials
4:01
to find a user, Offlogic could not so the email is not valid.
4:06
Let's go ahead and see what happens if I use a proper email and a bad password.
4:12
So here you can see that it kept my email here, and told me the password is not valid.
4:21
Now we may end up customizing how these errors are presented,
4:26
but right now, we can see that it is not letting us in if we are giving it bad information.
4:30
So let's try that with a proper email and the proper password.
4:36
Cool! So it redirected me to the Jobs page.
4:41
Now I didn't get a flash notice because I don't think we've actually placed it into our view.
4:46
So what I'm going to do is go ahead and add a flash message somewhere to our layout,
4:51
so we can see these flash messages.
4:56
So I'm going to go into views, layouts, application here,
4:59
and below the logo here, I'll just add a paragraph with the class notice,
5:03
which will have the content of our flash notice.
5:12
So theoretically, we are logged in, so there's not a whole lot of information here
5:16
that we can really prove that we're logged in since we're not applying any
5:20
authorization rules or anything like that, but it would be nice to have a little user bar
5:25
which would have information, for instance, if they're logged out saying, sign-in or sign-up,
5:32
and if they're logged in, we'll tell you who you're logged in as
5:36
and give you the opportunity to log out.
5:39
So what I'm going to do is, right now I'm going to just put it in our application layout here.
5:44
Why don't I just call this our user_bar.
5:52
Again, this is stuff that Nick will be modifying.
5:56
So what we can do is since we have current user as a helper method that we can use,
6:04
we can use that to switch back and forth based on whether we're logged in or logged out.
6:08
And we're using HAML here, so a dash is just some code.
6:13
So if we said, -if current_user, we could say something like, Logged In,
6:16
and then -else, we could just print out Logged Out.
6:27
So let's see what our status is here.
6:32
We are logged in. So let's update this a little bit more.
6:34
We can go ahead and say we're "Logged In as", and we could just interpolate some text here
6:39
and say {current_user.name}.
6:47
And we'll see what that looks like.
6:52
So now, we can see we're logged in as Jim Hoskins, or if I wanted to go ahead and say,
6:54
email here--jim@carsonified.
6:58
So in HAML, if we use our hash, curly braces here,
7:02
what will be interpolated here just like a normal string,
7:06
so it will evaluate current_user.email and just place it in here.
7:09
So let's add a link to log out.
7:13
So I'm just going to add a little bar there to separate it visually.
7:16
And let's go ahead and say link_to user_session_url,
7:21
and we'll say :method equals :delete,
7:32
and we'll go ahead and say the text for that is "Log Out",
7:40
and let's go ahead and put an equal sign to make sure that it's interpreted as Ruby.
7:46
And so now we have this Log Out here, which takes us to the destroy method.
7:50
And we see our flash of "You are now logged out," and we can see our logged out form
7:57
of our user bar.
8:01
So if we were to refresh to get rid of that message, we can see we're logged out.
8:03
So it would be nice if, instead of just saying Logged Out here,
8:06
we said there was a link to register and a link to login.
8:09
So let's go ahead and do that.
8:13
For our register link, let's say, link_to "Register" or it could say, sign-up or anything else.
8:15
I'll leave that to Nick to modify, and the URL for that is new_user_url.
8:24
So let's go take a look at it now.
8:33
It now says Register, which takes us to our new user form,
8:35
and if we want to just put another link, we'll go ahead and say, link_to "Sign In",
8:40
and that will be a new_user_session_url.
8:48
So now if we refresh, we can sign-in, and I'll sign-in with my name.
8:56
That looks good. We're logged in as jim@carsonified.
9:05
I can move around.
9:09
And we can go ahead and log out.
9:12
Now again, all of this needs to be styled a little bit better,
9:16
but we may put it up on the right here.
9:21
I'm going to go ahead and leave that up to Nick.
9:22
I'm sure he's working on something great for that.
9:24
So there's a couple little things that I'm not quite happy with yet with this.
9:27
So while I have a few minutes left in my sprint, what I'm going to do is,
9:32
if we take a look at our register link, right now it's just going to /users/new,
9:35
which is accurate, but it's not a really good URL.
9:40
So let's go and create some new URLs for our register for our sign-in
9:45
and our sign-out as well.
9:50
So we're going to go ahead and open up our config, routes.rb file,
9:54
and we're going to go ahead and close all of these since we don't need them open.
10:00
So what we want to do to create a URL for this is type in match,
10:08
and then we're going to pass in the URL that we want to match to,
10:14
which is "/register" and we want to map that to "users#new",
10:19
so we're saying when we get the URL/register, send it to the users controllers new action,
10:30
and we want this to be a named route so we could do something like register URL
10:37
or register path from our view to get the actual name of the path.
10:41
So let's go ahead and say we'll map this as :register.
10:47
So now we should be able to go to /register and we're taken to our new user page here.
10:55
Obviously, we would want to change this to register.
11:02
We'll leave that up to Nick, but however, this link here is still taking us to /user/new.
11:05
So what we want to do is open up our application, layout, again which is in views,
11:13
layouts, application.
11:19
I'll just change this from new_user_url to register_url.
11:21
So now if we refresh, and click on register here, it takes us to register.
11:28
And our sign-in page, we want to go ahead and do the same thing.
11:35
We could leave it as user_sessions/new, but that's not too pretty.
11:39
So we're going back to our routes, say match, "/sign-in", and we could leave that
11:44
as whatever we want. We can change that later pretty easily.
11:55
I want to map that to "user_session#new", and we'll map that :as :sign_in.
11:59
So now if we go to /sign-in, and I need to make this pluralized. There we go.
12:15
Now if we try it, we're in our login page.
12:27
Go ahead and change that title there to be sign-in, instead of login
12:30
since that's going to be more consistent with our URL here.
12:35
And again, since we have our sign-in link here, we want to make sure that we
12:38
link it properly, which is pretty easy to do instead of new_session_url,
12:43
we'll just do sign_in_url.
12:48
So now if we refresh. We click on Sign In, takes us to /sign-in.
12:55
So let's go ahead and just sign in real quick.
13:01
So we're now signed in, and again, I want to change this to be Sign Out.
13:06
We've got to be consistent with log or sign. Just pick one and stick with it.
13:12
So change that to Sign Out.
13:17
And right now, we're using user_session_url, :method :delete,
13:21
and that's because we're using a standard Rails controller where destroy is accessed
13:25
by using the HTTP method DELETE.
13:29
So there's actually some Javascript here, when we click on this to actually submit a form
13:33
and create a DELETE request.
13:38
Now I'd like to just use a normal GET request and go to something like, Sign Out,
13:41
so we don't need to use a POST or DELETE method in order to actually initiate the sign-out.
13:47
And we can do that by just creating a route
13:53
that links to the destroy method of our user sessions.
13:56
So what we'll do is we'll go to routes here.
13:59
We'll match "/sign-out" to "user_sessions#destroy" :as :sign_out.
14:04
So now we have that new named route.
14:26
We can just change this to sign_out_url.
14:28
We can delete this method here since we don't need to create a little form
14:35
in the background to POST or DELETE the request.
14:38
And so now we should just be able to do it by going to /sign-out,
14:43
so let's just say I execute this.
14:46
It did our sign-out, and we signed out. We can sign-in.
14:49
Let's go ahead and change that while we're looking at it so we don't forget.
14:54
Change this from Log In to Sign In.
14:57
We can now sign-in.
15:03
And we can go ahead and sign-out, and we can see that it's linking to /sign-out
15:09
in the bottom there.
15:12
And it looks like we have a pretty good system, so now we have our authentication set up.
15:15
We can register, and we can sign-in, and we can sign-out,
15:20
and we can see if a user signed in.
15:25
The next step is to implement authorization and to associate the jobs
15:27
with people who are signed in.
15:32
That way people would be able to sign-in, create a job,
15:34
and they won't have to worry about people who are logged out
15:37
or signed in as a different user disturbing their job post.
15:39
You need to sign up for Treehouse in order to download course files.
Sign up