1
00:00:00,000 --> 00:00:05,000
[Master Class] [Designer and Developer Workflow] [Signing In and Out]

2
00:00:05,000 --> 00:00:09,000
So we've gone ahead, and we've created a user session and the controller for it,

3
00:00:09,000 --> 00:00:11,000
and some helper methods.

4
00:00:11,000 --> 00:00:13,000
So now that we have all this code in place,

5
00:00:13,000 --> 00:00:17,000
we should be able to start creating the login form.

6
00:00:17,000 --> 00:00:20,000
Now, in our user sessions controller, we've generated the controller,

7
00:00:20,000 --> 00:00:25,000
and we're going to have a new, create, and destroy method associated with it.

8
00:00:25,000 --> 00:00:28,000
However, the thing that we haven't done is added it to our routes file.

9
00:00:28,000 --> 00:00:31,000
So let's go ahead and do that.

10
00:00:31,000 --> 00:00:35,000
We're going to open up our config, routes.rb,

11
00:00:35,000 --> 00:00:41,000
and here we need to just define that our user session is a resource.

12
00:00:41,000 --> 00:00:46,000
So let's go ahead and say, resource, and that's going to be singular,

13
00:00:46,000 --> 00:00:53,000
and we'll go ahead and say, user session. And we'll go ahead and say, :user_session.

14
00:00:53,000 --> 00:00:55,000
So let's see if this works.

15
00:00:55,000 --> 00:01:02,000
We should  now be able to go to user_session/new, 

16
00:01:02,000 --> 00:01:07,000
and we are now seeing our user_session/new HTML file here,

17
00:01:07,000 --> 00:01:10,000
and this is what was generated in our scaffold,

18
00:01:10,000 --> 00:01:13,000
and what we need to put our login form into.

19
00:01:13,000 --> 00:01:16,000
So now that we have our routes set up, our controller, and our view,

20
00:01:16,000 --> 00:01:24,000
let's go ahead and edit that view, so we have a proper login form.

21
00:01:24,000 --> 00:01:29,000
So I'm going to go into app, views, user_sessions, new.

22
00:01:29,000 --> 00:01:33,000
So now in this new.html file, we'll go ahead and just create a simple login form.

23
00:01:33,000 --> 00:01:37,000
Now this is all stuff that Nick is eventually going to go ahead and design,

24
00:01:37,000 --> 00:01:39,000
so we'll just put in some placeholder.

25
00:01:39,000 --> 00:01:45,000
So let's just create an h1--let's go ahead and say h2, and we'll say Log In.

26
00:01:45,000 --> 00:01:49,000
And now we just need to create a form, and this is going to take pretty much the same form

27
00:01:49,000 --> 00:01:57,000
that we normally have of using form_for, and we can have our user error explanation here.

28
00:01:57,000 --> 00:02:02,000
So I'm just going to copy this as a starting point,

29
00:02:02,000 --> 00:02:09,000
so we're creating a form_for, and we're creating it for our user_session.

30
00:02:09,000 --> 00:02:16,000
We want the URL of it to point to our user_session_path.

31
00:02:16,000 --> 00:02:20,000
So right here is simply where we're going to display any errors,

32
00:02:20,000 --> 00:02:25,000
so let's just go ahead and just change this to user_session.

33
00:02:25,000 --> 00:02:28,000
This was all generated before, and we might change this,

34
00:02:28,000 --> 00:02:31,000
but let's just change this from user to user_sessions, 

35
00:02:31,000 --> 00:02:36,000
so we have proper error displays.

36
00:02:36,000 --> 00:02:44,000
And remember, @user_session is set in our new and create controller action,

37
00:02:44,000 --> 00:02:46,000
so we'll be able to access it here.

38
00:02:46,000 --> 00:02:51,000
So let's just see how good we're doing here.

39
00:02:51,000 --> 00:02:54,000
So now we have Log In, and we have an empty form.

40
00:02:54,000 --> 00:02:58,000
So now all we need to do is pretty much just sort of take the same format--

41
00:02:58,000 --> 00:03:00,000
I'm going to copy the formatting we have here.

42
00:03:00,000 --> 00:03:03,000
I'm not sure, ultimately, what the markup Nick will use, 

43
00:03:03,000 --> 00:03:09,000
but I'll use this field class div with a label and a text field inside of it

44
00:03:09,000 --> 00:03:12,000
just to be consistent, so when Nick is going through the content

45
00:03:12,000 --> 00:03:16,000
to update the markup, he'll have something to work with.

46
00:03:16,000 --> 00:03:21,000
We have a field here for email, which is the user email that they're going to login with.

47
00:03:21,000 --> 00:03:30,000
And we'll go ahead and create another field for the password,

48
00:03:30,000 --> 00:03:34,000
and we want this to be a password_field,

