added logout functionality, styling and rendering of cards and columns;

Co-authored-by: Nathan Ngo <nathanngo8796@gmail.com> Co-authored-by: Joyce Kwak <joycekwak73@gmail.com> Co-authored-by: Patricia Good <patriciagood415@outlook.com> Co-authored-by: Sam Henderson <shendo87@gmail.com> Co-authored-by: Michael Gacetta <michael.gacetta@gmail.com>
WCRI56-Team-GS · Mar 7, 2023 · b8bc488 · b8bc488
1 parent a480160
commit b8bc488
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 45 deletions.
diff --git a/client/App.jsx b/client/App.jsx
@@ -9,34 +9,21 @@ import HomePage from './components/HomePage.jsx';
 const App = () => {
 
   const [ signUpToggle, setSignUpToggle ] = useState(false);
-  const [ user, setUser ] = useState('');
+  const [ user, setUser ] = useState(''); //<-- Switch to an empty string when ready
   const [ password, setPassword ] = useState("")
   const [ isLoggedIn, setLogin ] = useState(false); //<--- Switch to false when ready
-  // const [ boardData, setBoardData ] = useState([]);
+  const [loginError, setLoginError] = useState(false);
 
-  //UPON LOGIN, FETCH BOARD DATA
-  // useEffect(() => {
-  //   console.log('running useEffect now in App.jsx')
-  //   console.log('user id: ', user)
-  //   fetch('/api', {
-  //     method: 'POST',
-  //     headers: { 'Content-Type': 'application/json' },
-  //     body: JSON.stringify({username: user})
-  //   }).then((res) => res.json())
-  //   .then((data) => {
-  //     console.log('Response from GET board data in APP.jsx:', data)
-  //     setBoardData(data);
-  //   })
-  //   .catch((error) => {
-  //     console.log('Error fetching boardData in APP.jsx:', error)
-  //   })
-  // }, [])
 
   //SIGN-UP / SIGN-IN TOGGLE
   const toggle = () => {
     setSignUpToggle(!signUpToggle);
   }
 
+  useEffect(() => {
+
+  },[loginError, isLoggedIn])
+
   return (
     <>
       {isLoggedIn ? (<HomePage user={user} isLoggedIn={isLoggedIn} setLogin={setLogin}/>) :
@@ -59,9 +46,11 @@ const App = () => {
           toggle={toggle}
           isLoggedIn={isLoggedIn}
           setLogin={setLogin}
+          setLoginError={setLoginError}
         />
       )
-      )} 
+      )}
+      {loginError ? (<div>Incorrect username or password. Please try again</div>) : <></>}
     </>
   );
 }

diff --git a/client/components/Column.jsx b/client/components/Column.jsx
@@ -1,20 +1,21 @@
 import React, { Component } from "react";
 import { useState, useEffect } from "react";
+// import { CardModal } from "./Modals";
 
 
 
