Original subtitles

Welcome back

and this is gonna be the last part of this project.

So we're almost done here.

Now for security reasons, real bank applications

will log out users after some inactive time.

For example, after five minutes without doing anything.

And that's what we will implement in this video

using the set interval timer.

And let's start with one final look at our flow chart.

So the timer appears in multiple places here.

And the first one is right here.

So whenever the user logs in

the lockout timer will start or restart, all right?

And then, as soon as the log out timer expires,

which will be after five or 10 minutes,

then we want to lock the user out now. Alright?

So basically that's what we will do with the timer,

but let's start very simple.

So the place where we want the timer

is here in this function about the login. Okay?

So this here is the handler function that handles the login.

And so our timer will start here.

Now we already have plenty of code here, as you see, right?

And therefore let's actually create a separate function,

which will start this log out timer.

Alright?

So let's say start, log out timer

and this function doesn't need any arguments.

All it does is to basically export

some functionality into an external function.

So let's write some pseudo code here,

basically by writing some comments to say what exactly

we are gonna do here.

So we will start by setting the time

to let's say five minutes, okay?

Then we want to call the timer every second

then in each call,

in each callback call,

print the remaining time

to the user interface.

And then when the time is at zero,

so after the timer basically expired.

So when we reach zero seconds,

stop timer and log out user.

Okay, and to make this a bit easier to visualize,

let's go again here to our demo application.

And so the timer that I mean is this one here,

which actually starts at 10 minutes

and you see that after each second,

a new time is basically printed here.

Alright, and I'm not gonna wait for 10 minutes now,

but when this reaches zero,

then the user will of course be logged out.

Okay?

So let's basically do everything that we described here.

So I'm setting the time, for now just to 10 seconds.

Okay? Just so we see what's going on,

or actually let's say 100 seconds,

so that we have actually more than one minute,

then we want to call the timer every second.

So basically what this means is to use

the set interval function

and then pass in a callback function

and this callback will be executed every second.

And so 1000 milliseconds here, alright?

Then each time that this function is called,

print the remaining time to the user interface.

Not in this one here as well.

So when we're at zero seconds,

stop the timer and log the user out.

So we want to print the time here to this label,

which is called label timer.

So let me just show it to you here in our elements

that I preselected.

So label timer is the element with the selector

of simply timer.

Okay.

So let's go.

So labeledtimer.textcontent is equal to the time

and so that's this here.

So I forgot to write the name of the variable actually.

And now to make this actually work,

we also need to remove one second

in each of these function calls, right?

So decrease one second.

And so time equal time minus one,

which is essentially the same as saying time minus minus.

Alright?

So this is the logic of this timer.

We start with a certain number of seconds,

right now that's 100

and then each time that his callback function here

is called, we remove one second from that.

Okay? And so this is called every second

and so basically we will end up with a timer

which shows the current number of seconds, each second.

Okay?

And now all we need to do is to then call this function

here on login.

So well, let's do that here before updating the UI.

So start, log out timer.

And now let's quickly log in here

and indeed you see this number here decreasing now.

Okay?

So hopefully that logic makes sense

of decreasing one second, every second.

Now, where is that?

We have too many functions here, I guess.

Now here we go.

So again, the logic here is to decrease the timer

by one second, every second.

And so therefore we get this number here

going down by exactly one each second.

Alright?

Now we don't really want to see only the seconds.

We want to see the minutes as well.

So basically we need to convert

this simple number of seconds to minutes and seconds.

Alright?

So let's do that here as well.

So let's say the minutes is the current time

divided by 60.

So that's the easiest way basically off writing it.

So it's not gonna be correct,

but it's gonna show us what we need to do next.

Now, here we are also seeing already what happens

with this timer after a certain number of seconds.

So indeed, as soon as the time hits zero,

it will not simply stop, right?

We're not telling the timer anywhere to stop.

And so it will simply continue and become negative.

And so that's what we will have to implement in down here,

but let's leave that for later.

For now, we just want to display the number here

in minutes and seconds,

but for now I will just show you the minutes.

Just to show you what we need to do next.

So you see that we have one minute .6 or .5 something.

So it's decreasing every second,

but this number here after the comma or after this period,

doesn't really make sense. Right?

So basically what we want to do is to take whatever remains

of dividing the time by 60,

because that will be our seconds.

So let me show that to you as well.

So seconds will be the reminder of dividing time by 60.

And so that's where again,

the reminder function is very helpful.

So the reminder operator actually.

So let's not print both of them here as a template literal.

So minutes and then colon the second.

Okay? And this is still far from being complete,

but let's take it step by step here.

So you'll see that this number here is now decreasing

very nicely and it started at one minute and 40 seconds.

And that's exactly what 40 seconds is. Right?

So let's do this again, actually,

and notice down there how it starts exactly at 1.40.

So you saw that and that 40 appeared

because that is the reminder of dividing 100 by 60.

