combining login and startup pages

zjf19002 · Nov 8, 2023 · 158bc23 · 158bc23
1 parent 37a9aa6
commit 158bc23
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 31 deletions.
diff --git a/class_registration_app/src/components/LoginPage.vue b/class_registration_app/src/components/LoginPage.vue
@@ -1,5 +1,4 @@
 <template>
-  <body>
   <section class="form animated flipInX">
     <h2>Login To Your Account</h2>
     <p class="valid">Valid. Please wait a moment.</p>
@@ -10,10 +9,8 @@
       <!--<RouterLink to="./dashboard" @click.prevent="tryLogin"> use v-if here @click.prevent="tryLogin" -->
       <button @click.prevent="tryLogin" id="submit">Login</button>
     </form>
-    <RouterLink to="/">Back</RouterLink>
     <div id="test"></div>
   </section>
-</body>
 </template>
 
 <script setup lang="ts">
@@ -56,7 +53,7 @@ const tryLogin = async () => {
 
 </script>
 
-    <style scoped>
+  <style scoped>
     section {
         background-color: navy ;
         font-family: "Roboto";
@@ -79,11 +76,13 @@ const tryLogin = async () => {
         position: absolute;
         top: 50%;
         left: 50%;
+        transform: translate(-50%, -50%);
         background: #fff;
-        width: 285px;
-        margin: -140px 0 0 -182px;
-        padding: 40px;
-        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+        width: 80%;
+        height: 70%;
+        
+        
+        
         h2 {
           margin: 0 0 20px;
           line-height: 1;
@@ -128,14 +127,4 @@ const tryLogin = async () => {
       .error, .valid{display:none;}
 
 
-    </style>
-
-<style scoped>
-    body{
-      background-color: #000066;
-    }
-    #test{
-      font-size: 20px;
-      color: red
-    }
-</style>
+  </style>
diff --git a/class_registration_app/src/components/StartUp.vue b/class_registration_app/src/components/StartUp.vue
@@ -1,15 +1,29 @@
 <script setup lang="ts">
-import AppVue from '@/App.vue';
+    import AppVue from '@/App.vue';
+    import LoginPage from './LoginPage.vue';
+    import { ref } from 'vue';
 
+    let isVisible = ref(false);
+    
+    let loginType = ref("");
 
+    function openCloseLogin(type: string){
+        
+        isVisible.value = !isVisible.value;
+        loginType.value = type;
+    }
 
 </script>
 
 <template>
 
 <div class="backdrop">
 
-
+    <div v-if="isVisible" class="login-div">
+        <label id="typeOfLogin">{{loginType}}</label>
+        <button v-on:click="openCloseLogin('Student Login')" style="float: right;" class="btn-97">X</button>
+        <LoginPage></LoginPage>
+    </div>
     <div class="top">
         <img class="logos" src="https://logos-world.net/wp-content/uploads/2022/01/UConn-Huskies-Logo-1970.png">
         <div>
@@ -21,14 +35,14 @@ import AppVue from '@/App.vue';
     </div>
 
     <div class="login">
-        <a href="./login">
-            <button class="btn-97" style="position: absolute;top:40%;left:50%;transform:translate(-50%,-50%)">
-                Login as student
-            </button>
-            <button class="btn-97" style="background-color:black;position: absolute;top:80%;left:50%;transform:translate(-50%,-50%)">
-                Login as faculty
-            </button>
-        </a>
+
+        <button v-on:click="openCloseLogin('Student Login')" class="btn-97" style="position: absolute;top:40%;left:50%;transform:translate(-50%,-50%)">
+            Login as student
+        </button>
+        <button v-on:click="openCloseLogin('Faculty Login')" class="btn-97" style="background-color:black;position: absolute;top:80%;left:50%;transform:translate(-50%,-50%)">
+            Login as faculty
+        </button>
+
 
 
         <a class="forgot" style="">Forget your login?</a>
@@ -266,10 +280,11 @@ footer {
     font-size: 1.5vw;
   }
   
-
+  
   @keyframes change{
     0%
     {
+        /*Must include both jpegs to load the one before and prevent flicker*/
         background-image: url("../assets/Aerial131009a125.jpeg"), url("../assets/winter2.jpeg");
     }
     20%
@@ -292,6 +307,30 @@ footer {
     {
         background-image: url("../assets/Aerial131009a125.jpeg");
     }
-}
+    }
+
+    .login-div{
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -43%);
+        height: 65vh;
+        width: 30vw;
+        background-color: white;
+        z-index: 9999;
+        border-radius: 99px;
+        animation: popup .5s linear;
+        border: solid 2px black;
+    }
+
+    @keyframes popup {
+        from{
+            opacity: 0%;
+        }
+
+        to{
+            opacity:100%;
+        }
+    }
 
 </style>