fixed profile view

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"
   },

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' },
       ]
     };
   },

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();

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,
+
+    },
   ],
 });
 

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>

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>
 

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>
+

src/views/ScheduleView.vue

@@ -21,6 +21,8 @@
   </template>
 
   <script>
+  import { useAuth0 } from '@auth0/auth0-vue';
+
   export default {
     data() {
       return {

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> -->
+const handleLogout = () => {
+  logout({
+    returnTo: window.location.origin,
+  });
+};
+</script>