Original subtitles

Let's now finally implement the log in feature

of our application,

and this is gonna be a lot of work.

So let's get started right away.

And to start, let's take a look at our demo application.

So in this case here in the beginning,

we cannot see anything.

So there's no logged in user,

and then we can input a username.

And so this is the kind of username

that we computed before, remember, and then the pin.

And if that is correct,

so if the pin corresponding to this account is correct,

then we get logged in.

And that's gonna happen whether we click on this button

here or hit the enter key.

And so then all of this appears.

So, all the values here are calculated.

And yeah, so that's the main thing that we need to do

in this lecture.

And then of course, if someone else logs in,

then data values are gonna be displayed.

And so let's take a look at the HTML here of this form.

So indeed here we have a form element,

and this form has a button.

And so, it's onto this Log in button,

that we will attach the add event listener method.

Then, as for the inputs, the username is gonna come

from this one, with this class, log in user dash dash input,

and the pin is gonna come from this one.

And as always, I already have all of this here selected.

So this is the button here,

and then we have input log in username and input log in pin.

Okay, so let's now create these event handlers.

So event handlers right here.

So, button log in,

add event listener,

for the click and then as always,

our callback function.

And here let's just look to the console log in.

Okay, and now,

did you see what happened here?

Take a close look down here, what happens as we click.

So for a flash there, you saw the log in,

and then the page reloaded, right?

And that's because this is the button in a form element.

And so in HTML, the default behavior,

when we click the Submit button, is for the page to reload.

So we need to stop that from happening.

And for that, we need to actually give this function

here, the event parameter, and let's just call it event.

And you already know how this callback function gets access

to this event object, remember?

And so on that event, we can call a method

called prevent default, like this.

And so as the name says, this will then prevent

this form from submitting.

So, prevent form from submitting.

So let's do that again.

And now we've fixed that problem and we can see log in.

Okay, now another thing that's great about forms,

is that whenever we have one of these fields here,

input it, and when we then hit enter,

like this, then that will actually automatically trigger

a click event on this button.

Okay, so once again, hitting enter in this field,

or in this field is exactly the same as the user

clicking right here.

So, both of these things will trigger a click event.

So you see, as I hit enter,

we get more and more click events.

So that's why we get then, log in locked to the console.

But now, let's do the actual work.

So to lock the user actually in,

we need to find the account from the accounts array,

with the username that the user inputted.

And so that's where our find method comes into play again.

So we can do accounts.find,

and then this is actually the same that we did

in the last video.

So account.owner should be the same as,

so, three equals actually.

And so, remember we have this value

at input log in username.

Okay, so that is this element here, and then from there,

we need to take the value property, remember that?

So we did this here, I think, in the "Guess my Number" game,

where we also read the value out of an input field.

And so here, this is the same.

And so now, let's actually save this into a variable.

Now this variable needs to be defined outside

of this function, okay?

And that's because we will need this information

about the current account also later in other functions.

So, it's a good thing to have this big important information

outside of this function, so that we can then remember

it for other actions in our application.

For example, when we transfer money here,

then we need to know from which account that money

should actually go.

And so for that, we need the current account.

So current account, and here we just define it,

and that's why we need a let.

And so then here, we assign it to this value.

So current account.

Okay, so let's check that.

So JS and we get undefined.

So there was some problem here,

and the problem is, as I see it right away,

is that we are looking for the owner,

but we need to look for the username.

So the owner is the whole name, but the username property,

is these properties that we created earlier.

So here in this function, remember?

So we need to compare this value here, that the user inputs,

of course, to that username.

So try that again.

And now here we get to the object,

which has exactly this username.

Alright, and so it is here, my object basically.

Alright, so we got the user,

that is trying to log in,

and now all we need to do in order to actually lock

the user in, is to check if the pin is correct.

So, pin here is like a password,

but something that we usually use, like in an ATM.

And so I decided to just go with that here,

because I think this also looks a little bit

like an ATM machine here.

So let's then do that test.

So, if currentaccount.pin,

is equal to input log in pin.

Okay, so that's the variable that holds the selection

of selecting this element.

And then again, we need to take the value.

And finally, we also need to convert

this to a number,

because as I mentioned earlier,

this value will always be a string.

Alright, and so here, before we do anything,

let's just log in again here to the console.

Okay, so, JS,

and we got logged in.

But if we only input JS,