49
00:03:34,000 --> 00:03:41,000
and let's just create another field for the login button. It's just f.submit.

50
00:03:41,000 --> 00:03:47,000
And we'll go ahead and just say the field for that is "Log In",

51
00:03:47,000 --> 00:03:49,000
so now let's see where we are.

52
00:03:49,000 --> 00:03:55,000
Cool! We have a basic login form here, so let's see what happens if we just type in

53
00:03:55,000 --> 00:03:59,000
some bad information here.

54
00:03:59,000 --> 00:04:01,000
So we got, "Email is not valid."

55
00:04:01,000 --> 00:04:06,000
Now this is because when we try to submit it, and we tried to use these credentials 

56
00:04:06,000 --> 00:04:12,000
to find a user, Offlogic could not so the email is not valid.

57
00:04:12,000 --> 00:04:21,000
Let's go ahead and see what happens if I use a proper email and a bad password.

58
00:04:21,000 --> 00:04:26,000
So here you can see that it kept my email here, and told me the password is  not valid.

59
00:04:26,000 --> 00:04:30,000
Now we may end up customizing how these errors are presented,

60
00:04:30,000 --> 00:04:36,000
but right now, we can see that it is not letting us in if we are giving it bad information.

61
00:04:36,000 --> 00:04:41,000
So let's try that with a proper email and the proper password.

62
00:04:41,000 --> 00:04:46,000
Cool! So it redirected me to the Jobs page.

63
00:04:46,000 --> 00:04:51,000
Now I didn't get a flash notice because I don't think we've actually placed it into our view.

64
00:04:51,000 --> 00:04:56,000
So what I'm going to do is go ahead and add a flash message somewhere to our layout,

65
00:04:56,000 --> 00:04:59,000
so we can see these flash messages.

66
00:04:59,000 --> 00:05:03,000
So I'm going to go into views, layouts, application here,

67
00:05:03,000 --> 00:05:12,000
and below the logo here, I'll just add a paragraph with the class notice,

68
00:05:12,000 --> 00:05:16,000
which will have the content of our flash notice.

69
00:05:16,000 --> 00:05:20,000
So theoretically, we are logged in, so there's not a whole lot of information here

70
00:05:20,000 --> 00:05:25,000
that we can really prove that we're logged in since we're not applying any 

71
00:05:25,000 --> 00:05:32,000
authorization rules or anything like that, but it would be nice to have a little user bar

72
00:05:32,000 --> 00:05:36,000
which would have information, for instance, if they're logged out saying, sign-in or sign-up,

73
00:05:36,000 --> 00:05:39,000
and if they're logged in, we'll tell you who you're logged in as 

74
00:05:39,000 --> 00:05:44,000
and give you the opportunity to log out.

75
00:05:44,000 --> 00:05:52,000
So what I'm going to do is, right now I'm going to just put it in our application layout here.

76
00:05:52,000 --> 00:05:56,000
Why don't I just call this our user_bar.

77
00:05:56,000 --> 00:06:04,000
Again, this is stuff that Nick will be modifying.

78
00:06:04,000 --> 00:06:08,000
So what we can do is since we have current user as a helper method that we can use,

79
00:06:08,000 --> 00:06:13,000
we can use that to switch back and forth based on whether we're logged in or logged out.

80
00:06:13,000 --> 00:06:16,000
And we're using HAML here, so a dash is just some code.

81
00:06:16,000 --> 00:06:27,000
So if we said, -if current_user, we could say something like, Logged In, 

82
00:06:27,000 --> 00:06:32,000
and then -else, we could just print out Logged Out.

83
00:06:32,000 --> 00:06:34,000
So let's see what our status is here.

84
00:06:34,000 --> 00:06:39,000
We are logged in. So let's update this a little bit more.

85
00:06:39,000 --> 00:06:47,000
We can go ahead and say we're "Logged In as", and we could just interpolate some text here

86
00:06:47,000 --> 00:06:52,000
and say {current_user.name}.

87
00:06:52,000 --> 00:06:54,000
And we'll see what that looks like.

88
00:06:54,000 --> 00:06:58,000
So now, we can see we're logged in as Jim Hoskins, or if I wanted to go ahead and say,

89
00:06:58,000 --> 00:07:02,000
email here--jim@carsonified.

90
00:07:02,000 --> 00:07:06,000
So in HAML, if we use our hash, curly braces here,

91
00:07:06,000 --> 00:07:09,000
what will be interpolated here just like a normal string,

92
00:07:09,000 --> 00:07:13,000
so it will evaluate current_user.email and just place it in here.

93
00:07:13,000 --> 00:07:16,000
So let's add a link to log out.

94
00:07:16,000 --> 00:07:21,000
So I'm just going to add a little bar there to separate it visually.

95
00:07:21,000 --> 00:07:32,000
And let's go ahead and say link_to user_session_url, 

