Original subtitles

1 1

Let's now finally implement the log in feature 2

2

of our application, 3

3

and this is gonna be a lot of work. 4

4

So let's get started right away. 5

5

And to start, let's take a look at our demo application. 6

6

So in this case here in the beginning, 7

7

we cannot see anything. 8

8

So there's no logged in user, 9

9

and then we can input a username. 10

10

And so this is the kind of username 11

11

that we computed before, remember, and then the pin. 12

12

And if that is correct, 13

13

so if the pin corresponding to this account is correct, 14

14

then we get logged in. 15

15

And that's gonna happen whether we click on this button 16

16

here or hit the enter key. 17

17

And so then all of this appears. 18

18

So, all the values here are calculated. 19

19

And yeah, so that's the main thing that we need to do 20

20

in this lecture. 21

21

And then of course, if someone else logs in, 22

22

then data values are gonna be displayed. 23

23

And so let's take a look at the HTML here of this form. 24

24

So indeed here we have a form element, 25

25

and this form has a button. 26

26

And so, it's onto this Log in button, 27

27

that we will attach the add event listener method. 28

28

Then, as for the inputs, the username is gonna come 29

29

from this one, with this class, log in user dash dash input, 30

30

and the pin is gonna come from this one. 31

31

And as always, I already have all of this here selected. 32

32

So this is the button here, 33

33

and then we have input log in username and input log in pin. 34

34

Okay, so let's now create these event handlers. 35

35

So event handlers right here. 36

36

So, button log in, 37

37

add event listener, 38

38

for the click and then as always, 39

39

our callback function. 40

40

And here let's just look to the console log in. 41

41

Okay, and now, 42

42

did you see what happened here? 43

43

Take a close look down here, what happens as we click. 44

44

So for a flash there, you saw the log in, 45

45

and then the page reloaded, right? 46

46

And that's because this is the button in a form element. 47

47

And so in HTML, the default behavior, 48

48

when we click the Submit button, is for the page to reload. 49

49

So we need to stop that from happening. 50

50

And for that, we need to actually give this function 51

51

here, the event parameter, and let's just call it event. 52

52

And you already know how this callback function gets access 53

53

to this event object, remember? 54

54

And so on that event, we can call a method 55

55

called prevent default, like this. 56

56

And so as the name says, this will then prevent 57

57

this form from submitting. 58

58

So, prevent form from submitting. 59

59

So let's do that again. 60

60

And now we've fixed that problem and we can see log in. 61

61

Okay, now another thing that's great about forms, 62

62

is that whenever we have one of these fields here, 63

63

input it, and when we then hit enter, 64

64

like this, then that will actually automatically trigger 65

65

a click event on this button. 66

66

Okay, so once again, hitting enter in this field, 67

67

or in this field is exactly the same as the user 68

68

clicking right here. 69

69

So, both of these things will trigger a click event. 70

70

So you see, as I hit enter, 71

71

we get more and more click events. 72

72

So that's why we get then, log in locked to the console. 73

73

But now, let's do the actual work. 74

74

So to lock the user actually in, 75

75

we need to find the account from the accounts array, 76

76

with the username that the user inputted. 77

77

And so that's where our find method comes into play again. 78

78

So we can do accounts.find, 79

79

and then this is actually the same that we did 80

80

in the last video. 81

81

So account.owner should be the same as, 82

82

so, three equals actually. 83

83

And so, remember we have this value 84

84

at input log in username. 85

85

Okay, so that is this element here, and then from there, 86

86

we need to take the value property, remember that? 87

87

So we did this here, I think, in the "Guess my Number" game, 88

88

where we also read the value out of an input field. 89

89

And so here, this is the same. 90

90

And so now, let's actually save this into a variable. 91

91

Now this variable needs to be defined outside 92

92

of this function, okay? 93

93

And that's because we will need this information 94

94

about the current account also later in other functions. 95

95

So, it's a good thing to have this big important information 96

96

outside of this function, so that we can then remember 97

97

it for other actions in our application. 98

98

For example, when we transfer money here, 99

99

then we need to know from which account that money 100

100

should actually go. 101

101

And so for that, we need the current account. 102

102

So current account, and here we just define it, 103

103

and that's why we need a let. 104

104

And so then here, we assign it to this value. 105

105

So current account. 106

106

Okay, so let's check that. 107

107

