So it's time to write some JavaScript on the front end to allow us to actually add a new user or edit
an existing user, and of course, that's all done in one dash user page go HTML and it's done down
here in the JavaScript section.
So in order to initiate the save, we're actually clicking this button.
And right now this button save changes doesn't do anything.
So we can either put it an event listener tied to this ID or we can just put it on Click Handler.
So I'll put an unclick handler that just calls Val a JavaScript function that doesn't exist yet.
And down here I can put it wherever I want, so I'll put it right here.
Function, Val.
And what this will do is say, first of all, let's get a reference to the form that form equal document
douget element by ID.
And I think I called this user underscore form.
So that gives me a reference to the form and how we take advantage of bootstraps validation.
And that's really simple.
If form dot check the validity check validity is exactly equal to false and there's something wrong.
So we can come up here and just say this dot event dot prevent default.
Which has parentheses, of course,
and this dark event does stop propagation, and there's a parentheses, not early brackets, I must
need coffee at this point.
And next we say formed our class list, don't add and we want to add was validated and return.
Something's gone wrong.
Otherwise formed a class list.
That ad was validated.
Now, of course, we also want to make sure that password and verify password are exactly the same.
So we can just say if document don't get element by ID and the first one is password value.
If that's not exactly equal to document, don't get element by ID verify password
dot value and we want to stop them, but we want to tell them we're wrong.
We're already using Sweedler so we can just fire a dialogue, swoll or fire and just say passwords do
not match
and return.
Otherwise, at this point, we want to fire off some Jason to our back in route we just created, so
we'll create a payload that payload people and we put on all the things that we need.
So we're going to need the ID for that needs to be in the form of an ant.
So per cent ID based here.
And it's not a semicolon, it's a comma.
And we also want the first name and that's going to be equal to document.
Don't get element by ID first underscored name value and we want the last name and the email so I'll
duplicate that twice.
Changed this one to the last name.
That one to email.
And this will be last name.
And this will be email and we want the password.
And of course, these names I'd first name, last name, email and password must exactly correspond
to the Jason value in the model's user type.
So this is password and this is password.
Now we'll create some request options, so constant request options that will be equal to a JavaScript
object with the standard stuff and I can just copy and paste the ones from here to save some time.
So copy that, paste it in here.
And of course, we also want the body and body, which should be at this level.
Lordi is equal to Jason Dot String Afie payload.
And finally we call fetch so fetch using dot api from the data pass to every template slash api slash
admin slash all dash users slash edit slash plus the idea and the request options.
Then we call them and turn our response into JSON response.
Dart Jason.
Then at this point we're just going to run a function pass at the value.
We just got converted from a response and we'll do something.
So we'll say if DataDot error, if there's an error then we need to do something.
Otherwise everything went well.
Now if everything went well, all I'm going to do is just to say location dot atrip equals and take
them to slash admin, slash all the users and that should be sufficient.
But something went wrong.
What do I do?
Well, again, I'm just going to say swoll dot fire error with whatever error message you choose to
pass, plus DataDot message.
OK, so in theory this should all work.
Let's start our application.
So I'll clear the screen, maybe start.
And go back to my Web browser and I'll go to Woodmen.
All users.
Click on this one, opened the JavaScript console in case there is an error, and I'll change this from
admin user to Treb Solar and click save.
And it changed my name.
Perfect.
Let's try adding a user so I will add Jack Nimble Jack at nimble dot com with the password.
Very secret.
I hope I typed the same.
We're about to find out.
Safe changes.
And I have an error in my skill syntax, and it's somewhere at sea at lying to.
So it must be on the insert users.
So let's go have a look at that and we're going to go to Models Dargo, which is down here, and we'll
look for ad user, so.
And user.
And there it is, insert first name, last name, email, password created and I'm missing in parentheses,
which was very sloppy, but this is the first time we've called that.
So let's say make stop.
Make start.
And we'll go back to our Web browser and we'll reload this and say, Jack, nimble Jack at nimble dot
com password is very secret, which I just misspelled.
Very secret, very secret and safe changes.
See what else we got wrong.
That actually looks pretty good, so let's log out and log in as Jack at nimble dot com.
We are a, c, c, r, e, t log in.
And that looks good.
I'm logged in, I have admitting privileges, so I should be able to go to all users and there they
are.
When I look at myself, I should not see a delete button and I do not.
But when I look at Trevor, I should see it and I do.
So everything seems to be working pretty well, but we're not quite done.
We still need to have the ability to delete a user and we have the button, but it doesn't actually
do anything yet.
So we'll take care of that in the next lecture.