96
00:07:32,000 --> 00:07:40,000
and we'll say :method equals :delete,

97
00:07:40,000 --> 00:07:46,000
and we'll go ahead and say the text for that is "Log Out",

98
00:07:46,000 --> 00:07:50,000
and let's go ahead and put an equal sign to make sure that it's interpreted as Ruby.

99
00:07:50,000 --> 00:07:57,000
And so now we have this Log Out here, which takes us to the destroy method.

100
00:07:57,000 --> 00:08:01,000
And we see our flash of "You are now logged out," and we can see our logged out form

101
00:08:01,000 --> 00:08:03,000
of our user bar.

102
00:08:03,000 --> 00:08:06,000
So if we were to refresh to get rid of that message, we can see we're logged out.

103
00:08:06,000 --> 00:08:09,000
So it would be nice if, instead of just saying Logged Out here, 

104
00:08:09,000 --> 00:08:13,000
we said there was a link to register and a link to login.

105
00:08:13,000 --> 00:08:15,000
So let's go ahead and do that.

106
00:08:15,000 --> 00:08:24,000
For our register link, let's say, link_to "Register" or it could say, sign-up or anything else.

107
00:08:24,000 --> 00:08:33,000
I'll leave that to Nick to modify, and the URL for that is new_user_url.

108
00:08:33,000 --> 00:08:35,000
So let's go take a look at it now.

109
00:08:35,000 --> 00:08:40,000
It now says Register, which takes us to our new user form,

110
00:08:40,000 --> 00:08:48,000
and if we want to just put another link, we'll go ahead and say, link_to "Sign In",

111
00:08:48,000 --> 00:08:56,000
and that will be a new_user_session_url.

112
00:08:56,000 --> 00:09:05,000
So now if we refresh, we can sign-in, and I'll sign-in with my name.

113
00:09:05,000 --> 00:09:09,000
That looks good. We're logged in as jim@carsonified.

114
00:09:09,000 --> 00:09:12,000
I can move around.

115
00:09:12,000 --> 00:09:16,000
And we can go ahead and log out.

116
00:09:16,000 --> 00:09:21,000
Now again, all of this needs to be styled a little bit better,

117
00:09:21,000 --> 00:09:22,000
but we may put it up on the right here. 

118
00:09:22,000 --> 00:09:24,000
I'm going to go ahead and leave that up to Nick.

119
00:09:24,000 --> 00:09:27,000
I'm sure he's working on something great for that.

120
00:09:27,000 --> 00:09:32,000
So there's a couple little things that I'm not quite happy with yet with this.

121
00:09:32,000 --> 00:09:35,000
So while I have a few minutes left in my sprint, what I'm going to do is,

122
00:09:35,000 --> 00:09:40,000
if we take a look at our register link, right now it's just going to /users/new,

123
00:09:40,000 --> 00:09:45,000
which is accurate, but it's not a really good URL.

124
00:09:45,000 --> 00:09:50,000
So let's go and create some new URLs for our register for our sign-in

125
00:09:50,000 --> 00:09:54,000
and our sign-out as well.

126
00:09:54,000 --> 00:10:00,000
So we're going to go ahead and open up our config, routes.rb file,

127
00:10:00,000 --> 00:10:08,000
and we're going to go ahead and close all of these since we don't need them open.

128
00:10:08,000 --> 00:10:14,000
So what we want to do to create a URL for this is type in match,

129
00:10:14,000 --> 00:10:19,000
and then we're going to pass in the URL that we want to match to,

130
00:10:19,000 --> 00:10:30,000
which is "/register" and we want to map that to "users#new", 

131
00:10:30,000 --> 00:10:37,000
so we're saying when we get the URL/register, send it to the users controllers new action,

132
00:10:37,000 --> 00:10:41,000
and we want this to be a named route so we could do something like register URL

133
00:10:41,000 --> 00:10:47,000
or register path from our view to get the actual name of the path.

134
00:10:47,000 --> 00:10:55,000
So let's go ahead and say we'll map this as :register.

135
00:10:55,000 --> 00:11:02,000
So now we should be able to go to /register and we're taken to our new user page here.

136
00:11:02,000 --> 00:11:05,000
Obviously, we would want to change this to register.

137
00:11:05,000 --> 00:11:13,000
We'll leave that up to Nick, but however, this link here is still taking us to /user/new.

138
00:11:13,000 --> 00:11:19,000
So what we want to do is open up our application, layout, again which is in views,

139
00:11:19,000 --> 00:11:21,000
layouts, application.

140
00:11:21,000 --> 00:11:28,000
I'll just change this from new_user_url to register_url.

141
00:11:28,000 --> 00:11:35,000
So now if we refresh, and click on register here, it takes us to register.

142
00:11:35,000 --> 00:11:39,000
And our sign-in page, we want to go ahead and do the same thing.

