Merge pull request #56 from BUMETCS673/return_token

Return token

code/client/package.json

@@ -55,5 +55,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "chart.js": "^4.4.4",
+    "react-chartjs-2": "^5.2.0"
   }
 }

code/client/src/App.js

@@ -7,8 +7,10 @@ import ViewUsers from "./components/ViewUsers.js";
 import ManageProfile from "./components/ManageProfile.js";
 import DailyData from "./components/DailyData.js";
 import CreateGoal from "./components/CreateGoal.js";
+
 import React, { useState, useEffect } from 'react';
 import LogoutIcon from '@mui/icons-material/Logout';
+
 // Styling
 import {
   createTheme,
@@ -33,6 +35,7 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import TrackChangesIcon from "@mui/icons-material/TrackChanges";
 import CloseIcon from "@mui/icons-material/Close";
+import BarChartIcon from "@mui/icons-material/BarChart";
 
 import "@fontsource/mulish";
 
@@ -180,6 +183,7 @@ function App() {
                   <ListItemText primary="Manage Profile" />
                 </ListItemButton>
               </ListItem>
+
 
               <ListItem disablePadding>
                 <ListItemButton component={Link} to="/view-users">
@@ -199,7 +203,7 @@ function App() {
             sx={{
               flexGrow: 1,
               bgcolor: "#E2DDD5", // Background color applied here
-              height: "100vh", // Full viewport height for every page
+              minHeight: "100vh", // Full viewport height for every page
               display: "flex",
               flexDirection: "column",
             }}

code/client/src/components/Home.js

@@ -1,20 +1,159 @@
-import {
-  Box,
-  Typography
-} from "@mui/material";
-import { box, title, bigTitle } from "./style/styles.js";
+import '../App.css';
+import { Line } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
+import { Typography } from "@mui/material";
+import { title, dashboardLineChartContainer } from "./style/styles.js";
+import { authenticated } from "../utils/authenticate.js";
+
+// Register the required components for Chart.js
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
 
 function Home() {
-  return (
-    <Box sx={box}>
-      <Typography variant="h6" gutterBottom sx={bigTitle}>
-        Home Page
-      </Typography>
-      <Typography variant="h6" gutterBottom sx={title}>
-        Welcome to the home page!
-      </Typography>
-    </Box>
-  );
+    authenticated();
+
+    //update these constants with data from database
+    const dayLabels = ['Day1', 'Day2', 'Day3', 'Day4', 'Day5', 'Day6', 'Day7']
+
+    const weightData = [150, 152, 149, 151, 148, 147, 150];
+    const weightGoal = 150;
+
+    const stepsData = [6000, 8000, 7500, 9000, 6500, 5000, 7000];
+    const stepsGoal = 10000;
+
+    const sleepData = [6, 7, 5, 8, 6, 7, 5];
+    const sleepGoal = 7;
+
+    const waterData = [8, 6, 7, 5, 8, 7, 6];
+    const waterGoal = 8;
+
+    const exerciseData = [30, 45, 60, 20, 40, 30, 50];
+    const exerciseGoal = 40;
+
+    // Fill in the chart data
+    const weightChart = {
+        labels: dayLabels, // X-axis labels
+        datasets: [
+            {
+                label: 'Weight in lbs',
+                data: weightData, // Y-axis values
+                borderColor: 'rgba(75,192,192,1)', // Teal
+                pointRadius: 4,
+            },
+            {
+                label: 'Goal',
+                data: Array(7).fill(weightGoal), // plot the goal if applicable
+                borderColor: 'rgba(75,192,192,.25)', // Teal with 25% transparency
+                pointRadius: 0,
+            },
+        ],
+    };
+
+    const stepsChart = {
+        labels: dayLabels, // X-axis labels
+        datasets: [
+            {
+                label: 'Steps',
+                data: stepsData, // Y-axis values
+                borderColor: 'rgba(255,99,132,1)', // Red
+                pointRadius: 4,
+            },
+            {
+                label: 'Goal',
+                data: Array(7).fill(stepsGoal), // plot the goal if applicable
+                borderColor: 'rgba(255,99,132,.25)', // Red with 25% transparency
+                pointRadius: 0,
+            },
+        ],
+    };
+
+    const sleepChart = {
+        labels: dayLabels, // X-axis labels
+        datasets: [
+            {
+                label: 'Sleep in hours',
+                data: sleepData, // Y-axis values
+                borderColor: 'rgba(54,162,235,1)', // Blue
+                pointRadius: 4,
+            },
+            {
+                label: 'Goal',
+                data: Array(7).fill(sleepGoal), // plot the goal if applicable
+                borderColor: 'rgba(54,162,235,.25)', // Blue with 25% transparency
+                pointRadius: 0,
+            },
+        ],
+    };
+
+    const waterChart = {
+        labels: dayLabels, // X-axis labels
+        datasets: [
+            {
+                label: 'Water in glasses',
+                data: waterData, // Y-axis values
+                borderColor: 'rgba(255,205,86,1)', // Yellow
+                pointRadius: 4,
+            },
+            {
+                label: 'Goal',
+                data: Array(7).fill(waterGoal), // plot the goal if applicable
+                borderColor: 'rgba(255,205,86,.25)', // Yellow with 25% transparency
+                pointRadius: 0,
+            },
+        ],
+    };
+
+    const exerciseChart = {
+        labels: dayLabels, // X-axis labels
+        datasets: [
+            {
+                label: 'Exercise in minutes',
+                data: exerciseData, // Y-axis values
+                borderColor: 'rgba(153,102,255,1)', // Purple
+                pointRadius: 4,
+            },
+            {
+                label: 'Goal',
+                data: Array(7).fill(exerciseGoal), // plot the goal if applicable
+                borderColor: 'rgba(153,102,255,.25)', // Purple with 25% transparency
+                pointRadius: 0,
+            },
+        ],
+    };
+
+
+    // Set chart options
+    const options = {
+        maintainAspectRatio: false,
+        scales: {
+            y: {
+                min: 0
+            },
+        },
+    };
+
+    return (
+        <div>
+            <Typography variant="h6" gutterBottom sx={title}>
+                See your progress:
+            </Typography>
+            <div style={dashboardLineChartContainer}>
+                <Line data={weightChart} options={options} />
+            </div>
+            <div style={dashboardLineChartContainer}>
+                <Line data={stepsChart} options={options} />
+            </div>
+            <div style={dashboardLineChartContainer}>
+                <Line data={sleepChart} options={options} />
+            </div>
+            <div style={dashboardLineChartContainer}>
+                <Line data={waterChart} options={options} />
+            </div>
+            <div style={dashboardLineChartContainer}>
+                <Line data={exerciseChart} options={options} />
+            </div>
+        </div>
+    )
 }
 
-export default Home;
+export default Home;

code/client/src/components/ManageProfile.js

@@ -2,9 +2,12 @@ import { useEffect, useState } from "react";
 import apiClient from "../services/apiClient.js";
 import { Box, Typography, TextField, MenuItem, Button } from "@mui/material";
 import { box, bigTitle, inputBackground, menuPropsStyles, submitButton } from "./style/styles.js";
+import { authenticated } from "../utils/authenticate.js";
 
 function ManageProfile() {
 
+
+
   const [profileData, setProfileData] = useState({
     userId: "",
     email: "",
@@ -19,8 +22,16 @@ function ManageProfile() {
   const [errorMessage, setErrorMessage] = useState('');
 
   useEffect(() => {
+    const token = authenticated()
+
+    if (token) {
+
+    }
+
     apiClient
-      .get("/api/users/manage-profile") // Fetch user profile data from the backend (e.g., /manage-profile)
+      .get("/api/users/manage-profile", {
+        headers: { Authorization: `Bearer ${token}` }
+      }) // Fetch user profile data from the backend (e.g., /manage-profile)
       .then((res) => {
         setProfileData(res.data); 
       })

code/client/src/components/style/styles.js

@@ -204,3 +204,11 @@ export const bigTitle = {
   fontSize: "3rem",
   fontWeight: "600",
 };
+
+
+//Dashboard
+export const dashboardLineChartContainer = {
+  width: "600px",
+  height: "200px",
+  marginBottom: "50px"
+}

code/client/src/utils/authenticate.js

@@ -12,6 +12,7 @@ export function authenticated() {
             window.location.href = '/login';
         }
     }
+    return token
 }
 
 function validateToken(token) {

code/server/controllers/userController.js

@@ -17,9 +17,26 @@ exports.viewUsers = async (req, res) => {
 // Manage Profile (GET)
 exports.manageProfile = async (req, res) => {
   try {
-    const userId = 10001; // Hardcoded, should be dynamic (e.g., from token)
-    const userProfile = await User.findOne({ userId });
+    // Get token from Authorization header
+    const authHeader = req.headers['authorization'];
+    if (!authHeader) {
+      return res.status(401).json({ message: 'Authorization header is missing' });
+    }
+
+    const token = authHeader.split(' ')[1];
+    if (!token) {
+      return res.status(401).json({ message: 'Token is missing' });
+    }
+
+    // Verify and decode the token
+    const secretKey = process.env.SECRET_KEY;
+    const decoded = jwt.verify(token, secretKey);
 
+    // Extract userId from the decoded token
+    const userId = decoded.userId;
+
+    const userProfile = await User.findOne({ userId });
+
     if (!userProfile) {
       return res.status(404).json({ message: 'User not found' });
     }