Logging Users

Buka postman dan masukkan url http://localhost:3900/api/auth

pastikan data nya muncul seperti gambar di bawah

Lalu kita akan implement ke form login kita, buat file baru didalam folder services

AuthService.js

import http from './HttpService';

const apiEndpoint = 'http://localhost:3900/api/auth';

export function login(email, password) {
    return http.post(apiEndpoint, { email, password });
}

dan ubah LoginForm.jsx

import React, { Component } from "react";
import Joi from "joi-browser";
import Form from "./Common/Form";
import { login } from '../services/AuthService';

class LoginForm extends Form {
    state = {
        data : {
            username: '',
            password: ''
        },
        errors: {}
    };

    schema = {
        username: Joi.string().required().label("Username"),
        password: Joi.string().required().label("Password")
    };
    
    doSubmit = async () => {
        const { data } = this.state;
        await login(data.username, data.password);
    };

    render(){
        return (
            <>
                <div>
                    <h1>Login</h1>
                    <form onSubmit={this.handleSubmit} >
                        {this.renderInput('username', 'Username')}
                        {this.renderInput('password', 'Password', "password")}
                        {this.renderButton('Login')}
                    </form>
                </div>
            </>
        )
    }
}

export default LoginForm

Jika ingin menambahkan validasi

LoginForm.jsx

import React, { Component } from "react";
import Joi from "joi-browser";
import Form from "./Common/Form";
import { login } from '../services/AuthService';

class LoginForm extends Form {
    state = {
        data : {
            username: '',
            password: ''
        },
        errors: {}
    };

    schema = {
        username: Joi.string().required().label("Username"),
        password: Joi.string().required().label("Password")
    };
    
    doSubmit = async () => {
        try {
            const { data } = this.state;
            await login(data.username, data.password);
        } catch (error) {
            if (error.response && error.response.status === 400) {
                const errors = { ...this.state.errors };
                errors.username = error.response.data;
                this.setState({ errors });
            }
        }
    };

    render(){
        return (
            <>
                <div>
                    <h1>Login</h1>
                    <form onSubmit={this.handleSubmit} >
                        {this.renderInput('username', 'Username')}
                        {this.renderInput('password', 'Password', "password")}
                        {this.renderButton('Login')}
                    </form>
                </div>
            </>
        )
    }
}

export default LoginForm