Either.
Welcome back.
So in this lesson we're focusing on improving the usability of our camp.
Right now it's kind of a disaster as far as giving feedback or error messages or success messages to
our users.
And by disaster I just mean that it doesn't exist at all.
We have a council log which obviously our users can't see.
We see it as developers in our consul here where the servers are running but no one else sees that.
So we're going to focus on adding some messages in and I'll show you what that looks like in just a
moment.
Before I do that we have three main objectives I'll just talk about them now.
So I do want to demo it.
First show you what to expect how it will look how it behaves then we'll actually install and configure
a package called connect flash.
So what we're doing is adding in Flash or the flasher a flash of her different pronouns and people call
it.
In other frameworks the flash hash.
People call it flash messages but basically the idea is we're going to show a message to a user like
successfully logged in or successfully logged out.
Or maybe something like you don't have permission to do that.
Or Please log in before you add a campground something like that.
We want to show it to a user just once and we don't want it to be a permanent fixture on the page.
We want to just flash it to them one time and then it goes away on the next page or if the user refreshes
and then the last thing is to add in our flash messages to the header and add in some bootstrap classes
that will style.
So there's some built in ways of doing things with bootstrap.
This is such a common feature to have messages that are flashed to your user on all sorts of sites that
bootstrap has some built in styling for that that will take advantage of.
So I'll start by showing you what it will look like.
So I have up camp running.
Let me well I'll show you if I just log out right now so I'm signed in as freezer if I log out I get
a message that says loungy up we can change that message text.
Obviously if I try and add a new campground right now when I'm not logged in I now should get a message
that says you must be signed in to do that.
And notice that it's read here.
So that's a bootstrap class.
This alert that we get if I were fresh the page goes away.
So now if I try and sign up I must say that I sign up as resti which already exists.
So I shouldn't be able to do that in the past.
The page would just refresh.
But what we'll end up with is a message that says a user with a given user name is already registered
.
OK.
So let me sign up as someone new.
Let's try doing blunder.
I've now moved apparently from vegetables to household appliances and I get a message success successfully
signed up.
Nice to meet you Bunder.
And if I refresh the page it goes away.
So there are other places that we have those messages but I'll show you.
For instance if I try and edit this campground that I don't own.
Tater tots owns it.
I'm logged in this blender.
I don't have a link to go to Edit here because that's hidden.
But technically I still could go to slash at it where I now get a message that says you don't have permission
to do that.
It redirects me back here.
So same thing with comments if I if there was a comment here and it was created by someone else.
If I manually went to that link and added slash at it then I would also see a message but that's a lot
of work because we have to find the ID.
And anyway I don't want to go into it now but it will be the same bit of code that we add that will
say you don't have permission to do that.
And then lastly if I do log out and I go back and I try and add new comments I get the same message
.
You must be signed in to do that.
Just like if I tried to create a campground when I wasn't signed it.
OK.
So that's the end goal and it's actually pretty easy for us to make this work.
Using this package we could do this without a package of course what we could do something like.
When we open up the correct version.
So I made a new version for this v 11 that I'll be working inside of.
So let's see into v. 11 and let me clear everything and open up yes.
OK.
So we'll be working here.
Again this is V 11 just in case you're following along.
The first thing that I'll do is show you the package we're going to use.
So it's called Kinect flash.
There were other packages out there that do this.
If you take a look at the get home repo the documentation is actually a little bit out of date.
We're using Express for which came out earlier in 2015.
The docs talk about Express to point X and three point X we're on for next though.
So these instructions aren't exactly the same although if you go back to Connect flash you'll see some
of the first external links are expressed 4.00 set up with K'NEX flash which I already took a look at
or you could always use something like this had expressed for afterwards and you can see we get that
same link and there are tutorials down here there's a stack overflow post about it if you want to take
a look.
So I did this earlier.
Something you have to do a lot when you know code is being updated when new things are coming out.
Especially with something like Express 4.0 where things change pretty significantly.
Lots of things that used to be part of Express were moved out of express as separate packages.
Some of the naming and syntax changed.
So I always say it's something you just do a lot when you're trying to do something you haven't done
yet in Express add in Express for to your searches because oftentimes you'll find great tutorials for
it.
Two years ago that still are 90 percent the same but that 10 percent is really important that you understand
how it's different from you know two years ago versus current Express.
All right.
So first thing we want to do is install this package.
So it's called connect flash.
So we want NPM install dash dash save connect dash flash.
OK.
Now that that's done up here we'll just add in Flash.
We'll just call it flash rather than connect flash equals require connect dash flash.
Make sure we have a comma in there then what we need to do is tell express tell the app to use Flash
.
So we took the contents of K'NEX flash that the package and saved into the flash variable and we'll
need to execute that variable app use flash just like that.
So technically that's all we need to do.
We now have Connect Flash installed and if we do go back and take a look at the docs there is some other
configuration that they do here with cookie parser in session but we actually already have that set
up where we're already doing our.
Where are you require express session and we're setting up a secret.
And so we don't actually have to worry about that because we already have set up our app to use Express
session.
OK so what we'll do is on every single page we're going to show the contents of the flash.
We're going to take the message that's in there.
It might be good or might be bad it might be empty and we're going to show it at the top of the page
and that will happen in our header file.
E.J..
Yes we'll have some code that just displays the error or the success message and then all that we'll
do is when we encounter an error or a place we want a message so an instance of that might be instead
of let's do campgrounds and instead of our campgrounds for we have this is logged in Middleware where
you can't add a new campground unless you're logged in.
If we if we go to that middleware and we'll look at is logged in we might want to have a message that
says you need to be logged in to do that or Please log in.
So that code would go right here.
So right before we redirect to slash log in we're going to add something to the flash.
So that looks just like this actually request dot flash.
And then we can give it a key.
So in a moment I'll show you.
We'll be using success and error and we'll just use that to determine if the message the alert should
be green or red.
So that part doesn't matter for now but this part does matter where we're going to pass in a message
.
So we could do something like Please log in first.
Again this is inside the is logged in Middleware.
So it's checking if the request is authenticated if the users logged in.
Then keep going to whatever you were doing before.
But if that's not the case before you redirect to slash log in.
Yes remember if we redirect to slash log in.
Without this line it just goes on too.
I'll have to open up the route but it will go right to the code and slash logon which is right here
.
So it renders the log in for before we do that though we're going to run this code flash.
And what this will do is basically take Please log in first and it will add it to the flash and it won't
be displayed until the next thing that we see.
So in this case this doesn't actually render anything it just redirects us to slash log in and the way
that the Flash works is really nice in that it isn't just going to flash itself right away immediately
.
It it only works or it shows up on the next page.
So you actually do it before you redirect.
So in this case please log in first and then we redirect to slash log in and then on the log and form
we'll hopefully see a message.
Right now we're not displaying that though.
So again just to reiterate just adding this line won't display anything for us all that this does is
it gives us the capability it gives us a way of accessing this on the next request.
So we're not flashing it right away we're not seeing anything we're not showing the user anything.
All this does is it says in the flash and rather than success I think it makes more sense to call this
error in the flash add please log in first for the next request and then we redirect to slash logon
.
So then we have to handle that in logon which is right here slash log in.
So I could do something like pass in message.
And of course all I can just show you this to start so if we just have message be error you messed it
up just like that we could just display that on our template so slash log in which is inside of fuse
log in.
Yes just at the very top I could just have an H-1 that displayed message just like that.
Nothing very new.
So I'll just show you what that looks like right now.
Start the server up redirect to slash log in and I get this message every time error.
You messed it up.
As you can see which is hopefully what you expected at this point because I hardcoded it in every time
we go to slash log in we see you messed it up.
OK so using flash what we can do is now say message is equal to request of flash and we can just do
the error in the flash.
So its a little bit confusing.
But basically the idea is right now if I just refresh the page restart the server and refresh there
shouldn't be an error in the flash.
So we actually don't see anything.
But then if we make this code run wups this code here and the way we do that is trying to access something
where we have to be logged in where this middleware is called then what will happen is that we're adding
this to the flash under the key error with the value please log in first then we're going to slash log
in.
Then inside of slash logon we're sending under the key of message request up flash error which is a
lot of things that have to be connected and it's a little bit confusing again.
But let me just show you now.
So I restart.
I actually didn't have to do that this time but we don't see anything.
Now let me go to campgrounds and try and add a new campground even though I'm not logged in.
And now I get that message that says Please log in first which wasn't there before and if I refresh
the page it goes away.
So that's a really simple version of what we can accomplish using Flash.
So before we move on in the next video to implementing this with all the different messages and the
styling.
Let's just summarize how this works again.
So whenever we want to display a message whether it's a success message or an error message whatever
it is we're going to use this line right here.
Request flash.
And then we pass in a key and a value and we do that before we redirect.
It's really important if I put this line after we redirect.
It won't work.
So before you redirect and then you still have to handle it in the template yourself to handle it and
the route all that it gives you is the capability of adding some data in before you redirect.
That makes it to the next route.
And that data won't persist on every single request to that route.
So it's a one time thing.
Which is why it's called Flash.
OK.
So in the next video I'm going to show you how to actually implement this for real where we don't have
to do this.
Passing it off message to every template where we can style thinks nicely with the bootstrap where we
can have red and green messages we can have different colors if we want to put red and green are the
standard ones.
OK.
So that's in the next video.
See the