So JS and we get undefined. 108

108

So there was some problem here, 109

109

and the problem is, as I see it right away, 110

110

is that we are looking for the owner, 111

111

but we need to look for the username. 112

112

So the owner is the whole name, but the username property, 113

113

is these properties that we created earlier. 114

114

So here in this function, remember? 115

115

So we need to compare this value here, that the user inputs, 116

116

of course, to that username. 117

117

So try that again. 118

118

And now here we get to the object, 119

119

which has exactly this username. 120

120

Alright, and so it is here, my object basically. 121

121

Alright, so we got the user, 122

122

that is trying to log in, 123

123

and now all we need to do in order to actually lock 124

124

the user in, is to check if the pin is correct. 125

125

So, pin here is like a password, 126

126

but something that we usually use, like in an ATM. 127

127

And so I decided to just go with that here, 128

128

because I think this also looks a little bit 129

129

like an ATM machine here. 130

130

So let's then do that test. 131

131

So, if currentaccount.pin, 132

132

is equal to input log in pin. 133

133

Okay, so that's the variable that holds the selection 134

134

of selecting this element. 135

135

And then again, we need to take the value. 136

136

And finally, we also need to convert 137

137

this to a number, 138

138

because as I mentioned earlier, 139

139

this value will always be a string. 140

140

Alright, and so here, before we do anything, 141

141

let's just log in again here to the console. 142

142

Okay, so, JS, 143

143

and we got logged in. 144

144

But if we only input JS, 145

145

then we simply get the object itself, 146

146

but without being logged in, because the pin is correct. 147

147

And now let's try just some other user, 148

148

to see what happens here. 149

149

And we get an error. 150

150

So that error is, cannot read property pin of undefined. 151

151

And so the reason for this is, that this object here, 152

152

is now undefined, right? 153

153

Because no account could be found for this username. 154

154

And so the find method, so this one here, 155

155

will return undefined, if no element matches this condition. 156

156

So that's something that we haven't seen before, 157

157

and so that's why I'm showing this to you. 158

158

But anyway, how should we solve this? 159

159

Well, the first thing that might come into mind, 160

160

is to simply check if the current account exists, 161

161

like this, okay. 162

162

So this would fix the problem, 163

163

but we can do better because we already learned 164

164

about something called optional chaining, remember? 165

165

So we can do this, and then this pin property 166

166

will only be read in case that the current account 167

167

here actually exists, remember that? 168

168

And so, this is a lot easier and a lot more elegant. 169

169

So let's try that. 170

170

And so now nothing happened. 171

171

So no error, all we get here is the undefined, 172

172

because yeah, this account does not exist. 173

173

But that's of course not a problem. 174

174

Okay, but now in case that the account does exist 175

175

and that the pin is correct, what should we do? 176

176

Well, let's take a look at our flow chart here. 177

177

So this is the part we already checked. 178

178

So if we have the correct credentials, right? 179

179

And so if yes, then we should display DUI, 180

180

and the welcome message. 181

181

So let's write that here in our script, 182

182

put that here. 183

183

And so I like to kind of plan out what I'm doing 184

184

here using comments, 185

185

display UI and a welcome message. 186

186

Next up, we should display and calculate the balance. 187

187

Then the same with the summary, 188

188

and the same with the movements. 189

189

Okay, this part here we are leaving for the next section 190

190

about the timer. 191

191

Okay, so display balance, summary, and movements. 192

192

So display movements, 193

193

display balance, display summary, 194

194

and let's start with the message here. 195

195

So that is this element here. 196

196

So, let me inspect that. 197

197

So, it's this paragraph here called welcome. 198

198

And so as always, I already have that selected. 199

199

So it's a label, so probably it's called label welcome. 200

200

Label, indeed, here it is, 201

201

labelwelcome.textcontent as always. 202

202

And then here we are gonna write, welcome back, 203

203

and then the first name of the person. 204

204

Welcome back and then the owner of the current account. 205

205

So that's current account.owner, 206

206

and then only the first word. 207

207

So, how do we do that? 208

208

Well, we use our good friend, split. 209

209

And we split it with the space. 210

210

So as I said, we use this one all the time. 211

211

And then from the resulting array, 212

212

we simply take the first element, like this. 213

213

Okay, so this displays the message. 214

214

And now about displaying DUI, 215

215

remember how in the beginning we set the opacity 216

