Narrator: 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.