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.