216

here from zero, basically back to 100, which is the default. 217

217

So usually, the opacity here is at zero. 218

218

And so now when we lock the user in, 219

219

we actually set this opacity here to 100. 220

220

So as we save this now, it will all disappear. 221

221

And so now, what we will do is the container app, 222

222

I think, yes. 223

223

So container app is the element that we selected previously, 224

224

which has this app class. 225

225

Okay, so this element, 226

226

we will manipulate the style and in particular, 227

227

the opacity style. 228

228

Now remember how I said in another project, 229

229

that it's also good to use classes for this? 230

230

Okay, but in this case, it's really just one style. 231

231

So it's not a big work to just do it like this. 232

232

So let's test this one out for now. 233

233

So JS and my pin, 234

234

and indeed we get our message here, 235

235

and also we get everything here now back to visible. 236

236

And Jessica Davis now, which has pin two, two, two, two. 237

237

And so now we also get Jessica. 238

238

Now, as you see these balances and these movements here, 239

239

they're all still hard-coded from what we had back here. 240

240

So here we called calc display summary, 241

241

and also the balance and the movements. 242

242

But now we want to do that, not here, but actually inside 243

243

of the login function. 244

244

So let's remove all of this, 245

245

again, because we do not want to call these functions 246

246

right in the beginning, when our script is loaded. 247

247

We only want to calculate and display the balance, 248

248

and the movements, and the summary. 249

249

And as soon as we actually get the data 250

250

that we want to display, right? 251

251

That makes sense. 252

252

So, let's remove all of that, 253

253

and actually do it here. 254

254

So, display movements, 255

255

and then it is the currentaccount.movements, right? 256

256

And that's because this method here, 257

257

or actually this function here, 258

258

it expects a movement argument. 259

259

And as we hovered this function name, 260

260

VS code is so smart that it actually shows it to us here. 261

261

And so from there, we can immediately see what we need 262

262

to pass into the function. 263

263

So that's really handy. 264

264

Then the same with the balance. 265

265

So display or calc display balance actually. 266

266

And so once again, 267

267

let's just hover this here to make sure what we need, 268

268

and it is the movement. 269

269

So that data is stored in the currentaccount.movements. 270

270

And finally, also the summary. 271

271

So, calc display summary. 272

272

And once again, we will need a movement. 273

273

So that data is in currentaccount.movements. 274

274

Alright, now we will have to come back to this function 275

275

here by the end of this lecture, 276

276

but for now, let's leave it like this. 277

277

And let's log in again, first with Jonas. 278

278

And so this is the data that we are already used to seeing, 279

279

this balance value and this movements here, 280

280

because we have always been printing these values 281

281

here using that account. 282

282

But now as we log in as Jessica Davis, 283

283

you will see that these values here, 284

284

will all change accordingly. 285

285

So let's see, and yes. 286

286

So that's great. 287

287

Now we are getting all of these values. 288

288

So this data here dynamically, 289

289

really from the account object itself. 290

290

So we have all her movements, 291

291

we calculated all of these statistics or summaries. 292

292

And of course also the balance, 293

293

is now really about this account itself. 294

294

And we have more. 295

295

Let's try Steven here. 296

296

So Steven Thomas Williams, 297

297

with pin three, three, three, three. 298

298

And this, kind of messed up our UI here, 299

299

because of this calculation. 300

300

So Steven only has a balance of 10 Euros. 301

301

And now finally, we can try Sarah Smith. 302

302

And so once again, 303

303

we see all her different movements here, 304

304

and yeah, this is great. 305

305

So this now really works depending on the user's data. 306

306

So let's go back here. 307

307

So what I want to do next is to, as we log in, 308

308

also get rid of this data here. 309

309

Okay, so basically emptying these two fields. 310

310

And also as we log in, like this, 311

311

I didn't want this field here to lose its focus. 312

312

So let's do that before this. 313

313

So, clear the input fields. 314

314

And so, we already know that the fields 315

315

are input login username, 316

316

which we want to set to the empty string, 317

317

and then also input login pin. 318

318

And we can do it like this, 319

319

login pin also set it to equal, 320

320

because the assignment operator works from right to left. 321

321

So it will start here assigning equal to this field here, 322

322

and then this here will become the empty string. 323

323

And so then empty string will also be assigned to this one. 324

324

We are just missing the dot value here. 325