then we simply get the object itself,

but without being logged in, because the pin is correct.

And now let's try just some other user,

to see what happens here.

And we get an error.

So that error is, cannot read property pin of undefined.

And so the reason for this is, that this object here,

is now undefined, right?

Because no account could be found for this username.

And so the find method, so this one here,

will return undefined, if no element matches this condition.

So that's something that we haven't seen before,

and so that's why I'm showing this to you.

But anyway, how should we solve this?

Well, the first thing that might come into mind,

is to simply check if the current account exists,

like this, okay.

So this would fix the problem,

but we can do better because we already learned

about something called optional chaining, remember?

So we can do this, and then this pin property

will only be read in case that the current account

here actually exists, remember that?

And so, this is a lot easier and a lot more elegant.

So let's try that.

And so now nothing happened.

So no error, all we get here is the undefined,

because yeah, this account does not exist.

But that's of course not a problem.

Okay, but now in case that the account does exist

and that the pin is correct, what should we do?

Well, let's take a look at our flow chart here.

So this is the part we already checked.

So if we have the correct credentials, right?

And so if yes, then we should display DUI,

and the welcome message.

So let's write that here in our script,

put that here.

And so I like to kind of plan out what I'm doing

here using comments,

display UI and a welcome message.

Next up, we should display and calculate the balance.

Then the same with the summary,

and the same with the movements.

Okay, this part here we are leaving for the next section

about the timer.

Okay, so display balance, summary, and movements.

So display movements,

display balance, display summary,

and let's start with the message here.

So that is this element here.

So, let me inspect that.

So, it's this paragraph here called welcome.

And so as always, I already have that selected.

So it's a label, so probably it's called label welcome.

Label, indeed, here it is,

labelwelcome.textcontent as always.

And then here we are gonna write, welcome back,

and then the first name of the person.

Welcome back and then the owner of the current account.

So that's current account.owner,

and then only the first word.

So, how do we do that?

Well, we use our good friend, split.

And we split it with the space.

So as I said, we use this one all the time.

And then from the resulting array,

we simply take the first element, like this.

Okay, so this displays the message.

And now about displaying DUI,

remember how in the beginning we set the opacity

here from zero, basically back to 100, which is the default.

So usually, the opacity here is at zero.

And so now when we lock the user in,

we actually set this opacity here to 100.

So as we save this now, it will all disappear.

And so now, what we will do is the container app,

I think, yes.

So container app is the element that we selected previously,

which has this app class.

Okay, so this element,

we will manipulate the style and in particular,

the opacity style.

Now remember how I said in another project,

that it's also good to use classes for this?

Okay, but in this case, it's really just one style.

So it's not a big work to just do it like this.

So let's test this one out for now.

So JS and my pin,

and indeed we get our message here,

and also we get everything here now back to visible.

And Jessica Davis now, which has pin two, two, two, two.

And so now we also get Jessica.

Now, as you see these balances and these movements here,

they're all still hard-coded from what we had back here.

So here we called calc display summary,

and also the balance and the movements.

But now we want to do that, not here, but actually inside

of the login function.

So let's remove all of this,

again, because we do not want to call these functions

right in the beginning, when our script is loaded.

We only want to calculate and display the balance,

and the movements, and the summary.

And as soon as we actually get the data

that we want to display, right?

That makes sense.

So, let's remove all of that,

and actually do it here.

So, display movements,

and then it is the currentaccount.movements, right?

And that's because this method here,

or actually this function here,

it expects a movement argument.

And as we hovered this function name,

VS code is so smart that it actually shows it to us here.

And so from there, we can immediately see what we need

to pass into the function.

So that's really handy.

Then the same with the balance.

So display or calc display balance actually.

And so once again,

let's just hover this here to make sure what we need,

and it is the movement.

So that data is stored in the currentaccount.movements.

And finally, also the summary.

So, calc display summary.

And once again, we will need a movement.

So that data is in currentaccount.movements.

Alright, now we will have to come back to this function

here by the end of this lecture,

but for now, let's leave it like this.

And let's log in again, first with Jonas.

And so this is the data that we are already used to seeing,

this balance value and this movements here,

because we have always been printing these values

here using that account.

But now as we log in as Jessica Davis,

you will see that these values here,

will all change accordingly.

So let's see, and yes.

So that's great.

Now we are getting all of these values.

So this data here dynamically,

