integrated login component in startup page

zjf19002 · Nov 8, 2023 · 436e668 · 436e668
1 parent 158bc23
commit 436e668
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git a/class_registration_app/src/components/DashBoard.vue b/class_registration_app/src/components/DashBoard.vue
@@ -8,7 +8,7 @@
     <div class="dashboard">
         <div class="head2">
             Class Registration Dashboard
-            <RouterLink to="./login">
+            <RouterLink to="./">
                 <div class="signout">Sign Out</div>
             </RouterLink>
         </div>

diff --git a/class_registration_app/src/components/LoginPage.vue b/class_registration_app/src/components/LoginPage.vue
@@ -1,11 +1,13 @@
 <template>
   <section class="form animated flipInX">
-    <h2>Login To Your Account</h2>
     <p class="valid">Valid. Please wait a moment.</p>
     <p class="error">Error. Please enter correct Username &amp; password.</p>
     <form class="loginbox" autocomplete="off">
-      <input placeholder="Username" type="text" id="username" v-model="data.username" />
-      <input placeholder="Password" type="password" id="password" v-model="data.password"/>
+      <input class="inputBox" placeholder="Username" type="text" id="username" v-model="data.username" />
+      <br/><br/>
+      <input class="inputBox" placeholder="Password" type="password" id="password" v-model="data.password"/>
+      <br/>
+      <br/>
       <!--<RouterLink to="./dashboard" @click.prevent="tryLogin"> use v-if here @click.prevent="tryLogin" -->
       <button @click.prevent="tryLogin" id="submit">Login</button>
     </form>
@@ -74,10 +76,10 @@ const tryLogin = async () => {
       }
       .form {
         position: absolute;
-        top: 50%;
+        top: 70%;
         left: 50%;
         transform: translate(-50%, -50%);
-        background: #fff;
+        background: transparent;
         width: 80%;
         height: 70%;
         
@@ -91,16 +93,12 @@ const tryLogin = async () => {
           font-weight: 400;
         }
         input {
-          outline: none;
-          display: block;
-          width: 100%;
-          margin: 0 0 20px;
-          padding: 10px 15px;
+          
+          
           border: 1px solid #ccc;
           color: #ccc;
           font-family: "Roboto";
-          box-sizing: border-box;
-          font-size: 14px;
+          font-size: 19px;
           font-weight: 400;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
@@ -124,6 +122,23 @@ const tryLogin = async () => {
         font-weight: 400;
       }
       
+      .inputBox{
+        width:100%;
+        height:15%;
+        border: 1px solid #ccc;
+        color: black;
+        font-family: "Roboto";
+        font-size: 25px;
+        font-weight: 400;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        transition: 0.2s linear;
+        &input:focus {
+          color: #333;
+          border: 1px solid #44c4e7;
+        }
+      }
+
       .error, .valid{display:none;}
 
 

diff --git a/class_registration_app/src/components/StartUp.vue b/class_registration_app/src/components/StartUp.vue
@@ -8,7 +8,6 @@
     let loginType = ref("");
 
     function openCloseLogin(type: string){
-        
         isVisible.value = !isVisible.value;
         loginType.value = type;
     }
@@ -20,7 +19,7 @@
 <div class="backdrop">
 
     <div v-if="isVisible" class="login-div">
-        <label id="typeOfLogin">{{loginType}}</label>
+        <label class="typeOfLogin">{{loginType}}</label>
         <button v-on:click="openCloseLogin('Student Login')" style="float: right;" class="btn-97">X</button>
         <LoginPage></LoginPage>
     </div>
@@ -333,4 +332,11 @@ footer {
         }
     }
 
+    .typeOfLogin{
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%);
+        top: 15%;
+        font-size: 2vw;
+    }
 </style>