Original subtitles

1 1

Welcome back 2

2

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

3

So we're almost done here. 4

4

Now for security reasons, real bank applications 5

5

will log out users after some inactive time. 6

6

For example, after five minutes without doing anything. 7

7

And that's what we will implement in this video 8

8

using the set interval timer. 9

9

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

10

So the timer appears in multiple places here. 11

11

And the first one is right here. 12

12

So whenever the user logs in 13

13

the lockout timer will start or restart, all right? 14

14

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

15

which will be after five or 10 minutes, 16

16

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

17

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

18

but let's start very simple. 19

19

So the place where we want the timer 20

20

is here in this function about the login. Okay? 21

21

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

22

And so our timer will start here. 23

23

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

24

And therefore let's actually create a separate function, 25

25

which will start this log out timer. 26

26

Alright? 27

27

So let's say start, log out timer 28

28

and this function doesn't need any arguments. 29

29

All it does is to basically export 30

30

some functionality into an external function. 31

31

So let's write some pseudo code here, 32

32

basically by writing some comments to say what exactly 33

33

we are gonna do here. 34

34

So we will start by setting the time 35

35

to let's say five minutes, okay? 36

36

Then we want to call the timer every second 37

37

then in each call, 38

38

in each callback call, 39

39

print the remaining time 40

40

to the user interface. 41

41

And then when the time is at zero, 42

42

so after the timer basically expired. 43

43

So when we reach zero seconds, 44

44

stop timer and log out user. 45

45

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

46

let's go again here to our demo application. 47

47

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

48

which actually starts at 10 minutes 49

49

and you see that after each second, 50

50

a new time is basically printed here. 51

51

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

52

but when this reaches zero, 53

53

then the user will of course be logged out. 54

54

Okay? 55

55

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

56

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

57

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

58

or actually let's say 100 seconds, 59

59

so that we have actually more than one minute, 60

60

then we want to call the timer every second. 61

61

So basically what this means is to use 62

62

the set interval function 63

63

and then pass in a callback function 64

64

and this callback will be executed every second. 65

65

And so 1000 milliseconds here, alright? 66

66

Then each time that this function is called, 67

67

print the remaining time to the user interface. 68

68

Not in this one here as well. 69

69

So when we're at zero seconds, 70

70

stop the timer and log the user out. 71

71

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

72

which is called label timer. 73

73

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

74

that I preselected. 75

75

So label timer is the element with the selector 76

76

of simply timer. 77

77

Okay. 78

78

So let's go. 79

79

So labeledtimer.textcontent is equal to the time 80

80

and so that's this here. 81

81

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

82

And now to make this actually work, 83

83

we also need to remove one second 84

84

in each of these function calls, right? 85

85

So decrease one second. 86

86

And so time equal time minus one, 87

87

which is essentially the same as saying time minus minus. 88

88

Alright? 89

89

So this is the logic of this timer. 90

90

We start with a certain number of seconds, 91

91

right now that's 100 92

92

and then each time that his callback function here 93

93

is called, we remove one second from that. 94

94

Okay? And so this is called every second 95

95

and so basically we will end up with a timer 96

96

which shows the current number of seconds, each second. 97

97

Okay? 98

98

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

99

here on login. 100

100

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

101

So start, log out timer. 102

102

And now let's quickly log in here 103

103

and indeed you see this number here decreasing now. 104

104

Okay? 105

105

So hopefully that logic makes sense 106

106

of decreasing one second, every second. 107

107

Now, where is that? 108

108

We have too many functions here, I guess. 109

109

Now here we go. 110

110

So again, the logic here is to decrease the timer 111

111

by one second, every second. 112

112

And so therefore we get this number here 113

113

going down by exactly one each second. 114

114

Alright? 115

115

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

116

We want to see the minutes as well. 117

117

So basically we need to convert 118

118

this simple number of seconds to minutes and seconds. 119

119

Alright? 120

120

So let's do that here as well. 121

121

So let's say the minutes is the current time 122

122

divided by 60. 123

123

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

124

So it's not gonna be correct, 125

125

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

126

Now, here we are also seeing already what happens 127

127

with this timer after a certain number of seconds. 128

128

So indeed, as soon as the time hits zero, 129

129

it will not simply stop, right? 130

130

We're not telling the timer anywhere to stop. 131

131

And so it will simply continue and become negative. 132

132

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

133

but let's leave that for later. 134

134

For now, we just want to display the number here 135

135

in minutes and seconds, 136

136

but for now I will just show you the minutes. 137

137

Just to show you what we need to do next. 138

138

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

139

So it's decreasing every second, 140

140

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

141

doesn't really make sense. Right? 142

142

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

143

of dividing the time by 60, 144

144

because that will be our seconds. 145

145

So let me show that to you as well. 146

146

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

147

And so that's where again, 148

148

the reminder function is very helpful. 149

149

So the reminder operator actually. 150

150

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

151

So minutes and then colon the second. 152

152

Okay? And this is still far from being complete, 153

153

but let's take it step by step here. 154

154

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

155

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

156

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

157

So let's do this again, actually, 158

158

and notice down there how it starts exactly at 1.40. 159

