built the sign up and login oauth google logic for the client and ser…

…ver, created an auth context to handle the authentication state, modified components using state to work with the context and created extra components and routes

.env

@@ -4,4 +4,8 @@ MONGO_URI="mongodb+srv://admin-fransco:[email protected]/
 CLOUDINARY_NAME='dyieuptpt'
 CLOUDINARY_API_KEY='413946266621849'
 CLOUDINARY_API_SECRET='0IizkxSpuvSPhYzgJpuHDXpuzXw'
+SECRET='secrecy'
+
+GOOGLE_CLIENT_ID=282292901096-6p49lpsprjgu5pa8rf1fh48sdglen2dl.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
 

client/package.json

@@ -5,13 +5,11 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "babel-plugin-macros": "^3.1.0",
+    "axios": "^1.4.0",
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

client/src/App.js

@@ -1,24 +1,31 @@
-import { Route, Routes } from "react-router-dom"
-import Navbar  from './components/UI/Navbar';
+import { Route, Routes, Navigate } from "react-router-dom";
+import Navbar from "./components/UI/Navbar";
 import Home from "./screens/Home";
 import Write from "./screens/Write";
-import Login from "./screens/Login";
-import Signup from "./screens/Signup"
+import Login from "./screens/Login/Login";
+import Signup from "./screens/Signup/Signup";
+import Success from "./screens/Success/Success";
 import ArticleDetails from "./screens/ArticleDetails";
-import './App.css';
-
+import AuthContext from "./context/auth-context";
+import { useContext } from "react";
 
 function App() {
+  const context = useContext(AuthContext);
+
   return (
     <div className="App">
       <Navbar />
       <main>
         <Routes>
-          <Route path="/" element={<Home />}/>
-          <Route path="/write" element={<Write />}/>
-          <Route path="/signup" element={<Signup />}/>
-          <Route path="/login" element={<Login />}/>
+          <Route path="/" element={<Home />} />
+          <Route
+            path="/write"
+            element={context.isLoggedin ? <Write /> : <Navigate to="/login" />}
+          />
+          <Route path="/signup" element={<Signup />} />
+          <Route path="/login" element={<Login />} />
           <Route path="/:articleId" element={<ArticleDetails />} />
+          <Route path="/success" element={<Success />} />
         </Routes>
       </main>
     </div>

client/src/components/UI/navbar.module.css

@@ -11,7 +11,7 @@
 }
 
  .navLogo{ 
-  font-family: 'Montserrat', sans-serif;
+  font-family: sans-serif;
   font-weight: 700;
     margin-right: 2rem;
     padding-left: 2rem;

client/src/components/article/ArticleForm.js

@@ -1,18 +1,50 @@
 import Card from "../UI/Card"
 import styles from "./articleform.module.css"
+import { useRef } from "react"
 
 const ArticleForm = props => {
 
+    const titleRef = useRef();
+    const imageRef = useRef();
+    const timeRef = useRef();
+    const descriptionRef = useRef();
+
+    const handleSubmit = event => {
+        event.preventDefault()
+
+        const enteredTitle = titleRef.current.value
+        const enteredImage = imageRef.current.value
+        const enteredTime = timeRef.current.value
+        const enteredDescription = descriptionRef.current.value
+
+        const articleData = {
+            title : enteredTitle,
+            image: enteredImage,
+            time: enteredTime,
+            description: enteredDescription
+        }
+
+        props.onAddArticle(articleData)
+
+        titleRef.current.value = ' '
+        imageRef.current.value = null
+        timeRef.current.value = null
+        descriptionRef.current.value = ' '
+
+
+    }
+
     return (
         <Card>
-            <form className={styles.form}>
+            <form className={styles.form} onSubmit={handleSubmit}>
                 <div className={styles.control}>
                     <label htmlFor="Title">Title</label>
                     <input
                     required
                     type="text"
                     name = "title"
                     id="title"
+                    ref={titleRef}
                     />
                 </div>
                 <div className={styles.control}>
@@ -23,6 +55,7 @@ const ArticleForm = props => {
                     name = "image"
                     id="image"
                     accept="image/png, image/jpg, image/jpeg, image/gif"
+                    ref={imageRef}
                     />
                 </div>
                 <div className={styles.control}>
@@ -34,6 +67,7 @@ const ArticleForm = props => {
                     id="duration"
                     min="1"
                     max="10"
+                    ref={timeRef}
                     />
                 </div>
                 <div className={styles.control}>
@@ -44,6 +78,7 @@ const ArticleForm = props => {
                     id="description"
                     rows="10"
                     cols="30"
+                    ref={descriptionRef}
                     />
                 </div>
                 <div className={styles.action}>

client/src/components/article/articlecarddetails.module.css

@@ -5,6 +5,7 @@
 }
 
 .detail h1 {
+    font-family: sans-serif;
     line-height: 1.1;
     color: #222;
     font-size: 3.4rem;

client/src/components/article/articleform.module.css

@@ -1,6 +1,5 @@
 .form {
     padding: 1rem;
-    font-family: 'Big Shoulders Text', cursive;
 }
 
 .control {
@@ -9,6 +8,7 @@
 
 .control label {
     display: block;
+    font-family: 'Big Shoulders Text', cursive;
     font-weight: bold;
     margin-bottom: 0.5rem;
 }

client/src/context/auth-context.js

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const AuthContext = React.createContext({
+  isLoggedin: false,
+  onSignUp: async (enteredData) => {},
+  googleSignIn: () => {},
+});
+
+export const AuthContextProvider = (props) => {
+  const navigate = useNavigate();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  const signup = async (enteredData) => {
+    try {
+      const response = await fetch("/api/signup", {
+        method: "POST",
+        body: JSON.stringify(enteredData),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (response.status === 200) {
+        alert("successfully signed in");
+        setIsLoggedIn(true);
+      }
+    } catch (error) {
+      console.log(error.response);
+    }
+  };
+
+  const googleAuth = () => {
+    window.location.href = "http://localhost:3001/api/google";
+  };
+
+  const navigateHomeOnSuccess = () => {
+    setIsLoggedIn(true);
+
+    navigate("/");
+  };
+
+  const navigateWriteOnSuccess = () => {
+    setIsLoggedIn(true);
+
+    navigate("/write");
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        isLoggedin: isLoggedIn,
+        onSignUp: signup,
+        googleSignIn: googleAuth,
+        navigateHome: navigateHomeOnSuccess,
+        navigateWrite: navigateWriteOnSuccess,
+      }}
+    >
+      {props.children}
+    </AuthContext.Provider>
+  );
+};
+
+export default AuthContext;

client/src/index.js

@@ -3,12 +3,16 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from "react-router-dom"
 import './index.css';
 import App from './App';
+import { AuthContextProvider  } from './context/auth-context';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
+
   <BrowserRouter>
+  <AuthContextProvider>
     <App />
+    </AuthContextProvider>
     </BrowserRouter>
 );
 

client/src/layout/header.module.css

@@ -1,5 +1,5 @@
 .header {
-    font-family: 'Montserrat', sans-serif;
+    font-family:  sans-serif;
     font-weight: 700;
     height: 70vh;
     background-image: linear-gradient(