Made a Forgot Page, Added Icon to Login Page, Started Admin Page

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>

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

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>

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>

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>