Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from "react";
- import Input from "./common/Input";
- export default class LoginForm extends Component {
- state = {
- username: "",
- password: "",
- errors: {}
- };
- validate = () => {
- const errors = {};
- if (this.state.username.trim() === "") {
- errors.username = "Username is required";
- }
- if (this.state.password.trim() === "") {
- errors.password = "Password is required";
- }
- return Object.keys(errors).length === 0 ? null : errors;
- };
- handleSubmit = e => {
- e.preventDefault();
- const errors = this.validate();
- console.log(errors);
- this.setState({ errors: errors || {} });
- if (errors) return;
- };
- validateProperty = (input, e) => {
- const { value } = e.target;
- if (input === "username") {
- if (value.trim() === "") return "Username is required";
- }
- if (input === "password") {
- if (value.trim() === "") return "Password is required";
- }
- };
- handleChange = input => e => {
- console.log(e.target.value, input);
- const errors = { ...this.state.errors };
- const errorMessage = this.validateProperty(input, e);
- if (errorMessage) errors[input] = errorMessage;
- else delete errors[input];
- this.setState({
- [input]: e.target.value,
- errors: errors
- });
- };
- /* handleChange = e => {
- const { name, value } = e.target;
- this.setState({
- [name]: value
- });
- }; */
- render() {
- const { username, password, errors } = this.state;
- return (
- <div>
- <h1>Login</h1>
- <form onSubmit={this.handleSubmit}>
- <Input
- name="username"
- value={username}
- label="Username"
- onChange={this.handleChange}
- type={"text"}
- error={errors.username}
- />
- <Input
- name="password"
- value={password}
- label="Password"
- onChange={this.handleChange}
- type={"password"}
- error={errors.password}
- />
- <button className="btn btn-primary">Login</button>
- </form>
- </div>
- );
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement