1
00:00:02,210 --> 00:00:05,570
So how can we ensure that users

2
00:00:05,570 --> 00:00:07,403
can create accounts here?

3
00:00:08,400 --> 00:00:11,950
Well, for this, we already got the form, the signup form.

4
00:00:11,950 --> 00:00:14,900
And if we have a look at this sign up view,

5
00:00:14,900 --> 00:00:19,050
we see that this form actually sends a post request

6
00:00:19,050 --> 00:00:23,023
to slash sign up if you click that create user button.

7
00:00:23,870 --> 00:00:27,360
The browser will do this for us because here we're not using

8
00:00:27,360 --> 00:00:30,150
our own AJAX requests or anything like this.

9
00:00:30,150 --> 00:00:33,730
We are relying on the built in browser functionality

10
00:00:33,730 --> 00:00:35,553
for submitting forms instead.

11
00:00:36,480 --> 00:00:37,470
And then in this form,

12
00:00:37,470 --> 00:00:40,660
you've got a couple of inputs with a name of email,

13
00:00:40,660 --> 00:00:44,190
a name of confirm email, and the name of password.

14
00:00:44,190 --> 00:00:48,090
And we'll be able to use these names here as keys

15
00:00:48,090 --> 00:00:50,480
for extracting the data on the backend

16
00:00:50,480 --> 00:00:53,293
when we are dealing with this incoming request.

17
00:00:55,170 --> 00:00:59,190
So therefore right now in demo JS and our routes here,

18
00:00:59,190 --> 00:01:03,320
it's this sign up post route in which we want to start

19
00:01:03,320 --> 00:01:04,610
working.

20
00:01:04,610 --> 00:01:05,443
And in there,

21
00:01:05,443 --> 00:01:09,020
I just want to insert a new user in my database.

22
00:01:09,020 --> 00:01:11,630
Now, please note that in the signup template,

23
00:01:11,630 --> 00:01:14,670
we also do have this confirm email input,

24
00:01:14,670 --> 00:01:17,980
which we will later use to ensure that the user

25
00:01:17,980 --> 00:01:20,720
doesn't have a typo in the email address.

26
00:01:20,720 --> 00:01:25,720
And the main email here entered into main email input

27
00:01:26,080 --> 00:01:28,790
matches this confirm email.

28
00:01:28,790 --> 00:01:30,340
Initially, we'll ignore it though,

29
00:01:30,340 --> 00:01:34,140
to keep things a bit simpler and to focus on creating

30
00:01:34,140 --> 00:01:35,183
a new user.

31
00:01:36,520 --> 00:01:40,330
So therefore let's go back here to demo JS.

32
00:01:40,330 --> 00:01:41,700
And as a first step,

33
00:01:41,700 --> 00:01:44,220
we can get some user data by having a look

34
00:01:44,220 --> 00:01:46,470
at our request body,

35
00:01:46,470 --> 00:01:50,870
which has parsed for us by that URL encoded middleware

36
00:01:50,870 --> 00:01:51,973
in app.js.

37
00:01:53,780 --> 00:01:57,080
Now in this user data, we'll have an email,

38
00:01:57,080 --> 00:02:01,530
so we can access this with user data dot email dot email,

39
00:02:01,530 --> 00:02:02,810
because as always,

40
00:02:02,810 --> 00:02:06,200
that's our name chosen here in that template,

41
00:02:06,200 --> 00:02:07,343
so in that form.

42
00:02:08,710 --> 00:02:11,830
Then we got this confirm email,

43
00:02:11,830 --> 00:02:14,410
which we can get by accessing user data,

44
00:02:14,410 --> 00:02:16,923
and then confirm email like this.

45
00:02:18,010 --> 00:02:21,310
I'm using this notation instead of the dot notation,

46
00:02:21,310 --> 00:02:23,550
because confirm email,

47
00:02:23,550 --> 00:02:26,640
this name that is assigned here in that form

48
00:02:26,640 --> 00:02:28,910
does have a dash.

49
00:02:28,910 --> 00:02:32,380
That's a character that's not allowed as a property name

50
00:02:32,380 --> 00:02:33,310
on an object.

51
00:02:33,310 --> 00:02:37,090
If you want to use the dot notation and hence to access such

52
00:02:37,090 --> 00:02:41,270
properties with such disallowed characters in them,

53
00:02:41,270 --> 00:02:43,623
you have to use this alternative notation.

54
00:02:44,600 --> 00:02:47,420
This is the same as using the dot notation.

