From 0514a7ce3d8d8645c8e9946fb9882cd54544e4ed Mon Sep 17 00:00:00 2001
From: gourav <gourav2711@gmail.com>
Date: Sat, 15 Jun 2024 21:14:49 +0530
Subject: [PATCH] Replaced header with own component

---
 frontend/src/App.vue | 47 +++++++++++++++++++++++++++-----------------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2077b27..fe1719c 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,22 +6,15 @@ import ListSecrets from "./components/ListSecrets.vue";
 
 <template>
   <div>
-    <el-page-header :icon="null">
-      <template #icon> <span v-show="false">Wohoot</span></template>
-      <template #content>
-        <div class="flex items-center">
-          <span class="text-large font-600 mr-3"> FastAuth </span>
-        </div>
-      </template>
-      <template #extra>
-        <div class="flex items-center" v-if="loggedin">
-          <el-button type="primary" class="ml-2" @click="creationDialog = true">
-            Create
-          </el-button>
-          <el-button type="warning" class="ml-2" @click="logout">Logout</el-button>
-        </div>
-      </template>
-    </el-page-header>
+    <div id="header">
+      <span class="logo">FastAuth</span>
+      <div class="header-buttons" v-if="loggedin">
+        <el-button type="primary" class="ml-2" @click="creationDialog = true">
+          Create
+        </el-button>
+        <el-button type="warning" class="ml-2" @click="logout">Logout</el-button>
+      </div>
+    </div>
 
     <el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw">
       <CreateSecret @close="creationDialog = false" />
@@ -36,10 +29,10 @@ import ListSecrets from "./components/ListSecrets.vue";
         "
         v-if="!loggedin"
       />
-      <el-button @click="showSecrets = true" v-if="loggedin"> Show secrets </el-button>
+      <!-- <el-button @click="showSecrets = true" v-if="loggedin"> Show secrets </el-button>
       <el-button @click="showSecrets = false" v-if="showSecrets && loggedin">
         Hide secrets
-      </el-button>
+      </el-button> -->
       <ListSecrets :key="listUpdated" v-if="showSecrets && loggedin" />
     </div>
   </div>
@@ -136,4 +129,22 @@ export default {
 .el-page-header__back {
   display: none !important;
 }
+
+#header {
+  width: 100vw;
+  height: 3rem;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: rgb(170, 247, 247);
+  display: flex;
+  align-items: center;
+  padding: 0 12px 0 12px;
+  justify-content: space-between;
+  box-shadow: 2px 0px 8px #aaa;
+}
+.logo {
+  font-size: 1.3rem;
+  font-weight: 700;
+}
 </style>