1
00:00:00,430 --> 00:00:05,480
We've got a pretty cool greeting page right
now, but it doesn't do one crucial thing.

2
00:00:05,480 --> 00:00:08,180
When you submit a form
like this in a website,

3
00:00:08,180 --> 00:00:12,070
that website generally redirects to
another page, like the Welcome page.

4
00:00:13,240 --> 00:00:15,780
Redirecting after a form
submission prevents

5
00:00:15,780 --> 00:00:19,010
duplicate submissions if
a user refreshes the page.

6
00:00:19,010 --> 00:00:20,790
Likewise, when you try and

7
00:00:20,790 --> 00:00:26,305
visit a protected page on a website, it
will often redirect you to a login screen.

8
00:00:26,305 --> 00:00:31,145
Then when you've logged in, it will redirect
you back to the page you wanted to visit.

9
00:00:31,145 --> 00:00:33,465
So, what is redirecting?

10
00:00:33,465 --> 00:00:38,335
In terms of HTTP,
it represents a series of specific events.

11
00:00:39,675 --> 00:00:43,365
When a client requests a resource
from a server that is protected or

12
00:00:43,365 --> 00:00:46,230
perhaps is being moved, the server will

13
00:00:46,230 --> 00:00:51,490
often respond with a response called
a redirect which contains a URL.

14
00:00:51,490 --> 00:00:55,740
The client receiving this response
will usually make a second

15
00:00:55,740 --> 00:00:58,760
instant request to the new URL.

16
00:00:58,760 --> 00:01:00,580
If you're redirected in your browser,

17
00:01:00,580 --> 00:01:04,980
it happens so quickly that you'll
often not even notice it's happening.

18
00:01:06,090 --> 00:01:07,470
For this reason,

19
00:01:07,470 --> 00:01:13,860
redirects are often used to make the same
web page available from several URLs.

20
00:01:13,860 --> 00:01:17,316
If you type in gogle.com, for

21
00:01:17,316 --> 00:01:22,170
example, you are instantly
redirected to Google's home page.

22
00:01:22,170 --> 00:01:26,050
Google bought the domain name to
help its users find their page

23
00:01:26,050 --> 00:01:28,090
even if they mistype it.

24
00:01:28,090 --> 00:01:32,710
Apps will often use redirects to
manage authentication by sending users

25
00:01:32,710 --> 00:01:37,420
to a log in page before they
are permitted to view certain pages, or

26
00:01:37,420 --> 00:01:41,710
redirect users to those pages
when they log in successfully.

27
00:01:43,400 --> 00:01:45,250
After users enter their name,

28
00:01:45,250 --> 00:01:48,140
let's redirect them to our
app's main welcome page.

29
00:01:49,730 --> 00:01:52,510
Here is how the app will behave
at the end of this video.

30
00:01:53,970 --> 00:02:02,510
I'm on the hello page right now, I'll
enter my name, and then I'll hit Submit.

31
00:02:03,920 --> 00:02:12,930
Notice that the URL has changed from
slash hello to the home welcome page.

32
00:02:12,930 --> 00:02:17,095
Here's the documentation for the redirect
method on the response object.

33
00:02:18,490 --> 00:02:19,850
It's pretty straightforward.

34
00:02:20,940 --> 00:02:24,970
We can just call the redirect method
instead of the render method to complete

35
00:02:24,970 --> 00:02:25,780
the response.

36
00:02:26,850 --> 00:02:31,300
And then the browser will get the URL
that we enter as an argument.

37
00:02:35,172 --> 00:02:40,977
I'll go into the app.js file and
in the post route,

38
00:02:40,977 --> 00:02:44,720
I'll change render to redirect,

39
00:02:45,956 --> 00:02:50,381
Replace hello to just have a slash, and

40
00:02:50,381 --> 00:02:54,950
then I can remove this second argument.

41
00:02:56,510 --> 00:03:00,930
Now when I go to this sign-in page and
I clear the cookie,

42
00:03:04,430 --> 00:03:10,920
When I sign in, we see we're 
redirected to the home page.

43
00:03:12,000 --> 00:03:17,020
If I hit the back button,
I still see that I have this greeting.

44
00:03:18,120 --> 00:03:20,250
We should probably move
this to the welcome page.

45
00:03:22,080 --> 00:03:26,940
In the hello template, I can just
remove this conditional altogether.

46
00:03:32,063 --> 00:03:37,090
No one will ever land on this page
unless the app doesn't know their name.

47
00:03:37,090 --> 00:03:40,620
It can simply display the form
to collect the information

48
00:03:40,620 --> 00:03:43,200
before the user is redirected
to the welcome page.

49
00:03:45,200 --> 00:03:47,163
Now I'll go to index.pug and

50
00:03:47,163 --> 00:03:51,020
replace the generic greeting
with our personalized one.

51
00:03:54,480 --> 00:04:00,990
Now I need to make sure that the template
has access to the cookies name value.

52
00:04:00,990 --> 00:04:07,320
I'll go back to the app.js code, and
I'll cut this code from the get,

53
00:04:07,320 --> 00:04:12,430
where it's reading from the cookie,
and I can paste it in the home route.

54
00:04:14,680 --> 00:04:20,410
But what I want to do is put the username
in its own variable on the name above.

55
00:04:20,410 --> 00:04:22,010
I'm going to call it name.

56
00:04:28,831 --> 00:04:35,297
For the variable available in the view,
let's keep it as name,

57
00:04:35,297 --> 00:04:39,630
and then assign it to
the variable of name.

58
00:04:41,640 --> 00:04:47,550
Because both the key and
the value have the same name, I

59
00:04:47,550 --> 00:04:53,590
can use the ES6 object shorthand to remove
the usage of the colon and the extra name.

60
00:04:57,840 --> 00:05:01,850
It's just a little nicer than
writing name: name.

61
00:05:03,220 --> 00:05:09,770
Going back to the index route in
the browser, we see it working.

62
00:05:09,770 --> 00:05:14,410
Now I'll go to the DevTools and
remove the cookie.

63
00:05:19,353 --> 00:05:23,290
Refresh and we're on the index route.

64
00:05:24,770 --> 00:05:28,240
We need this index route to
redirect to the hello route

65
00:05:28,240 --> 00:05:30,810
when there's no cookie to read.

66
00:05:30,810 --> 00:05:35,480
But we want to be able to visit the page
when the cookie does have a value.

67
00:05:36,490 --> 00:05:38,900
Can you figure out how to do that?

68
00:05:38,900 --> 00:05:42,250
Give it a try and
we'll see you in the next video.

69
00:05:42,250 --> 00:05:44,290
And I'll show you how I solved it.