1
00:00:01,050 --> 00:00:02,950
‫Jonas: Nelle prossime due

2
00:00:02,950 --> 00:00:06,940
‫lezioni aggiungeremo la funzionalità di accesso al nostro sito web.

3
00:00:06,940 --> 00:00:07,940
‫E in

4
00:00:07,940 --> 00:00:10,420
‫questa lezione, inizieremo con l'effettuare il rendering

5
00:00:10,420 --> 00:00:12,610
‫della schermata di accesso per facilitare

6
00:00:12,610 --> 00:00:14,083
‫l'accesso degli utenti.

7
00:00:15,880 --> 00:00:19,620
‫Ancora una volta, voglio davvero che questa sia una sfida per

8
00:00:19,620 --> 00:00:22,810
‫te in modo che tu possa effettivamente praticare alcune

9
00:00:22,810 --> 00:00:24,890
‫delle abilità che hai imparato.

10
00:00:24,890 --> 00:00:28,230
‫Quello che voglio che tu faccia è creare un percorso

11
00:00:28,230 --> 00:00:29,463
‫di accesso slash.

12
00:00:31,550 --> 00:00:33,240
‫Quindi crea un controller

13
00:00:33,240 --> 00:00:34,930
‫e, naturalmente, un modello.

14
00:00:34,930 --> 00:00:36,720
‫E quel modello è davvero facile.

15
00:00:36,720 --> 00:00:39,610
‫È solo un codice HTML statico e non

16
00:00:39,610 --> 00:00:41,783
‫abbiamo bisogno di passarci alcuna variabile.

17
00:00:43,030 --> 00:00:45,050
‫C'è un modello per questo,

18
00:00:45,050 --> 00:00:47,375
‫in realtà, qui nella cartella dei modelli.

19
00:00:47,375 --> 00:00:50,623
‫Quindi dovrebbe essere davvero facile da completare per te.

20
00:00:52,211 --> 00:00:55,133
‫Quindi metti in pausa questo video e torna quando sei pronto.

21
00:00:58,580 --> 00:00:59,850
‫Ok, bentornato.

22
00:00:59,850 --> 00:01:04,300
‫Spero che tu abbia completato con successo questa sfida.

23
00:01:04,300 --> 00:01:05,963
‫Quindi ecco la mia opinione su di esso.

24
00:01:07,080 --> 00:01:09,670
‫Router dot get the route

25
00:01:09,670 --> 00:01:11,360
‫è slash login e

26
00:01:11,360 --> 00:01:12,380
‫quindi

27
00:01:14,661 --> 00:01:17,223
‫usiamo il controller dot get

28
00:01:19,430 --> 00:01:20,650
‫login form.

29
00:01:20,650 --> 00:01:23,783
‫Quindi questo è il gestore del percorso che creerò in seguito.

30
00:01:29,820 --> 00:01:33,150
‫Esporta punto ottieni la risposta del modulo di accesso e

31
00:01:35,740 --> 00:01:36,680
‫qui non

32
00:01:39,470 --> 00:01:41,540
‫abbiamo bisogno di altro che solo

33
00:01:41,540 --> 00:01:43,590
‫la richiesta e la risposta.

34
00:01:43,590 --> 00:01:45,100
‫Veramente quassù vedo che ci

35
00:01:45,100 --> 00:01:46,563
‫manca il prossimo.

36
00:01:48,190 --> 00:01:51,360
‫Sempre, quando abbiamo funzioni asincrone racchiuse in

37
00:01:51,360 --> 00:01:53,833
‫catchAsync, dovremmo sempre specificare next.

38
00:01:55,950 --> 00:01:57,980
‫Ma qui, tutto ciò che dobbiamo

39
00:01:57,980 --> 00:02:01,270
‫fare è ora eseguire il rendering di un modello di accesso.

40
00:02:01,270 --> 00:02:03,950
‫Quindi non abbiamo ancora creato quel modello.

41
00:02:03,950 --> 00:02:06,320
‫Ma si chiamerà login.

42
00:02:06,320 --> 00:02:09,240
‫Quindi, diciamo res dot status

43
00:02:10,280 --> 00:02:11,113
‫200,

44
00:02:13,390 --> 00:02:14,940
‫modello di