159

So you saw that and that 40 appeared 160

160

because that is the reminder of dividing 100 by 60. 161

161

So let's see it here in the console. 162

162

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

163

But if we do 100, the reminder, 164

164

then we get 40, alright? 165

165

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

166

Alright? 167

167

Now here, we actually do not want then this value 168

168

after the coma, right? 169

169

We are only interested in, basically the integer. 170

170

And so let's cut off that decimal part 171

171

by saying math.trunk, all of this here. 172

172

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

173

So for example, 174

174

right now we are at eight seconds or minus eight, 175

175

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

176

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

177

So let's convert this here to a string 178

178

so that we can then call a pad start, 179

179

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

180

or just number is okay and then the same here. 181

181

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

182

Let's actually start at 120 seconds, 183

183

which is exactly two minutes. 184

184

So you see now it's a nicely looking 185

185

and nicely working clock, basically. 186

186

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

187

which is exactly two minutes. 188

188

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

189

Because the reminder of doing 1.20 by 60 is zero, 190

190

because two times 60 is exactly 120, right? 191

191

So two times 60 is 1.20 192

192

and therefore there is no reminder. 193

193

So there are no seconds in our case. 194

194

Okay? 195

195

But let's not do it with only 10 seconds 196

196

because then we get that negative 197

197

and we can then work with that. 198

198

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

199

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

200

So if the time is zero, 201

201

then we need to stop the timer. 202

202

And we do that by using clear interval. 203

203

So remember in the last video we used clear timeout 204

204

to stop the set timeout function. 205

205

And now we can use clear interval to do the same 206

206

with the set interval timer. 207

207

Alright? 208

208

Now, in order to make this work, 209

209

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

210

So let's simply call it timer. 211

211

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

212

And then we want to log out the user, 213

213

which basically means setting the opacity 214

214

of this whole container here and back to zero. 215

215

So here in our login, we did the opposite. 216

216

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

217

basically means setting it back to zero 218

218

and here this text content should also be set 219

219

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

220

So let's copy that. 221

221

And so here, 222

222

the welcome label should say login to get started, 223

223

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

224

Right? 225

225

And then the opacity back to zero. 226

226

And remember that usually when we first see the application, 227

227

all of this is actually invisible. 228

228

And let's do that here actually. 229

229

So get rid of this fake, always logged in. 230

230

So we did that before to test our code, 231

231

but now it's no longer necessary. 232

232

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

233

in the beginning. 234

234

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

235

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

236

And indeed we got logged out here. 237

237

Okay. So that works beautifully. 238

238

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

239

something that happens and that we need to fix. 240

240

So as I log in, 241

241

it takes quite some time until something happens here. 242

242

Maybe you didn't catch that, 243

243

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

244

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

245

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

246

So it was the value that we had before. 247

247

And that happened because this entire function here 248

248

is only first executed after one second. 249

249

Right? 250

250

So this callback function that we passed into set interval 251

251

is not called immediately. 252

252

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

253

But in fact, 254

254

we want to call this function also immediately. 255

255

Alright? 256

256

And so the trick to doing that 257

257

is to export this into a separate function, 258

258

then call it immediately and then also start calling it 259

259

every second using the set interval function. 260

260

So let me just show it to you. 261

261

So I cut the function here. 262

262

Let's put it here. 263

263

So we need to give it a name. 264

264

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

265

and now I put it here. 266

266

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

267

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

268

And so this is how we do it. 269

269

And so now right away, this function gets called. 270

270

And then after that, every one second. 271

271

And so let's try it now again, 272

272

let me scroll down here 273

273

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

274

Now it's simply not counting down, 275

275

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

276

which you see is very common in development. 277

277

You will do this also all the time. 278

278

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

279

but believe me now it's actually working correctly. 280

280

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

281

which is the fact that actually we get locked out 282

282

once this hits one second 283

283

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

284

You saw that? 285

285

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

286

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

287

And the problem here is that we decrease this time 288

288

by one second before checking for zero. 289

289

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

290

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

291

So here it's gonna be one. 292

292

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

293

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

294

this part of the code still gets executed. 295

295

And again, because we increase that one second to zero 296

296

here, before this. 297

297

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

298

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

299

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

300

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

301

after exactly 10 seconds. 302

302

So you saw it reached zero, zero, 303

303

and then we got logged out. 304

304

Great. 305

305

So let's increase this here a little bit 306

306

and then I will log in as this user. 307

307

So you'll see that it's running. 308

308

And now I will also log in as Jessica Davis, 309

309

just to see you yet another problem that we have. 310

310

So you see it's weirdly alternating 311

311

between these two numbers. 312

312

And the reason for that is that right now, 313

313

we have basically two timers running at the same time. 314

314

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

315

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

316

That's a big problem right now. 317

317

So how can we fix this problem? 318

318

Well, basically what we can do 319

319

is that whenever we log a user in, 320

320

we check if there is already a timer running 321

321

and if so, then we stop that timer. 322

322

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

323

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

324

from this function so that we can then use it here 325

325

in this callback function of the login 326

326

and delete it in case that it exists. 327

327

