WEBVTT 1 00:00:01.310 --> 00:00:03.210 Welcome back 2 00:00:03.210 --> 00:00:07.200 and this is gonna be the last part of this project. 3 00:00:07.200 --> 00:00:08.873 So we're almost done here. 4 00:00:09.750 --> 00:00:13.380 Now for security reasons, real bank applications 5 00:00:13.380 --> 00:00:17.240 will log out users after some inactive time. 6 00:00:17.240 --> 00:00:21.380 For example, after five minutes without doing anything. 7 00:00:21.380 --> 00:00:24.290 And that's what we will implement in this video 8 00:00:24.290 --> 00:00:26.543 using the set interval timer. 9 00:00:28.410 --> 00:00:33.020 And let's start with one final look at our flow chart. 10 00:00:33.020 --> 00:00:36.870 So the timer appears in multiple places here. 11 00:00:36.870 --> 00:00:39.930 And the first one is right here. 12 00:00:39.930 --> 00:00:42.260 So whenever the user logs in 13 00:00:42.260 --> 00:00:46.790 the lockout timer will start or restart, all right? 14 00:00:46.790 --> 00:00:51.000 And then, as soon as the log out timer expires, 15 00:00:51.000 --> 00:00:54.150 which will be after five or 10 minutes, 16 00:00:54.150 --> 00:00:58.270 then we want to lock the user out now. Alright? 17 00:00:58.270 --> 00:01:01.350 So basically that's what we will do with the timer, 18 00:01:01.350 --> 00:01:03.543 but let's start very simple. 19 00:01:04.750 --> 00:01:07.333 So the place where we want the timer 20 00:01:07.333 --> 00:01:12.210 is here in this function about the login. Okay? 21 00:01:12.210 --> 00:01:16.700 So this here is the handler function that handles the login. 22 00:01:16.700 --> 00:01:18.923 And so our timer will start here. 23 00:01:20.190 --> 00:01:24.477 Now we already have plenty of code here, as you see, right? 24 00:01:25.880 --> 00:01:29.010 And therefore let's actually create a separate function, 25 00:01:29.010 --> 00:01:31.653 which will start this log out timer. 26 00:01:33.070 --> 00:01:33.903 Alright? 27 00:01:37.660 --> 00:01:42.290 So let's say start, log out timer 28 00:01:45.660 --> 00:01:48.590 and this function doesn't need any arguments. 29 00:01:48.590 --> 00:01:51.160 All it does is to basically export 30 00:01:51.160 --> 00:01:54.920 some functionality into an external function. 31 00:01:54.920 --> 00:01:57.800 So let's write some pseudo code here, 32 00:01:57.800 --> 00:02:01.270 basically by writing some comments to say what exactly 33 00:02:01.270 --> 00:02:03.210 we are gonna do here. 34 00:02:03.210 --> 00:02:05.160 So we will start by setting the time 35 00:02:06.760 --> 00:02:09.323 to let's say five minutes, okay? 36 00:02:13.000 --> 00:02:15.940 Then we want to call the timer every second 37 00:02:21.490 --> 00:02:23.743 then in each call, 38 00:02:24.720 --> 00:02:26.343 in each callback call, 39 00:02:27.500 --> 00:02:29.320 print the remaining time 40 00:02:32.370 --> 00:02:33.803 to the user interface. 41 00:02:36.533 --> 00:02:39.170 And then when the time is at zero, 42 00:02:39.170 --> 00:02:41.763 so after the timer basically expired. 43 00:02:43.470 --> 00:02:45.783 So when we reach zero seconds, 44 00:02:47.330 --> 00:02:51.720 stop timer and log out user. 45 00:02:51.720 --> 00:02:55.330 Okay, and to make this a bit easier to visualize, 46 00:02:55.330 --> 00:02:57.963 let's go again here to our demo application. 47 00:03:00.640 --> 00:03:04.030 And so the timer that I mean is this one here, 48 00:03:04.030 --> 00:03:06.710 which actually starts at 10 minutes 49 00:03:06.710 --> 00:03:08.570 and you see that after each second, 50 00:03:08.570 --> 00:03:11.543 a new time is basically printed here. 51 00:03:12.710 --> 00:03:16.070 Alright, and I'm not gonna wait for 10 minutes now, 52 00:03:16.070 --> 00:03:18.150 but when this reaches zero, 53 00:03:18.150 --> 00:03:21.383 then the user will of course be logged out. 54 00:03:23.000 --> 00:03:23.833 Okay? 55 00:03:27.360 --> 00:03:32.300 So let's basically do everything that we described here. 56 00:03:32.300 --> 00:03:37.300 So I'm setting the time, for now just to 10 seconds. 57 00:03:37.750 --> 00:03:40.400 Okay? Just so we see what's going on, 58 00:03:40.400 --> 00:03:43.480 or actually let's say 100 seconds, 59 00:03:43.480 --> 00:03:45.793 so that we have actually more than one minute, 60 00:03:46.930 --> 00:03:50.310 then we want to call the timer every second. 61 00:03:50.310 --> 00:03:53.000 So basically what this means is to use 62 00:03:53.000 --> 00:03:54.260 the set interval function 63 00:03:57.640 --> 00:03:59.840 and then pass in a callback function 64 00:03:59.840 --> 00:04:03.123 and this callback will be executed every second. 65 00:04:04.910 --> 00:04:09.143 And so 1000 milliseconds here, alright? 66 00:04:10.000 --> 00:04:13.130 Then each time that this function is called, 67 00:04:13.130 --> 00:04:15.783 print the remaining time to the user interface. 68 00:04:17.100 --> 00:04:18.760 Not in this one here as well. 69 00:04:18.760 --> 00:04:20.780 So when we're at zero seconds, 70 00:04:20.780 --> 00:04:22.903 stop the timer and log the user out. 71 00:04:24.520 --> 00:04:28.720 So we want to print the time here to this label, 72 00:04:28.720 --> 00:04:30.553 which is called label timer. 73 00:04:33.930 --> 00:04:36.660 So let me just show it to you here in our elements 74 00:04:36.660 --> 00:04:38.690 that I preselected. 75 00:04:38.690 --> 00:04:42.420 So label timer is the element with the selector 76 00:04:42.420 --> 00:04:44.283 of simply timer. 77 00:04:45.470 --> 00:04:46.303 Okay. 78 00:04:48.950 --> 00:04:51.140 So let's go. 79 00:04:51.140 --> 00:04:56.140 So labeledtimer.textcontent is equal to the time 80 00:04:58.160 --> 00:05:00.290 and so that's this here. 81 00:05:00.290 --> 00:05:03.163 So I forgot to write the name of the variable actually. 82 00:05:04.330 --> 00:05:06.120 And now to make this actually work, 83 00:05:06.120 --> 00:05:08.630 we also need to remove one second 84 00:05:08.630 --> 00:05:11.683 in each of these function calls, right? 85 00:05:13.180 --> 00:05:15.263 So decrease one second. 86 00:05:16.792 --> 00:05:19.800 And so time equal time minus one, 87 00:05:19.800 --> 00:05:24.800 which is essentially the same as saying time minus minus. 88 00:05:26.070 --> 00:05:27.670 Alright? 89 00:05:27.670 --> 00:05:30.200 So this is the logic of this timer. 90 00:05:30.200 --> 00:05:32.990 We start with a certain number of seconds, 91 00:05:32.990 --> 00:05:34.930 right now that's 100 92 00:05:34.930 --> 00:05:37.460 and then each time that his callback function here 93 00:05:37.460 --> 00:05:41.570 is called, we remove one second from that. 94 00:05:41.570 --> 00:05:45.260 Okay? And so this is called every second 95 00:05:45.260 --> 00:05:48.870 and so basically we will end up with a timer 96 00:05:48.870 --> 00:05:53.710 which shows the current number of seconds, each second. 97 00:05:53.710 --> 00:05:54.770 Okay? 98 00:05:54.770 --> 00:05:58.110 And now all we need to do is to then call this function 99 00:05:58.110 --> 00:05:59.583 here on login. 100 00:06:02.610 --> 00:06:07.610 So well, let's do that here before updating the UI. 101 00:06:10.210 --> 00:06:12.783 So start, log out timer. 102 00:06:14.530 --> 00:06:17.800 And now let's quickly log in here 103 00:06:20.230 --> 00:06:24.573 and indeed you see this number here decreasing now. 104 00:06:28.110 --> 00:06:29.210 Okay? 105 00:06:29.210 --> 00:06:33.460 So hopefully that logic makes sense 106 00:06:33.460 --> 00:06:38.040 of decreasing one second, every second. 107 00:06:38.040 --> 00:06:39.213 Now, where is that? 108 00:06:40.100 --> 00:06:42.770 We have too many functions here, I guess. 109 00:06:42.770 --> 00:06:44.033 Now here we go. 110 00:06:45.580 --> 00:06:49.410 So again, the logic here is to decrease the timer 111 00:06:49.410 --> 00:06:51.827 by one second, every second. 112 00:06:51.827 --> 00:06:55.010 And so therefore we get this number here 113 00:06:55.010 --> 00:06:59.100 going down by exactly one each second. 114 00:06:59.100 --> 00:07:00.220 Alright? 115 00:07:00.220 --> 00:07:03.630 Now we don't really want to see only the seconds. 116 00:07:03.630 --> 00:07:05.950 We want to see the minutes as well. 117 00:07:05.950 --> 00:07:08.450 So basically we need to convert 118 00:07:08.450 --> 00:07:12.723 this simple number of seconds to minutes and seconds. 119 00:07:13.830 --> 00:07:14.663 Alright? 120 00:07:16.270 --> 00:07:17.963 So let's do that here as well. 121 00:07:20.890 --> 00:07:25.890 So let's say the minutes is the current time 122 00:07:25.910 --> 00:07:28.690 divided by 60. 123 00:07:28.690 --> 00:07:32.253 So that's the easiest way basically off writing it. 124 00:07:34.940 --> 00:07:36.290 So it's not gonna be correct, 125 00:07:36.290 --> 00:07:38.733 but it's gonna show us what we need to do next. 126 00:07:39.840 --> 00:07:42.460 Now, here we are also seeing already what happens 127 00:07:42.460 --> 00:07:47.070 with this timer after a certain number of seconds. 128 00:07:47.070 --> 00:07:50.480 So indeed, as soon as the time hits zero, 129 00:07:50.480 --> 00:07:53.040 it will not simply stop, right? 130 00:07:53.040 --> 00:07:55.700 We're not telling the timer anywhere to stop. 131 00:07:55.700 --> 00:07:59.650 And so it will simply continue and become negative. 132 00:07:59.650 --> 00:08:03.670 And so that's what we will have to implement in down here, 133 00:08:03.670 --> 00:08:05.420 but let's leave that for later. 134 00:08:05.420 --> 00:08:07.800 For now, we just want to display the number here 135 00:08:07.800 --> 00:08:09.343 in minutes and seconds, 136 00:08:10.300 --> 00:08:12.933 but for now I will just show you the minutes. 137 00:08:16.260 --> 00:08:18.493 Just to show you what we need to do next. 138 00:08:20.550 --> 00:08:25.550 So you see that we have one minute .6 or .5 something. 139 00:08:27.000 --> 00:08:29.280 So it's decreasing every second, 140 00:08:29.280 --> 00:08:33.570 but this number here after the comma or after this period, 141 00:08:33.570 --> 00:08:35.733 doesn't really make sense. Right? 142 00:08:36.920 --> 00:08:40.970 So basically what we want to do is to take whatever remains 143 00:08:40.970 --> 00:08:43.840 of dividing the time by 60, 144 00:08:43.840 --> 00:08:46.170 because that will be our seconds. 145 00:08:46.170 --> 00:08:49.323 So let me show that to you as well. 146 00:08:50.410 --> 00:08:55.410 So seconds will be the reminder of dividing time by 60. 147 00:08:56.940 --> 00:08:58.240 And so that's where again, 148 00:08:58.240 --> 00:09:01.790 the reminder function is very helpful. 149 00:09:01.790 --> 00:09:05.290 So the reminder operator actually. 150 00:09:05.290 --> 00:09:08.963 So let's not print both of them here as a template literal. 151 00:09:10.870 --> 00:09:14.593 So minutes and then colon the second. 152 00:09:16.160 --> 00:09:20.150 Okay? And this is still far from being complete, 153 00:09:20.150 --> 00:09:22.763 but let's take it step by step here. 154 00:09:26.380 --> 00:09:29.270 So you'll see that this number here is now decreasing 155 00:09:29.270 --> 00:09:33.640 very nicely and it started at one minute and 40 seconds. 156 00:09:33.640 --> 00:09:36.943 And that's exactly what 40 seconds is. Right? 157 00:09:38.090 --> 00:09:40.163 So let's do this again, actually, 158 00:09:43.750 --> 00:09:47.793 and notice down there how it starts exactly at 1.40. 159 00:09:48.785 --> 00:09:52.220 So you saw that and that 40 appeared 160 00:09:52.220 --> 00:09:57.220 because that is the reminder of dividing 100 by 60. 161 00:09:57.530 --> 00:09:59.330 So let's see it here in the console. 162 00:10:00.540 --> 00:10:04.760 So when we divide 100 by 60 then this is the result. 163 00:10:04.760 --> 00:10:08.053 But if we do 100, the reminder, 164 00:10:09.950 --> 00:10:12.667 then we get 40, alright? 165 00:10:12.667 --> 00:10:17.433 And that's because one times 60 plus 40 is then again, 100. 166 00:10:19.010 --> 00:10:19.843 Alright? 167 00:10:20.830 --> 00:10:24.730 Now here, we actually do not want then this value 168 00:10:24.730 --> 00:10:26.410 after the coma, right? 169 00:10:26.410 --> 00:10:30.480 We are only interested in, basically the integer. 170 00:10:30.480 --> 00:10:33.930 And so let's cut off that decimal part 171 00:10:33.930 --> 00:10:38.393 by saying math.trunk, all of this here. 172 00:10:41.381 --> 00:10:45.800 And then we also want to pad this number here with a zero. 173 00:10:45.800 --> 00:10:46.633 So for example, 174 00:10:46.633 --> 00:10:49.990 right now we are at eight seconds or minus eight, 175 00:10:49.990 --> 00:10:53.983 but we want to see 08, just like in a normal clock. 176 00:10:55.070 --> 00:11:00.070 Okay? And for that, we can again use the pad function. 177 00:11:00.520 --> 00:11:02.420 So let's convert this here to a string 178 00:11:03.780 --> 00:11:07.823 so that we can then call a pad start, 179 00:11:09.600 --> 00:11:14.300 which would have to length of two and pad it with zero 180 00:11:15.300 --> 00:11:18.283 or just number is okay and then the same here. 181 00:11:23.800 --> 00:11:28.563 And so now we should get a nice looking clock already. 182 00:11:30.230 --> 00:11:32.860 Let's actually start at 120 seconds, 183 00:11:32.860 --> 00:11:35.453 which is exactly two minutes. 184 00:11:42.210 --> 00:11:45.600 So you see now it's a nicely looking 185 00:11:45.600 --> 00:11:48.410 and nicely working clock, basically. 186 00:11:48.410 --> 00:11:53.410 So a count on timer that starts counting from 120 seconds, 187 00:11:53.560 --> 00:11:56.300 which is exactly two minutes. 188 00:11:56.300 --> 00:11:59.760 And so that's why in the beginning, the seconds is zero. 189 00:11:59.760 --> 00:12:04.580 Because the reminder of doing 1.20 by 60 is zero, 190 00:12:06.320 --> 00:12:10.507 because two times 60 is exactly 120, right? 191 00:12:13.010 --> 00:12:15.190 So two times 60 is 1.20 192 00:12:15.190 --> 00:12:17.360 and therefore there is no reminder. 193 00:12:17.360 --> 00:12:21.150 So there are no seconds in our case. 194 00:12:21.150 --> 00:12:22.460 Okay? 195 00:12:22.460 --> 00:12:24.880 But let's not do it with only 10 seconds 196 00:12:26.020 --> 00:12:28.592 because then we get that negative 197 00:12:28.592 --> 00:12:30.813 and we can then work with that. 198 00:12:31.680 --> 00:12:35.260 So what we want to do here is as soon as we reach zero 199 00:12:35.260 --> 00:12:39.403 seconds, we want to stop the timer and to lock out the user. 200 00:12:42.620 --> 00:12:46.393 So if the time is zero, 201 00:12:49.400 --> 00:12:51.860 then we need to stop the timer. 202 00:12:51.860 --> 00:12:55.650 And we do that by using clear interval. 203 00:12:55.650 --> 00:12:58.730 So remember in the last video we used clear timeout 204 00:12:58.730 --> 00:13:01.860 to stop the set timeout function. 205 00:13:01.860 --> 00:13:04.830 And now we can use clear interval to do the same 206 00:13:04.830 --> 00:13:07.210 with the set interval timer. 207 00:13:07.210 --> 00:13:08.490 Alright? 208 00:13:08.490 --> 00:13:09.870 Now, in order to make this work, 209 00:13:09.870 --> 00:13:13.793 remember, we need to give a name to this timer. 210 00:13:15.310 --> 00:13:17.513 So let's simply call it timer. 211 00:13:20.246 --> 00:13:24.020 And here we can use that variable to indeed stop that timer. 212 00:13:25.890 --> 00:13:27.980 And then we want to log out the user, 213 00:13:27.980 --> 00:13:30.980 which basically means setting the opacity 214 00:13:30.980 --> 00:13:34.173 of this whole container here and back to zero. 215 00:13:35.080 --> 00:13:37.593 So here in our login, we did the opposite. 216 00:13:38.780 --> 00:13:43.420 So we set the opacity to 100 and now logging out the user 217 00:13:43.420 --> 00:13:46.490 basically means setting it back to zero 218 00:13:46.490 --> 00:13:50.370 and here this text content should also be set 219 00:13:51.240 --> 00:13:56.240 to something else, so not the name of the current user. 220 00:13:57.560 --> 00:13:58.743 So let's copy that. 221 00:14:01.570 --> 00:14:03.070 And so here, 222 00:14:03.070 --> 00:14:08.070 the welcome label should say login to get started, 223 00:14:10.090 --> 00:14:13.970 which is basically also the default that we see right now. 224 00:14:13.970 --> 00:14:14.960 Right? 225 00:14:14.960 --> 00:14:17.640 And then the opacity back to zero. 226 00:14:17.640 --> 00:14:21.060 And remember that usually when we first see the application, 227 00:14:21.060 --> 00:14:23.823 all of this is actually invisible. 228 00:14:24.850 --> 00:14:27.170 And let's do that here actually. 229 00:14:27.170 --> 00:14:31.370 So get rid of this fake, always logged in. 230 00:14:31.370 --> 00:14:33.810 So we did that before to test our code, 231 00:14:33.810 --> 00:14:35.513 but now it's no longer necessary. 232 00:14:36.860 --> 00:14:39.440 And so this is how the application is supposed to look like, 233 00:14:39.440 --> 00:14:40.290 in the beginning. 234 00:14:43.260 --> 00:14:47.690 So we logged in and now our timer down here is running. 235 00:14:47.690 --> 00:14:51.423 And so let's just see what happens once it reaches zero. 236 00:14:53.630 --> 00:14:56.760 And indeed we got logged out here. 237 00:14:56.760 --> 00:14:59.350 Okay. So that works beautifully. 238 00:14:59.350 --> 00:15:02.020 But let me log in again here so I can show you 239 00:15:02.020 --> 00:15:05.520 something that happens and that we need to fix. 240 00:15:05.520 --> 00:15:07.340 So as I log in, 241 00:15:07.340 --> 00:15:10.713 it takes quite some time until something happens here. 242 00:15:13.010 --> 00:15:14.660 Maybe you didn't catch that, 243 00:15:14.660 --> 00:15:17.393 so let me try it again after we get logged out here. 244 00:15:21.160 --> 00:15:24.083 So I will scroll down immediately and then I hit enter. 245 00:15:26.260 --> 00:15:30.990 So you'll see it before, it was still at one second. 246 00:15:30.990 --> 00:15:33.650 So it was the value that we had before. 247 00:15:33.650 --> 00:15:37.070 And that happened because this entire function here 248 00:15:37.070 --> 00:15:40.960 is only first executed after one second. 249 00:15:40.960 --> 00:15:42.150 Right? 250 00:15:42.150 --> 00:15:45.900 So this callback function that we passed into set interval 251 00:15:45.900 --> 00:15:48.400 is not called immediately. 252 00:15:48.400 --> 00:15:52.410 It will only get called the first time after one second. 253 00:15:52.410 --> 00:15:53.390 But in fact, 254 00:15:53.390 --> 00:15:56.890 we want to call this function also immediately. 255 00:15:56.890 --> 00:15:57.860 Alright? 256 00:15:57.860 --> 00:15:59.690 And so the trick to doing that 257 00:15:59.690 --> 00:16:02.300 is to export this into a separate function, 258 00:16:02.300 --> 00:16:06.190 then call it immediately and then also start calling it 259 00:16:06.190 --> 00:16:09.033 every second using the set interval function. 260 00:16:10.220 --> 00:16:11.940 So let me just show it to you. 261 00:16:11.940 --> 00:16:15.203 So I cut the function here. 262 00:16:17.360 --> 00:16:18.553 Let's put it here. 263 00:16:22.949 --> 00:16:24.810 So we need to give it a name. 264 00:16:24.810 --> 00:16:28.800 I'm calling it tick because that's a pretty common name 265 00:16:29.680 --> 00:16:31.620 and now I put it here. 266 00:16:31.620 --> 00:16:35.520 And so right now, everything is exactly the same as before. 267 00:16:35.520 --> 00:16:40.170 But what I wanted to do is to also call this immediately. 268 00:16:40.170 --> 00:16:42.150 And so this is how we do it. 269 00:16:42.150 --> 00:16:45.510 And so now right away, this function gets called. 270 00:16:45.510 --> 00:16:48.293 And then after that, every one second. 271 00:16:49.860 --> 00:16:51.453 And so let's try it now again, 272 00:16:54.520 --> 00:16:55.680 let me scroll down here 273 00:16:57.290 --> 00:17:00.600 and you'll see this time, we didn't have that problem. 274 00:17:00.600 --> 00:17:02.600 Now it's simply not counting down, 275 00:17:02.600 --> 00:17:07.053 but that's because I did this small mistake here, 276 00:17:08.040 --> 00:17:11.750 which you see is very common in development. 277 00:17:11.750 --> 00:17:13.823 You will do this also all the time. 278 00:17:14.770 --> 00:17:18.930 And well, now we didn't see at the beginning of the timer, 279 00:17:18.930 --> 00:17:21.833 but believe me now it's actually working correctly. 280 00:17:22.710 --> 00:17:26.580 However, you might've noticed that we still have a problem, 281 00:17:26.580 --> 00:17:31.310 which is the fact that actually we get locked out 282 00:17:31.310 --> 00:17:33.000 once this hits one second 283 00:17:33.900 --> 00:17:37.733 and so watch closely now what happens when we reach one. 284 00:17:38.930 --> 00:17:40.400 You saw that? 285 00:17:40.400 --> 00:17:43.100 And so that's not what we want to happen. 286 00:17:43.100 --> 00:17:47.210 This would only happen at zero seconds, not at one second. 287 00:17:47.210 --> 00:17:50.870 And the problem here is that we decrease this time 288 00:17:50.870 --> 00:17:54.660 by one second before checking for zero. 289 00:17:54.660 --> 00:17:58.080 So basically the problem here is that in the duration here, 290 00:17:58.080 --> 00:18:02.570 so in the call where the time is one, right? 291 00:18:02.570 --> 00:18:04.500 So here it's gonna be one. 292 00:18:04.500 --> 00:18:07.503 And then we decreased to zero and then we check for zero. 293 00:18:08.510 --> 00:18:12.230 And so in this iteration where the time is initially one, 294 00:18:12.230 --> 00:18:15.000 this part of the code still gets executed. 295 00:18:15.000 --> 00:18:18.900 And again, because we increase that one second to zero 296 00:18:18.900 --> 00:18:20.880 here, before this. 297 00:18:20.880 --> 00:18:23.423 And so we need to put it after, of course. 298 00:18:27.080 --> 00:18:30.150 And so now this part of the code here only gets triggered 299 00:18:30.150 --> 00:18:33.803 if the time really is zero here in this whole function. 300 00:18:35.890 --> 00:18:40.890 So now you will see that the logout will only really happen 301 00:18:41.010 --> 00:18:42.993 after exactly 10 seconds. 302 00:18:49.510 --> 00:18:52.310 So you saw it reached zero, zero, 303 00:18:52.310 --> 00:18:54.313 and then we got logged out. 304 00:18:55.500 --> 00:18:56.333 Great. 305 00:18:57.270 --> 00:18:59.270 So let's increase this here a little bit 306 00:19:01.090 --> 00:19:04.623 and then I will log in as this user. 307 00:19:07.220 --> 00:19:08.840 So you'll see that it's running. 308 00:19:08.840 --> 00:19:11.853 And now I will also log in as Jessica Davis, 309 00:19:13.290 --> 00:19:16.033 just to see you yet another problem that we have. 310 00:19:17.220 --> 00:19:20.130 So you see it's weirdly alternating 311 00:19:20.130 --> 00:19:22.750 between these two numbers. 312 00:19:22.750 --> 00:19:25.530 And the reason for that is that right now, 313 00:19:25.530 --> 00:19:29.420 we have basically two timers running at the same time. 314 00:19:29.420 --> 00:19:33.920 So one timer of Jonah's and one timer of Jessica. 315 00:19:33.920 --> 00:19:37.590 And so that's not at all what we need, right? 316 00:19:37.590 --> 00:19:39.860 That's a big problem right now. 317 00:19:39.860 --> 00:19:42.690 So how can we fix this problem? 318 00:19:42.690 --> 00:19:45.020 Well, basically what we can do 319 00:19:45.020 --> 00:19:48.030 is that whenever we log a user in, 320 00:19:48.030 --> 00:19:50.860 we check if there is already a timer running 321 00:19:50.860 --> 00:19:53.563 and if so, then we stop that timer. 322 00:19:54.460 --> 00:19:57.477 So I believe that is the best solution to this problem. 323 00:19:57.477 --> 00:20:01.170 And so what I'm gonna do now is to return the timer 324 00:20:01.170 --> 00:20:05.740 from this function so that we can then use it here 325 00:20:05.740 --> 00:20:09.930 in this callback function of the login 326 00:20:09.930 --> 00:20:12.513 and delete it in case that it exists. 327 00:20:13.670 --> 00:20:16.360 So let me write that code actually, 328 00:20:16.360 --> 00:20:19.570 and then it's gonna become a lot easier to understand. 329 00:20:19.570 --> 00:20:22.850 So here, we will return to timer 330 00:20:24.560 --> 00:20:28.130 and that's important because to clear the timer, 331 00:20:28.130 --> 00:20:30.700 so to use the clear interval function, 332 00:20:30.700 --> 00:20:33.010 we need the timer variable. 333 00:20:33.010 --> 00:20:35.003 And so therefore I'm returning it here, 334 00:20:37.290 --> 00:20:38.853 so let's then save it here. 335 00:20:40.480 --> 00:20:42.370 So that's down here, 336 00:20:42.370 --> 00:20:45.080 and so this is gonna be the timer. 337 00:20:45.080 --> 00:20:47.683 Now we actually need this as a global variable. 338 00:20:49.320 --> 00:20:51.173 So let me put that outside here, 339 00:20:52.100 --> 00:20:55.857 so the current account and the timer. 340 00:20:55.857 --> 00:20:59.120 And the reason for that is that we need this variable 341 00:20:59.120 --> 00:21:02.090 to persist between different logins. 342 00:21:02.090 --> 00:21:04.910 So otherwise, after this handler function here 343 00:21:04.910 --> 00:21:08.860 would be ready, then the timer variable would disappear. 344 00:21:08.860 --> 00:21:12.230 So that's the reason why we have current account out here, 345 00:21:12.230 --> 00:21:13.220 and it's also the reason 346 00:21:13.220 --> 00:21:15.950 why we need to keep the timer out here. 347 00:21:15.950 --> 00:21:19.070 That's the only way in which we can then actually check 348 00:21:19.070 --> 00:21:20.660 if it appears. 349 00:21:20.660 --> 00:21:23.740 So timer and current account both need to be 350 00:21:23.740 --> 00:21:27.103 in the parent scope of this function scope. 351 00:21:28.490 --> 00:21:30.040 So let me show you what I mean. 352 00:21:31.510 --> 00:21:34.970 So here I will then set the timer to the timer 353 00:21:34.970 --> 00:21:37.210 that is returned here. 354 00:21:37.210 --> 00:21:39.430 However, if there already is a timer, 355 00:21:39.430 --> 00:21:41.593 I first need to clear it. 356 00:21:42.490 --> 00:21:45.473 And so, let's do that. 357 00:21:46.360 --> 00:21:48.493 So if there is already a timer, 358 00:21:49.810 --> 00:21:54.283 then clear interval timer, 359 00:21:55.380 --> 00:21:56.800 and that's it. 360 00:21:56.800 --> 00:22:01.740 So let's think what happens when I log in first as Jonas. 361 00:22:01.740 --> 00:22:06.253 So when I log in now there is gonna be no timer, right? 362 00:22:09.630 --> 00:22:12.700 So in this situation there was no timer already. 363 00:22:12.700 --> 00:22:14.280 Was it? 364 00:22:14.280 --> 00:22:18.390 There wasn't because I just logged out for the first time 365 00:22:18.390 --> 00:22:21.940 and so no timer variable was created. 366 00:22:21.940 --> 00:22:24.020 But now since I did log in, 367 00:22:24.020 --> 00:22:26.700 now timer is equal to that timer 368 00:22:26.700 --> 00:22:29.320 that I just exported from this function 369 00:22:29.320 --> 00:22:31.350 using the return keywords. 370 00:22:31.350 --> 00:22:34.180 And so this timer now does exist. 371 00:22:34.180 --> 00:22:36.523 And so when I know login as someone else, 372 00:22:37.510 --> 00:22:40.160 so Jessica Davis for example, 373 00:22:40.160 --> 00:22:43.760 then when the code reaches this line here, 374 00:22:43.760 --> 00:22:46.300 then a timer will indeed exist. 375 00:22:46.300 --> 00:22:48.653 And so then that timer is going to be cleared. 376 00:22:49.820 --> 00:22:50.653 Okay? 377 00:22:52.730 --> 00:22:54.963 And so now there is no problem anymore. 378 00:22:57.240 --> 00:23:00.573 Okay? So now it's running smoothly without any problem. 379 00:23:02.620 --> 00:23:05.790 And that of course, also works when the timer here 380 00:23:05.790 --> 00:23:10.323 has a higher value, let's put it back to two minutes. 381 00:23:13.100 --> 00:23:14.453 So I can now log in, 382 00:23:16.250 --> 00:23:18.770 the timer starts running normally 383 00:23:18.770 --> 00:23:22.000 and when I log in then as Jessica, 384 00:23:22.000 --> 00:23:25.800 then the timer gets cleared and reset it basically 385 00:23:25.800 --> 00:23:28.513 and it started again from two minutes. 386 00:23:30.580 --> 00:23:31.413 Okay? 387 00:23:32.310 --> 00:23:36.130 So all this might seem a little bit complicated, 388 00:23:36.130 --> 00:23:39.870 I know, but it's all kind of a matter of thinking 389 00:23:39.870 --> 00:23:43.050 about what we want our code to do. 390 00:23:43.050 --> 00:23:45.940 So all we're doing here is to use all the tools 391 00:23:45.940 --> 00:23:49.860 that we already know to basically achieve one goal 392 00:23:49.860 --> 00:23:51.450 that we want to achieve, 393 00:23:51.450 --> 00:23:52.640 which is in this case, 394 00:23:52.640 --> 00:23:56.310 this timer here running and being reset it each time 395 00:23:56.310 --> 00:23:58.700 that another user logs in. 396 00:23:58.700 --> 00:24:02.270 Now, another functionality that we want our timers to have 397 00:24:02.270 --> 00:24:06.910 is to basically reset once we do something in the account, 398 00:24:06.910 --> 00:24:10.080 because remember the goal of this timer here 399 00:24:10.080 --> 00:24:13.400 is to track the inactivity of the user. 400 00:24:13.400 --> 00:24:16.360 So the time where the user doesn't do anything, 401 00:24:16.360 --> 00:24:17.563 but if I do something, 402 00:24:18.520 --> 00:24:20.800 let's say transfer money, 403 00:24:20.800 --> 00:24:23.160 then we should not get logged out. 404 00:24:23.160 --> 00:24:25.180 It should be reset it. 405 00:24:25.180 --> 00:24:28.650 But as you saw, we still got logged out 406 00:24:28.650 --> 00:24:31.660 even after doing that transfer, of course. 407 00:24:31.660 --> 00:24:35.210 So what we need to do now is to also reset the timer 408 00:24:35.210 --> 00:24:39.640 whenever the user does a transfer or requests a loan. 409 00:24:39.640 --> 00:24:41.670 So these are the only two activities 410 00:24:41.670 --> 00:24:43.790 that exist in our application. 411 00:24:43.790 --> 00:24:46.890 And so these operations should always trigger the timer 412 00:24:46.890 --> 00:24:48.440 to be reset. 413 00:24:48.440 --> 00:24:49.273 Okay? 414 00:24:50.400 --> 00:24:52.810 So let's go here to the transfer 415 00:24:55.280 --> 00:24:56.880 and let's do it here at the end, 416 00:24:57.870 --> 00:24:59.223 reset the timer. 417 00:25:01.290 --> 00:25:05.100 So what does resetting the timer actually mean? 418 00:25:05.100 --> 00:25:07.100 Well, all we need to do, 419 00:25:07.100 --> 00:25:10.700 is to basically clear interval using the timer 420 00:25:10.700 --> 00:25:14.110 that we already have and then start it again. 421 00:25:14.110 --> 00:25:18.800 So clear interval and then the timer variable 422 00:25:18.800 --> 00:25:20.170 and so now one more time, 423 00:25:20.170 --> 00:25:22.950 it is important that this timer variable 424 00:25:22.950 --> 00:25:25.500 is actually a global variable. 425 00:25:25.500 --> 00:25:27.100 So a variable that's outside 426 00:25:28.180 --> 00:25:30.043 of any of these handler functions. 427 00:25:32.090 --> 00:25:35.220 So we define timer, remember out here, 428 00:25:35.220 --> 00:25:37.390 because we didn't want it to be inside 429 00:25:37.390 --> 00:25:39.433 of this handler function here. 430 00:25:40.581 --> 00:25:43.690 And that was because we wanted this variable 431 00:25:43.690 --> 00:25:46.810 to persist throughout multiple logins, 432 00:25:46.810 --> 00:25:49.820 but now it's also important because we need it later 433 00:25:49.820 --> 00:25:51.520 for other operations. 434 00:25:51.520 --> 00:25:53.770 So inside other callback functions 435 00:25:55.550 --> 00:25:58.010 and in particular in this one now. 436 00:25:58.010 --> 00:26:02.600 So clear interval of that timer that was defined previously, 437 00:26:02.600 --> 00:26:04.350 and then we simply start a new one. 438 00:26:06.350 --> 00:26:09.263 So basically we then overwrite that initial timer 439 00:26:09.263 --> 00:26:10.633 that we had before. 440 00:26:11.620 --> 00:26:13.823 So start, log out timer. 441 00:26:16.101 --> 00:26:17.620 And that's actually it. 442 00:26:17.620 --> 00:26:22.090 So imagine that the timer was at one minute 30 seconds. 443 00:26:22.090 --> 00:26:23.930 So when we do a transfer, 444 00:26:23.930 --> 00:26:28.020 that timer is cleared and a new timer is started again 445 00:26:28.020 --> 00:26:29.143 at two minutes. 446 00:26:31.870 --> 00:26:36.870 Okay? And now finally the same for requesting alone. 447 00:26:39.720 --> 00:26:40.843 So let's try that. 448 00:26:43.390 --> 00:26:45.913 And now the timer is running down here. 449 00:26:47.300 --> 00:26:48.260 Alright?? 450 00:26:48.260 --> 00:26:52.220 And now let's try to transfer something to J.D. 451 00:26:52.220 --> 00:26:56.840 So the other user, let's say 100 and watch what happens 452 00:26:56.840 --> 00:26:58.873 down here to the timer now. 453 00:27:00.510 --> 00:27:04.703 And indeed it got reset it to two minutes. 454 00:27:05.860 --> 00:27:08.550 At the same when we request a loan, 455 00:27:08.550 --> 00:27:09.590 let's say 100 456 00:27:11.460 --> 00:27:14.050 and then after the three seconds have passed, 457 00:27:14.050 --> 00:27:16.210 then our loan got approved indeed 458 00:27:16.210 --> 00:27:18.943 and our timer reset to two minutes. 459 00:27:20.180 --> 00:27:22.250 Beautiful, great. 460 00:27:22.250 --> 00:27:25.970 So our application is now actually finished 461 00:27:25.970 --> 00:27:27.990 and feature complete. 462 00:27:27.990 --> 00:27:31.410 Everything is working just as in our demonstration 463 00:27:31.410 --> 00:27:33.730 and I think this was a great application 464 00:27:33.730 --> 00:27:38.700 to teach you really a lot of different stuff in JavaScript. 465 00:27:38.700 --> 00:27:41.770 So huge congratulations for finishing 466 00:27:41.770 --> 00:27:43.660 this great application. 467 00:27:43.660 --> 00:27:46.770 It's good to see that you made it to this point with me. 468 00:27:46.770 --> 00:27:50.230 And I hope that you're really proud of this application 469 00:27:50.230 --> 00:27:51.740 that you just built. 470 00:27:51.740 --> 00:27:53.760 You can now show it to all your friends 471 00:27:53.760 --> 00:27:57.720 and everyone that you're telling about your coding journey. 472 00:27:57.720 --> 00:28:00.360 And I'm sure they will be just as happy as you are 473 00:28:00.360 --> 00:28:03.060 about this amazing progress. 474 00:28:03.060 --> 00:28:07.180 So once more, great job and well done. 475 00:28:07.180 --> 00:28:08.400 And with that being said, 476 00:28:08.400 --> 00:28:11.350 I hope to see you soon in the next section 477 00:28:11.350 --> 00:28:13.290 where we're gonna build together 478 00:28:13.290 --> 00:28:16.090 some features of a real website. 479 00:28:16.090 --> 00:28:20.800 So UI components that you find commonly in normal websites, 480 00:28:20.800 --> 00:28:24.700 such as sliders or pop up windows. 481 00:28:24.700 --> 00:28:26.760 So that's gonna be really exciting. 482 00:28:26.760 --> 00:28:28.693 So I hope to see you there soon.