From 46c64a77cfa233bd8053bd195534863841b6c9b2 Mon Sep 17 00:00:00 2001
From: Jasper Cheng <jasper.cheng@uconn.edu>
Date: Tue, 31 Oct 2023 19:46:34 -0400
Subject: [PATCH 1/8] Made a Forgot Page, Added Icon to Login Page, Started
 Admin Page

---
 src/components/AppHeader.vue |   3 +
 src/router/index.js          |  12 ++++
 src/views/AdminPage.vue      | 104 +++++++++++++++++++++++++++++++++++
 src/views/ForgotPassword.vue |  86 +++++++++++++++++++++++++++++
 src/views/LoginPage.vue      |  21 ++++++-
 5 files changed, 225 insertions(+), 1 deletion(-)
 create mode 100644 src/views/AdminPage.vue
 create mode 100644 src/views/ForgotPassword.vue

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 92942b2..b4957ca 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -7,6 +7,9 @@
           <li>
             <RouterLink to="/">Home</RouterLink>
           </li>
+          <li>
+            <RouterLink to="/admin">Admin Page</RouterLink>
+          </li>
           <li>
             <RouterLink to="/fetch">Create an Account</RouterLink>
           </li>
diff --git a/src/router/index.js b/src/router/index.js
index 1163d41..eee3bd3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,8 @@ import FormView from "../views/FormView.vue";
 import AdminCreateCourseView from "../views/AdminCreateCourseView.vue";
 import LoginPage from "../views/LoginPage.vue";
 import SignUp from "../views/SignUp.vue";
+import ForgotPassword from "../views/ForgotPassword.vue";
+import AdminPage from "../views/AdminPage.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -47,6 +49,16 @@ const router = createRouter({
       name: "Login",
       component: LoginPage,
     },
+    {
+      path: "/forgot-password",
+      name: "Forgot Password",
+      component: ForgotPassword
+    },
+    {
+      path: "/admin",
+      name: "Admin Page",
+      component: AdminPage
+    },
   ],
 });
 