55
00:02:47,420 --> 00:02:52,420
I could have used user data email like this up here,

56
00:02:53,010 --> 00:02:54,440
for example,

57
00:02:54,440 --> 00:02:58,950
but it's mandatory in cases where you have a prohibited

58
00:02:58,950 --> 00:03:01,010
characters like this dash here.

59
00:03:01,010 --> 00:03:02,920
That's why I'm using this way of accessing

60
00:03:02,920 --> 00:03:04,163
this property here.

61
00:03:05,500 --> 00:03:07,840
And then of course, I also got the password,

62
00:03:07,840 --> 00:03:10,290
which I can get with the dot notation again,

63
00:03:10,290 --> 00:03:12,940
since there is no forbidden character in there

64
00:03:12,940 --> 00:03:15,800
and we can then get it from the password field

65
00:03:15,800 --> 00:03:17,593
on the incoming request body.

66
00:03:19,060 --> 00:03:21,440
So these are the three pieces of data

67
00:03:21,440 --> 00:03:23,320
which we can now extract.

68
00:03:23,320 --> 00:03:26,400
And as I mentioned, we'll use the confirm email later.

69
00:03:26,400 --> 00:03:27,233
For the moment,

70
00:03:27,233 --> 00:03:30,200
we'll just use stat data to create a new user

71
00:03:30,200 --> 00:03:31,253
in the database.

72
00:03:32,870 --> 00:03:33,703
For that,

73
00:03:33,703 --> 00:03:36,570
I'm already importing that database helper object

74
00:03:36,570 --> 00:03:38,660
from the database file.

75
00:03:38,660 --> 00:03:41,020
And hence in here in this function,

76
00:03:41,020 --> 00:03:43,870
which already is a async function by the way,

77
00:03:43,870 --> 00:03:46,670
so that we can use the await keyword in there.

78
00:03:46,670 --> 00:03:50,360
We can use db get db to get access to the database,

79
00:03:50,360 --> 00:03:53,900
then call the collection method to define the collection

80
00:03:53,900 --> 00:03:55,780
with which we want to work.

81
00:03:55,780 --> 00:03:58,260
And here I'll work with a user's collection,

82
00:03:58,260 --> 00:04:00,380
which will then be created automatically

83
00:04:00,380 --> 00:04:03,010
once we start inserting data.

84
00:04:03,010 --> 00:04:06,883
And then we can call insert one to insert one new document.

85
00:04:08,080 --> 00:04:09,200
And that document,

86
00:04:09,200 --> 00:04:12,700
which I do want to insert is a user document,

87
00:04:12,700 --> 00:04:15,860
which I'll prepare here, which has an email field,

88
00:04:15,860 --> 00:04:18,110
which is that email here,

89
00:04:18,110 --> 00:04:22,560
which we extracted from user data and where we then also

90
00:04:22,560 --> 00:04:25,690
have a password field, which is that password field

91
00:04:25,690 --> 00:04:26,963
we set up here.

92
00:04:29,250 --> 00:04:33,030
And to avoid confusion, I'll name this here entered email

93
00:04:33,030 --> 00:04:37,090
actually, and this here entered confirm email

94
00:04:37,090 --> 00:04:40,123
and this here entered password.

95
00:04:40,970 --> 00:04:43,900
So that here I have entered email

96
00:04:43,900 --> 00:04:46,090
and here the entered password.

97
00:04:46,090 --> 00:04:48,800
This is not required technically this change,

98
00:04:48,800 --> 00:04:51,880
but it's now hopefully clear that here I'm referring

99
00:04:51,880 --> 00:04:55,360
to these constants and here I'm just setting up some new

100
00:04:55,360 --> 00:04:58,423
keys that will be part of the inserted document.

101
00:05:01,100 --> 00:05:03,560
So now it's this user object,

102
00:05:03,560 --> 00:05:05,290
which I passed to insert one,

103
00:05:05,290 --> 00:05:08,030
and which will therefore be inserted as a document

104
00:05:08,030 --> 00:05:09,143
into the database.

105
00:05:10,520 --> 00:05:12,670
Now, because we already have async here,

106
00:05:12,670 --> 00:05:15,700
and because inserting is an asynchronous operation

107
00:05:15,700 --> 00:05:17,640
that can take a bit longer,

108
00:05:17,640 --> 00:05:20,313
I will await this operation here now.

109
00:05:21,220 --> 00:05:24,510
And then we'll continue in the next line once it finished.

110
00:05:24,510 --> 00:05:28,930
So once that user document was inserted in the database.

