Version changes

client/package.json

@@ -47,5 +47,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

client/src/App.js

@@ -1,31 +1,37 @@
-import './App.css';
+import "./App.css";
 import { Route, Routes } from "react-router-dom";
-import Header from './componets/Header';
-import React from 'react';
-import Login from './componets/Login';
-import Blogs from './componets/Blogs';
-import UserBlogs from './componets/UserBlogs'
-import AddBlogs from './componets/AddBlogs'
-import BlogDetail from './componets/BlogDetail'
-
-
-
+import Header from "./componets/Header";
+import React from "react";
+import Login from "./componets/Login";
+import Blogs from "./componets/Blogs";
+import UserBlogs from "./componets/UserBlogs";
+import AddBlogs from "./componets/AddBlogs";
+import BlogDetail from "./componets/BlogDetail";
+import Home from "./componets/home";
+import AccountProvider from "./context";
+import { ProtectedRoutes } from "./utils/Protected";
 function App() {
-  return <React.Fragment>
-    <header>
-      <Header/>
-    </header>
-    <main>
-    <Routes>
-      <Route path="/login" element={<Login/>}></Route>
-      <Route path="/blogs" element={<Blogs/>}></Route>
-      <Route path="/myBlogs" element={<UserBlogs/>}></Route>
-      <Route path="/myBlogs/:id" element={<BlogDetail/>}></Route>
-      <Route path="/blogs/add" element={<AddBlogs />} />
-    </Routes>
-    </main>
-
-  </React.Fragment>;
+  return (
+    <React.Fragment>
+      <header>
+        <Header />
+      </header>
+      <main>
+        <Routes>
+          <Route element={<AccountProvider />}>
+            <Route path="/login" element={<Login />}></Route>
+            <Route element={<ProtectedRoutes />}>
+              <Route path="/" element={<Home />} />
+              <Route path="/blogs" element={<Blogs />}></Route>
+              <Route path="/myBlogs" element={<UserBlogs />}></Route>
+              <Route path="/myBlogs/:id" element={<BlogDetail />}></Route>
+              <Route path="/blogs/add" element={<AddBlogs />} />
+            </Route>
+          </Route>
+        </Routes>
+      </main>
+    </React.Fragment>
+  );
 }
 
 export default App;

client/src/componets/BlogDetail.js

@@ -34,7 +34,7 @@ const BlogDetail = () => {
         description: data.blog.description,
       });
     });
