Test jasper

.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

package.json

@@ -8,8 +8,10 @@
     "preview": "vite preview"
   },
   "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' },
       ]
     };
   },
@@ -28,4 +30,4 @@ export default {
     Footer
   }
 };
-</script>
+</script>

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/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>
-
+};
+</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>

src/main.js

@@ -1,11 +1,26 @@
 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);
 
-app.use(router);
+//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");

src/router/index.js

@@ -9,6 +9,8 @@ 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";
+import Profile from "../views/Profile.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -25,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,
     },
@@ -59,6 +61,17 @@ const router = createRouter({
       name: "mycourses",
       component: StudentCourseView,
     },
+    {
+      path: "/",
+      name: "Test",
+      component: Test,
+    },
+    {
+      path: "/profile",
+      name: "Profile",
+      component: Profile,
+
+    },
   ],
 });