Loginpagina.

Op de loginpagina komt een formulier waarmee een gebruiker zich kan registreren met zijn email en wachtwoord. Angular kent twee soorten formulieren. Template-driven forms en Reactive forms. Welk type formulier je gebruikt, maakt in principe niet veel uit. Wij gaan voor de template-driven form. Deze leunt het meest aan bij de formulieren die je uit HTML5 kent.

Voor je het formulier kan gebruiken, moet je eerst de FormModule in de LoginModule importeren.

• Open src/app/login/login.module.ts en importeer de FormsModule.

Template aanpassen.

Plaats op de loginpagina een formulier met twee tekstvelden (email en wachtwoord). Het formulier heeft geen submitbutton, maar wel drie buttons die elk een methode in de component aanspreken. Deze methodes voeren vervolgens de bijbehorende acties in de authService uit.
Rechts van het formulier komen nog vier social media buttons. Ook deze sturen we via de component door naar de service. Merk op dat we voorlopig enkel Google in de Firebase console hebben geactiveerd! De drie andere buttons zullen dus altijd een fout genereren. We gaan ze toch al voorzien zodat je achteraf zelf kan beslissen of je de diensten in de Firebase activeert of dat je de buttons gewoon verwijdert.

• Wijzig de code op src/app/login/login.component.html.

Buiten de opbouw van de form-tag, zit er niets nieuws in deze pagina. Het formulier werkt voorlopig nog niet, omdat de bijbehorende component nog niet is ingevuld.

• alert-box:
  Net onder de titel staat een alert-box. Zowel de authService als de component zullen regelmatig meldingen genereren en deze verschijnen straks in dit rode of in een groene kader. De alert-box is enkel zichtbaar als de variabele alertBox.msg niet null is. De kleur van de box wordt bepaald door de bootstrap-class in alertBox.color.
• De form-tag:
  In template-driven form moet de aan de form-tag een unieke template variabele toekennen. Bijvoorbeeld #f="ngForm". Hierin is f de variabele waarnaar we verder in het formulier refereren.
  De twee invulvelden zijn via two-way binding aan de variabele loginData gekoppeld.
  Onder de tekstvelden komen vier buttons waarmee je respectievelijk kan aanmelden, inloggen, uitloggen en het wachtwoord resetten. Tussen de haakjes verwijst f.value naar de data uit het formulier. Dit is een object met als key het name-attribuut van het tekstveld en als value de ingevulde waarde.
  De tweede parameter,f.valid, is een booleaanse waarde die aangeeft of alle velden correct zijn ingevuld.
  Is het wachtwoord bijvoorbeeld maar vier karakters lang, dan is f.value gelijk aan false.
• Social login:
  Ook hier weer een click-event waarbinnen de string bepaalt welke methode de authService moet gebruiken.
• Al wat onder de horizontale lijn staat, dient enkel om de verschillende waardes uit de component en uit de authService makkelijk te controle en mag je later wissen.

Component aanpassen.

• Wijzig de code op src/app/login/login.component.ts.

De logica binnen deze component vraagt weinig uitleg. De meeste dingen heb je ondertussen al meermaals gebruikt.

• Binnen emailSignUp(data: any, isValid: string) en emailLogin(data: any, isValid: string) wordt de data uit het formulier in localStorage bewaard. Zo hoeft de gebruiker niet telkens opnieuw zijn gegevens in te vullen.
• Binnen de constructor haal je het mailadres en het wachtwoord uit localStorage op en plaatst deze in de variabel loginData. Omdat de formuliervelden via two-way binding gekoppeld zijn, wordt het formulier ook dadelijk ingevuld.
  Omdat de authService regelmatig boodschappen naar onze pagina zal sturen, had je in de service twee observables voorzien. Door deze via de constructor aan alertBox te koppelen, zal elke wijziging in de service dadelijk zichtbaar worden op de pagina.
• Merk op dat je de variabel alertBox zowel vanuit de component zelf als vanuit de service kan wijzigen.

constructor(private abcService: AbcService) { ... }

• Alle publieke properties en methodes uit AbcService zijn ENKEL toegankelijk in de module en zijn NIET toegankelijk in de template!

constructor(public abcService: AbcService) { ... }

• Alle publieke properties en methodes uit AbcService zijn zowel toegankelijk in de module als in de template.

Kijk nog eens goed naar de template. Op de laatste lijn ga je rechtstreeks de methode getAuthState$() uit de authService op de pagina tonen. Had je de service nu private geïnjecteerd, dan zal je merken dit met ng serve geen probleem geeft, maar zodra je naar productie overgaat (ng build --prod) zal je compilatiefouten krijgen!