‫Jonas: Nelle prossime due
‫lezioni aggiungeremo la funzionalità di accesso al nostro sito web.
‫E in
‫questa lezione, inizieremo con l'effettuare il rendering
‫della schermata di accesso per facilitare
‫l'accesso degli utenti.
‫Ancora una volta, voglio davvero che questa sia una sfida per
‫te in modo che tu possa effettivamente praticare alcune
‫delle abilità che hai imparato.
‫Quello che voglio che tu faccia è creare un percorso
‫di accesso slash.
‫Quindi crea un controller
‫e, naturalmente, un modello.
‫E quel modello è davvero facile.
‫È solo un codice HTML statico e non
‫abbiamo bisogno di passarci alcuna variabile.
‫C'è un modello per questo,
‫in realtà, qui nella cartella dei modelli.
‫Quindi dovrebbe essere davvero facile da completare per te.
‫Quindi metti in pausa questo video e torna quando sei pronto.
‫Ok, bentornato.
‫Spero che tu abbia completato con successo questa sfida.
‫Quindi ecco la mia opinione su di esso.
‫Router dot get the route
‫è slash login e
‫quindi
‫usiamo il controller dot get
‫login form.
‫Quindi questo è il gestore del percorso che creerò in seguito.
‫Esporta punto ottieni la risposta del modulo di accesso e
‫qui non
‫abbiamo bisogno di altro che solo
‫la richiesta e la risposta.
‫Veramente quassù vedo che ci
‫manca il prossimo.
‫Sempre, quando abbiamo funzioni asincrone racchiuse in
‫catchAsync, dovremmo sempre specificare next.
‫Ma qui, tutto ciò che dobbiamo
‫fare è ora eseguire il rendering di un modello di accesso.
‫Quindi non abbiamo ancora creato quel modello.
‫Ma si chiamerà login.
‫Quindi, diciamo res dot status
‫200,
‫modello di
‫rendering chiamato login.
‫Quindi, come con tutte le
‫altre nostre pagine, in realtà vogliamo dargli un titolo personalizzato.
‫Per questo abbiamo sempre passato un oggetto
‫con la proprietà title.
‫Destra?
‫Quindi il modello di base leggerà quel titolo
‫e lo inserirà nell'elemento title html.
‫In questo caso,
‫il titolo è semplicemente accedere al tuo account.
‫E questo è tutto per il gestore del percorso.
‫Ora andiamo
‫avanti, apri il modello di
‫accesso, seleziona tutto,
‫copia tutto, chiudilo e crea la nuova vista qui.
‫Chiama, ovviamente, login dot pug.
‫Quindi, incollando quel codice qui, e
‫ora arriva di nuovo quel trucco in cui estendiamo il nostro
‫modello di base.
‫Questo si estende all'estensione del file di base, non dimenticare che qui dobbiamo creare
‫un blocco con lo stesso nome
‫esatto che abbiamo nel file di base.
‫Quindi questo è contenuto.
‫E con questo abbiamo davvero finito,
‫credo.
‫Ovviamente, abbiamo bisogno di un rientro per renderlo un figlio
‫fuori da questo blocco.
‫Ma in realtà è così.
‫Ora, solo un'altra cosa che dobbiamo
‫fare è impostare effettivamente un collegamento alla pagina
‫di accesso in modo che possiamo effettivamente accedervi.
‫In questo momento, i pulsanti di accesso e registrazione
‫stanno effettivamente utilizzando l'elemento pulsante.
‫Ma in questo modo, non possiamo
‫davvero specificare l'attributo href.
‫Quindi cambiamoli effettivamente in un collegamento reale.
‫E qui, possiamo specificare l'href.
‫Quindi questo punta semplicemente al login.
‫E un secondo
‫qui, la registrazione che in realtà non
‫implementeremo, quindi puoi implementarlo da
‫solo se ne hai voglia.
‫Quindi fondamentalmente un modulo di iscrizione.
‫Ma, poiché
‫tutto ciò, quindi l'intero processo di registrazione sarà
‫molto simile all'accesso, ho deciso
‫di non includerlo qui in questa sezione perché
‫sarebbe solo un sacco di contenuto duplicato
‫e non voglio rendere il corso inutile lungo.
‫Mettilo al sicuro, non so se
‫ora riavvia il server, in realtà non lo fa,
‫quindi salviamo
‫uno di questi file di script java.
‫Ora questo
‫è il nostro sito di riferimento.
‫Ricorda, questo è quello che vogliamo,
‫è questo.
‫Veniamo a tutti i
‫tour e ora proviamo il nostro percorso di accesso.
‫E, infatti, ecco la nostra forma.
‫Grande.
‫Ora qui possiamo inserire
‫alcune email,
‫diciamo admin dot naders dot
‫io.
‫E vedi che formatta
‫bene questo input qui se l'indirizzo email
‫è effettivamente valido o meno.
‫Ad esempio, se non ho l'estensione qui corretta,
‫diventerà arancione per
‫dirmi che qualcosa non va.
‫E la stessa cosa per la password.
‫Finché ho meno di otto caratteri, questo sarà
‫sempre rosso, in pratica
‫mi dice che c'è un errore.
‫Che ora che ho otto
‫caratteri, diventa verde.
‫E se sei interessato a come fare
‫questo tipo di magia con
‫css, sentiti libero di controllare il file css che ho codificato
‫solo per questo corso.
‫Ad ogni modo, ovviamente, fare clic su
‫questo pulsante qui ora fa assolutamente qualsiasi cosa, giusto?
‫Quindi nel prossimo video, inizieremo davvero
‫a implementare la funzionalità di accesso in realtà
‫facendo una richiesta al nostro punto finale dell'API che
‫abbiamo già creato.