-  }, [id]);
+  });
   const sendRequest = async () => {
     const res = await axios
       .put(`${config.BASE_URL}/api/blogs/update/${id}`, {

client/src/componets/Header.js

@@ -1,4 +1,3 @@
-import React, { useReducer } from "react";
 import { Link } from "react-router-dom";
 import { authActions, setDarkmode } from "../store";
 import {

client/src/componets/Login.js

@@ -1,118 +1,176 @@
 import { Box, Button, TextField, Typography } from "@mui/material";
-import React, { useState } from "react";
-import axios from "axios";
+import React, { useState, useContext } from "react";
+import { userLogin, userSignup } from "../service/api";
+import { AccountContext } from "../context";
+import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { authActions } from "../store";
-import { useNavigate } from "react-router-dom";
-import config from "../config";
+const signupValues = {
+  name: "",
+  email: "",
+  password: "",
+};
+
+const loginValues = {
+  email: "",
+  password: "",
+};
 
 const Login = () => {
-  const naviagte = useNavigate();
+  const { setUser } = useContext(AccountContext);
+  const navigate = useNavigate();
   const dispath = useDispatch();
-  const [inputs, setInputs] = useState({
-    name: "",
-    email: "",
-    password: "",
-  });
-  const [isSignup, setIsSignup] = useState(false);
-  const handleChange = (e) => {
-    setInputs((prevState) => ({
-      ...prevState,
-      [e.target.name]: e.target.value,
-    }));
+  const [account, toggleAccount] = useState("login");
+  const [signup, setSignup] = useState(signupValues);
+  const [login, setLogin] = useState(loginValues);
+  const [error, setError] = useState(null);
+  const [signUpError, setSignUpError] = useState(null);
+  const [loginError, setLoginError] = useState(null);
+  const handleSignupChange = (evt) => {
+    setSignup({ ...signup, [evt.target.name]: evt.target.value });
   };
-  const sendRequest = async (type = "login") => {
-    console.log("inside send req");
-    console.log(`${config.BASE_URL}/api/users/${type}`);
-    const res = await axios
-      .post(`${config.BASE_URL}/api/users/${type}`, {
-        name: inputs.name,
-        email: inputs.email,
-        password: inputs.password,
-      })
-      .catch((err) => console.log(err));
 
-    const data = await res.data;
-    console.log("return");
-    console.log(data);
-    return data;
+  const handleLoginChange = (evt) => {
+    setLogin({ ...login, [evt.target.name]: evt.target.value });
   };
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    console.log(inputs);
-    if (isSignup) {
-      sendRequest("signup")
-        .then((data) => localStorage.setItem("userId", data.user._id))
-        .then(() => dispath(authActions.login()))
-        .then(() => naviagte("/blogs"));
-    } else {
-      sendRequest()
-        .then((data) => localStorage.setItem("userId", data.user._id))
-        .then(() => dispath(authActions.login()))
-        .then(() => naviagte("/blogs"));
+  const handleLogin = async () => {
+    if (validateLoginFields()) {
+      setLogin(loginValues);
+      const res = await userLogin(login);
+      if (res.status === 200) {
+        setUser(res.data);
+        localStorage.setItem("user", JSON.stringify(res.data));
+        dispath(authActions.login());
+        navigate("/");
+      } else {
+        setLoginError(res.data.message);
+      }
     }
   };
+
+  const handleSignup = async () => {
+    if (validateSignupField()) {
+      console.log(signup);
+      setSignup(signupValues);
+      const res = await userSignup(signup);
+      setSignUpError(res.data.message);
+    }
+  };
+
+  const handleCreateAccount = () => {
+    setError(null);
+    account === "signup" ? toggleAccount("login") : toggleAccount("signup");
+  };
+
+  const validateLoginFields = () => {
+    if (!login.email || !login.password) {
+      setError("All fields are required");
+      return false;
+    }
+    setError("");
+    return true;
+  };
+
+  const validateSignupField = () => {
+    if (!signup.name || !signup.email || !signup.password) {
+      setError("All fields are required");
+      return false;
+    }
+    setError("");
+    return true;
+  };
   return (
-    <div>
-      <form onSubmit={handleSubmit}>
-        <Box
-          maxWidth={400}
-          display="flex"
-          flexDirection={"column"}
-          alignItems="center"
-          justifyContent={"center"}
-          boxShadow="10px 10px 20px #ccc"
-          padding={3}
-          margin="auto"
-          marginTop={5}
-          borderRadius={5}
-        >
+    <Box
+      maxWidth={400}
+      display="flex"
+      flexDirection={"column"}
+      alignItems="center"
+      justifyContent={"center"}
+      boxShadow="10px 10px 20px #ccc"
+      padding={3}
+      margin="auto"
+      marginTop={5}
+      borderRadius={5}
+    >
+      {account === "login" ? (
+        <>
           <Typography variant="h2" padding={3} textAlign="center">
-            {isSignup ? "Signup" : "Login"}
+            {account === "signup" ? "Signup" : "Login"}
           </Typography>
-          {isSignup && (
-            <TextField
-              name="name"
-              onChange={handleChange}
-              value={inputs.name}
-              placeholder="Name"
-              margin="normal"
-            />
-          )}{" "}
           <TextField
             name="email"
-            onChange={handleChange}
-            value={inputs.email}
+            onChange={handleLoginChange}
+            value={login.email}
             type={"email"}
             placeholder="Email"
             margin="normal"
           />
           <TextField
             name="password"
-            onChange={handleChange}
-            value={inputs.password}
+            onChange={handleLoginChange}
+            value={login.password}
             type={"password"}
             placeholder="Password"
             margin="normal"
           />
+          {error && <p>{error}</p>}
+          {loginError && <p>{loginError}</p>}
           <Button
+            onClick={handleLogin}
             type="submit"
             variant="contained"
-            sx={{ borderRadius: 3, marginTop: 3 }}
+            sx={{ borderRadius: 3, marginTop: 3, marginBottom: 3 }}
             color="warning"
           >
-            Submit
+            Login
           </Button>
+
+          <Button onClick={handleCreateAccount}>Create an account</Button>
+        </>
+      ) : (
+        <>
+          <Typography variant="h2" padding={3} textAlign="center">
+            {account ? "Sign-up" : "Login"}
+          </Typography>
+          <TextField
+            name="name"
+            onChange={handleSignupChange}
+            value={signup.name}
+            placeholder="Name"
+            margin="normal"
+          />
+          <TextField
+            name="email"
+            onChange={handleSignupChange}
+            value={signup.email}
+            type={"email"}
+            placeholder="Email"
+            margin="normal"
+          />
+          <TextField
+            name="password"
+            onChange={handleSignupChange}
+            value={signup.password}
+            type={"password"}
+            placeholder="Password"
+            margin="normal"
+          />
+          {error && <p>{error}</p>}
+          {signUpError && <p>{signUpError}</p>}
           <Button
-            onClick={() => setIsSignup(!isSignup)}
-            sx={{ borderRadius: 3, marginTop: 3 }}
+            type="submit"
+            variant="contained"
+            sx={{ borderRadius: 3, marginTop: 3, marginBottom: 3 }}
+            color="warning"
+            onClick={handleSignup}
           >
-            Change To {isSignup ? "Login" : "Signup"}
+            Sign-up
           </Button>
-        </Box>
-      </form>
-    </div>
+          <Button onClick={handleCreateAccount}>Already have an account</Button>
+        </>
+      )}
+    </Box>
   );
 };