.

src/api/auth.js

@@ -1,18 +1,26 @@
 import axios from "./index";
 
 class AuthApi {
+  static login = (params) => {
+    return axios.get(`/user/`, params);
+  };
 
-    static signin = (data) => {
-        return axios.post(`${base}/auth/signin`,data)
-    }
+  static signin = (data) => {
+    return axios.post(`${base}/auth/signin`, data);
+  };
+  static signup = (params) => {
+    return axios.post(`/user/`, params);
+  };
 
-    static Register = (data) => {
-        return axios.post(`${base}/register`, data);
-    };
+  static Register = (data) => {
+    return axios.post(`${base}/register`, data);
+  };
 
-    static Logout = (data) => {
-        return axios.post(`${base}/logout`, data, { headers: { Authorization: `${data.token}` } });
-    };
+  static Logout = (data) => {
+    return axios.post(`${base}/logout`, data, {
+      headers: { Authorization: `${data.token}` },
+    });
+  };
 }
 
 let base = "users";

src/api/profile.js

@@ -0,0 +1,10 @@
+import axios from "./index";
+
+class ProfileApi {
+
+    static edit = (id, body) => {
+        return axios.put(`/user/${id}`, body)
+    }
+}
+
+export default ProfileApi;

src/config/url.js

@@ -1,14 +1,25 @@
-const ROOT_URL = '/';
+const ROOT_URL = "/";
 
 // Employee
-const EMPLOYEE_FORM = '/employee/form';
-const EMPLOYEE_LIST_URL = '/employees';
+const EMPLOYEE_FORM = "/employee/form";
+const EMPLOYEE_LIST_URL = "/employees";
 
 // User
-const FEED_URL = '/feed';
-const PROFILE_URL = '/profile';
+const FEED_URL = "/feed";
+const PROFILE_URL = "/profile";
 
 // Auth
-const LOGIN_URL = '/login';
+const LOGIN_URL = "/login";
+const SIGNUP_URL = "/signup";
+const BLOG_URL = "/blog";
 
-export {ROOT_URL, EMPLOYEE_FORM, EMPLOYEE_LIST_URL, LOGIN_URL, FEED_URL, PROFILE_URL};
+export {
+  ROOT_URL,
+  EMPLOYEE_FORM,
+  EMPLOYEE_LIST_URL,
+  LOGIN_URL,
+  FEED_URL,
+  PROFILE_URL,
+  SIGNUP_URL,
+  BLOG_URL,
+};

src/index.js

@@ -5,13 +5,24 @@ import App from "./App";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Feed from "./views/feed";
 import Login from "./views/auth/Login";
+import SignUp from "./views/auth/SignUp/SignUp";
 import Dashboard from "./views/dashboard";
 import EmployeeForm from "./views/employees/Form";
 import { Profile } from "./views/employees/Profile";
 import { AuthProvider } from "./context/AuthProvider";
 import { NavigationProvider } from "./context/NavigationProvider";