-function Column ({boardName, cards}) {
+function Column ({columnName, cards, setShowCardModal}) {
   const renderCards = cards.map((card, index) => {
-    return (<div>{card.cardText}</div>);
+    return (<div key={index} className='card'>{card.cardText}</div>);
   })
 
   return (
     <div className='columnCont'>
-      <div>{boardName}</div>
+      <div>{columnName}</div>
       <div className='cardCont'>
       {renderCards}
       </div>
-      <div></div>
+    <button onClick={() => setShowCardModal(true)}>ADD CARD</button>
     </div>
   );
 }

diff --git a/client/components/HomePage.jsx b/client/components/HomePage.jsx
@@ -42,11 +42,7 @@ function HomePage({user, isLoggedIn, setLogin}) {
         body: JSON.stringify({username: user})
       }).then((res) => res.json())
       .then((data) => {
-        // console.log('Response from GET board data in APP.jsx:', data)
         setBoardData(data);
-        // return data;
-        // console.log('BOARD DATA', data[0]);
-        // console.log('BOARD COLUMN NAME', data[0]['columns']);
       })
       .catch((error) => {
         console.log('Error fetching boardData in APP.jsx:', error)
@@ -58,13 +54,21 @@ function HomePage({user, isLoggedIn, setLogin}) {
 
     if (boardData.length !== 0) {
       renderColumns = boardData[0].columns.map((column, index) => {
-          return (<Column key={index} boardName={boardData[0].boardName} cards={column.cards}/>)
+          return (<Column key={index} columnName={column.columnName} cards={column.cards} setShowCardModal={setShowCardModal}/>)
         })
     }
+    let overlay = null;
 
+    useEffect(() => {
+      if (showColumnModal) overlay = <div className="overlay"></div>
+      else overlay = null;
+    }, [showColumnModal, showCardModal])
+    console.log('showColumnModal: ', showColumnModal)
 
     return (
       <div className='homeCont'>
+
+        {overlay}
 
         <header className='homeHeader'>
           <h1> Home Page </h1>

diff --git a/client/components/LoginPage.jsx b/client/components/LoginPage.jsx
@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import HomePage from './HomePage.jsx'
 // import { Outlet, Link } from "react-router-dom";
 
-function LoginPage ({user, setUser, password, setPassword, toggle, isLoggedIn, setLogin, setBoardData}) {
+function LoginPage ({user, setUser, password, setPassword, toggle, isLoggedIn, setLogin, setBoardData, setLoginError}) {
 
     //HANDLE LOGIN
     const handleSubmit = (e) => {
@@ -14,9 +14,16 @@ function LoginPage ({user, setUser, password, setPassword, toggle, isLoggedIn, s
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(loginData)
         }).then((res) => {
-            setLogin(true);
+            console.log(res.status)
+            // if (res.status === 404) {
+            //     setLogin(false)
+            //     setLoginError(true)
+            // } else {
+                setLogin(true);
+                setLoginError(false);
+            // }
             console.log('logged in on LoginPage.jsx')
-            console.log('users data', user)
+            // console.log('users data', user)
         }).catch((error) => {
             console.log('incorrect username or password', error)
         }) 

diff --git a/client/components/Modals.jsx b/client/components/Modals.jsx
@@ -25,19 +25,15 @@ const ColumnModal = ({ showColumnModal, setShowColumnModal, showCardModal, setSh
     // get the value from the input field
     const newColumnName = document.querySelector('.modal-column-input').value;
 
-    // post users data to database
-    // setBoardData(data => {
-    //   ...data,
-      // newColumnName
-    // })
-    // onClick
-
     // store it somewhere (local?)
     console.log('boardData: ', boardData);
-    console.log('boardColumnData: ', boardData.columns);
-    // setBoardData();
-    // send a request to DB to udpate Board with new column
+    console.log('boardColumnData: ', boardData[0].columns);
     // our local state needs to reflect added column
+    // setBoardData(data => ({
+    //   ...data,
+    //   columns: columns.columnName.push(newColumnName)
+    // }))
+    // send a request to DB to udpate Board with new column
     // toggle columnModal
 
     console.log('save data button is running')
@@ -83,7 +79,9 @@ const ColumnModal = ({ showColumnModal, setShowColumnModal, showCardModal, setSh
 const CardModal = ({  showCardModal,setShowCardModal }) => {
 
   const addTask = () => {
+    const newCard = document.querySelector('card-modal-input').value;
     // post users data to database
+    set
     setShowCardModal(!showCardModal)
   }
 
@@ -97,7 +95,7 @@ const CardModal = ({  showCardModal,setShowCardModal }) => {
         <form>
           <div>ADD CARD</div>
           <input 
-            className="modal-input"
+            className="card-modal-input"
             type="text"
             required
             placeholders="add a task"

diff --git a/client/styles/components/_cards.scss b/client/styles/components/_cards.scss
@@ -0,0 +1,7 @@
+.card {
+  height: 100px;
+  background-color: $color2;
+  border-radius: 10px;
+  color: black;
+  padding: 10px;
+}
diff --git a/client/styles/components/_columns.scss b/client/styles/components/_columns.scss
@@ -1,15 +1,39 @@
 .modal-home {
+  background-color: $color1;
+  color: $color3;
+  border-radius: 15px;
+  padding: 10px;
+}
+
+.modal-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 
+.modal-column-input {
+  width: 150px;
+  height: 20px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+  background-color: $color2;
 }
 
+
 .modal-text-button {
-
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
 }
 
 .columnCont {
+  display: flex;
+  flex-direction: column;
   background-color: $color1;
   color: $color3;
   border-radius: 15px;
   padding: 10px;
+  gap: 10px;
 
 }
diff --git a/client/styles/pages/_home.scss b/client/styles/pages/_home.scss
@@ -34,3 +34,12 @@
   gap: 20px;
 }
 
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 998;
+  background: rgba(0, 0, 0, 0.3);
+}
diff --git a/client/styles/pages/_pageLogin.scss b/client/styles/pages/_pageLogin.scss
@@ -0,0 +1,20 @@
+.user-login-box {
+  border: thin solid rgb(183, 181, 181);
+  display: flex;
+};
+
+.login-header {
+  color: rgba(229, 207, 207, 0.527);
+}
+
+// username and password text on login page
+.login-text {
+  font-size: 20px;
+
+}
+
+.user-input {
+  width: 50px;
+  height: 25px;
+  border-radius: 5px;
+}
diff --git a/server/server.js b/server/server.js
@@ -53,7 +53,8 @@ app.post(
     // what should happen here on successful log in?
     console.log("completing post request to '/login");
     // res.redirect('/secret');
-    res.redirect("/");
+    res.sendstatus(200)
+    // res.redirect("/");
   }
 );