login actions and login alert notification added

Author: pramit-marattha

README.md

@@ -1,7 +1,9 @@
 # Fullstack-MERN-Blogsite
 Fullstack Blogsite built using React as a frontend , express js (backend framework) and MongoDB as a database.Also, implemented various features like form validation ,user authentication(signup and login functionalities) ,separate user profiles, reset password, forgot password and much more. 
 
-commit History 
+Step By Step Build:
+Entire commit History 
+
 ```
 | a7241c556cc959b383d3d578e3dd0d95329fcaf5 | Fullstack Mern blogsite |
 | befa63adffe6552c0dcde0a6f04e5837fed13a9d | Create README.md |
@@ -17,4 +19,6 @@ commit History
 | ac66b43e13aca8e63c381b62a6761101224a8b63 | login and register page added and navbar updated with respective links |
 | c4f19452700c40eb2f5dda86548ad8f12b00637b | readme updated |
 | 00236e5aa973531e157588c809145b3dafe1ba7d | signup form created |
+| 852d776b09c675c64bca6a6009f50cbdc37aab90 | register actions and register alert notification added |
+
 ```

client/actions/authentication.js

@@ -14,4 +14,19 @@ export const signup = (user) => {
             return response.json();
         })
         .catch(error => console.log(error));
+};
+
+export const login = (user) => {
+    return fetch(`${API}/api/login`, {
+        method: 'POST',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(user)
+    })
+        .then(response => {
+            return response.json();
+        })
+        .catch(error => console.log(error));
 };

client/components/authentication/LoginAuth.js

@@ -0,0 +1,72 @@
+import React,{useState} from 'react';
+import {login} from "../../actions/authentication.js";
+import Router from "next/router";
+
+const LoginAuth = () => {
+
+    const [info,setInfo] = useState({email:"",password:"",error:"",loading:false,message:"",showForm:true});
+
+    const {email,password,error,loading,message,showForm} = info
+
+    const handleSubmit = event => {
+        event.preventDefault();
+        // console.table({ name, email, password, error, loading, message, showForm });
+        setInfo({ ...info, loading:true, error:false });
+        const user = {email, password };
+
+        login(user).then(data => {
+
+            // console.log("data.error",data.name)
+
+            if (data.error) {
+                setInfo({ ...info, error: data.error, loading: false });
+            } else {
+                // user token to cookie
+                // user information to localstorage
+                // authenticate the user
+                Router.push(`/`)
+            }
+        });
+    };
+
+    const handleChange= name =>(event)=>{
+        setInfo({...info,error:false,[name]: event.target.value});
+    }
+
+    const showLoading = () =>(loading ? <div className= "alert alert-success">Loading.....</div> : "");
+    const showError = () =>(error ? <div className= "alert alert-danger">{error}</div> : "");
+    
+    const showMessage = () =>(message ? <div className= "alert alert-primary">{message}</div> : "");
+    
+    const loginForm=()=>{
+    return (
+
+        <form onSubmit={handleSubmit}>
+       
+         {/* Email */}
+         <div className="form-group">
+            <input type="email" value={email} className="form-control" onChange={handleChange("email")} placeholder="Enter your @Email address"/>
+        </div>
+        {/* Password */}
+         <div className="form-group">
+            <input type="password" value={password} className="form-control" onChange={handleChange("password")} placeholder="New password"/>
+        </div>
+        {/* <div className =  */}
+        <div className="col text-center">
+        <button className="btn btn-info pt-3 pb-3 pl-5 pr-5">Login</button>
+        </div>
+        </form>
+    )
+};
+
+    return (
+        <>
+        {showError()}
+        {showLoading()}
+        {showMessage()}
+        {showForm && loginForm()}
+        </>
+    )
+}
+
+export default LoginAuth;

client/pages/login.js

@@ -1,13 +1,18 @@
-import Layout from "../components/Layout";
+import React from "react";
+import Layout from "../components/Layout";  
+import LoginAuth from "../components/authentication/LoginAuth";
 import Link from "next/link";
 
-
 const Login =() =>{
     return(
-        <Layout>
+      <Layout>
         <Link href="/"><a>Home</a></Link>
-        <br/>
-        <h2>Login page</h2>
+        <h3 className="text-center pt-3 pb-5">Login</h3>
+        <div className="row">
+        <div className="col-md-4 offset-md-4">
+        <LoginAuth/>
+        </div>
+        </div>
         </Layout>
     )
 }