From 69960b333b2adfa33312b936e9302c9d10f29a4c Mon Sep 17 00:00:00 2001
From: nicolinabl <nicolina.backlin@telia.com>
Date: Thu, 19 Feb 2026 13:36:38 +0100
Subject: [PATCH 1/2] CreateQuest form connected to backend. User can now
 create a quest and send to api

---
 frontend/src/components/CreateQuest.jsx | 88 +++++++++++++++++++++++--
 frontend/src/components/LoginForm.jsx   |  1 +
 frontend/src/components/SignupForm.jsx  |  3 +-
 3 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/CreateQuest.jsx b/frontend/src/components/CreateQuest.jsx
index c29b4b1c21..f773bb7859 100644
--- a/frontend/src/components/CreateQuest.jsx
+++ b/frontend/src/components/CreateQuest.jsx
@@ -1,18 +1,96 @@
 import styled from 'styled-components'
+import { useState } from 'react'
+import { apiUrl } from '../../api'
 
+// component for creating quest
 export const CreateQuest = () => {
+  // state variables for form inputs
+  const [message, setMessage] = useState('')
+  const [timeNeeded, setTimeNeeded] = useState('')
+  const [category, setCategory] = useState('')
+  const [error, setError] = useState(null)
+
+  // Handle form submission
+  const handleSubmit =  async (event) => {
+    event.preventDefault()
+    setError(null)
+
+    // get the users accesstoken from localStorage (saved during login/signup)
+    const accessToken = localStorage.getItem('accessToken')
+
+    if (!accessToken) {
+      setError('You must be logged in to create a quest')
+      return
+    }
+
+    try {
+       // POST request for creating a new quest
+      const response = await fetch(apiUrl + '/quests', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': accessToken
+        },
+        body: JSON.stringify({ 
+          message, 
+          timeNeeded: Number(timeNeeded), 
+          category: [] 
+        })
+     })
+  
+    const data = await response.json()
+    
+    if (!response.ok) {
+      setError(data.message || 'Failed to create quest')
+      return
+    }
+
+    console.log('Quest created:', data)
+
+    // After form i submitted, clear the input field
+    setMessage('')
+    setTimeNeeded('')
+    setCategory('')
+  } catch (error) {
+    console.error('Error:', error)
+    setError('Something went wrong. Please try again.')
+  }
+}
+
   return (
-    <Form>
+    <Form onSubmit={handleSubmit}>
       <Label>
         Create new quest
-        <input type="text" placeholder='Text input' />
+
+        {error && <p>{error}</p>}
+
+        <input 
+          type="text" 
+          placeholder='What do you need to do?' 
+          value={message} 
+          onChange={(event) => setMessage(event.target.value)}/>
         
-        <select name="category" id="QuestCategory" >
+        <select 
+          name="category" 
+          value={category}
+          onChange={(event) => setCategory(event.target.value)}
+         >
           <option value="">Select a category</option>
+          <option value="cleaning">Cleaning</option>
+          <option value="exercise">Exercise</option>
+          <option value="work">Work</option>
+          <option value="personal">Personal</option>
         </select>
 
-        <select name="time" id="QuestTime" >
-          <option value="">Time needed</option>
+        <select 
+          name="time"  
+          value={timeNeeded} 
+          onChange={(event) => setTimeNeeded(event.target.value)} 
+        >
+          <option value="10">10 min</option>
+          <option value="20">20 min</option>
+          <option value="30">30 min</option>
+          <option value="60">1 hour</option>
         </select>
 
         <button type="submit">Add a quest</button>
diff --git a/frontend/src/components/LoginForm.jsx b/frontend/src/components/LoginForm.jsx
index 1c1421de13..9085b06815 100644
--- a/frontend/src/components/LoginForm.jsx
+++ b/frontend/src/components/LoginForm.jsx
@@ -66,6 +66,7 @@ export const LoginForm = () => {
         <h4>Welcome Back! Log in now:</h4>
         <label>
           Username
+          {/* TODO: remove username, not needed for login */}
           <input type="text" placeholder="username" onChange={event => setName(event.target.value)}/>
         </label>
         <label>
diff --git a/frontend/src/components/SignupForm.jsx b/frontend/src/components/SignupForm.jsx
index 8234983758..ac57154e29 100644
--- a/frontend/src/components/SignupForm.jsx
+++ b/frontend/src/components/SignupForm.jsx
@@ -91,4 +91,5 @@ const Form = styled.form`
   border-radius: 12px;
 `
 
-// TODO: This is only basic form and step 1/2. Add step 2 (add code sent to email to verify)
\ No newline at end of file
+// TODO: This is only basic form and step 1/2. Add step 2 (add code sent to email to verify)
+// TODO: when user signed up, also log in
\ No newline at end of file

From 476507523965a133b3821990a66f0693c499f329 Mon Sep 17 00:00:00 2001
From: nicolinabl <nicolina.backlin@telia.com>
Date: Thu, 19 Feb 2026 17:15:55 +0100
Subject: [PATCH 2/2] connection backend frontend

---
 frontend/src/App.jsx                        | 30 +++++++-
 frontend/src/components/CreateQuest.jsx     |  6 +-
 frontend/src/components/LoginForm.jsx       |  7 +-
 frontend/src/components/Navbar.jsx          | 15 +++-
 frontend/src/components/QuestLibrary.jsx    |  1 -
 frontend/src/components/QuestList.jsx       | 85 ++++++++++++++++++++-
 frontend/src/components/SignupForm.jsx      |  4 +
 frontend/src/components/cards/QuestCard.jsx | 10 +--
 frontend/src/pages/AboutPage.jsx            |  2 -
 frontend/src/pages/FriendFeedPage.jsx       |  2 -
 frontend/src/pages/HomePage.jsx             |  2 -
 frontend/src/pages/LoginPage.jsx            |  2 -
 frontend/src/pages/QuestPage.jsx            |  2 -
 frontend/src/pages/SignupPage.jsx           |  2 -
 frontend/src/pages/UserProfilePage.jsx      |  9 ++-
 15 files changed, 146 insertions(+), 33 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5c7cdba0cc..7a56914a8e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -10,10 +10,13 @@ import { GlobalStyle } from "./styles/GlobalStyles";
 import { Signup } from "./pages/SignupPage";
 import { useEffect, useState } from "react";
 import { apiUrl } from "../api";
+import { Navbar } from "./components/Navbar";
 
 export const App = () => {
+  const [user, setUser] = useState(null)
   const [data, setData] = useState(null);
 
+  // TODO remove?
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -29,16 +32,41 @@ export const App = () => {
     fetchData();
   }, []);
 
+  useEffect(() => {
+    const accessToken = localStorage.getItem('accessToken')
+    const userId = localStorage.getItem('userId')
+    const userEmail = localStorage.getItem('userEmail')
+    const userName = localStorage.getItem('userName')
+
+    if (accessToken && userId) {
+      setUser({ 
+        accessToken, 
+        userId, 
+        email: userEmail, 
+        name: userName 
+      })
+    }
+  }, []) 
+
+  const handleLogout = () => {
+    setUser(null)
+    localStorage.removeItem('accessToken')
+    localStorage.removeItem('userId')
+    localStorage.removeItem('userEmail')
+    localStorage.removeItem('userName')
+  }
+
   return (
     <>
       <GlobalStyle />
+      <Navbar onLogout={handleLogout} />
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
         <Route path="/feed" element={<FriendFeed />} />
         <Route path="/quests" element={<Quests />} />
         <Route path="/rewards" element={<Rewards />} />
-        <Route path="/profile" element={<UserProfile />} />
+        <Route path="/profile" element={<UserProfile user={user}/>} />
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<Signup />} />
       </Routes>
diff --git a/frontend/src/components/CreateQuest.jsx b/frontend/src/components/CreateQuest.jsx
index f773bb7859..7af3c3fdaf 100644
--- a/frontend/src/components/CreateQuest.jsx
+++ b/frontend/src/components/CreateQuest.jsx
@@ -34,7 +34,7 @@ export const CreateQuest = () => {
         body: JSON.stringify({ 
           message, 
           timeNeeded: Number(timeNeeded), 
-          category: [] 
+          category: [category] 
         })
      })
   
@@ -107,4 +107,6 @@ const Form = styled.form`
 const Label = styled.label`
   display: flex;
   flex-direction: column;
-`
\ No newline at end of file
+`
+
+// TODO: Add authentication check - redirect to login if no accessToken
\ No newline at end of file
diff --git a/frontend/src/components/LoginForm.jsx b/frontend/src/components/LoginForm.jsx
index 9085b06815..f0c770aa80 100644
--- a/frontend/src/components/LoginForm.jsx
+++ b/frontend/src/components/LoginForm.jsx
@@ -45,6 +45,8 @@ export const LoginForm = () => {
         localStorage.setItem('accessToken', data.accessToken)
         // Store the user ID
         localStorage.setItem('userId', data.id)
+        // store user email
+        localStorage.setItem('userEmail', email)
 
         // Clear the form inputs
         setName('')
@@ -64,11 +66,10 @@ export const LoginForm = () => {
     <>
       <Form onSubmit={handleSubmit}>
         <h4>Welcome Back! Log in now:</h4>
-        <label>
+        {/* <label>
           Username
-          {/* TODO: remove username, not needed for login */}
           <input type="text" placeholder="username" onChange={event => setName(event.target.value)}/>
-        </label>
+        </label> */}
         <label>
           email
           <input type="email" placeholder="email" onChange={event => setEmail(event.target.value)}/>
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index fbd24533e2..c39ecde9db 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -1,7 +1,14 @@
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
-export const Navbar = () => {
+export const Navbar = ({ onLogout }) => {
+  const navigate = useNavigate()
+
+  const handleLogoutClick = () => {
+    onLogout()  // Call the logout function
+    navigate('/')  // Redirect to homepage
+  }
+
   return (
     <>
       <Nav>
@@ -10,7 +17,7 @@ export const Navbar = () => {
         <StyledLink to='/feed'>Friends</StyledLink>
         <StyledLink to='/about'>About</StyledLink>
         <StyledLink to='/login'>Log in</StyledLink>
-        <button>Log out</button>
+        <button onClick={handleLogoutClick}>Log out</button>
       </Nav>
     </>
   )
@@ -26,4 +33,4 @@ const Nav = styled.nav`
 const StyledLink = styled(Link)`
   text-decoration: none;
 `
-// TODO: decide: Should navbar be hamburger menu on phone size?
\ No newline at end of file
+// TODO: change to hamburger on small screens
\ No newline at end of file
diff --git a/frontend/src/components/QuestLibrary.jsx b/frontend/src/components/QuestLibrary.jsx
index 7ff954f408..d69dcd594f 100644
--- a/frontend/src/components/QuestLibrary.jsx
+++ b/frontend/src/components/QuestLibrary.jsx
@@ -14,4 +14,3 @@ export const QuestLibrary = () => {
   )
 }
 
-// TODO  Decide: QuestLibrary hardcoded as list at the moment. Keep that way? Or create Library task card and map over?
\ No newline at end of file
diff --git a/frontend/src/components/QuestList.jsx b/frontend/src/components/QuestList.jsx
index 47d377698a..3ec3be754d 100644
--- a/frontend/src/components/QuestList.jsx
+++ b/frontend/src/components/QuestList.jsx
@@ -1,3 +1,86 @@
+import { apiUrl } from "../../api";
+import styled from 'styled-components'
+import { useState, useEffect } from 'react'
+import { QuestCard } from "./cards/QuestCard";
+
 export const QuestList = () => {
-  return <p>quest list</p>;
+  const [quests, setQuests] = useState([])
+  const [error, setError] = useState(null)
+
+
+  useEffect(() => {
+    const getQuests = async () => {
+      try {
+        const accessToken = localStorage.getItem('accessToken')
+
+        const response = await fetch(apiUrl + '/quests/all', {
+          headers: {
+            'Authorization': accessToken
+          }
+        })
+
+        if (!response.ok) {
+          throw new Error('failed to fetch quests')
+        }
+
+        const data = await response.json()
+        setQuests(data.response)
+      } catch (error) {
+        console.error(error.message)
+        setError(error.message)
+      }
+    }
+
+    getQuests()
+  }, [])
+
+  // Delete quests
+  const handleDelete = async (questId) => {
+    try {
+      const accessToken = localStorage.getItem('accessToken')
+
+      const response = await fetch(apiUrl + `/quests/${questId}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': accessToken
+        }
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to delete quest')
+      }
+
+      // remove from state
+      setQuests(quests.filter(quest => quest._id !== questId))
+    } catch (error) {
+      console.error('Error deleting quest:', error)
+    }
+  }
+
+  return (
+    <>
+      <p>Your quests:</p>
+      {quests.map((quest) => (
+        <QuestCard
+          key={quest._id}
+          id={quest._id}
+          message={quest.message}
+          category={quest.category}
+          timeNeeded={quest.timeNeeded}
+          onDelete={handleDelete}
+        />
+      ))}
+    </>
+  )
 };
