Route Security – 2

Melanjutkan dari modul sebelumnya, kita akan sambungkan button submit dengan API di backend.

Buka file src/components/Login.js, pada fungsi handleSubmit, modifikasi menjadi seperti dibawah.

handleSubmit = (evt) =>{
    evt.preventDefault();

    let errors = [];
    
    if (this.state.email === ""){
        errors.push("email");
    }

    if (this.state.pswrd === ""){
        errors.push("pswrd");
    }
    
    this.setState({errors:errors});
     
    if (errors.length > 0){
        return false;
    }

    const data = new FormData(evt.target);
    const payload = Object.fromEntries(data.entries());
    const requestOpt = {
        method: "POST",
        body: JSON.stringify(payload),
    }
    
    fetch("http://localhost:4000/v1/signin", requestOpt)
    .then(response => response.json())
    .then(data =>{
        if(data.error){
            this.setState({
                alert:{
                    type: "alert-danger",
                    msg: data.error.message,
                } 
            })
        }else{
            this.handleJWT(data);

            this.props.history.push({
                pathname: "/admin",
            });
        }
    })
}

Lalu tambahkan fungsi untuk lifting state.

handleJWT(jwt){
    this.props.handleJWT(jwt);
}

Berikut isi lengkap file src/components/Login.js

import React, {Component, Fragment} from "react";

export default class Login extends Component{
    constructor(props){
        super(props);

        this.state={
            email : "",
            pswrd : "",
            error: null,
            errors: [],
            alert:{
                type: "d-none",
                msg: "",
            }
        }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange = (evt) =>{
        let value = evt.target.value;
        let name = evt.target.name;

        this.setState((prevState)=>({
            ...prevState,
            [name] : value
        }))
    }

    handleSubmit = (evt) =>{
        evt.preventDefault();

        let errors = [];
        
        if (this.state.email === ""){
            errors.push("email");
        }

        if (this.state.pswrd === ""){
            errors.push("pswrd");
        }
        
        this.setState({errors:errors});
         
        if (errors.length > 0){
            return false;
        }

        const data = new FormData(evt.target);
        const payload = Object.fromEntries(data.entries());
        const requestOpt = {
            method: "POST",
            body: JSON.stringify(payload),
        }
        
        fetch("http://localhost:4000/v1/signin", requestOpt)
        .then(response => response.json())
        .then(data =>{
            if(data.error){
                this.setState({
                    alert:{
                        type: "alert-danger",
                        msg: data.error.message,
                    } 
                })
            }else{
                this.handleJWT(Object.values(data)[0]);
                this.props.history.push({
                    pathname: "/admin",
                });
            }
        })
    }

    handleJWT(jwt){
        this.props.handleJWT(jwt);
    }

    hasError(key){
        return this.state.errors.indexOf(key) !== -1;
    }

    render(){
        return(
            <Fragment>
                <h2>Login</h2>
                <div className={`alert ${this.state.alert.type}`} role="alert">{this.state.alert.msg}</div>
                <form name="formlogin" className="pt-3" onSubmit={this.handleSubmit}>
                    <div className="mb-3">                    
                        <label htmlFor="email" className="form-label">Email</label>
                        {/* <input type="email" className={this.hasError("email")?"form-control is-invalid":"form-control"} id="email" name="email" onChange={this.handleChg}/> */}
                        <input type="email" className={`form-control ${this.hasError("email")?"is-invalid":""}`} id="email" name="email"  onChange={this.handleChange}/>
                        <div className={this.hasError("email")?"text-danger":"d-none"}>Please enter email...</div>
                    </div>                    
                    <div className="mb-3">
                        <label htmlFor="pswrd" className="form-label">Password</label>
                        <input type="password" className={`form-control ${this.hasError("pswrd")?"is-invalid":""}`} id="pswrd" name="pswrd"  onChange={this.handleChange}/>
                        <div className={this.hasError("pswrd")?"text-danger":"d-none"}>Please enter password...</div>                        
                    </div>
                    <hr/>
                    <button className="btn btn-primary">Login</button>
                </form>
            </Fragment>
        );
    }
}

Sampai disini, kita sudah berhasil melakukan proses login. Pada modul selanjutnya kita akan melakukan validasi token.