ptb-fe/pages/login.js

import { connect } from "react-redux";
// import Router, { withRouter } from "next/router";
import { login } from "@/store/actions/user";

import React, { Component } from "react";
import BasePage from "@/components/Layout/BasePage";
import { Row, Col, Input, Card, CardHeader, CardBody, CardFooter, CustomInput } from "reactstrap";

import FormValidator from "@/components/Forms/Validator.js";

/**
 * Validation flow using controlled components
 *
 * 1- User type on input
 * 2- onChange event trigger validation
 * 3- Validate methods are listed using "data-validate"
 *    attribute. Content must be an array in json format.
 * 4- The validation returns an object with format {[input name]: status}
 *    where status is an array of boolean per each method
 * 5- Methods that requires an argument, read the 'data-param' attribute
 * 6- Similarly, onSubmit event does a bulk validation on all form elements
 */

class Login extends Component {
	state = {
		/* Group each form state in an object.
           Property name MUST match the form name */

		formLogin: {
			username: "",
			password: "",
		},
	};

	/**
	 * Validate input using onChange event
	 * @param  {String} formName The name of the form in the state object
	 * @return {Function} a function used for the event
	 */
	validateOnChange = (event) => {
		const input = event.target;
		const form = input.form;
		const value = input.type === "checkbox" ? input.checked : input.value;

		const result = FormValidator.validate(input);

		this.setState({
			[form.name]: {
				...this.state[form.name],
				[input.name]: value,
				errors: {
					...this.state[form.name].errors,
					[input.name]: result,
				},
			},
		});
	};

	onSubmit = (e) => {
		const form = e.target;
		const inputs = [...form.elements].filter((i) => ["INPUT", "SELECT"].includes(i.nodeName));

		const { errors, hasError } = FormValidator.bulkValidate(inputs);

		this.setState({
			[form.name]: {
				...this.state[form.name],
				errors,
			},
		});

		console.log(hasError ? "Form has errors. Check!" : "Form Submitted!");
		if (!hasError) {
			const { username, password } = this.state.formLogin;
			console.log(this.state);
			this.dispatch(login(username, password));
		}
		e.preventDefault();
	};

	/* Simplify error check */
	hasError = (formName, inputName, method) => {
		return this.state[formName] && this.state[formName].errors && this.state[formName].errors[inputName] && this.state[formName].errors[inputName][method];
	};

	render() {
		return (
			<div className="block-center mt-4 wd-xl">
				<div className="card card-flat">
					<img className="card-img-top" src="/static/img/logo.png" alt="Logo"></img>
					<div className="card-body">
						{" "}
						<h5 className="card-title text-center py-2 bg-gray">Aplikasi Perguruan Tinggi Bermasalah </h5>
						<form onSubmit={this.onSubmit} method="post" name="formLogin">
							<div className="form-group">
								<label className="col-form-label">Username *</label>
								<Input type="text" name="username" invalid={this.hasError("formLogin", "username", "required")} onChange={this.validateOnChange} data-validate='["required"]' value={this.state.formLogin.username} />
								{this.hasError("formLogin", "username", "required") && <span className="invalid-feedback">Field is required</span>}
							</div>
							<div className="form-group">
								<label className="col-form-label">Password *</label>
								<Input
									type="password"
									id="id-password"
									name="password"
									invalid={this.hasError("formLogin", "password", "required")}
									onChange={this.validateOnChange}
									data-validate='["required"]'
									value={this.state.formLogin.password}
								/>
								<span className="invalid-feedback">Field is required</span>
							</div>
							<div className="required">* Required fields</div>
							<button type="submit" className="btn btn-block btn-primary mt-3">
								Login
							</button>
						</form>
					</div>
				</div>
			</div>
		);
	}
}
Login.Layout = BasePage;

export default connect(null)(Login);