So let's see it here in the console.

So when we divide 100 by 60 then this is the result.

But if we do 100, the reminder,

then we get 40, alright?

And that's because one times 60 plus 40 is then again, 100.

Alright?

Now here, we actually do not want then this value

after the coma, right?

We are only interested in, basically the integer.

And so let's cut off that decimal part

by saying math.trunk, all of this here.

And then we also want to pad this number here with a zero.

So for example,

right now we are at eight seconds or minus eight,

but we want to see 08, just like in a normal clock.

Okay? And for that, we can again use the pad function.

So let's convert this here to a string

so that we can then call a pad start,

which would have to length of two and pad it with zero

or just number is okay and then the same here.

And so now we should get a nice looking clock already.

Let's actually start at 120 seconds,

which is exactly two minutes.

So you see now it's a nicely looking

and nicely working clock, basically.

So a count on timer that starts counting from 120 seconds,

which is exactly two minutes.

And so that's why in the beginning, the seconds is zero.

Because the reminder of doing 1.20 by 60 is zero,

because two times 60 is exactly 120, right?

So two times 60 is 1.20

and therefore there is no reminder.

So there are no seconds in our case.

Okay?

But let's not do it with only 10 seconds

because then we get that negative

and we can then work with that.

So what we want to do here is as soon as we reach zero

seconds, we want to stop the timer and to lock out the user.

So if the time is zero,

then we need to stop the timer.

And we do that by using clear interval.

So remember in the last video we used clear timeout

to stop the set timeout function.

And now we can use clear interval to do the same

with the set interval timer.

Alright?

Now, in order to make this work,

remember, we need to give a name to this timer.

So let's simply call it timer.

And here we can use that variable to indeed stop that timer.

And then we want to log out the user,

which basically means setting the opacity

of this whole container here and back to zero.

So here in our login, we did the opposite.

So we set the opacity to 100 and now logging out the user

basically means setting it back to zero

and here this text content should also be set

to something else, so not the name of the current user.

So let's copy that.

And so here,

the welcome label should say login to get started,

which is basically also the default that we see right now.

Right?

And then the opacity back to zero.

And remember that usually when we first see the application,

all of this is actually invisible.

And let's do that here actually.

So get rid of this fake, always logged in.

So we did that before to test our code,

but now it's no longer necessary.

And so this is how the application is supposed to look like,

in the beginning.

So we logged in and now our timer down here is running.

And so let's just see what happens once it reaches zero.

And indeed we got logged out here.

Okay. So that works beautifully.

But let me log in again here so I can show you

something that happens and that we need to fix.

So as I log in,

it takes quite some time until something happens here.

Maybe you didn't catch that,

so let me try it again after we get logged out here.

So I will scroll down immediately and then I hit enter.

So you'll see it before, it was still at one second.

So it was the value that we had before.

And that happened because this entire function here

is only first executed after one second.

Right?

So this callback function that we passed into set interval

is not called immediately.

It will only get called the first time after one second.

But in fact,

we want to call this function also immediately.

Alright?

And so the trick to doing that

is to export this into a separate function,

then call it immediately and then also start calling it

every second using the set interval function.

So let me just show it to you.

So I cut the function here.

Let's put it here.

So we need to give it a name.

I'm calling it tick because that's a pretty common name

and now I put it here.

And so right now, everything is exactly the same as before.

But what I wanted to do is to also call this immediately.

And so this is how we do it.

And so now right away, this function gets called.

And then after that, every one second.

And so let's try it now again,

let me scroll down here

and you'll see this time, we didn't have that problem.

Now it's simply not counting down,

but that's because I did this small mistake here,

which you see is very common in development.

You will do this also all the time.

And well, now we didn't see at the beginning of the timer,

but believe me now it's actually working correctly.

However, you might've noticed that we still have a problem,

which is the fact that actually we get locked out

once this hits one second

and so watch closely now what happens when we reach one.

You saw that?

And so that's not what we want to happen.

This would only happen at zero seconds, not at one second.

And the problem here is that we decrease this time

by one second before checking for zero.

So basically the problem here is that in the duration here,

so in the call where the time is one, right?

So here it's gonna be one.

And then we decreased to zero and then we check for zero.

And so in this iteration where the time is initially one,

this part of the code still gets executed.

And again, because we increase that one second to zero

here, before this.

And so we need to put it after, of course.

And so now this part of the code here only gets triggered

if the time really is zero here in this whole function.

So now you will see that the logout will only really happen

after exactly 10 seconds.

So you saw it reached zero, zero,

and then we got logged out.

Great.

So let's increase this here a little bit

and then I will log in as this user.

So you'll see that it's running.

And now I will also log in as Jessica Davis,

just to see you yet another problem that we have.

So you see it's weirdly alternating

between these two numbers.

And the reason for that is that right now,

we have basically two timers running at the same time.

So one timer of Jonah's and one timer of Jessica.