325

Otherwise we would set the entire element to the empty 326

326

string, I'm I right? 327

327

So JS, one, one, one, one. 328

328

Okay, and now this happens, what I mentioned 329

329

before is that this field here is still has this focus, 330

330

so we can see the cursor there blinking. 331

331

And so, that's a bit ugly. 332

332

And so on that field, 333

333

so input login pin. 334

334

We can use this blur function or method. 335

335

So just call blur, and so that will make 336

336

it so that this field loses its focus. 337

337

So you see, now it looks great. 338

338

And now just to finish, 339

339

we also need to come back to this function here, 340

340

just as I mentioned earlier. 341

341

So calc display summary, and let's go there, 342

342

so this one here. 343

343

And as you see, we calculated the interest 344

344

using this 1.2 rate, right? 345

345

So right now, for all of the accounts, 346

346

the interest rate is now calculated using 347

347

this 1.2 interest rate. 348

348

However, as we take a look at the accounts, 349

349

each of them actually has a different interest rate. 350

350

So this one has 1.2, but this one has 1.5, 351

351

and this one has less, so it gets a less interest. 352

352

And so now of course, we also want to dynamically use 353

353

this interest rate depending on the current user, right? 354

354

That makes sense. 355

355

And so, we have to modify this function here a little bit. 356

356

And so, in order to get access to that data, 357

357

so to that interest rate, 358

358

we now need more than just the movements. 359

359

Instead of the movements, we want now, the entire account. 360

360

Because then we can take the movements from the account, 361

361

and also the interest rate. 362

362

Alright, so again, we will now change this function 363

363

and pass in the entire account, 364

364

and not just the movements array. 365

365

And so then from there, we will be able to take 366

366

the movements that we need to calculate 367

367

these three statistics here. 368

368

And then also the interest rate that we have here. 369

369

So account, let's just call it, 370

370

or let's just call ACC one more time. 371

371

So here, now we need to take the movements 372

372

from that account, the same here and here. 373

373

Alright, and now here, instead of this 1.2 fixed rate, 374

374

we take ACC.interestrate 375

375

that's in there, alright. 376

376

So let's just see if everything still works, 377

377

and let's see it with Steven. 378

378

So that was STW and three, three, three, three. 379

379

And you see that now our UI is no longer messed up. 380

380

Ah, but of course we forgot to call 381

381

this function here correctly. 382

382

That's probably why we got to this error. 383

383

Yeah, alright, so, 384

384

so down here we are still calling this function 385

385

only with the movements array. 386

386

So we need to instead, pass in the entire account 387

387

because as you see, now we do need the account here. 388

388

So try that again, TW, 389

389

and so now we get to correct interest. 390

390

And to, maybe you remember that before it was different, 391

391

it was this crazy long number with a lot of zeroes, 392

392

which messed up our user interface here. 393

393

So, this means that it is now being calculated 394

394

differently for each of the user, 395

395

according to their own specific interest rate. 396

396

Great, and with this, we implemented all of the tasks 397

397

that we had in our flow chart for this functionality. 398

398

And in practice, what this means, 399

399

is that for the first time, we made all of this data 400

400

that we see here in our application, dynamic. 401

401

So depending on which user is actually logging in. 402

402

So let's see that change again, 403

403

let's try a wrong pin here. 404

404

And so now nothing happens. 405

405

And of course we could now hide the user interface, 406

406

and display an error message, 407

407

but I want to keep it simple here. 408

408

So this is just a simple learning application. 409

409

So we don't need to mess with all of that. 410

410

What matters is only the correct version for now. 411

411

And so with the correct pin, 412

412

now as you saw the data changed here, 413

413

back to this Jonas account. 414

414

Awesome, that's great. 415

415

So, that's really great progress. 416

416

Congratulations for making it this far in this section. 417

417

I know there's a lot to learn and a lot to take in, 418

418

but I hope that this lecture too, was clear to you, 419

419

how everything worked here. 420

420

And just to recap, clearly the most important part 421

421

here is the usage of this find method here. 422

422

And knowing that this is the correct method for the job. 423

423

So maybe analyze this line here a little bit, 424

424

and then see exactly what happens here. 425

425

Also this nice usage of the optional chaining, 426

426

and then we are ready to implement our next feature. 427

427

We're just gonna be transferring money, 428

428

from one of our users to another.