-import { EMPLOYEE_FORM, EMPLOYEE_LIST_URL, FEED_URL, LOGIN_URL, PROFILE_URL, ROOT_URL } from "./config/url";
-import { QueryClient, QueryClientProvider } from 'react-query';
+import {
+  EMPLOYEE_FORM,
+  EMPLOYEE_LIST_URL,
+  FEED_URL,
+  LOGIN_URL,
+  PROFILE_URL,
+  ROOT_URL,
+  SIGNUP_URL,
+  BLOG_URL,
+} from "./config/url";
+import { QueryClient, QueryClientProvider } from "react-query";
+import Blog from "./views/auth/Blog/Blog";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 let user = localStorage.getItem("user");
@@ -31,6 +42,8 @@ root.render(
               <Route path={FEED_URL} element={<Feed />} />
               <Route path={PROFILE_URL} element={<Profile />} />
               <Route path={LOGIN_URL} element={<Login />} />
+              <Route path={SIGNUP_URL} element={<SignUp />} />
+              <Route path={BLOG_URL} element={<Blog />} />
             </Routes>
           </Router>
         </QueryClientProvider>

src/views/auth/Blog/Blog.js

@@ -0,0 +1,23 @@
+import React from "react";
+import BlogForm from "./BlogForm";
+
+const Blog = () => {
+  return (
+    <>
+      <div class="auth-container">
+        <div class="row">
+          <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
+            <div class="card card-signin my-5">
+              <div class="card-body">
+                <h1 class="card-title text-center">Create New Blog</h1>
+                <BlogForm />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Blog;

src/views/auth/Blog/BlogForm.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const BlogForm = () => {
+  return <></>;
+};
+
+export default BlogForm;

src/views/auth/Login/Form.js

@@ -2,9 +2,10 @@ import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import AuthApi from "../../../api/auth";
 import Swal from "sweetalert2";
+import { Link, NavLink } from "react-router-dom";
 import { useAuth } from "../../../context/AuthProvider";
 import { useNavigate } from "react-router-dom";
-import { ROOT_URL } from "../../../config/url";
+import { PROFILE_URL, ROOT_URL, SIGNUP_URL } from "../../../config/url";
 
 const LoginForm = () => {
   const {
@@ -18,16 +19,18 @@ const LoginForm = () => {
   useEffect(() => {
     if (user) {
       console.log("user", user);
-      navigate(ROOT_URL);
+      navigate(PROFILE_URL);
     }
   }, [user]);
 
   const onSubmit = (data) => {
-    setUser(data);
-    localStorage.setItem("user", JSON.stringify(data));
+    // setUser(data);
+    localStorage.setItem("user =---->", JSON.stringify(data));
 
-    AuthApi.signin(data).then((result) => {
-      console.log("signin", result);
+    // call an API to login
+    // when api gives success response, navigate to root url
+    AuthApi.login(data).then((result) => {
+      console.log("signin -> ", result);
       if (result.status === 200) {
         Swal.fire({
           timer: 1500,
@@ -36,12 +39,12 @@ const LoginForm = () => {
             Swal.showLoading();
           },
           willClose: () => {
-            localStorage.setItem(
-              "access_token",
-              result.data.tokens.access_token
-            );
-            localStorage.setItem("user", JSON.stringify(data));
-            setUser(data);
+            // localStorage.setItem(
+            //   "access_token",
+            //   result.data.tokens.access_token
+            // );
+            localStorage.setItem("user", JSON.stringify(result.data));
+            setUser(result.data);
 
             Swal.fire({
               icon: "success",
@@ -70,17 +73,20 @@ const LoginForm = () => {
       }
     });
   };
+  const handleNavigate = () => {
+    navigate(SIGNUP_URL);
+  };
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="form-signin">
-      <div>
+      {/* <div>
         <input
           type="text"
           {...register("name", { required: true })}
           placeholder="Name"
         />
         {errors.name && <span>This field is required</span>}
-      </div>
+      </div> */}
       <div>
         <input
           type="email"
@@ -114,12 +120,22 @@ const LoginForm = () => {
           Forgot password?
         </label>
       </div>
-      <button
-        className="btn btn-lg btn-primary btn-block text-uppercase"
-        type="submit"
-      >
-        Sign in
-      </button>
+
+      <div className="d-flex justify-content-between">
+        <button
+          className="btn btn-lg btn-primary btn-block text-uppercase"
+          type="submit"
+        >
+          Sign in
+        </button>
+        <button
+          className="btn btn-lg btn-primary btn-block text-uppercase"
+          onClick={handleNavigate}
+        >
+          Sign Up
+        </button>
+      </div>
+
       <hr class="my-4" />
       <div className="social-login">
         <button

src/views/auth/SignUp/SignUp.js

@@ -0,0 +1,23 @@
+import React from "react";
+import SignUpForm from "./SignUpForm";
+
+const SignUp = () => {
+  return (
+    <>
+      <div class="auth-container">
+        <div class="row">
+          <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
+            <div class="card card-signin my-5">
+              <div class="card-body">
+                <h1 class="card-title text-center">Sign Up</h1>
+                <SignUpForm />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SignUp;