1
00:00:00,630 --> 00:00:06,000
Welcome back in this lesson which is part four of adding an occasion to your camp we're going to add

2
00:00:06,000 --> 00:00:07,630
the log out logic.

3
00:00:07,710 --> 00:00:12,500
We're also going to prevent anyone from accessing the new comment form without being signed in.

4
00:00:12,840 --> 00:00:16,180
And in the second part of the video we're going to focus on the nav bar.

5
00:00:16,260 --> 00:00:17,700
Right now we have an app bar.

6
00:00:17,730 --> 00:00:18,760
These links don't work.

7
00:00:18,810 --> 00:00:20,660
So the first step is to make them work.

8
00:00:20,880 --> 00:00:25,170
And then the second feature is to only show the necessary links at any given time.

9
00:00:25,410 --> 00:00:30,120
So we should never see log in sign up and log out if we're not signed in.

10
00:00:30,150 --> 00:00:33,120
We should see log in and sign up but not log out.

11
00:00:33,300 --> 00:00:36,330
And if we are signed in we only want to see log out.

12
00:00:36,540 --> 00:00:40,250
So we'll be implementing that logic at the end of the video to start.

13
00:00:40,410 --> 00:00:42,260
Let's add our log out route.

14
00:00:42,750 --> 00:00:45,860
So the way that log out works is that it's just a GET request.

15
00:00:45,930 --> 00:00:57,380
So we'll add log out route and in here and after I get slash log out function of our request no response

16
00:00:59,610 --> 00:01:04,290
and all we have to do is use the request log out that we get for free.

17
00:01:04,350 --> 00:01:06,120
So we didn't have to write this ourselves.

18
00:01:06,300 --> 00:01:10,100
This comes from the packages we have installed and that's it.

19
00:01:10,110 --> 00:01:19,370
However we do want to redirect somewhere so let's redirect to slash campgrounds and that's it.

20
00:01:19,410 --> 00:01:22,290
We now have our log out rather nice and easy.

21
00:01:22,290 --> 00:01:27,480
Now let's open up the nav bar and that's inside of views Parshall's.

22
00:01:27,690 --> 00:01:33,660
And then that's in the header and what we want to do is just make these links go to the right routes

23
00:01:33,660 --> 00:01:33,740
.

24
00:01:33,750 --> 00:01:40,840
So log in is log in sign up is slash register and log out slash log out.

25
00:01:41,190 --> 00:01:47,120
And that start the server no errors refresh the page.

26
00:01:47,310 --> 00:01:54,570
Let's make sure these work so I can log in and I log in Severus with password as my password.

27
00:01:54,690 --> 00:01:58,520
And you'll notice we don't have enough bar here so we should do that next.

28
00:01:58,560 --> 00:02:03,810
I didn't get that far but now I should be able to log out and if it works I should be redirected back

29
00:02:03,810 --> 00:02:05,130
to the campgrounds page.

30
00:02:05,370 --> 00:02:11,790
So before you forget let's go and add the layout files the header and footer Parshall's to the log in

31
00:02:11,790 --> 00:02:13,290
and register forms.

32
00:02:13,770 --> 00:02:16,640
So stop the server and let's open up another file.

33
00:02:16,770 --> 00:02:18,910
Let's just open up the campground index.

34
00:02:18,960 --> 00:02:29,460
So C9 views slash campgrounds slash index and we'll just take this and steal it and we'll put that on

35
00:02:29,460 --> 00:02:36,930
the log in form up top and we won't actually style anything yet with bootstrap and then we'll do the

36
00:02:36,930 --> 00:02:39,690
same thing with the footer.

37
00:02:40,380 --> 00:02:46,930
And if we run this right now we try and visit that log in form.

38
00:02:47,370 --> 00:02:53,760
We have a problem and the problem is that we use the exact same path dot dot slash Parshall's slash

39
00:02:53,760 --> 00:02:58,990
Hetter that we used inside of the index that Ejay us for campgrounds.

40
00:02:59,250 --> 00:03:00,710
But we're not inside that directory.

41
00:03:00,720 --> 00:03:08,130
So let me show you what I mean instead of campgrounds to access the Parshall's and the header file.

42
00:03:08,130 --> 00:03:14,240
We have to go back one level and then into the Parshall's directory and then into the header W.J. X-File

43
00:03:14,330 --> 00:03:14,670
.

44
00:03:15,120 --> 00:03:19,980
But where we are right now on our log in form we're not inside of a separate directory.

45
00:03:20,100 --> 00:03:27,790
All we have to do is dot slash Parshall's dot sized Parshall's again restart and refresh.

46
00:03:27,810 --> 00:03:29,920
Now we get to that far up here.

47
00:03:30,780 --> 00:03:32,700
Let's copy this over to register

48
00:03:36,020 --> 00:03:41,610
and the footer as well and we'll save and we should now have those forms on both.

49
00:03:42,270 --> 00:03:49,440
So I can go to sign up log in and if I click log out right now it will lock me up.

50
00:03:49,440 --> 00:03:50,210
Excellent.

51
00:03:50,520 --> 00:03:56,460
So the next thing I want to focus on is not letting a user add a comment if the user is not logged in

52
00:03:56,460 --> 00:03:57,130
.

53
00:03:57,150 --> 00:03:58,590
So right now I'm not logged in.

54
00:03:58,620 --> 00:04:01,510
I shouldn't be able to see this form at all.