45
00:02:16,060 --> 00:02:17,640
‫rendering chiamato login.

46
00:02:17,640 --> 00:02:19,790
‫Quindi, come con tutte le

47
00:02:19,790 --> 00:02:23,090
‫altre nostre pagine, in realtà vogliamo dargli un titolo personalizzato.

48
00:02:23,090 --> 00:02:26,010
‫Per questo abbiamo sempre passato un oggetto

49
00:02:26,010 --> 00:02:28,240
‫con la proprietà title.

50
00:02:28,240 --> 00:02:29,090
‫Destra?

51
00:02:29,090 --> 00:02:32,010
‫Quindi il modello di base leggerà quel titolo

52
00:02:32,010 --> 00:02:34,543
‫e lo inserirà nell'elemento title html.

53
00:02:35,581 --> 00:02:37,480
‫In questo caso,

54
00:02:38,770 --> 00:02:43,770
‫il titolo è semplicemente accedere al tuo account.

55
00:02:43,890 --> 00:02:46,690
‫E questo è tutto per il gestore del percorso.

56
00:02:46,690 --> 00:02:47,963
‫Ora andiamo

57
00:02:48,820 --> 00:02:51,520
‫avanti, apri il modello di

58
00:02:51,520 --> 00:02:53,230
‫accesso, seleziona tutto,

59
00:02:53,230 --> 00:02:57,663
‫copia tutto, chiudilo e crea la nuova vista qui.

60
00:02:59,860 --> 00:03:02,923
‫Chiama, ovviamente, login dot pug.

61
00:03:04,480 --> 00:03:06,380
‫Quindi, incollando quel codice qui, e

62
00:03:06,380 --> 00:03:09,900
‫ora arriva di nuovo quel trucco in cui estendiamo il nostro

63
00:03:09,900 --> 00:03:11,063
‫modello di base.

64
00:03:14,740 --> 00:03:19,740
‫Questo si estende all'estensione del file di base, non dimenticare che qui dobbiamo creare

65
00:03:20,120 --> 00:03:22,660
‫un blocco con lo stesso nome

66
00:03:22,660 --> 00:03:25,443
‫esatto che abbiamo nel file di base.

67
00:03:26,950 --> 00:03:28,163
‫Quindi questo è contenuto.

68
00:03:29,610 --> 00:03:33,130
‫E con questo abbiamo davvero finito,

69
00:03:33,130 --> 00:03:33,963
‫credo.

70
00:03:36,000 --> 00:03:38,770
‫Ovviamente, abbiamo bisogno di un rientro per renderlo un figlio

71
00:03:38,770 --> 00:03:39,913
‫fuori da questo blocco.

72
00:03:40,760 --> 00:03:42,233
‫Ma in realtà è così.

73
00:03:43,602 --> 00:03:46,110
‫Ora, solo un'altra cosa che dobbiamo

74
00:03:46,110 --> 00:03:49,160
‫fare è impostare effettivamente un collegamento alla pagina

75
00:03:49,160 --> 00:03:52,163
‫di accesso in modo che possiamo effettivamente accedervi.

76
00:03:54,462 --> 00:03:57,480
‫In questo momento, i pulsanti di accesso e registrazione

77
00:03:57,480 --> 00:03:59,393
‫stanno effettivamente utilizzando l'elemento pulsante.

78
00:04:00,630 --> 00:04:03,260
‫Ma in questo modo, non possiamo

79
00:04:03,260 --> 00:04:05,110
‫davvero specificare l'attributo href.

80
00:04:05,110 --> 00:04:09,360
‫Quindi cambiamoli effettivamente in un collegamento reale.

81
00:04:09,360 --> 00:04:12,763
‫E qui, possiamo specificare l'href.

82
00:04:16,290 --> 00:04:20,543
‫Quindi questo punta semplicemente al login.

83
00:04:21,970 --> 00:04:23,400
‫E un secondo

84
00:04:23,400 --> 00:04:25,540
‫qui, la registrazione che in realtà non

85
00:04:27,210 --> 00:04:29,080
‫implementeremo, quindi puoi implementarlo da

86
00:04:29,080 --> 00:04:30,660
‫solo se ne hai voglia.

