From cd01b0f2e438e9d82f4e6c72c4b67b5f710b8cd3 Mon Sep 17 00:00:00 2001
From: Emily Culp <eculp@ycp.edu>
Date: Sun, 16 Nov 2025 10:21:55 -0500
Subject: [PATCH 1/2] #30: Initial Commit for Team Information Page

---
 src/components/NewNavBar.vue | 19 ++++++--
 src/store/store.js           | 90 ++++++++++++++++++++++++++++++------
 src/views/LoginPage.vue      | 14 ------
 src/views/TeamsPage.vue      |  0
 4 files changed, 93 insertions(+), 30 deletions(-)
 create mode 100644 src/views/TeamsPage.vue

diff --git a/src/components/NewNavBar.vue b/src/components/NewNavBar.vue
index d88f6f1..2139413 100755
--- a/src/components/NewNavBar.vue
+++ b/src/components/NewNavBar.vue
@@ -2,6 +2,9 @@
   <nav class="navbar">
     <div class="nav">
         <div class="nav-right" v-if="isLoggedIn">
+          <div class="nav-right" v-if="isInTeam">
+            <router-link class="nav-link" to="/teams">Team Information</router-link>
+          </div>
           <router-link class="nav-link" to="/activities">Activities</router-link>
           <div class="dropdown hardware-dropdown">
             <a class="dropdown-button nav-link" href="/hardware">Hardware</a>
@@ -23,6 +26,7 @@
 import store from "@/store/store.js";
 import {BDropdown} from "bootstrap-vue-3";
 import router from "@/router/index.js";
