1
00:00:02,040 --> 00:00:05,370
Now, to finally conclude this course section,

2
00:00:05,370 --> 00:00:08,029
I just wanna improve this page a little bit

3
00:00:08,029 --> 00:00:09,580
and I wanna again use a session

4
00:00:09,580 --> 00:00:11,950
for improving the user experience

5
00:00:11,950 --> 00:00:16,270
in cases where we try to sign up with an existing user,

6
00:00:16,270 --> 00:00:17,490
because there at the moment

7
00:00:17,490 --> 00:00:19,393
we're not showing any error message,

8
00:00:20,260 --> 00:00:22,263
or also on the login page.

9
00:00:23,170 --> 00:00:26,180
And in addition, I wanna clean up the navigation bar.

10
00:00:26,180 --> 00:00:28,700
It makes no sense to show the logout button

11
00:00:28,700 --> 00:00:31,140
if the user isn't even logged in.

12
00:00:31,140 --> 00:00:32,700
The same is true for the admin

13
00:00:32,700 --> 00:00:35,130
and profile navigation bar items.

14
00:00:35,130 --> 00:00:36,980
That was nice for testing

15
00:00:36,980 --> 00:00:39,380
that we had those items at all times,

16
00:00:39,380 --> 00:00:41,950
but now it makes more sense to only show them

17
00:00:41,950 --> 00:00:43,773
if you will be able to visit them.

18
00:00:45,090 --> 00:00:48,420
And for signup and login, the opposite is the case.

19
00:00:48,420 --> 00:00:52,160
Here, I only wanna show the signup and login items

20
00:00:52,160 --> 00:00:55,390
if the user is not authenticated yet.

21
00:00:55,390 --> 00:00:57,260
So let's see how we can implement that.

22
00:00:57,260 --> 00:00:59,040
At least for the validation,

23
00:00:59,040 --> 00:01:00,950
we already know how we can do that

24
00:01:00,950 --> 00:01:02,420
with the help of sessions.

25
00:01:02,420 --> 00:01:04,250
For the navigation bar items,

26
00:01:04,250 --> 00:01:07,810
I will show you a new little trick we can use with Express.

27
00:01:07,810 --> 00:01:10,960
And I'll start with handling the validation errors

28
00:01:10,960 --> 00:01:13,620
on signup and login.

29
00:01:13,620 --> 00:01:17,470
Now, for signup, for post signup,

30
00:01:17,470 --> 00:01:20,310
we already do have this error handling here

31
00:01:20,310 --> 00:01:22,660
if the input is invalid,

32
00:01:22,660 --> 00:01:24,480
and I wanna in the end do the same

33
00:01:24,480 --> 00:01:27,540
if the user already exists.

34
00:01:27,540 --> 00:01:29,753
So, of course, we can just copy that.

35
00:01:32,980 --> 00:01:36,550
And in this case here where we already have a user,

36
00:01:36,550 --> 00:01:40,370
I'll just also set my input data to this object

37
00:01:40,370 --> 00:01:42,400
with hasError is true

38
00:01:42,400 --> 00:01:47,253
and I'll say user exists already as an error message.

39
00:01:48,920 --> 00:01:50,860
You can think about this

40
00:01:50,860 --> 00:01:52,910
if you wanna give away the information

41
00:01:52,910 --> 00:01:55,890
that a given email address is already taken,

42
00:01:55,890 --> 00:01:58,570
but you see it on a lot of websites and therefore here,

43
00:01:58,570 --> 00:02:01,120
I think we can also implement this.

44
00:02:01,120 --> 00:02:03,420
Then I still set the entered email and so on.

45
00:02:03,420 --> 00:02:06,780
And then, again just as before, I wanna redirect,

46
00:02:06,780 --> 00:02:09,419
but only after saving the session

47
00:02:09,419 --> 00:02:11,760
to ensure that the session was saved

48
00:02:11,760 --> 00:02:15,040
before I present that same page again.

49
00:02:15,040 --> 00:02:18,100
So I'll call request.session.save here

50
00:02:18,100 --> 00:02:21,240
and pass this anonymous function to it.

51
00:02:21,240 --> 00:02:24,790
And then here, I wanna redirect only after we saved

52
00:02:24,790 --> 00:02:26,960
and we don't need to return here,

53
00:02:26,960 --> 00:02:31,510
but instead, we should return thereafter to still make sure

54
00:02:31,510 --> 00:02:34,210
that none of the code below that executes

55
00:02:34,210 --> 00:02:36,993
if we failed to sign that user up.

56
00:02:38,160 --> 00:02:39,880
So that's the first step.

57
00:02:39,880 --> 00:02:42,400
If we save this and I go back here

58
00:02:42,400 --> 00:02:46,660
and I try to create a user that already exists,

59
00:02:46,660 --> 00:02:49,963
then I now get this error and I can fix my mistake.

60
00:02:51,730 --> 00:02:53,270
Now, for the login page,

61
00:02:53,270 --> 00:02:55,500
we in the end will do the same again.

62
00:02:55,500 --> 00:03:00,500
Here in post login, if we could not log the user in

