Skip to content
Snippets Groups Projects
Commit 5899113c authored by Robert-K's avatar Robert-K
Browse files

ADD Implemented BootstrapVue Interface 

API Responses and visualization yet to come...
parent a841a584
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/main.js
+ 5
− 2
View file @ 5899113c
......@@ -18,14 +18,17 @@ import {
faSortUp,
faSortDown,
faCode,
faBug
faBug,
faPlus,
faChevronUp,
faChevronDown,
} from '@fortawesome/free-solid-svg-icons'
import {faUser, faEdit, faTrashAlt, faCheckSquare, faLifeRing} from '@fortawesome/free-regular-svg-icons'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import titleMixin from './mixins/titleMixin'
library.add(faExclamationTriangle, faFilter, faInfoCircle, faBars, faArrowRight, faSort, faSortUp, faSortDown, faCode, faBug)
library.add(faCircleNotch)
library.add(faCircleNotch, faPlus, faChevronUp, faChevronDown)
library.add(faUser, faEdit, faTrashAlt, faCheckSquare, faLifeRing)
Vue.component('font-awesome-icon', FontAwesomeIcon)
......
frontend/src/views/netdb/tokens.vue
+ 268
− 43
View file @ 5899113c
<template>
<div class="main">
<h1 class="float-left">API-Tokens</h1>
<b-button-group class="float-right">
<b-button variant="outline-primary" v-b-modal.modal-create>Neues Token erstellen</b-button>
<b-button variant="danger">Alle Tokens widerrufen</b-button>
</b-button-group>
<div class="clearfix"></div>
<b-modal id="modal-create" title="Token erstellen">
<b-form>
<b-form-group
id="input-group-1"
label="Beschreibung:"
label-for="input-1"
description="TODO: Beschreibung wofür / taucht wo auf?"
>
<h1>Accounts</h1>
<b-modal id="modal-create-account" title="Subaccount erstellen" @ok="createAccount">
<b-form @submit="createAccount">
<b-form-group label="Login Name:" label-for="input-account-create-login-name">
<b-form-input
id="input-1"
v-model="form.description"
id="input-account-create-login-name"
v-model.trim="new_account.login_name"
required
placeholder="Login Namen eingeben"
invalid-feedback="Login Name ist erforderlich"
/>
</b-form-group>
<b-form-group label="Beschreibung:" label-for="input-account-create-description">
<b-form-textarea
id="input-account-create-description"
v-model.trim="new_account.description"
placeholder="Beschreibung eingeben"
></b-form-input>
/>
</b-form-group>
<b-form-group id="input-group-2" label="Login Name:" label-for="input-2">
<p>TODO: Shitload of possible permissions</p>
</b-form>
<template v-slot:modal-footer="{cancel, ok}">
<b-button variant="outline-secondary" @click="cancel()">
Abbrechen
</b-button>
<b-button variant="success" @click="ok()">
Erstellen
</b-button>
</template>
</b-modal>
<b-row>
<b-col lg="9">
<b-input-group>
<b-input-group-prepend>
<b-input-group-text>
<font-awesome-icon :icon="['fas', 'filter']"/>
</b-input-group-text>
</b-input-group-prepend>
<b-form-input id="filter-input" v-model.trim="filter_text" placeholder="Filter" autofocus
debounce="700"/>
</b-input-group>
</b-col>
<b-col lg="3" sm="*">
<b-button block variant="outline-success" v-b-modal.modal-create-account>
Subaccount erstellen
</b-button>
</b-col>
</b-row>
<b-modal id="modal-edit-account" title="Account bearbeiten">
<b-form>
<b-form-group label="Login Name:" label-for="input-account-edit-login-name">
<b-form-input
id="input-2"
v-model="form.login_name"
id="input-account-edit-login-name"
v-model.trim="new_account.login_name"
required
placeholder="Login Namen eingeben"
></b-form-input>
invalid-feedback="Login Name ist erforderlich"
/>
</b-form-group>
<b-form-group id="input-group-3" label="Ablaufdatum:" label-for="input-3">
<b-form-select
id="input-3"
v-model="form.delete_date"
<b-form-group label="Beschreibung:" label-for="input-account-edit-description">
<b-form-textarea
id="input-account-edit-description"
v-model.trim="new_account.description"
placeholder="Beschreibung eingeben"
/>
</b-form-group>
</b-form>
<p>TODO: Shitload of possible permissions</p>
<template v-slot:modal-footer="{cancel, ok}">
<b-button variant="outline-secondary" @click="cancel()">
Abbrechen
</b-button>
<!-- TODO: don't show for main account -->
<b-button variant="danger">
Löschen
</b-button>
<b-button variant="primary" @click="ok()">
Änderungen übernehmen
</b-button>
</template>
</b-modal>
<b-modal id="modal-create-token" title="Token erstellen">
<b-form>
<b-form-group label="Beschreibung:" label-for="input-token-create-description">
<b-form-textarea
id="input-token-create-description"
v-model.trim="new_token.login_name"
required
></b-form-select>
placeholder="Beschreibung"
invalid-feedback="TODO: Beschreibung bad!"
/>
</b-form-group>
</b-form>
<p>TODO: Date picker / Ablaufdatum</p>
<template v-slot:modal-footer="{cancel, ok}">
<b-button variant="outline-secondary" @click="cancel()">
Abbrechen
</b-button>
<b-button variant="success" @click="ok()">
Erstellen
</b-button>
</template>
</b-modal>
<hr>
<token v-for="token in tokens" :key=token.pk :token="token"/>
<b-modal id="modal-edit-token" title="Token bearbeiten">
<b-form>
<b-form-group label="Beschreibung:" label-for="input-token-edit-description">
<b-form-textarea
id="input-token-edit-description"
v-model.trim="new_token.login_name"
required
placeholder="Beschreibung"
invalid-feedback="TODO: Beschreibung bad!"
/>
</b-form-group>
</b-form>
<p>TODO: Date picker / Ablaufdatum</p>
<template v-slot:modal-footer="{cancel, ok}">
<b-button variant="outline-secondary" @click="cancel()">
Abbrechen
</b-button>
<b-button variant="danger">
Löschen
</b-button>
<b-button variant="primary" @click="ok()">
Änderungen übernehmen
</b-button>
</template>
</b-modal>
<template v-for="account in accounts /*search_filter[].values()*/">
<b-card no-body :key="'card-account-' + account.login_name">
<template v-slot:header>
<b-row>
<b-col lg="3">
<h4>
{{account.login_name}}
<b-badge variant="success">
<div v-if="tokens_by_account[account.login_name].length === 1">{{tokens_by_account[account.login_name].length}} Token</div>
<div v-else>{{tokens_by_account[account.login_name].length}} Tokens</div>
</b-badge>
</h4>
<p class="text-muted">Login Name</p>
</b-col>
<b-col>
TODO: "Hauptaccount, kann nicht gelöcht werden." / "Keine Beschreibung vorhanden."
{{account.description}}
<p class="text-muted">Beschreibung</p>
</b-col>
<b-col>
<h6>
<b-badge class="mr-1" variant="danger">Divide by 0</b-badge>
<b-badge class="mr-1" variant="primary">Less dangerous stuff</b-badge>
<b-badge class="mr-1" variant="success">Somewhat lame stuff</b-badge>
<p>+ 153 weitere</p>
</h6>
<p class="text-muted">Berechtigungen</p>
</b-col>
<b-col lg="1">
<b-button block variant="outline-primary" :id="'button-edit-account-' + account.login_name"
v-b-modal.modal-edit-account>
<font-awesome-icon :icon="['far', 'edit']"/>
</b-button>
<b-tooltip placement="bottom" :target="'button-edit-account-' + account.login_name"
triggers="hover">
Account bearbeiten
</b-tooltip>
</b-col>
</b-row>
</template>
<b-button block squared variant="info" v-b-toggle="account.login_name + '-collapse'">
<font-awesome-icon class="when-closed" :icon="['fas','chevron-down']"/>
<font-awesome-icon class="when-opened" :icon="['fas','chevron-up']"/>
</b-button>
<b-collapse :id="account.login_name + '-collapse'">
<b-table class="m-0" striped hover responsive :items="tokens_by_account[account.login_name]"
:fields="token_list_fields">
<template v-slot:head(buttons)="data">
<b-button block variant="outline-success" :id="'button-create-token-' + account.login_name"
v-b-modal.modal-create-token>
<font-awesome-icon :icon="['fas', 'plus']"/>
</b-button>
<b-tooltip :target="'button-create-token-' + account.login_name" triggers="hover">
Token erstellen
</b-tooltip>
</template>
<template v-slot:cell(buttons)="data">
<b-button block variant="outline-primary"
:id="'button-edit-token-' + account.login_name+ '-' + data.index"
v-b-modal.modal-edit-token>
<font-awesome-icon :icon="['far', 'edit']"/>
</b-button>
<b-tooltip :target="'button-edit-token-' + account.login_name+ '-' + data.index"
triggers="hover">
Token bearbeiten
</b-tooltip>
</template>
</b-table>
</b-collapse>
</b-card>
</template>
</div>
</template>
<script>
import TokenService from '@/api-services.gen/cntl.wapi_auth';
import token from "./token";
import AccountTokenService from '@/api-services/account_token.service';
import AccountService from '@/api-services.gen/cntl.mgr'
import ApiUtil from '@/util/apiutil'
export default {
name: 'tokens',
components: {
token
},
data() {
return {
tokens: null,
form: {
tokens_by_account: null,
accounts: null,
new_account: {
description: '',
login_name: '',
delete_date: null
},
new_token: {
description: '',
login_name: '',
delete_date: null
},
filter_text: "",
token_list_fields: [
{
key: 'description',
label: "Beschreibung",
sortable: false
},
{
key: 'delete_date',
label: "Ablaufdatum",
formatter: this.formatDate,
sortable: true
},
{
key: 'last_login_date',
label: "Zuletzt verwendet",
formatter: this.formatDate,
sortable: true
},
{
key: 'last_generate_date',
label: "Zuletzt generiert",
formatter: this.formatDate,
sortable: true
},
{
key: 'log_pk',
label: "Log PK",
sortable: true
},
{
key: 'buttons',
label: '',
sortable: false
},
]
}
},
computed: {
search_filter: function () {
/*
if (this.filter_text.trim() === "") {
return this.tokens
}
var self = this
let l = Object.keys(this.records).reduce(function (obj, x) {
obj[x] = self.records[x].filter(function (ele) {
return ele['fqdn'].includes(self.filter_text) || ele['data'].includes(self.filter_text) || (ele['description'] && ele['description'].includes(self.filter_text))
})
return this.tokens
}, {})
*/
return this.tokens
},
},
created() {
TokenService.list(this.$store.state.netdb_axios_config, {is_own: true}).then((response) => {
this.tokens = response.data[0]
// eslint-disable-next-line no-console
console.log(response.data[0])
AccountTokenService.list(this.$store.state.netdb_axios_config, {is_own: true}).then((response) => {
this.tokens_by_account = ApiUtil.dict_of_lists_by_value_of_array(response.data[0], 'login_name')
this.accounts = response.data[1]
})
},
methods: {
createAccount() {
AccountService.create(this.$store.state.netdb_axios_config, {
description_new: this.new_account.description
})
},
formatDate(value) {
return new Date(Date.parse(value)).toLocaleString('de-DE');
}
}
}
</script>
<style scoped>
.collapsed > .when-opened,
:not(.collapsed) > .when-closed {
display: none;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Help | Imprint | Privacy policy | Accessibility | Contact