blob: c48e97de63a3c4239a14b678be13f88945e093ad [file] [log] [blame]
<template>
<div v-if="showHeader()">
<div class="header p-3">
<div class="custos-logo">
<img src="../assets/custos-logo_custos-logo-color-v1.png" style="width: 140px;">
</div>
<div class="user-details" v-if="user">
<div class="username">{{user.first_name + " "+ user.last_name}}</div>
<div class="email">{{user.email}}</div>
</div>
<b-dropdown right class="ml-2" text="" no-caret toggle-class="user-avatar-button">
<template v-slot:button-content v-if="user">
<b-icon icon="person-fill"></b-icon>
</template>
<template v-slot:button-content v-else>
<b-spinner small label="Spinning"></b-spinner>
</template>
<template v-slot:default v-if="user">
<b-dropdown-item href="#" v-on:click="loadProfilePage">Profile</b-dropdown-item>
<b-dropdown-item v-on:click="logout">Logout</b-dropdown-item>
</template>
</b-dropdown>
</div>
<div class="navigation text-left" v-if="tenantModeactivated">
<div class="row">
<div class="column">
<router-link v-bind:to="{name: 'workspace', params:{tenantId:this.activatedClientId}}">
<b-icon icon="house-door-fill"></b-icon>
</router-link>
<router-link v-bind:to="{name: 'users', params:{tenantId:this.activatedClientId}}"
v-if="this.isAdmin">Users
</router-link>
<router-link v-bind:to="{name: 'groups', params:{tenantId:this.activatedClientId}}">Groups
</router-link>
<router-link v-bind:to="{name: 'agents', params:{tenantId:this.activatedClientId}}"
v-if="this.isAdmin">Service Accounts
</router-link>
<router-link v-bind:to="{name: 'secrets', params:{tenantId:this.activatedClientId}}">Secrets
</router-link>
<router-link v-bind:to="{name: 'sharings', params:{tenantId:this.activatedClientId}}">Sharing
</router-link>
<router-link v-bind:to="{name: 'logs', params:{tenantId:this.activatedClientId}}"
v-if="this.isAdmin">Logs
</router-link>
</div>
<div class="column">
<b-button pill variant="success" size="sm" v-on:click="exitTenantExplorer" class="tenant-manager">
Tenant
Manager
</b-button>
</div>
</div>
</div>
</div>
</template>
<script>
import config from "@/config";
import auth from "@/service/auth";
export default {
name: "Header",
data: function () {
return {
isAdmin: false,
user: null,
authenticated: false,
tenantModeactivated: false,
activatedClientId: ''
}
},
methods: {
showHeader() {
return this.authenticated
},
async logout() {
this.tenantModeactivated = await this.$store.dispatch('tenant/isTenantModeActivated')
if (!this.tenantModeactivated) {
await this.$store.dispatch('identity/logout', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec'),
})
} else {
await this.$store.dispatch('identity/logoutTenantAdmin', {})
}
await this.$router.push("/")
await this.$store.dispatch('agent/reset')
await this.$store.dispatch('group/reset')
await this.$store.dispatch('secret/reset')
await this.$store.dispatch('sharing/reset')
await this.$store.dispatch('user/reset')
},
async validateAuthentication() {
this.tenantModeactivated = await this.$store.dispatch('tenant/isTenantModeActivated')
if (!this.tenantModeactivated) {
this.authenticated = await this.$store.dispatch('identity/isAuthenticated', {
client_id: config.value('clientId'),
client_sec: config.value('clientSec')
}) === true
} else {
this.authenticated = await this.$store.dispatch('identity/isAuthenticated', {
client_id: auth.getClientId(),
client_sec: auth.getClientSec()
}) === true
}
return this.authenticated
},
async fetchAuthenticatedUser() {
this.isAdmin = await this.$store.dispatch('identity/isLoggedUserHasAdminAccess')
let currentUserName = await this.$store.dispatch('identity/getCurrentUserName')
this.tenantModeactivated = await this.$store.dispatch('tenant/isTenantModeActivated')
if (await this.validateAuthentication() && (!this.user || this.user.username !== currentUserName)) {
let accessToken = await this.$store.getters['identity/getAccessToken']
let resp = await this.$store.dispatch('user/users', {
offset: 0,
limit: 1,
usertoken:accessToken,
username: currentUserName
})
if (Array.isArray(resp) && resp.length > 0) {
resp.forEach(obj => {
this.user = {
username: obj.username,
first_name: obj.first_name,
last_name: obj.last_name,
email: obj.email,
status: obj.state,
attributes: [],
roles: []
}
})
}
}
},
async setOperationalMode() {
this.tenantModeactivated = await this.$store.dispatch('tenant/isTenantModeActivated')
if (this.tenantModeactivated) {
this.activatedClientId = await this.$store.dispatch('tenant/getActivatedClientId')
}
},
async exitTenantExplorer() {
await this.$store.dispatch('identity/logoutTenantAdmin')
await this.$router.push({name: 'tenants'})
this.tenantModeactivated = await this.$store.dispatch('tenant/isTenantModeActivated')
},
async loadProfilePage() {
if (this.tenantModeactivated) {
await this.$router.push({name: 'tenantUserProfile', params: {tenantId: this.activatedClientId}})
} else {
await this.$router.push({name: 'profile'})
}
}
},
watch: {
$route() {
this.authenticated = false
this.fetchAuthenticatedUser()
this.setOperationalMode()
}
},
async beforeMount() {
this.fetchAuthenticatedUser()
this.setOperationalMode()
}
}
</script>
<style>
.header {
display: flex;
}
.header .custos-logo {
flex: 1;
display: flex;
}
.header .custos-logo-icon {
width: 25px;
height: 25px;
border-radius: 8px;
border: solid 5px #203a43;
background-color: #ffffff;
transform: rotate(45deg);
}
.header .custos-logo-text {
font-family: Avenir;
font-size: 18px;
font-weight: 900;
text-align: left;
color: #203a43;
}
.header .user-details .username {
font-family: Avenir;
font-size: 15px;
font-weight: 900;
text-align: right;
color: #afafae;
}
.header .user-details .email {
font-family: Avenir;
font-size: 13px;
font-weight: 500;
line-height: 1.07;
text-align: right;
color: #203a43;
}
.header .user-avatar-button {
border-radius: 30px;
width: 35px;
height: 35px;
padding: 0px;
line-height: 0px;
font-size: 15px;
background-color: #4a4a4a;
}
.navigation {
background: #fe8c00;
background: -webkit-linear-gradient(to right, #f83600, #fe8c00);
background: linear-gradient(to right, #f83600, #fe8c00);
}
.navigation a {
font-family: Avenir;
font-size: 15px;
font-weight: 600;
text-align: left;
color: white;
padding: 5px 15px;
display: inline-block;
transition: all 0.1s;
}
.navigation a:hover {
color: white;
}
.navigation a:focus {
color: white;
}
.navigation a.router-link-exact-active {
background-color: #00000047;
}
.tenant-manager {
position: fixed;
margin-left: 30%;
background-color: #f83600;
border-color: #ebebeb;
font-size: medium;
margin-bottom: 0.25%;
margin-top: 0.08%;
}
.column {
float: left;
width: 50%;
}
.left-column {
float: left;
width: 3%;
padding: 0px;
height: 100vh;
background: #fe8c00;
background: -webkit-linear-gradient(to bottom, #afafae, #afafae);
background: linear-gradient(to bottom, #afafae, #afafae);
}
/*.right-column {*/
/* float: left;*/
/* width: 97%;*/
/* padding: 0px;*/
/* height: 100vh;*/
/*}*/
.upper-row {
float: left;
width: 100%;
padding: 0px;
background: #fe8c00;
background: -webkit-linear-gradient(to right, #f83600, #fe8c00);
background: linear-gradient(to right, #f83600, #fe8c00);
height: 3.5%;
}
</style>