+import { mapGetters } from "vuex";
 
 export default {
   name: "NewNavBar",
@@ -30,12 +34,21 @@ export default {
   data() {
     return {
       menuDropdownVisible: false,
-      isLoggedIn: true,
+      // isLoggedIn: true,
     };
   },
-  mounted(){
-    document.addEventListener('click', this.closeMenusOutside);
+  computed: {
+    ...mapGetters(['isLoggedIn']),
+    isInTeam(){
+      return !!this.$store.getters.getUserTeamId;
+    }
   },
+  // mounted(){
+  //   if(store.getters.isLoggedIn){
+  //     store.dispatch('fetchUserTeamStatus');
+  //   }
+  //   document.addEventListener('click', this.closeMenusOutside);
+  // },
   beforeUnmount(){
     document.removeEventListener('click', this.closeMenusOutside);
   },
diff --git a/src/store/store.js b/src/store/store.js
index 66d5934..ab1b43a 100755
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -21,7 +21,9 @@ export default createStore({
   getters: {
     isLoggedIn: (state) => !!state.user,
     getUser: (state) => state.user,
-    getActivities: (state) => state.activities
+    getActivities: (state) => state.activities,
+    getEvent: (state) => state.event,
+    getUserTeamId: (state) => state.userTeamId
   },
   mutations: {
     setUser(state, user) {
@@ -29,12 +31,22 @@ export default createStore({
     },
     clearUser(state) {
       state.user = null;
+      state.userTeamId = null;
     },
     setActivities(state, activities) {
         state.activities = activities;
     },
     clearActivities(state) {
         state.activities = [];
+    },
+    setEvent(state, event) {
+        state.event = event;
+    },
+    clearEvent(state) {
+        state.event = null;
+    },
+    setUserTeamId(state, teamId){
+      state.userTeamId = teamId;
     }
   },
   actions: {
@@ -59,34 +71,45 @@ export default createStore({
             return { success: false, message: 'An error occurred during registration. Please try again.' };
         }
     },
-    async loginUser({ commit }, { email, password }) {
+    async loginUser({ commit, state, dispatch }, { email, password }) {
       try {
         const response = await axios.post('http://localhost:3000/user/login', { email, password });
         const data = response.data;
         commit('setUser', new UserAdapter(data.data));
         document.cookie = `token=${data.data.token}; path=/;`;
+
+        // await dispatch('getActiveEvent');
+        await dispatch('fetchUserTeamStatus');
       } catch (err) {
         throw new Error(err.response?.data?.message || 'Login failed');
       }
     },
-    async validateWithToken({ commit }) {
+    async validateWithToken({ commit, state, dispatch }) {
         try {
-            const token = {
-                token: document.cookie.split('; ').find(row => row.startsWith('token=')).split('=')[1]
-            }
+          const tokenCookie = document.cookie.split('; ').find(row => row.startsWith('token='));
+        
+          // 2. Check for the cookie row first.
+          if (!tokenCookie) return { success: false, message: "No token found" };
+          
+          const tokenString = tokenCookie.split('=')[1]; // ✅ This is the raw string now.
 
-            if (!token) return { success: false, message: "No token found"};
-
-            const response = await axios.post("http://localhost:3000/user/auth", {token}, {
-                headers: {
-                    "Content-Type": "application/json",
-                },
-            });
+          // 3. Check if the string is empty/malformed.
+          if (!tokenString) return { success: false, message: "No token string found" };
+          
+          // 4. Send the token string directly in the request body object.
+          const response = await axios.post(`${state.apiBaseUrl}/user/auth`, { token: tokenString }, {
+            headers: {
+              "Content-Type": "application/json",
+            },
+          });
 
             const data = await response.data;
             const user = new UserAdapter(data.data);
             commit("setUser", user);
 
+            // await dispatch('getActiveEvent');
+            await dispatch('fetchUserTeamStatus');
+
             return { success: true, message: data.message };
         } catch (error) {
             return { success: false, message: error.response?.data?.message || "Authentication failed" };
@@ -121,6 +144,47 @@ export default createStore({
         }
     },
 
+      async getActiveEvent({ commit, state }) {
+          try {
+              const response = await axios.get(`${state.apiBaseUrl}/user/register/event/active`);
+
+              // Convert dates from UTC to local time (i.e., EST) and to a user-friendly format
+              const event = response.data
+              event.startDate = formatDateToEST(event.startDate);
+              event.endDate = formatDateToEST(event.endDate);
+
+              commit("setEvent", event);
+              return {success: true, message: response.data.message};
+          } catch (error) {
+              return {success: false, message: error.response?.data?.message || "Error fetching active event"};
+          }
+      },
+
+    async fetchUserTeamStatus({ commit, state, getters }){
+      if(!getters.isLoggedIn || !getters.getUser){
+        commit('setUserTeamId', null);
+        return;
+      }
+
+      const userId = getters.getUser.id;
+      const eventId = 1;  //getters.getEvent.id ||
+
+      try{
+        const response = await axios.get(`${state.apiBaseUrl}/teams/${userId}/team`, {
+          params: { eventId }
+        });
+
+        const teamId = response.data.teamId || null;
+
+        commit('setUserTeamId', teamId);
+        return { success: true }
+      }catch(err){
+        console.error("Error fetching user team status: ", err);
+        commit('setUserTeamId', null)
+        return { success: false, message: "Failed to fetch team status" };
+      }
+    },
+
     logout({ commit }) {
         commit("clearUser");
         document.cookie = `token=; path=/;`;
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index eabf5db..f99f6b3 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -59,20 +59,6 @@ export default {
         this.$router.push('/activities');
       } catch (err) {
         console.warn('Login failed:', err.message);
-
-        // Optional: check if there’s a token and validate it
-        const token = localStorage.getItem('token');
-        if (token) {
-          try {
-            await this.$store.dispatch('validateWithToken');
-            // Redirect if token is valid
-            if (this.$store.getters.isLoggedIn) {
-              this.$router.push('/activities');
-            }
-          } catch (tokenErr) {
-            console.error('Token invalid:', tokenErr.message);
-          }
-        }
       }
     },
   },
diff --git a/src/views/TeamsPage.vue b/src/views/TeamsPage.vue
new file mode 100644
index 0000000..e69de29

From f06da29612d1d8194748fcaba8994848835b6eca Mon Sep 17 00:00:00 2001
From: Emily Culp <eculp@ycp.edu>
Date: Sun, 16 Nov 2025 11:36:32 -0500
Subject: [PATCH 2/2] #30: Added Update Team Information Form with Error
 Checking

---
 src/router/index.js     |   9 ++
 src/store/store.js      |   8 +-
 src/views/TeamsPage.vue | 247 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 260 insertions(+), 4 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index b44883d..4a5b2bc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +6,7 @@ import Registration from '../views/Registration.vue';
 import LoginPage from '../views/LoginPage.vue';
 import ActivitiesPage from '../views/ActivitiesPage.vue';
 import HardwarePage from '../views/HardwarePage.vue';
+import TeamsPage from '@/views/TeamsPage.vue';
 
 const routes = [
     {
@@ -33,6 +34,14 @@ const routes = [
         name: 'Hardware',
         component: HardwarePage,
     },
+    {
+        path: '/teams',
+        name: 'Team',
+        component: TeamsPage,
+        meta: {
+            requiresAuth: true
+        }
+    },
     {
         path: '/profile',
         name: 'Profile',
diff --git a/src/store/store.js b/src/store/store.js
index ab1b43a..372bbee 100755
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -91,13 +91,13 @@ export default createStore({
           // 2. Check for the cookie row first.
           if (!tokenCookie) return { success: false, message: "No token found" };
           
-          const tokenString = tokenCookie.split('=')[1]; // ✅ This is the raw string now.
+          const tokenString = tokenCookie.split('=')[1]; 
 
           // 3. Check if the string is empty/malformed.
           if (!tokenString) return { success: false, message: "No token string found" };
           
           // 4. Send the token string directly in the request body object.
-          const response = await axios.post(`${state.apiBaseUrl}/user/auth`, { token: tokenString }, {
+          const response = await axios.post(`http://localhost:3000/user/auth`, { token: tokenString }, {
             headers: {
               "Content-Type": "application/json",
             },
@@ -146,7 +146,7 @@ export default createStore({
 
       async getActiveEvent({ commit, state }) {
           try {
-              const response = await axios.get(`${state.apiBaseUrl}/user/register/event/active`);
+              const response = await axios.get(`http://localhost:3000/user/register/event/active`);
 
               // Convert dates from UTC to local time (i.e., EST) and to a user-friendly format
               const event = response.data
@@ -170,7 +170,7 @@ export default createStore({
       const eventId = 1;  //getters.getEvent.id ||
 
       try{
-        const response = await axios.get(`${state.apiBaseUrl}/teams/${userId}/team`, {
+        const response = await axios.get(`http://localhost:3000/teams/${userId}/team`, {
           params: { eventId }
         });
 
diff --git a/src/views/TeamsPage.vue b/src/views/TeamsPage.vue
index e69de29..4aa5501 100644
--- a/src/views/TeamsPage.vue
+++ b/src/views/TeamsPage.vue
@@ -0,0 +1,247 @@
+<template>
+  <div class="container-top">
+    <header class="main-header">
+      <div class="text-center py-4">
+        <h1 class="mb-2">
+          {{ teamData.teamName || 'Team Project Submission' }}
+        </h1>
+        <hr class="header-line" />
+      </div>
+    </header>
+  </div>
+  <div class="container-fluid">
+    <div class="row align-items-start mt-5">
+      <main class="col-md-12 col-lg-8 offset-lg-2">
+        <div class="p-4 border rounded bg-white shadow-sm main-box">
+          
+          <div v-if="!teamId" class="alert alert-danger text-center py-4">
+             You must be part of a team to access project submission.
+          </div>
+
+          <div v-else-if="isLoading" class="text-center py-5">
+            <p>Loading project data...</p>
+          </div>
+
+          <div v-else-if="!isSubmissionTime" class="alert alert-warning text-center py-4">
+            <span v-if="getEvent && new Date() < new Date(getEvent.startDate)">
+                Submissions open when the event officially begins on {{ new Date(getEvent.startDate).toLocaleDateString() }}.
+            </span>
+            <span v-else>
+                Submissions are **closed**. You cannot make further changes.
+            </span>
+          </div>
+
+          <form v-else @submit.prevent="handleSubmit">
+            <div v-if="successMessage" class="alert alert-success">{{ successMessage }}</div>
+            <div v-if="errorMessage" class="alert alert-danger">{{ errorMessage }}</div>
+
+            <div class="mb-3">
+              <label for="projectName" class="form-label fw-bold">Project Name</label>
+              <input
+                id="projectName"
+                v-model="teamData.projectName"
+                type="text"
+                class="form-control"
+                required
+                :disabled="isSubmitting"
+              />
+            </div>
+
+            <div class="mb-3">
+              <label for="projectDescription" class="form-label fw-bold">Project Description</label>
+              <textarea
+                id="projectDescription"
+                v-model="teamData.projectDescription"
+                class="form-control"
+                rows="4"
+                required
+                :disabled="isSubmitting"
+              ></textarea>
+            </div>
+
+            <div class="mb-3">
+              <label for="githubLink" class="form-label fw-bold">GitHub Link</label>
+              <input
+                id="githubLink"
+                v-model="teamData.githubLink"
+                type="url"
+                class="form-control"
+                placeholder="https://github.com/my-team/project"
+                :disabled="isSubmitting"
+              />
+              <div class="form-text">Must be a publicly accessible repository.</div>
+            </div>
+
+            <div class="mb-4">
+              <label for="presentationLink" class="form-label fw-bold">Presentation Link</label>
+              <input
+                id="presentationLink"
+                v-model="teamData.presentationLink"
+                type="url"
+                class="form-control"
+                placeholder="https://slides.google.com/d/project-pitch"
+                :disabled="isSubmitting"
+              />
+              <div class="form-text">Link to your presentation slides (e.g., Google Slides, PDF).</div>
+            </div>
+
+            <button type="submit" class="btn btn-success w-100" :disabled="isSubmitting">
+              {{ isSubmitting ? 'Submitting...' : 'Update Project Details' }}
+            </button>
+            <div class="text-center mt-2 small text-muted">Submissions are open until the event ends.</div>
+
+          </form>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import axios from 'axios';
+import store from "@/store/store.js";
+
+export default {
+  name: "TeamRegistrationPage",
+  data() {
+    return {
+      isLoading: true,
+      isSubmitting: false,
+    //   isSubmissionsOpen: true, 
+      errorMessage: null,
+      successMessage: null,
+      teamData: {
+        teamName: "",
+        projectName: "",
+        projectDescription: "",
+        presentationLink: "",
+        githubLink: "",
+      }
+    };
+  },
+  computed: {
+    ...mapGetters(["getUserTeamId", "getEvent"]), 
+    
+    teamId() {
+      return this.getUserTeamId;
+    },
+    isSubmissionTime(){
+        const event = this.getEvent;
+        if (!event || !event.startDate || !event.endDate) {
+            // Assume open if data isn't loaded yet, matching your old console warning logic
+            return true;
+        }
+
+        const now = new Date();
+        const startDate = new Date(event.startDate);
+        const endDate = new Date(event.endDate);
+
+        // Submissions are active if (now >= startDate) AND (now < endDate)
+        return now >= startDate && now < endDate;
+    },
+  },
+  mounted() {
+    if (this.teamId) {
+        this.fetchProjectDetails();
+    } else {
+        this.isLoading = false; 
+    }
+  },
+  methods: {
+    async fetchProjectDetails() {
+      this.isLoading = true;
+      this.errorMessage = null;
+
+      try {
+        const url = `http://localhost:3000/teams/${this.teamId}/project-details`;
+        const response = await axios.get(url);
+        
+        this.teamData = {
+          ...this.teamData, 
+          ...response.data.data,
+        };
+
+      } catch (error) {
+        console.error("Error loading team data:", error);
+        if (error.response && error.response.status !== 404) {
+             this.errorMessage = error.response?.data?.message || "Failed to load project details.";
+        }
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    
+    /**
+     * Submits the updated project details using direct Axios call.
+     */
+    async handleSubmit() {
+      if (!this.isSubmissionTime || this.isSubmitting) return;
+
+      this.isSubmitting = true;
+      this.errorMessage = null;
+      this.successMessage = null;
+
+      try {
+        // API Endpoint Assumption: PUT /teams/{teamId}/project-details
+        const url = `http://localhost:3000/teams/${this.teamId}/project-details`;
+        const payload = {
+          projectName: this.teamData.projectName,
+          projectDescription: this.teamData.projectDescription,
+          presentationLink: this.teamData.presentationLink,
+          githubLink: this.teamData.githubLink,
+        };
+        
+        const response = await axios.put(url, payload);
+
+        this.successMessage = response.data.message || "Project details updated successfully!";
+        
+      } catch (error) {
+        console.error("Submission failed:", error);
+        this.errorMessage = error.response?.data?.message || "Failed to save project details. Check your links and try again.";
+      } finally {
+        this.isSubmitting = false;
+      }
+    }
+  },
+};
+</script>
+
+<style scoped>
+body {
+    font-family: Lato, sans-serif;
+    color: #fff;
+    font-weight: 300;
+    font-size: 18px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+.container-top{
+    background-color: #64965d;
+    position: relative;
+    overflow: hidden;
+}
+.container-fluid {
+    background-color: #93dda3;
+    position: relative; 
+    overflow: hidden;
+    min-height: 100vh;
+}
+.main-box {
+    margin-top: 0;
+}
+.main-header{
+    margin-top: 6rem;
+    margin-bottom: 0;
+    color: #6c757d;
+    width: 100%;
+}
+.main-header h1 {
+    color: #f8f9fa;
+}
+.header-line{
+    width: 60%;
+    margin: 0.5rem auto 0;
+    border-top: 3px solid #f8f9fa;
+}
+</style>
\ No newline at end of file