So we've managed to call the back end API and get a user, but of course there are cases where we don't
want to do that.
If we do, we want to populate the form.
But if we don't, we want to leave it empty.
So let's make some changes to the JavaScript here on one dash user page HTML.
The first thing I'll do is move these two things token and let the outside of the document add event
listeners, because I'm going to need those in other places.
So if we put them right here, then they're available everywhere in our JavaScript.
So that's the first thing I'll do.
The second thing I'm going to do is I know I'm going to want to hide that delete button or unhide it
depending on whether or not I'm adding a user or editing user.
So let's get a reference to it.
Let's delve equal document and get element by ID.
And I'm looking for the elite bit like that.
Now I have a reference to.
So we have our Idy now here in the document, an event listener, the first thing we're going to do
is make a decision if it is not exactly equal to zero, which is what it will be.
If we're adding a user, then I'll execute that statement.
Otherwise I won't.
So that's easy enough.
The second thing I'll do is come up here to this delete button and initially I have it hidden by giving
it the class of.
And down here.
Just before I make my call to fetch, I'll say Delbert's the class list to remove the daschner and I
will unhide it when we're editing an existing user.
So that's easy enough.
We're also going to want that delete button to actually do something.
So let's add an event listener here outside of the document add event listener will at another event
listener for the delay button delay button add event listener and we want it to be click and when somebody
clicks on it will execute this function.
Let's give ourselves some room.
And what we can do, of course, is use that same logic we did on the sales page.
So let's go over here to the sales page HTML, which is right there, sales up page Ducos HTML.
And I'll copy this reference to Sweedler and I'll use the same logic for a confirmation button.
So back on one user page at the top of the JavaScript, outside of the script tag, I'll import Sweedler,
then I'll go back to school page and we'll find the part where we actually deleted with the fired Oswal.
Right here, so copy this, the whole thing, and just change it as necessary, so I've copied it.
I'll go back to one user page and I'll find where I have my event listener and I'll just fire the same
code.
But of course, we're not going to call Fetcher.
We'll call it different.
So delete that for now.
And I'll ask you to delete everything inside this last then clause and I'll just write console that
log would delete user ID and then just put it either, OK, and I'll change the name of the button.
Here to delete user.
OK, so now we have a listener.
Now we have this working, but here we want to actually populate the information and we only have three
things to worry about.
Document, don't get element variety.
And what this will do, of course, is populate the form with information.
First, underscore name value equals from data dot first thing and duplicate that twice.
Like this one last name, like this one email and change the IDs to email and last.
But of course I only want to do that if I actually have data.
So I'll say if data.
And closed my statement and then I did these three things.
OK, now obviously you can add some extra error checking here, put a message if the user isn't found
from the database or whatever it may be, but that's trivial.
And I'll leave that as an exercise for you.
So if we did everything right, I should be able to start my application and test it out a start.
That was good.
Let's go back to our Web browser and I need to log in.
So let's log in the example dot com password and log in and let's go to the admin, all users.
And the first thing I'll do is try to add a user, but I'll open the JavaScript console in case I have
a typo.
OK, so adding users should give me a blank form with no delete button.
And it does and there are no errors, so let's cancel this and go back, and now I'll click on the one
user in the database and you'll see immediately if this works that there's a bit of a problem.
I still have this all worked, I have my admin, my user, my email address, but I shouldn't be able
to delete myself.
I am the currently logged in user because there's only one user in the database.
So the delete button will actually do anything except pop the pop a dialogue.
And that worked fine, but I shouldn't be able to delete myself.
That's generally considered bad practice.
You might say to yourself, what are the chances that a user is going to delete him or herself?
Well, in my experience, the chances are pretty good users will do whatever they can, given the opportunity.
And as good computer scientists, we're pessimists, we assume worst case scenario.
So we're going to have to figure out how to make this go away.
Now, that actually should be a pretty simple exercise, and what I'm going to do is ask you to go back
and look at both the front end and back end code and somehow determine whether or not the user I'm currently
looking at is the currently logged in user.
And I'll give you a hint.
You should look at the front end session and how we determine whether or not someone is actually logged
in.
So I'm going to leave that as a bit of a challenge for you.
How can you hide this delete button for the currently logged in user if he or she is looking at their
own record in the database?
So given that a world in the next lecture, I'll show you how I did it and we'll move on to actually
writing the code that allows us to add a user or to edit the user.