87
00:04:30,660 --> 00:04:33,190
‫Quindi fondamentalmente un modulo di iscrizione.

88
00:04:33,190 --> 00:04:34,490
‫Ma, poiché

89
00:04:34,490 --> 00:04:37,440
‫tutto ciò, quindi l'intero processo di registrazione sarà

90
00:04:37,440 --> 00:04:39,220
‫molto simile all'accesso, ho deciso

91
00:04:39,220 --> 00:04:42,130
‫di non includerlo qui in questa sezione perché

92
00:04:42,130 --> 00:04:44,800
‫sarebbe solo un sacco di contenuto duplicato

93
00:04:44,800 --> 00:04:47,663
‫e non voglio rendere il corso inutile lungo.

94
00:04:50,240 --> 00:04:52,480
‫Mettilo al sicuro, non so se

95
00:04:52,480 --> 00:04:55,730
‫ora riavvia il server, in realtà non lo fa,

96
00:04:55,730 --> 00:04:56,730
‫quindi salviamo

97
00:04:57,630 --> 00:05:00,113
‫uno di questi file di script java.

98
00:05:01,930 --> 00:05:02,763
‫Ora questo

99
00:05:03,980 --> 00:05:06,470
‫è il nostro sito di riferimento.

100
00:05:06,470 --> 00:05:08,450
‫Ricorda, questo è quello che vogliamo,

101
00:05:08,450 --> 00:05:09,357
‫è questo.

102
00:05:11,030 --> 00:05:12,890
‫Veniamo a tutti i

103
00:05:12,890 --> 00:05:16,320
‫tour e ora proviamo il nostro percorso di accesso.

104
00:05:16,320 --> 00:05:19,550
‫E, infatti, ecco la nostra forma.

105
00:05:19,550 --> 00:05:20,383
‫Grande.

106
00:05:21,650 --> 00:05:23,950
‫Ora qui possiamo inserire

107
00:05:23,950 --> 00:05:25,730
‫alcune email,

108
00:05:25,730 --> 00:05:29,140
‫diciamo admin dot naders dot

109
00:05:29,140 --> 00:05:30,100
‫io.

110
00:05:30,100 --> 00:05:32,100
‫E vedi che formatta

111
00:05:32,100 --> 00:05:34,790
‫bene questo input qui se l'indirizzo email

112
00:05:34,790 --> 00:05:36,860
‫è effettivamente valido o meno.

113
00:05:36,860 --> 00:05:40,770
‫Ad esempio, se non ho l'estensione qui corretta,

114
00:05:40,770 --> 00:05:43,100
‫diventerà arancione per

115
00:05:43,100 --> 00:05:45,580
‫dirmi che qualcosa non va.

116
00:05:45,580 --> 00:05:47,730
‫E la stessa cosa per la password.

117
00:05:47,730 --> 00:05:50,400
‫Finché ho meno di otto caratteri, questo sarà

118
00:05:50,400 --> 00:05:52,200
‫sempre rosso, in pratica

119
00:05:52,200 --> 00:05:54,423
‫mi dice che c'è un errore.

120
00:05:56,520 --> 00:05:58,260
‫Che ora che ho otto

121
00:05:58,260 --> 00:05:59,690
‫caratteri, diventa verde.

122
00:05:59,690 --> 00:06:01,970
‫E se sei interessato a come fare

123
00:06:01,970 --> 00:06:04,020
‫questo tipo di magia con

124
00:06:04,020 --> 00:06:07,670
‫css, sentiti libero di controllare il file css che ho codificato

125
00:06:07,670 --> 00:06:09,390
‫solo per questo corso.

126
00:06:09,390 --> 00:06:12,270
‫Ad ogni modo, ovviamente, fare clic su

127
00:06:12,270 --> 00:06:15,200
‫questo pulsante qui ora fa assolutamente qualsiasi cosa, giusto?

128
00:06:15,200 --> 00:06:17,390
‫Quindi nel prossimo video, inizieremo davvero

129
00:06:17,390 --> 00:06:20,390
‫a implementare la funzionalità di accesso in realtà

130
00:06:20,390 --> 00:06:23,570
‫facendo una richiesta al nostro punto finale dell'API che

131
00:06:23,570 --> 00:06:24,823
‫abbiamo già creato.