Let's start here and get sign up.
Here I want to get my session data and I'll store it in a
variable, in a variable because I might overwrite it as you
will see in a second,
and here we can then use sessionFlash dot
get session data and passing the request object,
since we use that in the get session data function.
And now to think just this,
that session data could be null or undefined.
That would be the case
if we haven't flashed any data before.
Here I'm just extracting it from the session object
but if I didn't flash and data onto it,
which for example would be the case
when we first visit the sign up page,
then of course this would be null or undefined.
Therefore, in this case,
I want to have some default data so that I populate the
input fields with some default data in the rendered
template.
So if not session data, if that is null or undefined,
if it's faulty therefore,
I want to set it equal to an object where
I won't have an error message,
but where I do have some default data like an e-mail,
which initially should be empty in that case, a password,
which is an empty string and basically a bunch of empty
strings.
Also the confirm password here
that should be an empty string and we need a comma after
this here and also full name
which should be an empty string and straight
which should be an empty string
same for postal and for city.
So basically, a bunch of empty values
and it's now the session data
which is either this object full of default empty values or
the data we flashed onto the session before
which contains the real user input.
Just a little thing I just remembered.
I have a tiny error in the signup function where we do flash
data onto the session there, the enter data comprises,
email password and so on,
what's missing here is to confirm email.
Now, I am setting it here and here in get signup
I do have it but it should be confirmed email
not confirm password.
Now I should also have that in my entered data down here in
the signup function
because of course that was all the data entered by the user
on rec.body confirm email.
So we should also make sure that this is part of entered
data here in the sign up function so that it is flashed onto
the session so that we don't lose that entered email.
We don't validate it here explicitly because we do that here
in this step
but we should of course flash it to the session.
So flashing confirmed e-mail is an important step.
Having a default value for it is as well.
You should also make sure that all the key names here for
your default values match to key names you have here for
flashing data onto the session
And once you did all of that here in get sign up where we do
render this sign up template.
We can now pass in a second value,
a second parameter value to the render method to provide
some data to the template when it's being rendered.
Because here I will now pass in a input data key,
key name is up to you. This is the name of the variable,
which you will be able to use in the template later.
And the value is my session data.
So this object,
which has either a bunch of default values or which is
extracted from the session
and we can now apply the same strategy to the get log
in action Of course, here,
we also will get some session data by looking into our
flashed data which we might have.
So, by using session flash dot,
get session data and passing req to it,
but just as before this might be null or undefined.
So if not session data,
same logic as before with get signup, if not session data,
then I want to set some default data. So here in get log in,
in that case, I will set session data to an object.
And in that object, we don't have an error message
but I have an email which is initially empty and the
password, which is initially empty.
These are my default values for the two fields that we have
on the login page.
And then with that,
we can also pass a second parameter value to this render
method and provide the input data
which is the session data we got here.
And now with that,
we are ensuring that we got this in the login page as well.
Now that's all right, but to see an effect,
we now need to use that data
which we are passing through the templates,
in the templates.
So therefore, we need to go to the views and there to the
sign up EJS and log in EJS files.
And there, we now got a couple of things to do.
Let's start on signup EJS.
Here, I want to show an error message
if we do have a erroneous data.
For that, maybe below the H1 tag,
we can use EJS tax to add a "if" check here and check if the
input data field keep in mind input data here simply is that
name off that property
which was setting in this object that we pass through the
render method. So if you chose a different name here,
instead of input data,
you have to use that different key here. But in my case,
it is input data and input data dot error message is a
thing. If that is true, see if it exists.
If it's not an empty string or a null or undefined,
then I want to show that error message.
So therefore, here I am, then opening my curly braces.
And then here, of course, we're closing that.
And now between that here in this IF check in the template,
I want to then show my error message.
But for that here, I will add a little section in that case,
a little extra section you could say,
which I'll give a class of alert,
which I'll use for styling soon to gift us a specific style
that highlights this error message.
And in there I'll have an H2 tag with a title and the
title simply is invalid input
and below that
I have a paragraph where I want to output the error message,
which I get by accessing input data dot error message.
We'll work on this styling in a second. First of all,
we'll just verify that it works. So for the moment,
I'll not do anything with that. Instead,
we just output it like this and before we see if it works,
I also want to ensure that we restore the entered values to
use reminder provided. For this trick,
go to all these input fields.
And we add the value attribute,
which is a built in attribute
you can set on input elements,
and this attribute allows you to set well values,
which are pre-entered into those inputs.
The user will still be able to change them,
but they are there right from the start and here
for example, for the e-mail
I want to access input data dot e-mail.
Now I can access dot e-mail
because I make sure that I have e-mail
field here if we had no session data,
then I set it to an empty string in this object
which I passed with the template,
or if we did flash data to the session, then of course,
we also have an email field because we have it here in this
enter data with the real data the user provided
and that is the data we flashed onto our session because
we're spreading that object into the data object that's
stored into session.
So I e-mailed field and then also confirm e-mail password
and so on all these fields will be available here.
So we can repeat that for confirm e-mail then,
written like this in my case
and then do the same here for the password,
which we of course also want to preserve so that the user
doesn't have to re-enter it and then do this forward a full
name, whoops, full name
and of course also here for the street and then for the
postal code there I want to restore it as well.
And last but not the least also for the city
Now that should do the trick and therefore, let's quickly
re-load and see if it works.
First of all,
I'll try to sign up with a user that exists already.
So I'll enter some correct data here,
but data for a user that's already stored in the database.
So therefore, this should actually fail.
And it does. This is not style the way I want but you see
I get the error message and the entered data is preserved,
except for the street we'll have to look into that,
but the rest is preserved.
If I now also try doing that
by opening the dev tools and removing the required
attribute here from the e-mail field so that the front-end
validation is disabled and every user could do that.
Of course, you have to know that you can use the dev tools
but a lot of users do.
So they offered that is something that could happen.
So now I did disabled this, re-entered a street,
but remove to email. Now,
since front and validation is disabled,
this would be Submittable
but thankfully I now get my error message that, this is not
valid because I do have the backend validation as well
and we are now flashing that data and that message
so the data is preserved and that messages shown.
Except for the street data that's missing.
So let's see what's wrong there in off controller,
I'm extracting rec bodies street,
and I have it here on the entered data,
but I have a typo here. I have steet here
This should be street when I flashed the data.
So I shouldn't have a typo if I save that now and I re-load
and I try this again with the user that already exists
like this,
then I got the error and all the data's preserved.
Of course,
if I create a new user with an email address that is not
taken yet, and I named this user, Julie Anders
testing Plaza 5,
In 5 5 8 8 1.
Test city. Then this succeeds.
Now we're on the log-in page.
Let's now work on that.
And I want to show an error message there as well.
If we have invalid input,
so I'll copy that code snippet
and add it to log in EJS as well.
Alternatively,
we could also turn it into a includable code snippet and
just included that would be fine as well.
It's up to you.
I'll change the title here to invalid
credentials on log-in EJS and then I'll put the error
message just as before.
And of course,
I also wanna output the preserved user input.
So here, I output the VLU by accessing input data,
Since that's the key, we pass to the template.e-mail
and then copy that and do the same here for the password.
As a side note here on the log-in page,
we could also remove to min length front end validation
because we're comparing for password equality on the back
end anyways.
So we don't really need to validate on the front-end.
Hence, I remove it here. You could also leave it.
Doesn't matter too much.
If you now save this and re-load for one,
if I do remove this required thing here,
and I just enter a password and submit this, I get an error.
And if I do enter a correct email,
but an incorrect password, I get an error.
And the same if I enter some random email,
which wasn't registered before.
So here, input value is preserved. Error message has shown.
This is working.
The last step now is that I want to have
some styling for this alert.
And for that,
we will use the fact that we added an alert class to this
section here, which holds that alert.
And we can now add some styling in our public folder in the
base.css file, base.css
because that's a general base.css component,
which we are using on different pages off this site.
It would make sense to use this alert box on various parts
of the website later as well.
And therefore, I'll make it a base style just as my button
here is a base style.
Hence here in base.css,
I will add the alert class selector so that we can add some
styling to the overall alert section, to the alert box.
And here I want to give to some border radius where I will
use my variable that was defined before the border radius,
small variable.
Give it a background color where I will use another
variable, the color error, 100 variable.
And you can see all those variables a little bit further up
into his file here.
These are the error variables I defined with some reddish
colors.
100 is a very light red 500 is a dark red.
I used a light red as a background here
and I will now also add some text color,
which as you might guess is that dark red.
So color error, 500 in this case.
That's the background color at the text color.
And then also add some padding, which could be a space-4,
for some nice padding in all directions.
Now, I also want to give my h2 element in there,
a specific style. So to title in that box,
I'll set the font size to one rim.
The default would be a bit bigger and I want to make it
smaller and I'll the set
the margin to VAR space 2 top and bottom and zero left and
right,
so that it doesn't have as much margin to the top and bottom
as it would normally have.
And I will add text transform upper case.
This is a CSS property, which as the name kind of implies,
we'll take any text that's in this element,
which you are selecting and it will turn all the characters
into upper case characters,
which is a look I like in this place here.
Now we can also select the paragraph which is in there.
And here,
I want to add the same margin as I have on the H2
element.
We could have also grouped parts of these styles together
therefor, but I'll just set it up like this,
then save everything
and now if I re-load and I try logging in with a correct
email address, but an incorrect password, for example,
I get this error box.
Now feel free to find installing here
however you want.
But that's the style I will go with.
That's the error style I will go with, And with that,
we added this session-based error messaging where we also
keep the user input.