Feat: all reference functionality at login and styles

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.5",
     "formik": "^2.2.9",
+    "jsonwebtoken": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",

src/App.js

@@ -1,18 +1,26 @@
 import { HomePage, PostForm, NotFoundPage } from "./pages/index";
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, Navigate } from "react-router-dom";
 import { PostProvider } from "./context/postContext";
 import { Toaster } from "react-hot-toast";
+import Signup from './components/signup';
+import Login from './components/Login';
+
 
 function App() {
+
+  const user = localStorage.getItem("token")
   return (
     <div className="bg-neutral-900 min-h-screen flex items-center">
       <div className="px-10  m-auto">
         <PostProvider>
       <Routes>
-      <Route path="/" element={<HomePage />} />
+        {user && <Route path="/" exact element={<HomePage/>}/>}
+        <Route path="/signup" exact element={<Signup/>}/>
+        <Route path ="/login" exact element={<Login/>}/>
       <Route path="/new" element={<PostForm />} />
       <Route path="/posts/:id" element={<PostForm />} />
       <Route path="*" element={<NotFoundPage />} />
+      <Route path="/" exact element ={<Navigate replace to ="/login"/>}/>
     </Routes>
     <Toaster/>
     </PostProvider>

src/components/Login/index.jsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import styles from "./styles.module.css";
+import { Link } from "react-router-dom";
+import axios from 'axios'
+
+const Signup = () => {
+  const [data, setData] = useState({
+    email: "",
+    password: "",
+  });
+
+
+  const [error, setError] = useState("")
+
+  const handleChange = ({ currentTarget: input }) => {
+    setData({ ...data, [input.name]: input.value });
+  };
+
+  const handleSubmit =async (e) => {
+    e.preventDefault();
+    try {
+        const url = "http://localhost:4000/api/auth/signin";
+        const {data:res} = await axios.post(url,data);
+        localStorage.setItem("token", res.data);
+        window.location= "/"
+    } catch (error) {
+        if(error.response &&
+            error.response.status >=400 &&
+            error.response.status <=500
+            ){
+                setError(error.response.data.message)
+            }
+
+    }
+
+  }
+
+  return (
+    <div className="w-full">
+      <div className={styles.login_form_container}>
+        <div className={styles.left}>
+        <form className={styles.form_container} onSubmit={handleSubmit}>
+          <h1> Login to Your Account</h1>
+          <input
+            type="email"
+            placeholder="Email"
+            name="email"
+            onChange={handleChange}
+            value={data.email}
+            required
+            className={styles.input}
+          />
+
+          <input
+            type="password"
+            placeholder="Password"
+            name="password"
+            onChange={handleChange}
+            value={data.password}
+            required
+            className={styles.input}
+          />
+          {error && <div className={styles.error_msg}> {error}</div>}
+          <button type="submit" className={styles.green_btn}>
+            Sign in
+
+          </button>
+        </form>
+        <div >
+      <h1> New Here?</h1><Link to="/signup">
+            <button type="button" className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-10 rounded-full'>
+              Sign Up
+            </button>
+          </Link>
+
+      </div>
+        </div>
+
+      </div>
+
+    </div>
+  );
+};
+
+export default Signup;

src/components/Login/styles.module.css

@@ -0,0 +1,98 @@
+.login_container {
+	width: 100%;
+	min-height: 100vh;
+	background-color: #f5f5f5;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.login_form_container {
+	width: 900px;
+	height: 500px;
+	display: flex;
+	border-radius: 10px;
+	box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
+		0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
+}
+
+.left {
+	flex: 2;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: white;
+	border-top-left-radius: 10px;
+	border-bottom-left-radius: 10px;
+}
+
+.form_container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.form_container h1 {
+	font-size: 40px;
+	margin-top: 0;
+}
+
+.input {
+	outline: none;
+	border: none;
+	width: 370px;
+	padding: 15px;
+	border-radius: 10px;
+	background-color: #edf5f3;
+	margin: 5px 0;
+	font-size: 14px;
+}
+
+.error_msg {
+	width: 370px;
+	padding: 15px;
+	margin: 5px 0;
+	font-size: 14px;
+	background-color: #f34646;
+	color: white;
+	border-radius: 5px;
+	text-align: center;
+}
+
+.right {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: #3bb19b;
+	border-top-right-radius: 10px;
+	border-bottom-right-radius: 10px;
+}
+
+.right h1 {
+	margin-top: 0;
+	color: white;
+	font-size: 40px;
+	align-self: center;
+}
+
+.white_btn,
+.green_btn {
+	border: none;
+	outline: none;
+	padding: 12px 0;
+	background-color: white;
+	border-radius: 20px;
+	width: 180px;
+	font-weight: bold;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+.green_btn {
+	background-color: #3bb19b;
+	color: white;
+	margin: 10px;
+}

src/components/Main/index.jsx

@@ -0,0 +1,24 @@
+import styles from './style.module.css';
+
+
+const Main = () =>{
+
+    const handleLogout = ()=> {
+    localStorage.removeItem("token");
+    window.location.reload();
+}
+
+return(
+    <div className={styles.main_container}>
+    <nav className={styles.navbar}>
+        <h1>Techtalk</h1>
+        <button className={styles.white_btn} onClick = {handleLogout}>
+            Logout
+        </button>
+    </nav>
+    </div>
+);
+
+
+};
+export default Main;

src/components/Main/style.module.css

@@ -0,0 +1,27 @@
+.navbar {
+	width: 100%;
+	height: 70px;
+	background-color: #3bb19b;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.navbar h1 {
+	color: white;
+	font-size: 25px;
+	margin-left: 20px;
+}
+
+.white_btn {
+	border: none;
+	outline: none;
+	padding: 12px 0;
+	background-color: white;
+	border-radius: 20px;
+	width: 120px;
+	font-weight: bold;
+	font-size: 14px;
+	cursor: pointer;
+	margin-right: 20px;
+}