Replaced header with own component

This commit is contained in:
Gourav Kumar 2024-06-15 21:14:49 +05:30
parent 4bf48b9538
commit 0514a7ce3d

View File

@ -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">
<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>
</template>
</el-page-header>
</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>