63
00:03:00,540 --> 00:03:02,880
because we did not find a user,

64
00:03:02,880 --> 00:03:07,350
then I wanna set my session input data,

65
00:03:07,350 --> 00:03:10,200
so I'll use the same approach as for a signup,

66
00:03:10,200 --> 00:03:13,500
and I'll set this to could not log you in,

67
00:03:13,500 --> 00:03:16,723
please check your credentials.

68
00:03:19,160 --> 00:03:21,360
I'll just not set confirm email

69
00:03:21,360 --> 00:03:25,630
because that doesn't exist in this form, in the login form,

70
00:03:25,630 --> 00:03:28,140
but we do set email and password.

71
00:03:28,140 --> 00:03:29,410
And I'm not saying,

72
00:03:29,410 --> 00:03:31,970
hey, we couldn't find a user for that email

73
00:03:31,970 --> 00:03:35,050
because I don't necessarily wanna tell the user

74
00:03:35,050 --> 00:03:37,240
why authentication failed

75
00:03:37,240 --> 00:03:41,140
as I don't wanna give malicious users any extra hints

76
00:03:41,140 --> 00:03:44,630
on whether it's the password or the email that was wrong.

77
00:03:44,630 --> 00:03:47,640
I'll just say something was wrong here,

78
00:03:47,640 --> 00:03:50,690
though, of course, you could simply try to create a user

79
00:03:50,690 --> 00:03:51,800
with a given email.

80
00:03:51,800 --> 00:03:55,400
And if you then learn that this email already exists,

81
00:03:55,400 --> 00:03:58,450
you also know that it was probably the password

82
00:03:58,450 --> 00:04:02,290
that was wrong, but still it's an extra step.

83
00:04:02,290 --> 00:04:05,800
And then I also wanna set this here,

84
00:04:05,800 --> 00:04:09,610
if we have a user but the passwords are equal,

85
00:04:09,610 --> 00:04:11,020
then I'll actually copy

86
00:04:11,020 --> 00:04:14,020
this request.session.inputData from before

87
00:04:14,020 --> 00:04:15,780
and use that here as well

88
00:04:16,649 --> 00:04:18,892
with the same error message and so on.

89
00:04:19,810 --> 00:04:24,420
And now I also wanna ensure that here in the login route,

90
00:04:24,420 --> 00:04:27,090
I save the session before I redirect.

91
00:04:27,090 --> 00:04:30,880
So in the first if check, I'll access request.session.save

92
00:04:32,070 --> 00:04:35,420
and then add my function here

93
00:04:35,420 --> 00:04:38,410
and redirect inside of this function

94
00:04:38,410 --> 00:04:42,060
and return thereafter just as before

95
00:04:42,060 --> 00:04:45,630
and then I'll also copy this down to the second check

96
00:04:45,630 --> 00:04:47,900
where I will also redirect like this

97
00:04:47,900 --> 00:04:49,450
after saving the session.

98
00:04:50,600 --> 00:04:53,770
And now we just have to go to the get login page

99
00:04:53,770 --> 00:04:57,960
to ensure that we use that information there.

100
00:04:57,960 --> 00:05:02,170
So on get login, just like in get signup,

101
00:05:02,170 --> 00:05:07,170
I wanna, in the end, extract the data and reset the data

102
00:05:07,170 --> 00:05:10,460
as I did it in the get signup route

103
00:05:10,460 --> 00:05:12,880
here in get login now.

104
00:05:12,880 --> 00:05:16,540
I just don't set the confirm email to a default value

105
00:05:16,540 --> 00:05:19,943
because we don't have that in that form here,

106
00:05:20,870 --> 00:05:23,340
but then I have my sessionInputData

107
00:05:23,340 --> 00:05:27,330
and I'll pass that on to the login template,

108
00:05:27,330 --> 00:05:32,330
I'll set input data equal to sessionInputData like that.

109
00:05:34,420 --> 00:05:38,500
And now back into the login.ejs file here,

110
00:05:38,500 --> 00:05:41,323
I wanna use the same approach as for signing up.

111
00:05:42,160 --> 00:05:44,750
So I will, first of all, check this,

112
00:05:44,750 --> 00:05:48,080
copy this check up here if you wanna show an error message

113
00:05:48,940 --> 00:05:52,090
and bring that over to login.ejs.

114
00:05:52,090 --> 00:05:54,323
Here, maybe right below the title.

115
00:05:55,900 --> 00:05:58,840
And I also wanna initialize those fields

116
00:05:58,840 --> 00:06:03,400
and set the email equal to inputData.email

117
00:06:05,110 --> 00:06:07,587
and then copy that and do the same

118
00:06:07,587 --> 00:06:10,823
for the password here like this.

119
00:06:12,680 --> 00:06:15,430
And now with that, we can save that all.

120
00:06:15,430 --> 00:06:17,860
If you now go to the login page

121
00:06:17,860 --> 00:06:21,360
and I do enter a correct email but a wrong password,

122
00:06:21,360 --> 00:06:24,513
I get my error message and I can still fix my input here.