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> <template>
<div> <div>
<el-page-header :icon="null"> <div id="header">
<template #icon> <span v-show="false">Wohoot</span></template> <span class="logo">FastAuth</span>
<template #content> <div class="header-buttons" v-if="loggedin">
<div class="flex items-center"> <el-button type="primary" class="ml-2" @click="creationDialog = true">
<span class="text-large font-600 mr-3"> FastAuth </span> Create
</div> </el-button>
</template> <el-button type="warning" class="ml-2" @click="logout">Logout</el-button>
<template #extra> </div>
<div class="flex items-center" v-if="loggedin"> </div>
<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>
<el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw"> <el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw">
<CreateSecret @close="creationDialog = false" /> <CreateSecret @close="creationDialog = false" />
@ -36,10 +29,10 @@ import ListSecrets from "./components/ListSecrets.vue";
" "
v-if="!loggedin" 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"> <el-button @click="showSecrets = false" v-if="showSecrets && loggedin">
Hide secrets Hide secrets
</el-button> </el-button> -->
<ListSecrets :key="listUpdated" v-if="showSecrets && loggedin" /> <ListSecrets :key="listUpdated" v-if="showSecrets && loggedin" />
</div> </div>
</div> </div>
@ -136,4 +129,22 @@ export default {
.el-page-header__back { .el-page-header__back {
display: none !important; 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> </style>