So let me write that code actually, 328

328

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

329

So here, we will return to timer 330

330

and that's important because to clear the timer, 331

331

so to use the clear interval function, 332

332

we need the timer variable. 333

333

And so therefore I'm returning it here, 334

334

so let's then save it here. 335

335

So that's down here, 336

336

and so this is gonna be the timer. 337

337

Now we actually need this as a global variable. 338

338

So let me put that outside here, 339

339

so the current account and the timer. 340

340

And the reason for that is that we need this variable 341

341

to persist between different logins. 342

342

So otherwise, after this handler function here 343

343

would be ready, then the timer variable would disappear. 344

344

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

345

and it's also the reason 346

346

why we need to keep the timer out here. 347

347

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

348

if it appears. 349

349

So timer and current account both need to be 350

350

in the parent scope of this function scope. 351

351

So let me show you what I mean. 352

352

So here I will then set the timer to the timer 353

353

that is returned here. 354

354

However, if there already is a timer, 355

355

I first need to clear it. 356

356

And so, let's do that. 357

357

So if there is already a timer, 358

358

then clear interval timer, 359

359

and that's it. 360

360

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

361

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

362

So in this situation there was no timer already. 363

363

Was it? 364

364

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

365

and so no timer variable was created. 366

366

But now since I did log in, 367

367

now timer is equal to that timer 368

368

that I just exported from this function 369

369

using the return keywords. 370

370

And so this timer now does exist. 371

371

And so when I know login as someone else, 372

372

so Jessica Davis for example, 373

373

then when the code reaches this line here, 374

374

then a timer will indeed exist. 375

375

And so then that timer is going to be cleared. 376

376

Okay? 377

377

And so now there is no problem anymore. 378

378

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

379

And that of course, also works when the timer here 380

380

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

381

So I can now log in, 382

382

the timer starts running normally 383

383

and when I log in then as Jessica, 384

384

then the timer gets cleared and reset it basically 385

385

and it started again from two minutes. 386

386

Okay? 387

387

So all this might seem a little bit complicated, 388

388

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

389

about what we want our code to do. 390

390

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

391

that we already know to basically achieve one goal 392

392

that we want to achieve, 393

393

which is in this case, 394

394

this timer here running and being reset it each time 395

395

that another user logs in. 396

396

Now, another functionality that we want our timers to have 397

397

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

398

because remember the goal of this timer here 399

399

is to track the inactivity of the user. 400

400

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

401

but if I do something, 402

402

let's say transfer money, 403

403

then we should not get logged out. 404

404

It should be reset it. 405

405

But as you saw, we still got logged out 406

406

even after doing that transfer, of course. 407

407

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

408

whenever the user does a transfer or requests a loan. 409

409

So these are the only two activities 410

410

that exist in our application. 411

411

And so these operations should always trigger the timer 412

412

to be reset. 413

413

Okay? 414

414

So let's go here to the transfer 415

415

and let's do it here at the end, 416

416

reset the timer. 417

417

So what does resetting the timer actually mean? 418

418

Well, all we need to do, 419

419

is to basically clear interval using the timer 420

420

that we already have and then start it again. 421

421

So clear interval and then the timer variable 422

422

and so now one more time, 423

423

it is important that this timer variable 424

424

is actually a global variable. 425

425

So a variable that's outside 426

426

of any of these handler functions. 427

427

So we define timer, remember out here, 428

428

because we didn't want it to be inside 429

429

of this handler function here. 430

430

And that was because we wanted this variable 431

431

to persist throughout multiple logins, 432

432

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

433

for other operations. 434

434

So inside other callback functions 435

435

and in particular in this one now. 436

436

So clear interval of that timer that was defined previously, 437

437

and then we simply start a new one. 438

438

So basically we then overwrite that initial timer 439

439

that we had before. 440

440

So start, log out timer. 441

441

And that's actually it. 442

442

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

443

So when we do a transfer, 444

444

that timer is cleared and a new timer is started again 445

445

at two minutes. 446

446

Okay? And now finally the same for requesting alone. 447

447

So let's try that. 448

448

And now the timer is running down here. 449

449

Alright?? 450

450

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

451

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

452

down here to the timer now. 453

453

And indeed it got reset it to two minutes. 454

454

At the same when we request a loan, 455

455

let's say 100 456

456

and then after the three seconds have passed, 457

457

then our loan got approved indeed 458

458

and our timer reset to two minutes. 459

459

Beautiful, great. 460

460

So our application is now actually finished 461

461

and feature complete. 462

462

Everything is working just as in our demonstration 463

463

and I think this was a great application 464

464

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

465

So huge congratulations for finishing 466

466

this great application. 467

467

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

468

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

469

that you just built. 470

470

You can now show it to all your friends 471

471

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

472

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

473

about this amazing progress. 474

474

So once more, great job and well done. 475

475

And with that being said, 476

476

I hope to see you soon in the next section 477

477

where we're gonna build together 478

478

some features of a real website. 479

479

So UI components that you find commonly in normal websites, 480

480

such as sliders or pop up windows. 481

481

So that's gonna be really exciting. 482

482

So I hope to see you there soon.