Menggunakan Authentication Pada Project Buku Resep – 2

Pada modul ini kita akan memisahkan state authenticate atau tidak authenticate.

Buka file auth.component.ts, lalu tambahkan code dibawah.

import { Component } from "@angular/core";
import { NgForm } from "@angular/forms";

@Component({
    selector : 'app-auth',
    templateUrl : './auth.component.html'
})
export class AuthComponent{
    //property status login
    isLoginMode = true;

    onSwitchMode(){
        this.isLoginMode = !this.isLoginMode; 
    }

    //method untuk handling form login submit
    onSubmit(form : NgForm){
        console.log(form.value);
        form.reset()
    }
}

Kemudian buka file auth.component.html, lakukan penambahan untuk

• form handling dan validasi dengan pendekatan template driven.
• mengatur status button login dan switch login berdasarkan property status login

<div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
        <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" class="form-control" ngModel name="email" required email>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" class="form-control" ngModel name="password" required minlength="6">
            </div>    
            <hr>        
            <div>
                <button class="btn btn-primary" type="submit" [disabled]="loginForm.invalid">{{isLoginMode ? 'Login' : 'Signup'}}</button> &nbsp; 
                <button class="btn btn-primary" (click)="onSwitchMode()" type="button">Switch to {{isLoginMode ? 'Signup' : 'Login'}}</button>
            </div>
        </form>
    </div>
</div>

Sampai disini kita sudah melakukan form setup dan validasi.

Pada modul selanjutnya kita akan menyiapkan backend untuk menyimpan data user dan proses authentication dengan menggunakan Firebase.

Tidak harus menggunakan Firebase, Anda dapat menggunakan server Anda sendiri. Digunakan FIrebase untuk kemudahan tutorial saja.