55
00:04:01,620 --> 00:04:07,320
And what we want to happen is if a user clicks this button an unauthenticated user clicks it he or she

56
00:04:07,320 --> 00:04:12,420
should see the log in form and if the user is logged in then he or she should be able to add a comment

57
00:04:12,420 --> 00:04:13,060
.

58
00:04:13,170 --> 00:04:14,910
So let's do that now.

59
00:04:15,210 --> 00:04:20,160
So we need to go back to our address and this is where we need to add in a middleware and all just to

60
00:04:20,160 --> 00:04:26,070
find it at the very bottom is logged in.

61
00:04:26,070 --> 00:04:31,330
And if you want to review of how this works in depth go back to the last video of the last unit where

62
00:04:31,340 --> 00:04:32,570
I talk more about it.

63
00:04:32,700 --> 00:04:38,610
But a middle where we need those three request response and next which is the function that is going

64
00:04:38,610 --> 00:04:46,090
to be called after this middleware and then we'll check if a request is authenticated.

65
00:04:46,530 --> 00:04:53,730
If that's the case then we'll just move on to the next thing which in our case would be moving on to

66
00:04:53,730 --> 00:04:59,920
rendering the new campground or the new comment form or otherwise redirect to log in.

67
00:04:59,970 --> 00:05:06,160
So rest redirect slash log it and then we can use this wherever we want.

68
00:05:06,210 --> 00:05:11,850
So if we wanted to use that to be signed in to access any page at all you would just put is logged in

69
00:05:12,060 --> 00:05:13,690
in whatever routes you want to use it in.

70
00:05:13,890 --> 00:05:20,950
And in our case going to go up to the comments we create a new comment route that shows the form.

71
00:05:21,070 --> 00:05:23,640
We just need to put that right there.

72
00:05:24,750 --> 00:05:30,830
So when a user makes a request to the page or the form comments slash new it will run is logged in first

73
00:05:30,960 --> 00:05:34,270
and that will check if the user is logged in if the user is logged in.

74
00:05:34,350 --> 00:05:40,230
It calls next which we'll just call this code which will end up with us seeing the comments form if

75
00:05:40,250 --> 00:05:42,170
the user is not logged in.

76
00:05:42,510 --> 00:05:44,890
Then we redirect to slash logging.

77
00:05:45,480 --> 00:05:50,370
Let's give it a shot make sure we don't have any syntax errors.

78
00:05:50,370 --> 00:05:56,730
Let's go back here and we'll go to the home page for now or to the campgrounds page refresh.

79
00:05:56,730 --> 00:06:03,660
Now let's try adding a comment to desert Mesa add new comment and it takes me to log in one more time

80
00:06:04,110 --> 00:06:06,150
and you come in and takes me to log in.

81
00:06:06,540 --> 00:06:12,900
But now if I do log in I'll do several again and I log in.

82
00:06:13,860 --> 00:06:17,680
I can now add a comment if I go back and click add new comment.

83
00:06:17,760 --> 00:06:20,470
I can now view the add new comment form.

84
00:06:21,000 --> 00:06:22,380
Excellent.

85
00:06:22,380 --> 00:06:27,420
There is one small issue which is that we're not actually protecting the route that actually adds the

86
00:06:27,420 --> 00:06:28,160
comment in.

87
00:06:28,440 --> 00:06:34,410
So that's this one here which is the post after post campground slash ID slash comments which is where

88
00:06:34,410 --> 00:06:35,540
the form goes.

89
00:06:35,550 --> 00:06:37,980
Right now we're just hiding the form from a user.

90
00:06:37,980 --> 00:06:39,930
We're not letting a user see the form.

91
00:06:39,930 --> 00:06:44,610
If the user is not logged in and that's great theoretically someone could still send a post request

92
00:06:44,880 --> 00:06:51,660
if I fired up postman and I sent a post request right now to this you are l to a comment create route

93
00:06:51,960 --> 00:06:58,050
it would create a comment so let's add our is logged in here as well and that will just prevent anyone

94
00:06:58,050 --> 00:07:00,490
from adding a comment unless they're are logged in.

95
00:07:00,690 --> 00:07:06,310
And if they're not logged in it will just redirect back to slash log in just like we had before.

96
00:07:06,390 --> 00:07:09,040
Let's restart again.

97
00:07:10,650 --> 00:07:11,230
OK.

98
00:07:11,370 --> 00:07:15,240
Let's go back to campgrounds are fresh.

99
00:07:16,220 --> 00:07:19,010
OK now let's try adding a new comment.

100
00:07:19,050 --> 00:07:20,470
I'm not logged in.

101
00:07:20,900 --> 00:07:21,390
That's good.

102
00:07:21,390 --> 00:07:25,890
Now Severus password.

103
00:07:25,890 --> 00:07:27,760
Now let's add a comment again.

104
00:07:28,500 --> 00:07:32,330
This time I'll say this is great.

105
00:07:32,460 --> 00:07:38,940
Yes wonderful comment and author will be Severus and very soon we won't actually have to explicitly

106
00:07:38,940 --> 00:07:45,450
type this we'll just grab it from the user information click submit and there's my comment.

107
00:07:45,690 --> 00:07:46,170
Excellent.

108
00:07:46,170 --> 00:07:50,160
So that's all we need to do there to prevent a user from adding a comment if he or she is not logged

109
00:07:50,160 --> 00:07:50,400
in