[ADD] Added validation for login page

Author: tanvirstreame

carmanagement_client/src/Components/login.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { Route, withRouter, useHistory } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import axios from "axios";
-
+import swal from "sweetalert";
 import "../Components/Styles/login.scss";
 import Home from "../Components/home"
 
@@ -14,6 +14,10 @@ class Login extends Component {
             formValue: {
                 username: "",
                 password: "",
+            },
+            formError: {
+                username: false,
+                password: false,
             }
         }
 
@@ -28,12 +32,37 @@ class Login extends Component {
                 ...this.state.formValue,
                 [name]: value,
 
+            },
+            formError: {
+                ...this.state.formError,
+                [name]: false,
+
             }
         })
     }
 
     handleSubmit = () => {
-        console.log(this.state.formValue)
+        let formError = {};
+        let formData = this.state.formValue;
+        let isValid = true;
+        Object.keys(formData).forEach(key => {
+            if (!formData[key]) {
+                isValid = false;
+                formError = {
+                    ...formError,
+                    [key]: true
+                }
+            }
+        })
+        if (!isValid) {
+            this.setState({
+                formError: {
+                    ...this.state.formError,
+                    ...formError
+                }
+            })
+            return;
+        }
 
         axios.post('/core/api/token/', {
             ...this.state.formValue
@@ -43,6 +72,8 @@ class Login extends Component {
                     localStorage.setItem('auth', response.data.access);
                     this.props.history.push("/")
                 }
+            }).catch(error => {
+                swal("", "User not found", "error");
             })
     }
 
@@ -60,11 +91,17 @@ class Login extends Component {
                             </div>
                             <div className="card-body">
                                 <form className="login-form ml-4 mb-4 mr-4  mt-2">
-                                    <label>Username</label>
-                                    <input defaultValue="" className="" type="text" onChange={e => this.handleOnChange(e)} name="username" value={username} />
-                                    <label className="mt-3">Password</label>
-                                    <input defaultValue="" className="" type="password" onChange={e => this.handleOnChange(e)} name="password" value={password} />
-                                    <input className="mt-5 btn btn-primary btn-submit btn-block" value="Submit" onClick={e => this.handleSubmit(e)} type="button" />
+                                    <div>
+                                        <label>Username</label>
+                                        <input className="mb-2" type="text" onChange={e => this.handleOnChange(e)} name="username" value={username} />
+                                        <span className="text-danger">{this.state.formError.username && "Please enter your username"}</span>
+                                    </div>
+                                    <div>
+                                        <label className="mt-3">Password</label>
+                                        <input className="mb-2" type="password" onChange={e => this.handleOnChange(e)} name="password" value={password} />
+                                        <span className="text-danger">{this.state.formError.password && "Please enter your password"}</span>
+                                    </div>
+                                    <input className="mt-4 btn btn-primary btn-submit btn-block" value="Submit" onClick={e => this.handleSubmit(e)} type="button" />
 
                                 </form>
                                 <p className="ml-4">Don't have an account?<Link className="ml-1" to={"/register"}>Sign Up</Link></p>