143
00:11:39,000 --> 00:11:44,000
We could leave it as user_sessions/new, but that's not too pretty.

144
00:11:44,000 --> 00:11:55,000
So we're going back to our routes, say match, "/sign-in", and we could leave that 

145
00:11:55,000 --> 00:11:59,000
as whatever we want. We can change that later pretty easily.

146
00:11:59,000 --> 00:12:15,000
I want to map that to "user_session#new", and we'll map that :as :sign_in.

147
00:12:15,000 --> 00:12:27,000
So now if we go to /sign-in, and I need to make this pluralized. There we go.

148
00:12:27,000 --> 00:12:30,000
Now if we try it, we're in our login page.

149
00:12:30,000 --> 00:12:35,000
Go ahead and change that title there to be sign-in, instead of login

150
00:12:35,000 --> 00:12:38,000
since that's going to be more consistent with our URL here.

151
00:12:38,000 --> 00:12:43,000
And again, since we have our sign-in link here, we want to make sure that we 

152
00:12:43,000 --> 00:12:48,000
link it properly, which is pretty easy to do instead of new_session_url,

153
00:12:48,000 --> 00:12:55,000
we'll just do sign_in_url.

154
00:12:55,000 --> 00:13:01,000
So now if we refresh. We click on Sign In, takes us to /sign-in.

155
00:13:01,000 --> 00:13:06,000
So let's go ahead and just sign in real quick.

156
00:13:06,000 --> 00:13:12,000
So we're now signed in, and again, I want to change this to be Sign Out.

157
00:13:12,000 --> 00:13:17,000
We've got to be consistent with log or sign. Just pick one and stick with it.

158
00:13:17,000 --> 00:13:21,000
So change that to Sign Out.

159
00:13:21,000 --> 00:13:25,000
And right now, we're using user_session_url, :method :delete,

160
00:13:25,000 --> 00:13:29,000
and that's because we're using a standard Rails controller where destroy is accessed

161
00:13:29,000 --> 00:13:33,000
by using the HTTP method DELETE.

162
00:13:33,000 --> 00:13:38,000
So there's actually some Javascript here, when we click on this to actually submit a form

163
00:13:38,000 --> 00:13:41,000
and create a DELETE request.

164
00:13:41,000 --> 00:13:47,000
Now I'd like to just use a normal GET request and go to something like, Sign Out,

165
00:13:47,000 --> 00:13:53,000
so we don't need to use a POST or DELETE method in order to actually initiate the sign-out.

166
00:13:53,000 --> 00:13:56,000
And we can do that by just creating a route 

167
00:13:56,000 --> 00:13:59,000
that links to the destroy method of our user sessions.

168
00:13:59,000 --> 00:14:04,000
So what we'll do is we'll go to routes here.

169
00:14:04,000 --> 00:14:26,000
We'll match "/sign-out" to "user_sessions#destroy" :as :sign_out.

170
00:14:26,000 --> 00:14:28,000
So now we have that new named route.

171
00:14:28,000 --> 00:14:35,000
We can just change this to sign_out_url. 

172
00:14:35,000 --> 00:14:38,000
We can delete this method here since we don't need to create a little form

173
00:14:38,000 --> 00:14:43,000
in the background to POST or DELETE the request.

174
00:14:43,000 --> 00:14:46,000
And so now we should just be able to do it by going to /sign-out,

175
00:14:46,000 --> 00:14:49,000
so let's just say I execute this.

176
00:14:49,000 --> 00:14:54,000
It did our sign-out, and we signed out. We can sign-in.

177
00:14:54,000 --> 00:14:57,000
Let's go ahead and change that while we're looking at it so we don't forget.

178
00:14:57,000 --> 00:15:03,000
Change this from Log In to Sign In.

179
00:15:03,000 --> 00:15:09,000
We can now sign-in.

180
00:15:09,000 --> 00:15:12,000
And we can go ahead and sign-out, and we can see that it's linking to /sign-out

181
00:15:12,000 --> 00:15:15,000
in the bottom there.

182
00:15:15,000 --> 00:15:20,000
And it looks like we have a pretty good system, so now we have our authentication set up.

183
00:15:20,000 --> 00:15:25,000
We can register, and we can sign-in, and we can sign-out,

184
00:15:25,000 --> 00:15:27,000
and we can see if a user signed in.

185
00:15:27,000 --> 00:15:32,000
The next step is to implement authorization and to associate the jobs 

186
00:15:32,000 --> 00:15:34,000
with people who are signed in.

187
00:15:34,000 --> 00:15:37,000
That way people would be able to sign-in, create a job, 

188
00:15:37,000 --> 00:15:39,000
and they won't have to worry about people who are logged out 

189
00:15:39,000 --> 00:15:42,000
or signed in as a different user disturbing their job post.