really from the account object itself.

So we have all her movements,

we calculated all of these statistics or summaries.

And of course also the balance,

is now really about this account itself.

And we have more.

Let's try Steven here.

So Steven Thomas Williams,

with pin three, three, three, three.

And this, kind of messed up our UI here,

because of this calculation.

So Steven only has a balance of 10 Euros.

And now finally, we can try Sarah Smith.

And so once again,

we see all her different movements here,

and yeah, this is great.

So this now really works depending on the user's data.

So let's go back here.

So what I want to do next is to, as we log in,

also get rid of this data here.

Okay, so basically emptying these two fields.

And also as we log in, like this,

I didn't want this field here to lose its focus.

So let's do that before this.

So, clear the input fields.

And so, we already know that the fields

are input login username,

which we want to set to the empty string,

and then also input login pin.

And we can do it like this,

login pin also set it to equal,

because the assignment operator works from right to left.

So it will start here assigning equal to this field here,

and then this here will become the empty string.

And so then empty string will also be assigned to this one.

We are just missing the dot value here.

Otherwise we would set the entire element to the empty

string, I'm I right?

So JS, one, one, one, one.

Okay, and now this happens, what I mentioned

before is that this field here is still has this focus,

so we can see the cursor there blinking.

And so, that's a bit ugly.

And so on that field,

so input login pin.

We can use this blur function or method.

So just call blur, and so that will make

it so that this field loses its focus.

So you see, now it looks great.

And now just to finish,

we also need to come back to this function here,

just as I mentioned earlier.

So calc display summary, and let's go there,

so this one here.

And as you see, we calculated the interest

using this 1.2 rate, right?

So right now, for all of the accounts,

the interest rate is now calculated using

this 1.2 interest rate.

However, as we take a look at the accounts,

each of them actually has a different interest rate.

So this one has 1.2, but this one has 1.5,

and this one has less, so it gets a less interest.

And so now of course, we also want to dynamically use

this interest rate depending on the current user, right?

That makes sense.

And so, we have to modify this function here a little bit.

And so, in order to get access to that data,

so to that interest rate,

we now need more than just the movements.

Instead of the movements, we want now, the entire account.

Because then we can take the movements from the account,

and also the interest rate.

Alright, so again, we will now change this function

and pass in the entire account,

and not just the movements array.

And so then from there, we will be able to take

the movements that we need to calculate

these three statistics here.

And then also the interest rate that we have here.

So account, let's just call it,

or let's just call ACC one more time.

So here, now we need to take the movements

from that account, the same here and here.

Alright, and now here, instead of this 1.2 fixed rate,

we take ACC.interestrate

that's in there, alright.

So let's just see if everything still works,

and let's see it with Steven.

So that was STW and three, three, three, three.

And you see that now our UI is no longer messed up.

Ah, but of course we forgot to call

this function here correctly.

That's probably why we got to this error.

Yeah, alright, so,

so down here we are still calling this function

only with the movements array.

So we need to instead, pass in the entire account

because as you see, now we do need the account here.

So try that again, TW,

and so now we get to correct interest.

And to, maybe you remember that before it was different,

it was this crazy long number with a lot of zeroes,

which messed up our user interface here.

So, this means that it is now being calculated

differently for each of the user,

according to their own specific interest rate.

Great, and with this, we implemented all of the tasks

that we had in our flow chart for this functionality.

And in practice, what this means,

is that for the first time, we made all of this data

that we see here in our application, dynamic.

So depending on which user is actually logging in.

So let's see that change again,

let's try a wrong pin here.

And so now nothing happens.

And of course we could now hide the user interface,

and display an error message,

but I want to keep it simple here.

So this is just a simple learning application.

So we don't need to mess with all of that.

What matters is only the correct version for now.

And so with the correct pin,

now as you saw the data changed here,

back to this Jonas account.

Awesome, that's great.

So, that's really great progress.

Congratulations for making it this far in this section.

I know there's a lot to learn and a lot to take in,

but I hope that this lecture too, was clear to you,

how everything worked here.

And just to recap, clearly the most important part

here is the usage of this find method here.

And knowing that this is the correct method for the job.

So maybe analyze this line here a little bit,

and then see exactly what happens here.

Also this nice usage of the optional chaining,

and then we are ready to implement our next feature.

We're just gonna be transferring money,

from one of our users to another.