And so that's not at all what we need, right?

That's a big problem right now.

So how can we fix this problem?

Well, basically what we can do

is that whenever we log a user in,

we check if there is already a timer running

and if so, then we stop that timer.

So I believe that is the best solution to this problem.

And so what I'm gonna do now is to return the timer

from this function so that we can then use it here

in this callback function of the login

and delete it in case that it exists.

So let me write that code actually,

and then it's gonna become a lot easier to understand.

So here, we will return to timer

and that's important because to clear the timer,

so to use the clear interval function,

we need the timer variable.

And so therefore I'm returning it here,

so let's then save it here.

So that's down here,

and so this is gonna be the timer.

Now we actually need this as a global variable.

So let me put that outside here,

so the current account and the timer.

And the reason for that is that we need this variable

to persist between different logins.

So otherwise, after this handler function here

would be ready, then the timer variable would disappear.

So that's the reason why we have current account out here,

and it's also the reason

why we need to keep the timer out here.

That's the only way in which we can then actually check

if it appears.

So timer and current account both need to be

in the parent scope of this function scope.

So let me show you what I mean.

So here I will then set the timer to the timer

that is returned here.

However, if there already is a timer,

I first need to clear it.

And so, let's do that.

So if there is already a timer,

then clear interval timer,

and that's it.

So let's think what happens when I log in first as Jonas.

So when I log in now there is gonna be no timer, right?

So in this situation there was no timer already.

Was it?

There wasn't because I just logged out for the first time

and so no timer variable was created.

But now since I did log in,

now timer is equal to that timer

that I just exported from this function

using the return keywords.

And so this timer now does exist.

And so when I know login as someone else,

so Jessica Davis for example,

then when the code reaches this line here,

then a timer will indeed exist.

And so then that timer is going to be cleared.

Okay?

And so now there is no problem anymore.

Okay? So now it's running smoothly without any problem.

And that of course, also works when the timer here

has a higher value, let's put it back to two minutes.

So I can now log in,

the timer starts running normally

and when I log in then as Jessica,

then the timer gets cleared and reset it basically

and it started again from two minutes.

Okay?

So all this might seem a little bit complicated,

I know, but it's all kind of a matter of thinking

about what we want our code to do.

So all we're doing here is to use all the tools

that we already know to basically achieve one goal

that we want to achieve,

which is in this case,

this timer here running and being reset it each time

that another user logs in.

Now, another functionality that we want our timers to have

is to basically reset once we do something in the account,

because remember the goal of this timer here

is to track the inactivity of the user.

So the time where the user doesn't do anything,

but if I do something,

let's say transfer money,

then we should not get logged out.

It should be reset it.

But as you saw, we still got logged out

even after doing that transfer, of course.

So what we need to do now is to also reset the timer

whenever the user does a transfer or requests a loan.

So these are the only two activities

that exist in our application.

And so these operations should always trigger the timer

to be reset.

Okay?

So let's go here to the transfer

and let's do it here at the end,

reset the timer.

So what does resetting the timer actually mean?

Well, all we need to do,

is to basically clear interval using the timer

that we already have and then start it again.

So clear interval and then the timer variable

and so now one more time,

it is important that this timer variable

is actually a global variable.

So a variable that's outside

of any of these handler functions.

So we define timer, remember out here,

because we didn't want it to be inside

of this handler function here.

And that was because we wanted this variable

to persist throughout multiple logins,

but now it's also important because we need it later

for other operations.

So inside other callback functions

and in particular in this one now.

So clear interval of that timer that was defined previously,

and then we simply start a new one.

So basically we then overwrite that initial timer

that we had before.

So start, log out timer.

And that's actually it.

So imagine that the timer was at one minute 30 seconds.

So when we do a transfer,

that timer is cleared and a new timer is started again

at two minutes.

Okay? And now finally the same for requesting alone.

So let's try that.

And now the timer is running down here.

Alright??

And now let's try to transfer something to J.D.

So the other user, let's say 100 and watch what happens

down here to the timer now.

And indeed it got reset it to two minutes.

At the same when we request a loan,

let's say 100

and then after the three seconds have passed,

then our loan got approved indeed

and our timer reset to two minutes.

Beautiful, great.

So our application is now actually finished

and feature complete.

Everything is working just as in our demonstration

and I think this was a great application

to teach you really a lot of different stuff in JavaScript.

So huge congratulations for finishing

this great application.

It's good to see that you made it to this point with me.

And I hope that you're really proud of this application

that you just built.

You can now show it to all your friends

and everyone that you're telling about your coding journey.

And I'm sure they will be just as happy as you are

about this amazing progress.

So once more, great job and well done.

And with that being said,

I hope to see you soon in the next section

where we're gonna build together

some features of a real website.

So UI components that you find commonly in normal websites,

such as sliders or pop up windows.

So that's gonna be really exciting.

So I hope to see you there soon.