111
00:05:28,930 --> 00:05:30,920
And in that case, when that happened,

112
00:05:30,920 --> 00:05:35,210
I want to redirect the user to the log in page so that he

113
00:05:35,210 --> 00:05:39,040
or she is able to continue with the next step in line,

114
00:05:39,040 --> 00:05:40,573
which is to log in.

115
00:05:41,490 --> 00:05:46,050
So here I now just call res redirect

116
00:05:46,050 --> 00:05:48,160
and redirect to the log-in page,

117
00:05:48,160 --> 00:05:50,823
as we did it many times before in this course.

118
00:05:52,640 --> 00:05:56,340
Now, I want to emphasize right now that this is not

119
00:05:56,340 --> 00:06:00,310
the finished way of inserting a new user.

120
00:06:00,310 --> 00:06:03,000
This approach here has one big flaw,

121
00:06:03,000 --> 00:06:05,460
to which I'll come back in a couple of minutes.

122
00:06:05,460 --> 00:06:08,563
But for now it should create such a user document.

123
00:06:09,470 --> 00:06:13,530
So therefore let's now save this and let's go back

124
00:06:13,530 --> 00:06:15,910
to our page and reload here.

125
00:06:15,910 --> 00:06:20,020
And then I'll create a new user here,

126
00:06:20,020 --> 00:06:22,300
fill out the confirm email field as well,

127
00:06:22,300 --> 00:06:24,850
even though we're not using it yet,

128
00:06:24,850 --> 00:06:26,550
but it is required in that form.

129
00:06:26,550 --> 00:06:29,690
So we have to enter something and then also enter

130
00:06:29,690 --> 00:06:30,653
some password.

131
00:06:31,560 --> 00:06:32,393
By the way,

132
00:06:32,393 --> 00:06:34,550
the password is hidden automatically

133
00:06:34,550 --> 00:06:38,920
because in that template, the input type is set to password.

134
00:06:38,920 --> 00:06:40,400
And that's a built in type,

135
00:06:40,400 --> 00:06:45,400
which you can set for HTML inputs to make the entered value

136
00:06:46,020 --> 00:06:47,080
invisible,

137
00:06:47,080 --> 00:06:51,390
or to mask the entered value to be precise,

138
00:06:51,390 --> 00:06:54,240
so that if someone's standing behind you,

139
00:06:54,240 --> 00:06:56,823
he or she can't see what you entered here.

140
00:06:58,010 --> 00:07:01,070
Please also note that the email inputs are set

141
00:07:01,070 --> 00:07:04,640
to type email, which are also built in input types,

142
00:07:04,640 --> 00:07:07,540
supported by HTML and all browsers.

143
00:07:07,540 --> 00:07:09,130
And this type, for example,

144
00:07:09,130 --> 00:07:13,420
ensures that we can't submit a value that doesn't have

145
00:07:13,420 --> 00:07:15,240
an at symbol in here.

146
00:07:15,240 --> 00:07:19,150
So it provides us with some initial validation,

147
00:07:19,150 --> 00:07:22,223
ensuring that email address was entered here.

148
00:07:23,910 --> 00:07:25,280
On mobile devices,

149
00:07:25,280 --> 00:07:28,700
it would also ensure that an appropriate keyboard

150
00:07:28,700 --> 00:07:32,523
is opening up where it's easier to enter email addresses.

151
00:07:34,360 --> 00:07:35,210
So with that,

152
00:07:35,210 --> 00:07:39,040
let's now click create user and I'm redirected

153
00:07:39,040 --> 00:07:40,150
to the login page.

154
00:07:40,150 --> 00:07:41,570
So that's looking good.

155
00:07:41,570 --> 00:07:46,540
I also got no error here and to validate that it worked,

156
00:07:46,540 --> 00:07:49,860
I will open my Mongo shell and connect to my database

157
00:07:49,860 --> 00:07:50,693
with that.

158
00:07:51,530 --> 00:07:55,040
And then in there I'll use that database,

159
00:07:55,040 --> 00:07:57,110
which I'm using in this application here as well

160
00:07:57,110 --> 00:07:58,350
in this website.

161
00:07:58,350 --> 00:08:01,333
And that is the auth demo database.

162
00:08:02,690 --> 00:08:07,440
So I'll use that here and then access my users collection

163
00:08:07,440 --> 00:08:09,570
to find all users in there.

164
00:08:09,570 --> 00:08:12,940
And there we have that one user that I just entered

165
00:08:13,910 --> 00:08:17,903
and here you can also see my password and that's a problem.