diff --git a/src/views/AdminPage.vue b/src/views/AdminPage.vue
new file mode 100644
index 0000000..ddfc373
--- /dev/null
+++ b/src/views/AdminPage.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="navigation_bar">
+        <a class="link" href="">Search</a>
+        <a class="link" href="/admin/createcourse">Create Course</a>
+    </div>
+
+    <div class="search">
+        <form @search.prevent="search">
+            <div class="form-group">
+                <label for="department">Department</label>
+                <input type="text" id="department" v-model="department" required>
+                <label for="course_id">Course #</label>
+                <input type="text" id="course_id" v-model="course_id">
+                <label for="course_name">Course Name</label>
+                <input type="text" id="course_name" v-model="course_name">
+                <label for="professor">Professor</label>
+                <input type="text" id="professor" v-model="professor">
+            </div>
+
+        </form>
+    </div>
+
+
+    <h1>Hello World</h1>
+</template>
+
+
+<script>
+export default{
+    data(){
+        return{
+            department: "",
+            course_id: "",
+            course_name: "",
+            professor: "",
+            start_time: "",
+            end_time: "",
+            days: "",
+            location: "",
+            credits: "",
+            course_type: "",
+            prerequisite: ""
+        };
+    },
+    methods: {
+        search(){
+            //Back-End search
+        },
+    },
+};
+</script>   
+
+<style scoped>
+
+.navigation_bar{
+    background-color: f5f5f5;
+}
+
+.link{
+    font-family: 'Bebas Neue', sans-serif;
+    color: black;
+    font-size: large;
+    font-weight: bold;
+    text-decoration: none;
+    padding: 10px;
+    
+}
+
+.link:hover{
+    color: #1e9fe1;
+}
+
+.search{
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f5f5f5;
+}
+
+
+.form-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.form-group input {
+    flex: 1;
+}
+
+label {
+    display: block;
+    font-weight: bold;
+}
+
+input[type="text"] {
+    width: 100px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/ForgotPassword.vue b/src/views/ForgotPassword.vue
new file mode 100644
index 0000000..98ba30b
--- /dev/null
+++ b/src/views/ForgotPassword.vue
@@ -0,0 +1,86 @@
+<template>
+    <h1>Reset Password</h1>
+    <p>Enter email associated with your account to reset your password.</p>
+    <div class = "forgotpassword">
+        <form @submit.prevent="forgotpassword">
+            <div class="form-group">
+                <label for = "email">Email:</label>
+                <input type="email" id="email" v-model="email" required>
+            <div>
+                <button type="sumbit">
+                    Submit
+                </button>   
+            </div>
+            </div>
+        </form>
+
+    </div>
+</template>
+
+<script>
+export default{
+    name: "Forgot Password",
+    data(){
+        return {
+            email: ""
+        };
+    },
+    methods: {
+        forgotpassword(){
+            //IDK
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+h1 {
+    font-size: x-large;
+    background-color: #007BFF;
+    color:#fff;
+    padding: 20px;
+    margin-bottom: 75px;
+    border-color: black;
+    border-width: 2px;
+}
+
+p {
+    text-align: center;
+}
+.forgotpassword {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f5f5f5;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.form-group{
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    font-weight: bold;
+}
+                                                                                                                                               
+input[type="text"],
+input[type="email"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}
+
+button{
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    cursor: pointer     ;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index a12b5a1..abb92d1 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="login">
       <h2>Login</h2>
+      <div class="image">
+        <img src="https://cdn-icons-png.flaticon.com/512/2815/2815428.png">
+      </div>
       <form @submit.prevent="login">
         <div class="form-group">
           <label for="email">Email:</label>
@@ -9,6 +12,9 @@
         <div class="form-group">
           <label for="password">Password:</label>
           <input type="password" id="password" v-model="password" required>
+          <p>
+          <router-link to="/forgot-password">Forgot Password</router-link>
+        </p>
         </div>
         <button type="submit">Login</button>
       </form>
@@ -35,6 +41,17 @@
   </script>
   
   <style scoped>
+
+h2{
+  font-size: xx-large;
+  text-align: center;
+}
+  .image{
+    height: 200px;
+    display: flex;
+    justify-content: center;
+  }
+
   .login {
     max-width: 400px;
     margin: 0 auto;
@@ -66,9 +83,11 @@
     background-color: #007BFF;
     color: #fff;
     border: none;
-    border-radius: 5px;
+    border-radius: 10px;
     padding: 10px 20px;
     cursor: pointer;
+    display: block;
+    margin: 0 auto;
   }
   </style>
   
\ No newline at end of file

From c82a1c35a6ae351f73463a4fbb7fbc020cfc51d5 Mon Sep 17 00:00:00 2001
From: Jasper Cheng <jasper.cheng@uconn.edu>
Date: Tue, 31 Oct 2023 22:28:30 -0400
Subject: [PATCH 2/8] Started SearchTool

---
 src/App.vue                  |  1 +
 src/router/index.js          | 12 +++++
 src/views/ForgotPassword.vue | 90 ++++++++++++++++++++++++++++++++++++
 src/views/SearchTool.vue     | 70 ++++++++++++++++++++++++++++
 4 files changed, 173 insertions(+)
 create mode 100644 src/views/ForgotPassword.vue
 create mode 100644 src/views/SearchTool.vue

diff --git a/src/App.vue b/src/App.vue
index 33bbb20..dc06780 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,6 +18,7 @@ export default {
         { path: '/fetch', label: 'Create an Account' },
         { path: { name: 'form' }, label: 'Form Example' },
         { path: '/schedule', label: 'Schedule View' },
+        { path: '/searchtool', label: 'Search'},
         { path: '/admin/createcourse', label: 'Create Course' },
         { path: '/login', label: 'Login' },
       ]
diff --git a/src/router/index.js b/src/router/index.js
index 42744d3..0ebe417 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,8 @@ import AdminCreateCourseView from "../views/AdminCreateCourseView.vue";
 import LoginPage from "../views/LoginPage.vue";
 import SignUp from "../views/SignUp.vue";
 import ScheduleView from "../views/ScheduleView.vue";
+import ForgotPassword from "../views/ForgotPassword.vue";
+import SearchTool from "../views/SearchTool.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -53,6 +55,16 @@ const router = createRouter({
       name: "schedule",
       component: ScheduleView,
     },
+    {
+      path: "/forgot-password",
+      name: "forgotpassword",
+      component: ForgotPassword,
+    },
+    {
+      path:"/searchtool",
+      name: "searchtool",
+      component: SearchTool,
+    },
   ],
 });
 
diff --git a/src/views/ForgotPassword.vue b/src/views/ForgotPassword.vue
new file mode 100644
index 0000000..87887f4
--- /dev/null
+++ b/src/views/ForgotPassword.vue
@@ -0,0 +1,90 @@
+<template>
+    <h1>Reset Password</h1>
+    <p>Enter email associated with your account to reset your password.</p>
+    <div class = "forgotpassword">
+        <form @submit.prevent="forgotpassword">
+            <div class="form-group">
+                <label for = "email">Email:</label>
+                <input type="email" id="email" v-model="email" required>
+            <div>
+                <button type="sumbit">
+                    Submit
+                </button>   
+            </div>
+            </div>
+        </form>
+
+    </div>
+</template>
+
+<script>
+export default{
+    name: "Forgot Password",
+    data(){
+        return {
+            email: ""
+        };
+    },
+    methods: {
+        forgotpassword(){
+            //IDK
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+h1 {
+    font-size: x-large;
+    background-color: #007BFF;
+    color:#fff;
+    padding: 20px;
+    margin-bottom: 75px;
+    border-color: black;
+    border-width: 2px;
+}
+
+p {
+    text-align: center;
+}
+.forgotpassword {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f5f5f5;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.form-group{
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+                                                                                                                                               
+input[type="text"],
+input[type="email"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    margin-bottom: 10px;
+}
+
+button{
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    cursor: pointer;
+    display: block;
+    margin: 0 auto;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/SearchTool.vue b/src/views/SearchTool.vue
new file mode 100644
index 0000000..83b5d8f
--- /dev/null
+++ b/src/views/SearchTool.vue
@@ -0,0 +1,70 @@
+<template>
+    <h2>Search Tool</h2>
+    <form class = "search" @submit.prevent = "search">
+        <div class="label1">
+            <div>
+                <label for="department">Department</label>
+            <input type="text" id="department" v-model="department">
+            </div>
+            <div>
+                <label for="course_id">Course #</label>
+                <input type="text" id="course_id" v-model="course_id">
+            </div>
+            <label for="course_name">Course Name</label>
+            <label for="professor">Professor</label>
+        </div>
+        <div>
+            
+            
+            <input type="text" id="course_name" v-model="course_name">
+            <input type="text" id="professor" v-model="professor">
+        </div>
+
+        
+        <!-- <input type="text" id="course_id" v-model="course_id"> -->
+
+    </form>
+</template>
+
+<script>
+    export default {
+        data(){
+            return {
+                department: ''
+            };
+        },
+    methods: {
+        search(){
+
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+h2 {
+    background-color: aqua;
+    font-size: xx-large;
+}
+.search{
+    max-width: 1000px;
+    margin: 0 auto;
+    background-color: #f5f5f5;
+    border: 1px solid #ddd;
+}
+.label1 {
+    display: inline-block;
+    font-weight: bold;
+}
+/* label{
+    padding: 10px;
+} */
+
+/* input[type="text"]{
+    border: 1px solid #ccc;
+    border-radius: 3px;
+} */
+
+</style>
+

From b336905987611b3b54e58c00ed15747c583cace1 Mon Sep 17 00:00:00 2001
From: Jasper Cheng <jasper.cheng@uconn.edu>
Date: Tue, 7 Nov 2023 22:05:40 -0500
Subject: [PATCH 3/8] Search Tool, not finished

---
 src/views/SearchTool.vue | 85 +++++++++++++++++++++++++++-------------
 1 file changed, 58 insertions(+), 27 deletions(-)

diff --git a/src/views/SearchTool.vue b/src/views/SearchTool.vue
index 83b5d8f..de7887c 100644
--- a/src/views/SearchTool.vue
+++ b/src/views/SearchTool.vue
@@ -1,29 +1,51 @@
 <template>
     <h2>Search Tool</h2>
     <form class = "search" @submit.prevent = "search">
-        <div class="label1">
-            <div>
-                <label for="department">Department</label>
-            <input type="text" id="department" v-model="department">
-            </div>
-            <div>
-                <label for="course_id">Course #</label>
-                <input type="text" id="course_id" v-model="course_id">
-            </div>
-            <label for="course_name">Course Name</label>
-            <label for="professor">Professor</label>
-        </div>
+        <!-- Course ID
+        Course Name
+        Professor
+        Course Type
+        Content Area
+        Credits -->
+            <table>
+            <tr>
+                <th>
+                    <label for="course_id">Course_Id</label>
+                    <input type="text" id="course_id" v-model="course_id">
+                </th>
+                <th>
+                    <label for="course_name">Course Name</label>
+                    <input type="text" id="course_name" v-model="course_name">
+                </th>
+                <th>
+                    <label for="course_type">Course Type</label>
+                    <input type="text" id="course_type" v-model="course_type">
+                </th>
+            </tr>
+            <tr>
+                <th>
+                    <label for="credit">Credits</label>
+                    <input type="text" id="credits" v-model="credits">
+                </th>
+                <th>
+                    <label for="content_area">Content Area</label>
+                    <input type="text" id="content_area" v-model="content_area">
+                </th>
+                <th>
+                    <label for="professor">Professor</label>
+                <input type="text" id="professor" v-model="professor">
+                </th>
+            </tr>
+        </table>
         <div>
-            
-            
-            <input type="text" id="course_name" v-model="course_name">
-            <input type="text" id="professor" v-model="professor">
+            <button type="submit" id="search_tool">Search</button>
         </div>
 
-        
-        <!-- <input type="text" id="course_id" v-model="course_id"> -->
-
     </form>
+
+
+
+
 </template>
 
 <script>
@@ -44,7 +66,6 @@
 <style scoped>
 
 h2 {
-    background-color: aqua;
     font-size: xx-large;
 }
 .search{
@@ -53,18 +74,28 @@ h2 {
     background-color: #f5f5f5;
     border: 1px solid #ddd;
 }
-.label1 {
-    display: inline-block;
-    font-weight: bold;
+
+td{
+    width: 100%;
 }
-/* label{
+
+label{
+    display: block;
+    font-weight: bold;
     padding: 10px;
-} */
+    text-align: left;
+}
 
-/* input[type="text"]{
+input[type="text"]{
     border: 1px solid #ccc;
     border-radius: 3px;
-} */
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.search_tool  {
+    background-color:  #007BFF;
+}
 
 </style>
 

From 9e4ef85b07fa285122a103b97ef0ba05e7c12186 Mon Sep 17 00:00:00 2001
From: Jasper Cheng <jasper.cheng@uconn.edu>
Date: Tue, 7 Nov 2023 23:57:38 -0500
Subject: [PATCH 4/8] Modified Button

---
 src/views/SearchTool.vue | 39 +++++++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/views/SearchTool.vue b/src/views/SearchTool.vue
index de7887c..38d2d2f 100644
--- a/src/views/SearchTool.vue
+++ b/src/views/SearchTool.vue
@@ -1,5 +1,5 @@
 <template>
-    <h2>Search Tool</h2>
+    <h2 id="search_header">Search</h2>
     <form class = "search" @submit.prevent = "search">
         <!-- Course ID
         Course Name
@@ -37,11 +37,14 @@
                 </th>
             </tr>
         </table>
-        <div>
+        <div id="button_container">
             <button type="submit" id="search_tool">Search</button>
         </div>
-
     </form>
+    <div>
+        <h2 id="search_result_header">Search Results</h2>
+        
+    </div>
 
 
 
@@ -66,13 +69,24 @@
 <style scoped>
 
 h2 {
+    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-size: xx-large;
+    font-weight: bold;
+    margin-left: 391px;
 }
 .search{
-    max-width: 1000px;
+    max-width: 700px;
     margin: 0 auto;
     background-color: #f5f5f5;
     border: 1px solid #ddd;
+
+}
+
+table {
+    display: block;
+    justify-content: center;
+    margin-bottom: 20px;
+    border: #ccc;
 }
 
 td{
@@ -93,8 +107,21 @@ input[type="text"]{
     margin-right: 10px;
 }
 
-.search_tool  {
-    background-color:  #007BFF;
+#button_container{
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 15px;
+    margin-bottom: 10px;  
+}
+
+button {
+    color: #fff;
+    background-color: #007BFF;
+    padding: 10px 20px;
+    border-color: black;
+    border-width: 1px;
+    border-radius: 10px;
+    
 }
 
 </style>

From 7e4f8fbd3b9dfb851c1fa66c60106145c32d0312 Mon Sep 17 00:00:00 2001
From: Jasper Cheng <jasper.cheng@uconn.edu>
Date: Fri, 24 Nov 2023 16:18:53 -0500
Subject: [PATCH 5/8] Updated main

---
 src/App.vue               |   3 +-
 src/components/Header.vue | 143 +++++++++++++++++++-------------------
 src/main.js               |  16 +++++
 src/views/SearchTool.vue  | 128 ----------------------------------
 4 files changed, 88 insertions(+), 202 deletions(-)
 delete mode 100644 src/views/SearchTool.vue

diff --git a/src/App.vue b/src/App.vue
index 185e2c4..132204a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,7 +18,6 @@ export default {
         { path: '/fetch', label: 'Create an Account' },
         { path: { name: 'search' }, label: 'Course Search' },
         { path: '/schedule', label: 'Schedule View' },
-        { path: '/searchtool', label: 'Search'},
         { path: '/admin/createcourse', label: 'Create Course' },
         { path: '/login', label: 'Login' },
       ]
@@ -29,4 +28,4 @@ export default {
     Footer
   }
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4d8f655..da5beb4 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,75 +1,74 @@
 <template>
-    <header class="site-header">
-      <div class="header-content">
-        <h1 class="header-title">Section 2 Group 3 </h1>
-        <nav>
-          <ul class="tabs">
-            <li v-for="tab in tabs" :key="tab.path" :class="{ active: isActiveTab(tab.path) }">
-              <router-link :to="tab.path">{{ tab.label }}</router-link>
-            </li>
-          </ul>
-        </nav>
-      </div>
-    </header>
-  </template>
-  
-  <script>
-  export default {
-    props: {
-      tabs: Array
-    },
-    methods: {
-      isActiveTab(path) {
-        return this.$route.path === path;
-      }
+  <header class="site-header">
+    <div class="header-content">
+      <h1 class="header-title">Section 2 Group 3 </h1>
+      <nav>
+        <ul class="tabs">
+          <li v-for="tab in tabs" :key="tab.path" :class="{ active: isActiveTab(tab.path) }">
+            <router-link :to="tab.path">{{ tab.label }}</router-link>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  props: {
+    tabs: Array
+  },
+  methods: {
+    isActiveTab(path) {
+      return this.$route.path === path;
     }
-  };
-  </script>
-  
-  <style scoped>
-  /* UConn website header styles */
-  .site-header {
-    background-color: #003366;
-    color: #fff;
-    padding: 20px;
   }
-  
-  /* Add UConn specific styling for header content */
-  .site-header .header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  /* Define styles for navigation tabs */
-  .site-header nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  
-  .site-header nav ul li {
-    display: inline;
-    margin-right: 20px;
-  }
-  
-  .site-header nav ul li a {
-    text-decoration: none;
-    color: #fff;
-  }
-  
-  .site-header nav ul li.active a {
-    background-color: #fff;
-    color: #003366;
-    border-radius: 5px;
-    padding: 5px 10px;
-  }
-  
-  /* Style for the header title */
-  .header-title {
-    font-size: 2.5rem; /* Adjust as needed for the desired size */
-    color: #fff; /* White color for better contrast */
-    font-weight: bold; /* Emphasize the font weight */
-  }
-  </style>
-  
\ No newline at end of file
+};
+</script>
+
+<style scoped>
+/* UConn website header styles */
+.site-header {
+  background-color: #003366;
+  color: #fff;
+  padding: 20px;
+}
+
+/* Add UConn specific styling for header content */
+.site-header .header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Define styles for navigation tabs */
+.site-header nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.site-header nav ul li {
+  display: inline;
+  margin-right: 20px;
+}
+
+.site-header nav ul li a {
+  text-decoration: none;
+  color: #fff;
+}
+
+.site-header nav ul li.active a {
+  background-color: #fff;
+  color: #003366;
+  border-radius: 5px;
+  padding: 5px 10px;
+}
+
+/* Style for the header title */
+.header-title {
+  font-size: 2.5rem; /* Adjust as needed for the desired size */
+  color: #fff; /* White color for better contrast */
+  font-weight: bold; /* Emphasize the font weight */
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 7a9c7a8..758f943 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,27 @@
 import "./assets/main.css";
 
+//Added for Auth) login
+// import { createAuth0 } from '@auth0/auth0-vue'
+
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 
 const app = createApp(App);
 
+//Original app.use()
 app.use(router);
 
+//Auth0 app.use()
+// app.use(
+//     createAuth0({
+//         domain:"dev-gi0zusfv0z1zvt1x.us.auth0.com",
+//         clientId: "clCyl1SjISWMmL2iMStXnQzHTBy44wwq",
+//         authorizationParams: {
+//             redirect_uri: window.location.origin
+//         }
+//     })
+// );
+
+
 app.mount("#app");
diff --git a/src/views/SearchTool.vue b/src/views/SearchTool.vue
deleted file mode 100644
index 38d2d2f..0000000
--- a/src/views/SearchTool.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-    <h2 id="search_header">Search</h2>
-    <form class = "search" @submit.prevent = "search">
-        <!-- Course ID
-        Course Name
-        Professor
-        Course Type
-        Content Area
-        Credits -->
-            <table>
-            <tr>
-                <th>
-                    <label for="course_id">Course_Id</label>
-                    <input type="text" id="course_id" v-model="course_id">
-                </th>
-                <th>
-                    <label for="course_name">Course Name</label>
-                    <input type="text" id="course_name" v-model="course_name">
-                </th>
-                <th>
-                    <label for="course_type">Course Type</label>
-                    <input type="text" id="course_type" v-model="course_type">
-                </th>
-            </tr>
-            <tr>
-                <th>
-                    <label for="credit">Credits</label>
-                    <input type="text" id="credits" v-model="credits">
-                </th>
-                <th>
-                    <label for="content_area">Content Area</label>
-                    <input type="text" id="content_area" v-model="content_area">
-                </th>
-                <th>
-                    <label for="professor">Professor</label>
-                <input type="text" id="professor" v-model="professor">
-                </th>
-            </tr>
-        </table>
-        <div id="button_container">
-            <button type="submit" id="search_tool">Search</button>
-        </div>
-    </form>
-    <div>
-        <h2 id="search_result_header">Search Results</h2>
-        
-    </div>
-
-
-
-
-</template>
-
-<script>
-    export default {
-        data(){
-            return {
-                department: ''
-            };
-        },
-    methods: {
-        search(){
-
-        },
-    },
-};
-</script>
-
-<style scoped>
-
-h2 {
-    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    font-size: xx-large;
-    font-weight: bold;
-    margin-left: 391px;
-}
-.search{
-    max-width: 700px;
-    margin: 0 auto;
-    background-color: #f5f5f5;
-    border: 1px solid #ddd;
-
-}
-
-table {
-    display: block;
-    justify-content: center;
-    margin-bottom: 20px;
-    border: #ccc;
-}
-
-td{
-    width: 100%;
-}
-
-label{
-    display: block;
-    font-weight: bold;
-    padding: 10px;
-    text-align: left;
-}
-
-input[type="text"]{
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    margin-left: 10px;
-    margin-right: 10px;
-}
-
-#button_container{
-    display: flex;
-    justify-content: flex-end;
-    margin-right: 15px;
-    margin-bottom: 10px;  
-}
-
-button {
-    color: #fff;
-    background-color: #007BFF;
-    padding: 10px 20px;
-    border-color: black;
-    border-width: 1px;
-    border-radius: 10px;
-    
-}
-
-</style>
-

From 5d47703c88e09900cc174b495b8c6886a8289884 Mon Sep 17 00:00:00 2001
From: Jasper Cheng <jasper.cheng@uconn.edu>
Date: Fri, 24 Nov 2023 17:45:59 -0500
Subject: [PATCH 6/8] Auth0 Login Redirction works

---
 .env                |  6 ++++++
 package-lock.json   | 23 +++++++++++++++++++++++
 package.json        |  1 +
 src/main.js         | 29 ++++++++++++++---------------
 src/router/index.js |  6 ++++++
 src/views/Test.vue  | 38 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 88 insertions(+), 15 deletions(-)
 create mode 100644 .env
 create mode 100644 src/views/Test.vue

diff --git a/.env b/.env
new file mode 100644
index 0000000..4a87c9a
--- /dev/null
+++ b/.env
@@ -0,0 +1,6 @@
+VITE_API_SERVER_URL=http://localhost:6060
+VITE_AUTH0_DOMAIN=dev-gi0zusfv0z1zvt1x.us.auth0.com
+VITE_AUTH0_CLIENT_ID=clCyl1SjISWMmL2iMStXnQzHTBy44wwq
+VITE_AUTH0_CALLBACK_URL=http://localhost:5173/callback
+VITE_AUTH0_AUDIENCE=https://dev-gi0zusfv0z1zvt1x.us.auth0.com/api/v2/
+# VITE_API_SERVER_URL=https://fuprqaj0n4.execute-api.us-east-1.amazonaws.com/Prod
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 24923c0..ce32514 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "testing-vue-create",
       "version": "0.0.0",
       "dependencies": {
+        "@auth0/auth0-vue": "^2.3.2",
         "@unocss/reset": "^0.56.5",
         "axios": "^1.5.1",
         "vue": "^3.3.4",
@@ -18,6 +19,28 @@
         "vite": "^4.4.9"
       }
     },
+    "node_modules/@auth0/auth0-spa-js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-2.1.2.tgz",
+      "integrity": "sha512-xdA65Z/U7++Y7L9Uwh8Q8OVOs6qgFz+fb7GAzHFjpr1icO37B//xdzLXm7ZRgA19RWrsNe1nme3h896igJSvvw=="
+    },
+    "node_modules/@auth0/auth0-vue": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-vue/-/auth0-vue-2.3.2.tgz",
+      "integrity": "sha512-HV53tLzT6yfRmbfp0pm7BG54i7fm1nIfj8mTd0HrhZP028fuxtyTPN9p+CY7uRvOm12aAxPZXdJlZ8/TVpxmPA==",
+      "dependencies": {
+        "@auth0/auth0-spa-js": "^2.1.2",
+        "vue": "^3.2.41"
+      },
+      "peerDependencies": {
+        "vue-router": "^4.0.12"
+      },
+      "peerDependenciesMeta": {
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@babel/parser": {
       "version": "7.23.0",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
diff --git a/package.json b/package.json
index a1953b4..addc749 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@auth0/auth0-vue": "^2.3.2",
     "@unocss/reset": "^0.56.5",
     "axios": "^1.5.1",
     "vue": "^3.3.4",
diff --git a/src/main.js b/src/main.js
index 758f943..296d602 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import "./assets/main.css";
 
 //Added for Auth) login
-// import { createAuth0 } from '@auth0/auth0-vue'
+import { createAuth0 } from '@auth0/auth0-vue'
 
 import { createApp } from "vue";
 import App from "./App.vue";
@@ -9,19 +9,18 @@ import router from "./router";
 
 const app = createApp(App);
 
-//Original app.use()
-app.use(router);
-
-//Auth0 app.use()
-// app.use(
-//     createAuth0({
-//         domain:"dev-gi0zusfv0z1zvt1x.us.auth0.com",
-//         clientId: "clCyl1SjISWMmL2iMStXnQzHTBy44wwq",
-//         authorizationParams: {
-//             redirect_uri: window.location.origin
-//         }
-//     })
-// );
-
+//From Lab
+app
+    .use(router)
+    .use(
+        createAuth0({
+            domain: import.meta.env.VITE_AUTH0_DOMAIN,
+            clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
+            authorizationParams: {
+                audience: import.meta.env.VITE_AUTH0_AUDIENCE,
+                redirect_uri: import.meta.env.VITE_AUTH0_CALLBACK_URL,
+            },
+        })
+    )
 
 app.mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
index 2eeb1d0..7131e40 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,6 +9,7 @@ import LoginPage from "../views/LoginPage.vue";
 import SignUp from "../views/SignUp.vue";
 import ScheduleView from "../views/ScheduleView.vue";
 import StudentCourseView from "../views/StudentCourseView.vue";
+import Test from "../views/Test.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -59,6 +60,11 @@ const router = createRouter({
       name: "mycourses",
       component: StudentCourseView,
     },
+    {
+      path: "/test",
+      name: "test",
+      component: Test,
+    },
   ],
 });
 
diff --git a/src/views/Test.vue b/src/views/Test.vue
new file mode 100644
index 0000000..178e5c8
--- /dev/null
+++ b/src/views/Test.vue
@@ -0,0 +1,38 @@
+<template>
+    <header>This is a test page</header>
+    <div>
+      <button @click="handleLogin">Log in</button>
+    </div>
+  </template>
+
+ <!--From Lab  -->
+<script setup>
+import { useAuth0 } from "@auth0/auth0-vue";
+
+const { loginWithRedirect } = useAuth0();
+
+const handleLogin = () => {
+  loginWithRedirect({
+    appState: {
+      target: "/profile",
+    },
+  });
+};
+</script>
+
+<!-- From Auth0 Quickstart Tutorial -->
+  <!-- <script>
+    import { useAuth0 } from '@auth0/auth0-vue';
+  
+    export default {
+      setup() {
+        const { loginWithRedirect } = useAuth0();
+  
+        return {
+          login: () => {
+            loginWithRedirect();
+          }
+        };
+      }
+    };
+  </script> -->
\ No newline at end of file

From 4f3aba7c71a884cdff9f180fe218510e9d66e555 Mon Sep 17 00:00:00 2001
From: Jack Psaras <jack.psaras@uconn.edu>
Date: Sat, 25 Nov 2023 14:00:10 -0500
Subject: [PATCH 7/8] fixed profile view

---
 package-lock.json            | 14 ++++++---
 package.json                 |  3 +-
 src/App.vue                  |  8 +++--
 src/components/AppHeader.vue |  6 ++--
 src/router/index.js          | 13 ++++++--
 src/views/ClassSearch.vue    | 32 +++++++++++++++++--
 src/views/HomeView.vue       |  1 +
 src/views/Profile.vue        | 60 ++++++++++++++++++++++++++++++++++++
 src/views/ScheduleView.vue   |  2 ++
 src/views/Test.vue           | 35 ++++++++-------------
 10 files changed, 137 insertions(+), 37 deletions(-)
 create mode 100644 src/views/Profile.vue

diff --git a/package-lock.json b/package-lock.json
index ce32514..e425c31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "@auth0/auth0-vue": "^2.3.2",
         "@unocss/reset": "^0.56.5",
-        "axios": "^1.5.1",
+        "@websanova/vue-auth": "^4.2.1",
+        "axios": "^1.6.2",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
       },
@@ -537,15 +538,20 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
+    "node_modules/@websanova/vue-auth": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@websanova/vue-auth/-/vue-auth-4.2.1.tgz",
+      "integrity": "sha512-gc4WL3WzJMkj3wZmrBAP7U7WBAcVY0/a/YhCzMVR/iA1u/8QJlugq/320CRRbZ0Acz+qbGPhdm07IRE3U053yg=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/axios": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
-      "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
diff --git a/package.json b/package.json
index addc749..b234506 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
   "dependencies": {
     "@auth0/auth0-vue": "^2.3.2",
     "@unocss/reset": "^0.56.5",
-    "axios": "^1.5.1",
+    "@websanova/vue-auth": "^4.2.1",
+    "axios": "^1.6.2",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },
diff --git a/src/App.vue b/src/App.vue
index 132204a..390003b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,12 +14,14 @@ export default {
   data() {
     return {
       tabs: [
-        { path: '/', label: 'Home' },
-        { path: '/fetch', label: 'Create an Account' },
+        { path: '/home', label: 'Home' },
+        //{ path: '/fetch', label: 'Create an Account' },
         { path: { name: 'search' }, label: 'Course Search' },
         { path: '/schedule', label: 'Schedule View' },
         { path: '/admin/createcourse', label: 'Create Course' },
-        { path: '/login', label: 'Login' },
+        //{ path: '/login', label: 'Login' },
+        { path: '/', label: 'Login' },
+        { path: '/profile', label: 'Profile' },
       ]
     };
   },
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 44800f9..6070420 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -20,12 +20,14 @@ const title = 'Course Registration';
 
 const tabs = [
   { path: '/', label: 'Home' },
-  { path: '/fetch', label: 'Create an Account' },
+  //{ path: '/fetch', label: 'Create an Account' },
   { path: { name: 'search' }, label: 'Course Search' },
   { path: '/schedule', label: 'Schedule View' },
   { path: '/mycourses', label: 'Course View' },
   { path: '/admin/createcourse', label: 'Create Course' },
-  { path: '/login', label: 'Login' },
+  //{ path: '/login', label: 'Login' },
+  { path: '/test', label: 'Test'},
+  { path: '/profile', label: 'Profile' },
 ];
 
 const route = useRoute();
diff --git a/src/router/index.js b/src/router/index.js
index 7131e40..f4c9606 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@ import SignUp from "../views/SignUp.vue";
 import ScheduleView from "../views/ScheduleView.vue";
 import StudentCourseView from "../views/StudentCourseView.vue";
 import Test from "../views/Test.vue";
+import Profile from "../views/Profile.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -26,7 +27,7 @@ const router = createRouter({
   // and, most importantly, the component that should be rendered for the view
   routes: [
     {
-      path: "/",
+      path: "/home",
       name: "home",
       component: HomeView,
     },
@@ -61,10 +62,16 @@ const router = createRouter({
       component: StudentCourseView,
     },
     {
-      path: "/test",
-      name: "test",
+      path: "/",
+      name: "Test",
       component: Test,
     },
+    {
+      path: "/profile",
+      name: "Profile",
+      component: Profile,
+
+    },
   ],
 });
 
diff --git a/src/views/ClassSearch.vue b/src/views/ClassSearch.vue
index 6c95ae9..701d770 100644
--- a/src/views/ClassSearch.vue
+++ b/src/views/ClassSearch.vue
@@ -2,6 +2,8 @@
   <div>
     <!-- Search Form -->
     <section class="search-form">
+      <p>Name: {{ parsedName }}</p>
+      <p>Email: {{ parsedEmail }}</p>
       <h3>Class Search</h3>
       <form @submit.prevent="searchClasses">
         <label for="courseName">Course Name:</label>
@@ -31,6 +33,11 @@
               </div>
             </div>
           </div>
+
+          <!-- Enroll button -->
+          <div class="enroll-button">
+            <button @click="enrollClass">Enroll</button>
+          </div>
         </div>
       </div>
       <p v-else>No results found.</p>
@@ -39,6 +46,9 @@
 </template>
 
 <script>
+import { useAuth0 } from '@auth0/auth0-vue';
+import axios from 'axios';
+
 export default {
   data() {
     return {
@@ -74,8 +84,10 @@ export default {
       if (value && value.N) return value.N;
       // Add other types here if needed
       return value || 'N/A';
-    }
-  }
+    },
+    enrollClass() {
+    },
+  },
 };
 </script>
 
@@ -158,4 +170,20 @@ button {
   margin-right: 5px;
 }
 
+/* Styles for the enroll button */
+.enroll-button {
+  display: flex;
+  align-items: center;
+}
+
+.enroll-button button {
+  padding: 10px 20px;
+  margin-left: auto; /* Push the button to the right */
+  border: 1px solid #003366;
+  border-radius: 5px;
+  background-color: #003366;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+}
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 37e5663..222a74a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -5,6 +5,7 @@
       <div class="welcome-content">
         <h2>Welcome to Section 2 Group 3 University</h2>
         <p>Explore our vibrant academic community dedicated to excellence.</p>
+        
       </div>
     </section>
 
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
new file mode 100644
index 0000000..4ec8c1c
--- /dev/null
+++ b/src/views/Profile.vue
@@ -0,0 +1,60 @@
+<template>
+    <div>
+      <h2>User Profile</h2>
+      <div v-if="isAuthenticated">
+        <p>Name: {{ parsedName }}</p>
+        <p>Email: {{ parsedEmail }}</p>
+        <button @click="sendUserData">Send User Data</button>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { useAuth0 } from '@auth0/auth0-vue';
+  import axios from 'axios';
+  
+  export default {
+    setup() {
+      const { user, isAuthenticated } = useAuth0();
+  
+      // Save user data as a JSON string
+      const userJsonString = JSON.stringify(user, null, 2);
+  
+      // Parse userJsonString to get name and email
+      const parsedUser = JSON.parse(userJsonString);
+      const parsedName = parsedUser._value.name; // Access name from _value
+      const parsedEmail = parsedUser._value.email; // Access email from _value
+  
+      // Print name and email to the console
+      console.log('Parsed Name:', parsedName);
+      console.log('Parsed Email:', parsedEmail);
+  
+      // Function to send user data via POST request
+      const sendUserData = async () => {
+        try {
+          // Send POST request to the specified endpoint
+          const response = await axios.post('https://5ctsolryl1.execute-api.us-east-1.amazonaws.com/prod/create', {
+            name: parsedName,
+            email: parsedEmail
+          });
+  
+          // Log the response
+          console.log('POST Request Response:', response.data);
+        } catch (error) {
+          // Log any errors
+          console.error('Error sending POST request:', error);
+        }
+      };
+  
+      return {
+        user,
+        userJsonString,
+        isAuthenticated,
+        parsedName,
+        parsedEmail,
+        sendUserData
+      };
+    }
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/views/ScheduleView.vue b/src/views/ScheduleView.vue
index f290450..1a199ab 100644
--- a/src/views/ScheduleView.vue
+++ b/src/views/ScheduleView.vue
@@ -21,6 +21,8 @@
   </template>
   
   <script>
+  import { useAuth0 } from '@auth0/auth0-vue';
+  
   export default {
     data() {
       return {
diff --git a/src/views/Test.vue b/src/views/Test.vue
index 178e5c8..959195c 100644
--- a/src/views/Test.vue
+++ b/src/views/Test.vue
@@ -1,15 +1,17 @@
 <template>
-    <header>This is a test page</header>
+  <div>
+    <header>Login Page</header>
     <div>
-      <button @click="handleLogin">Log in</button>
+      <button v-if="!isAuthenticated" @click="handleLogin">Log in</button>
+      <button v-if="isAuthenticated" @click="handleLogout">Log out</button>
     </div>
-  </template>
+  </div>
+</template>
 
- <!--From Lab  -->
 <script setup>
 import { useAuth0 } from "@auth0/auth0-vue";
 
-const { loginWithRedirect } = useAuth0();
+const { isAuthenticated, loginWithRedirect, logout } = useAuth0();
 
 const handleLogin = () => {
   loginWithRedirect({
@@ -18,21 +20,10 @@ const handleLogin = () => {
     },
   });
 };
-</script>
 
-<!-- From Auth0 Quickstart Tutorial -->
-  <!-- <script>
-    import { useAuth0 } from '@auth0/auth0-vue';
-  
-    export default {
-      setup() {
-        const { loginWithRedirect } = useAuth0();
-  
-        return {
-          login: () => {
-            loginWithRedirect();
-          }
-        };
-      }
-    };
-  </script> -->
\ No newline at end of file
+const handleLogout = () => {
+  logout({
+    returnTo: window.location.origin,
+  });
+};
+</script>

From a19a2c56689708056aec8cdef6d2a38ff966e0a5 Mon Sep 17 00:00:00 2001
From: Jack Psaras <jack.psaras@uconn.edu>
Date: Sat, 25 Nov 2023 17:14:40 -0500
Subject: [PATCH 8/8] enroll working

---
 src/views/ClassSearch.vue |  51 +++++++++++++++----
 src/views/Profile.vue     | 103 +++++++++++++++++---------------------
 2 files changed, 85 insertions(+), 69 deletions(-)

diff --git a/src/views/ClassSearch.vue b/src/views/ClassSearch.vue
index 701d770..9343d33 100644
--- a/src/views/ClassSearch.vue
+++ b/src/views/ClassSearch.vue
@@ -1,9 +1,12 @@
 <template>
   <div>
-    <!-- Search Form -->
-    <section class="search-form">
+    <div v-if="isAuthenticated">
       <p>Name: {{ parsedName }}</p>
       <p>Email: {{ parsedEmail }}</p>
+    </div>
+
+    <!-- Search Form -->
+    <section class="search-form">
       <h3>Class Search</h3>
       <form @submit.prevent="searchClasses">
         <label for="courseName">Course Name:</label>
@@ -50,17 +53,31 @@ import { useAuth0 } from '@auth0/auth0-vue';
 import axios from 'axios';
 
 export default {
+  setup() {
+    const { user, isAuthenticated } = useAuth0();
+    const userJsonString = JSON.stringify(user, null, 2);
+    const parsedUser = JSON.parse(userJsonString);
+    const parsedName = parsedUser._value.name;
+    const parsedEmail = parsedUser._value.email;
+
+    return {
+      isAuthenticated,
+      parsedName,
+      parsedEmail,
+    };
+  },
+
   data() {
     return {
       courseName: '',
       professor: '',
       courseID: '',
-      results: null
+      results: null,
     };
   },
   methods: {
     searchClasses() {
-      const url = `https://8dbuywnj95.execute-api.us-east-1.amazonaws.com/Final_stage_course/search?name=${this.courseName}`;
+      let url = `https://8dbuywnj95.execute-api.us-east-1.amazonaws.com/Final_stage_course/search?name=${this.courseName}`;
 
       if (this.professor) {
         url += `&professor=${this.professor}`;
@@ -71,24 +88,36 @@ export default {
       }
 
       fetch(url)
-        .then(response => response.json())
-        .then(data => {
+        .then((response) => response.json())
+        .then((data) => {
           this.results = data;
+          console.log(this.results.name.S);
         })
-        .catch(error => {
+        .catch((error) => {
           console.error('Error:', error);
         });
     },
     formatValue(value) {
       if (value && value.S) return value.S;
       if (value && value.N) return value.N;
-      // Add other types here if needed
       return value || 'N/A';
     },
     enrollClass() {
-    },
-  },
-};
+      const courseData = {
+        name: this.parsedName,
+        courseName: this.results.name.S,
+      };
+
+      axios.post('https://xb55sqy2kf.execute-api.us-east-1.amazonaws.com/prod/enroll', courseData)
+        .then(response => {
+          console.log(response.data);
+        })
+        .catch(error => {
+          console.error(error);
+        });
+      },
+  }
+}
 </script>
 
 <style>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 4ec8c1c..4edf45b 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -1,60 +1,47 @@
 <template>
-    <div>
-      <h2>User Profile</h2>
-      <div v-if="isAuthenticated">
-        <p>Name: {{ parsedName }}</p>
-        <p>Email: {{ parsedEmail }}</p>
-        <button @click="sendUserData">Send User Data</button>
-      </div>
+  <div>
+    <h2>User Profile</h2>
+    <div v-if="isAuthenticated">
+      <p>Name: {{ parsedName }}</p>
+      <p>Email: {{ parsedEmail }}</p>
+      <button @click="sendUserData">Send User Data</button>
     </div>
-  </template>
-  
-  <script>
-  import { useAuth0 } from '@auth0/auth0-vue';
-  import axios from 'axios';
-  
-  export default {
-    setup() {
-      const { user, isAuthenticated } = useAuth0();
-  
-      // Save user data as a JSON string
-      const userJsonString = JSON.stringify(user, null, 2);
-  
-      // Parse userJsonString to get name and email
-      const parsedUser = JSON.parse(userJsonString);
-      const parsedName = parsedUser._value.name; // Access name from _value
-      const parsedEmail = parsedUser._value.email; // Access email from _value
-  
-      // Print name and email to the console
-      console.log('Parsed Name:', parsedName);
-      console.log('Parsed Email:', parsedEmail);
-  
-      // Function to send user data via POST request
-      const sendUserData = async () => {
-        try {
-          // Send POST request to the specified endpoint
-          const response = await axios.post('https://5ctsolryl1.execute-api.us-east-1.amazonaws.com/prod/create', {
-            name: parsedName,
-            email: parsedEmail
-          });
-  
-          // Log the response
-          console.log('POST Request Response:', response.data);
-        } catch (error) {
-          // Log any errors
-          console.error('Error sending POST request:', error);
-        }
-      };
-  
-      return {
-        user,
-        userJsonString,
-        isAuthenticated,
-        parsedName,
-        parsedEmail,
-        sendUserData
-      };
-    }
-  };
-  </script>
-  
\ No newline at end of file
+  </div>
+</template>
+
+<script>
+import { useAuth0 } from '@auth0/auth0-vue';
+import axios from 'axios';
+
+export default {
+  setup() {
+    const { user, isAuthenticated } = useAuth0();
+    console.log(user);
+    const userJsonString = JSON.stringify(user, null, 2);
+    console.log(userJsonString);
+    const parsedUser = JSON.parse(userJsonString);
+    const parsedName = parsedUser._value.name;
+    const parsedEmail = parsedUser._value.email;
+
+    const sendUserData = async () => {
+      try {
+        const response = await axios.post('https://5ctsolryl1.execute-api.us-east-1.amazonaws.com/prod/create', {
+          name: parsedName,
+          email: parsedEmail
+        });
+
+        console.log('POST Request Response:', response.data);
+      } catch (error) {
+        console.error('Error sending POST request:', error);
+      }
+    };
+
+    return {
+      isAuthenticated,
+      parsedName,
+      parsedEmail,
+      sendUserData
+    };
+  }
+};
+</script>