+
+const Div = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-color);
+  margin: 10px;
+  border-radius: 12px;
+`
+
+// 1. GET request from api to get all quests quests/all
+// 2. map over quests, for each quest create a display of message, time and catagory
\ No newline at end of file
diff --git a/frontend/src/components/SignupForm.jsx b/frontend/src/components/SignupForm.jsx
index ac57154e29..0f6411fe5d 100644
--- a/frontend/src/components/SignupForm.jsx
+++ b/frontend/src/components/SignupForm.jsx
@@ -47,6 +47,10 @@ export const SignupForm = () => {
       localStorage.setItem('accessToken', data.accessToken)
       // Store the user ID
       localStorage.setItem('userId', data.id)
+      // Store username
+      localStorage.setItem('userName', name)
+      // store email
+      localStorage.setItem('userEmail', email)
 
       // Clear the form inputs
         setName('')
diff --git a/frontend/src/components/cards/QuestCard.jsx b/frontend/src/components/cards/QuestCard.jsx
index 8a127caa94..b36d80bac0 100644
--- a/frontend/src/components/cards/QuestCard.jsx
+++ b/frontend/src/components/cards/QuestCard.jsx
@@ -1,15 +1,15 @@
 import styled from 'styled-components'
 
-export const QuestCard = () => {
+export const QuestCard = ({ message, category, timeNeeded, onDelete, id }) => {
   return (
     <Div>
       <div>
-        <h4>Name</h4>
+        <h4>{message}</h4>
       </div>
       <div>
-        <p>Task:</p>
-        <p>Time spent:</p>
-        <p>Kudos: 🙌</p>
+        <p>Category: {category}</p>
+        <p>Time: {timeNeeded} min</p>
+        <button onClick={() => onDelete(id)}>Delete</button>
       </div>
     </Div>
   )
diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx
index 89895fc408..7a67a66521 100644
--- a/frontend/src/pages/AboutPage.jsx
+++ b/frontend/src/pages/AboutPage.jsx
@@ -1,9 +1,7 @@
-import { Navbar } from '../components/Navbar'
 
 export const About = () => {
   return (
     <>
-      <Navbar />
       <p>What does the app do</p>
       <p>How to get started</p>
     </>
diff --git a/frontend/src/pages/FriendFeedPage.jsx b/frontend/src/pages/FriendFeedPage.jsx
index 71b6540bcd..32b0be2726 100644
--- a/frontend/src/pages/FriendFeedPage.jsx
+++ b/frontend/src/pages/FriendFeedPage.jsx
@@ -1,10 +1,8 @@
 import { QuestCard } from '../components/cards/QuestCard'
-import { Navbar } from '../components/Navbar'
 
 export const FriendFeed = () => {
   return (
     <>
-      <Navbar />
       <h2>My friends finished quests</h2>
       <form>
         <label>
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 3e1a137292..8cdd8de677 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -1,4 +1,3 @@
-import { Navbar } from "../components/Navbar";
 import { Header } from "../components/Header";
 import styled from "styled-components";
 import { CreateQuest } from "../components/CreateQuest";
@@ -8,7 +7,6 @@ import { apiUrl } from "../../api";
 export const Home = () => {
   return (
     <>
-      <Navbar />
       <Header />
       <Div>
         <p>Motivational things</p>
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index a44eff3568..b024ddf733 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -1,10 +1,8 @@
-import { Navbar } from '../components/Navbar'
 import { LoginForm } from '../components/LoginForm'
 
 export const Login = () => {
   return (
     <>
-      <Navbar />
       <LoginForm />
     </>
   )
diff --git a/frontend/src/pages/QuestPage.jsx b/frontend/src/pages/QuestPage.jsx
index d47be0f8c9..36cdce8726 100644
--- a/frontend/src/pages/QuestPage.jsx
+++ b/frontend/src/pages/QuestPage.jsx
@@ -1,10 +1,8 @@
-import { Navbar } from "../components/Navbar"
 import styled from 'styled-components'
 
 export const Quests = () => {
   return (
     <>
-      <Navbar />
         <Form>
           <h3>Get ready for your quest of the day!</h3>
           <Label>
diff --git a/frontend/src/pages/SignupPage.jsx b/frontend/src/pages/SignupPage.jsx
index 852e75a783..1caa4ded96 100644
--- a/frontend/src/pages/SignupPage.jsx
+++ b/frontend/src/pages/SignupPage.jsx
@@ -1,10 +1,8 @@
-import { Navbar } from '../components/Navbar'
 import { SignupForm } from '../components/SignupForm'
 
 export const Signup = () => {
   return (
     <>
-      <Navbar />
       <SignupForm />
     </>
   )
diff --git a/frontend/src/pages/UserProfilePage.jsx b/frontend/src/pages/UserProfilePage.jsx
index 4d02f6cf4f..6352bd665a 100644
--- a/frontend/src/pages/UserProfilePage.jsx
+++ b/frontend/src/pages/UserProfilePage.jsx
@@ -1,4 +1,3 @@
-import { Navbar } from "../components/Navbar";
 import { Header } from "../components/Header";
 import styled from "styled-components";
 import { CreateQuest } from "../components/CreateQuest";
@@ -8,19 +7,21 @@ import { Strike } from "../components/StrikeDisplay";
 import { Link } from "react-router-dom";
 import { QuestList } from "../components/QuestList";
 
-export const UserProfile = () => {
+export const UserProfile = ({ user }) => {
+  
   return (
     <>
-      <Navbar />
       <Header />
       <Div>
         <Strike />
         <Avatar />
+        {user && <p>Hello, {user.email}!</p>}
         <Link to="/quests">Get quest of the day</Link>
         {/* TODO: modal for getting quest of the day */}
       </Div>
       <CreateQuest />
       <QuestList />
+      {/* TODO: use socket.io to update questlist in real time without having to refresh page? */}
       <QuestLibrary />
       {/* NOTE: hide add quest + list of quests by default? Only show when user clicks button?  */}
     </>
@@ -34,4 +35,4 @@ const Div = styled.div`
   align-items: center;
 `;
 
-// TODO: Only show this page after login
+// FIXME: change what content is showed depending on logged in or logged out user