So how can we ensure that users
can create accounts here?
Well, for this, we already got the form, the signup form.
And if we have a look at this sign up view,
we see that this form actually sends a post request
to slash sign up if you click that create user button.
The browser will do this for us because here we're not using
our own AJAX requests or anything like this.
We are relying on the built in browser functionality
for submitting forms instead.
And then in this form,
you've got a couple of inputs with a name of email,
a name of confirm email, and the name of password.
And we'll be able to use these names here as keys
for extracting the data on the backend
when we are dealing with this incoming request.
So therefore right now in demo JS and our routes here,
it's this sign up post route in which we want to start
working.
And in there,
I just want to insert a new user in my database.
Now, please note that in the signup template,
we also do have this confirm email input,
which we will later use to ensure that the user
doesn't have a typo in the email address.
And the main email here entered into main email input
matches this confirm email.
Initially, we'll ignore it though,
to keep things a bit simpler and to focus on creating
a new user.
So therefore let's go back here to demo JS.
And as a first step,
we can get some user data by having a look
at our request body,
which has parsed for us by that URL encoded middleware
in app.js.
Now in this user data, we'll have an email,
so we can access this with user data dot email dot email,
because as always,
that's our name chosen here in that template,
so in that form.
Then we got this confirm email,
which we can get by accessing user data,
and then confirm email like this.
I'm using this notation instead of the dot notation,
because confirm email,
this name that is assigned here in that form
does have a dash.
That's a character that's not allowed as a property name
on an object.
If you want to use the dot notation and hence to access such
properties with such disallowed characters in them,
you have to use this alternative notation.
This is the same as using the dot notation.
I could have used user data email like this up here,
for example,
but it's mandatory in cases where you have a prohibited
characters like this dash here.
That's why I'm using this way of accessing
this property here.
And then of course, I also got the password,
which I can get with the dot notation again,
since there is no forbidden character in there
and we can then get it from the password field
on the incoming request body.
So these are the three pieces of data
which we can now extract.
And as I mentioned, we'll use the confirm email later.
For the moment,
we'll just use stat data to create a new user
in the database.
For that,
I'm already importing that database helper object
from the database file.
And hence in here in this function,
which already is a async function by the way,
so that we can use the await keyword in there.
We can use db get db to get access to the database,
then call the collection method to define the collection
with which we want to work.
And here I'll work with a user's collection,
which will then be created automatically
once we start inserting data.
And then we can call insert one to insert one new document.
And that document,
which I do want to insert is a user document,
which I'll prepare here, which has an email field,
which is that email here,
which we extracted from user data and where we then also
have a password field, which is that password field
we set up here.
And to avoid confusion, I'll name this here entered email
actually, and this here entered confirm email
and this here entered password.
So that here I have entered email
and here the entered password.
This is not required technically this change,
but it's now hopefully clear that here I'm referring
to these constants and here I'm just setting up some new
keys that will be part of the inserted document.
So now it's this user object,
which I passed to insert one,
and which will therefore be inserted as a document
into the database.
Now, because we already have async here,
and because inserting is an asynchronous operation
that can take a bit longer,
I will await this operation here now.
And then we'll continue in the next line once it finished.
So once that user document was inserted in the database.
And in that case, when that happened,
I want to redirect the user to the log in page so that he
or she is able to continue with the next step in line,
which is to log in.
So here I now just call res redirect
and redirect to the log-in page,
as we did it many times before in this course.
Now, I want to emphasize right now that this is not
the finished way of inserting a new user.
This approach here has one big flaw,
to which I'll come back in a couple of minutes.
But for now it should create such a user document.
So therefore let's now save this and let's go back
to our page and reload here.
And then I'll create a new user here,
fill out the confirm email field as well,
even though we're not using it yet,
but it is required in that form.
So we have to enter something and then also enter
some password.
By the way,
the password is hidden automatically
because in that template, the input type is set to password.
And that's a built in type,
which you can set for HTML inputs to make the entered value
invisible,
or to mask the entered value to be precise,
so that if someone's standing behind you,
he or she can't see what you entered here.
Please also note that the email inputs are set
to type email, which are also built in input types,
supported by HTML and all browsers.
And this type, for example,
ensures that we can't submit a value that doesn't have
an at symbol in here.
So it provides us with some initial validation,
ensuring that email address was entered here.
On mobile devices,
it would also ensure that an appropriate keyboard
is opening up where it's easier to enter email addresses.
So with that,
let's now click create user and I'm redirected
to the login page.
So that's looking good.
I also got no error here and to validate that it worked,
I will open my Mongo shell and connect to my database
with that.
And then in there I'll use that database,
which I'm using in this application here as well
in this website.
And that is the auth demo database.
So I'll use that here and then access my users collection
to find all users in there.
And there we have that one user that I just entered
and here you can also see my password and that's a problem.