tokens.vue 25 KB
Newer Older
janis.streib's avatar
janis.streib committed
1
2
<template>
    <div class="main">
3
        <h1>Accounts</h1>
4
5
        <b-modal id="modal-create-account" size="lg" title="Subaccount erstellen"
                 @hidden="resetAccountData">
6
7
8
9
10
            <b-form @submit="createAccount">
                <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"
11
                            placeholder="Beschreibung eingeben"
12
                    />
13
                </b-form-group>
14
15
16
17
18
19
20
                <b-form-group label="Rolle:" label-for="input-account-create-role">
                    <b-form-select
                            id="input-account-create-role"
                            v-model="test_role"
                            :options="test_roles"
                    />
                </b-form-group>
21
            </b-form>
22
23
            <template v-slot:modal-footer="{cancel}">
                <b-button variant="outline-secondary" @click="cancel">
24
25
                    Abbrechen
                </b-button>
26
                <b-button type="submit" variant="success" @click="createAccount">
27
28
29
30
31
32
33
34
35
36
37
38
39
                    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
40
                                  debounce="300"/>
41
42
43
44
45
46
47
48
                </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>
49
50
        <b-modal id="modal-edit-account" size="lg" title="Account bearbeiten"
                 @hidden="resetAccountData">
51
52
53
54
55
56
57
58
            <b-form>
                <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>
59
60
61
62
63
64
65
                <b-form-group label="Rolle:" label-for="input-account-edit-role">
                    <b-form-select
                            id="input-account-edit-role"
                            v-model="test_role"
                            :options="test_roles"
                    />
                </b-form-group>
66
            </b-form>
67
68
69
70
71
72
            <template v-slot:modal-footer="{cancel}">
                <b-alert id="alert-edit-account" v-model="show_modal_alert"
                         variant="danger" dismissible fade class="mb-0 flex-grow">
                    {{modal_alert_content}}
                </b-alert>
                <b-button variant="outline-secondary" @click="cancel">
73
74
                    Abbrechen
                </b-button>
75
                <b-button id="button-account-delete" v-if="new_account.parent_login_name !== null" variant="danger">
76
77
                    Löschen
                </b-button>
78
79
80
81
82
83
84
85
86
                <b-popover ref="popoverAccountDelete" target="button-account-delete" triggers="click" placement="bottom">
                    <template v-slot:title>Account wirklich löschen?</template>
                    <b-button variant="danger" @click="deleteAccount">
                        Löschen
                    </b-button>
                    <b-button variant="outline-secondary" @click="$refs.popoverAccountDelete.$emit('close')">
                        Abbrechen
                    </b-button>
                </b-popover>
87
                <b-button variant="primary" @click="editAccount">
88
89
90
91
                    Änderungen übernehmen
                </b-button>
            </template>
        </b-modal>
92
93
        <b-modal id="modal-create-token" size=lg title="Token erstellen"
                 @hidden="resetTokenData">
94
95
96
97
            <b-form>
                <b-form-group label="Beschreibung:" label-for="input-token-create-description">
                    <b-form-textarea
                            id="input-token-create-description"
98
                            v-model.trim="new_token.description"
99
                            required
100
101
                            placeholder="Beschreibung"
                    />
102
                </b-form-group>
Robert-K's avatar
Robert-K committed
103
104
                <div v-if="new_token.expiration_date != null">
                    <b-form-group label="Ablaufdatum:" label-for="input-token-create-expiration_date" class="mb-0">
105
106
107
108
109
110
111
112
113
                        <VueCtkDateTimePicker
                                :inline="!isMobile()"
                                format="DD-MM-YYYY HH:mm"
                                locale="de"
                                noButtonNow
                                minute-interval="5"
                                noLabel
                                no-keyboard
                                noClearButton
Robert-K's avatar
Robert-K committed
114
                                id="input-token-create-expiration_date"
115
116
                                color="#007BFF"
                                button-color="#007BFF"
Robert-K's avatar
Robert-K committed
117
                                v-model="new_token.expiration_date"/>
118
                    </b-form-group>
Robert-K's avatar
Robert-K committed
119
                    <b-button block variant="outline-secondary" @click="new_token.expiration_date = null">
120
121
122
123
                        Ablaufdatum entfernen
                    </b-button>
                </div>
                <b-button block variant="outline-secondary" v-else
Robert-K's avatar
Robert-K committed
124
                          @click="new_token.expiration_date = formatDate(getDate30DaysAhead())">
125
126
                    Ablaufdatum hinzufügen
                </b-button>
127
            </b-form>
128
129
130
131
132
133
            <template v-slot:modal-footer="{cancel}">
                <b-alert id="alert-create-token" v-model="show_modal_alert"
                         variant="danger" dismissible fade class="mb-0 flex-grow">
                    {{modal_alert_content}}
                </b-alert>
                <b-button variant="outline-secondary" @click="cancel">
134
135
                    Abbrechen
                </b-button>
136
                <b-button type="submit" variant="success" @click="createToken">
137
138
139
                    Erstellen
                </b-button>
            </template>
140
        </b-modal>
141
142
143
        <b-modal id="modal-token" size=lg title="Token erstellt">
            <b-input-group>
                <b-form-input id="input-token" v-model="token" readonly/>
144
145
                <b-tooltip target="input-token" :show.sync="token_copied" :disabled="!token_copied" placement="bottom"
                           variant="primary">
146
147
                    Kopiert.
                </b-tooltip>
148
149
150
151
152
153
                <b-input-group-append>
                    <b-button id="button-token-copy" variant="primary" @click="copyToken">
                        <font-awesome-icon :icon="['fas', 'copy']"/>
                    </b-button>
                </b-input-group-append>
            </b-input-group>
Robert-K's avatar
Robert-K committed
154
            <b-alert show variant="warning" class="mb-0 mt-3">Bewahren Sie das Token gut auf. Hier werden Sie es nicht mehr einsehen können!</b-alert>
155
156
157
158
159
160
            <template v-slot:modal-footer="{ok}">
                <b-button variant="success" @click="ok">
                    Ok
                </b-button>
            </template>
        </b-modal>
161
        <b-modal id="modal-edit-token" size=lg title="Token bearbeiten">
162
163
164
165
            <b-form>
                <b-form-group label="Beschreibung:" label-for="input-token-edit-description">
                    <b-form-textarea
                            id="input-token-edit-description"
166
                            v-model.trim="new_token.description"
167
168
169
170
171
                            required
                            placeholder="Beschreibung"
                    />
                </b-form-group>
            </b-form>
Robert-K's avatar
Robert-K committed
172
173
            <div v-if="new_token.expiration_date != null">
                <b-form-group label="Ablaufdatum:" label-for="input-token-edit-expiration_date" class="mb-0">
174
175
176
177
178
179
180
181
182
                    <VueCtkDateTimePicker
                            :inline="!isMobile()"
                            format="DD-MM-YYYY HH:mm"
                            locale="de"
                            noButtonNow
                            minute-interval="5"
                            noLabel
                            no-keyboard
                            noClearButton
Robert-K's avatar
Robert-K committed
183
                            id="input-token-edit-expiration_date"
184
185
                            color="#007BFF"
                            button-color="#007BFF"
Robert-K's avatar
Robert-K committed
186
                            v-model="new_token.expiration_date"/>
187
                </b-form-group>
Robert-K's avatar
Robert-K committed
188
                <b-button block variant="outline-secondary" @click="new_token.expiration_date = null">
189
190
191
192
                    Ablaufdatum entfernen
                </b-button>
            </div>
            <b-button block variant="outline-secondary" v-else
Robert-K's avatar
Robert-K committed
193
                      @click="new_token.expiration_date = formatDate(getDate30DaysAhead())">
194
195
                Ablaufdatum hinzufügen
            </b-button>
196
            <template v-slot:modal-footer="{cancel, ok}">
197
198
199
200
201
                <b-alert id="alert-edit-token" v-model="show_modal_alert"
                         variant="danger" dismissible fade class="mb-0 flex-grow">
                    {{modal_alert_content}}
                </b-alert>
                <b-button variant="outline-secondary" @click="cancel">
202
203
                    Abbrechen
                </b-button>
204
                <b-button id="button-token-delete" variant="danger">
205
206
                    Löschen
                </b-button>
207
208
209
210
211
212
213
214
215
                <b-popover ref="popoverTokenDelete" target="button-token-delete" triggers="click" placement="bottom">
                    <template v-slot:title>Token wirklich löschen?</template>
                    <b-button variant="danger" @click="deleteToken">
                        Löschen
                    </b-button>
                    <b-button variant="outline-secondary" @click="$refs.popoverTokenDelete.$emit('close')">
                        Abbrechen
                    </b-button>
                </b-popover>
216
                <b-button type="submit" variant="primary" @click="editToken">
217
218
219
220
                    Änderungen übernehmen
                </b-button>
            </template>
        </b-modal>
221
222
        <template v-for="account in filtered_accounts">
            <b-card no-body :key="'card-account-' + account.login_name" class="mb-4">
223
224
225
226
227
228
                <template v-slot:header>
                    <b-row>
                        <b-col lg="3">
                            <h4>
                                {{account.login_name}}
                                <b-badge variant="success">
229
230
231
232
                                    <template v-if="account.login_name in tokens_by_account">
                                        <template v-if="tokens_by_account[account.login_name].length === 1">
                                            {{tokens_by_account[account.login_name].length}} Token
                                        </template>
233
234
                                        <template v-else>{{tokens_by_account[account.login_name].length}} Tokens
                                        </template>
235
236
                                    </template>
                                    <template v-else>0 Tokens</template>
237
238
239
240
241
                                </b-badge>
                            </h4>
                            <p class="text-muted">Login Name</p>
                        </b-col>
                        <b-col>
242
243
244
                            <div v-if="account.parent_login_name == null">Hauptaccount; enthält nur Session-Tokens; kann
                                nicht gelöscht werden.
                            </div>
245
246
                            <div v-else-if="account.description == null">Keine Beschreibung vorhanden.</div>
                            <div v-else>{{account.description}}</div>
247
248
249
250
251
252
253
254
255
256
257
258
259
                            <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"
260
                                      @click="showModalEditAccount(account)">
261
262
263
                                <font-awesome-icon :icon="['far', 'edit']"/>
                            </b-button>
                            <b-tooltip placement="bottom" :target="'button-edit-account-' + account.login_name"
264
                                       triggers="hover" variant="primary">
265
266
267
268
269
270
                                Account bearbeiten
                            </b-tooltip>
                        </b-col>
                    </b-row>
                </template>
                <b-button block squared variant="info" v-b-toggle="account.login_name + '-collapse'">
271
                    <font-awesome-icon class="collapse-icon" :icon="['fas','chevron-up']"/>
272
273
274
275
                </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">
276
                        <template v-slot:head(buttons)>
277
                            <b-button block variant="outline-success" :id="'button-create-token-' +  account.login_name"
278
                                      @click="showModalCreateToken(account.login_name)">
279
280
                                <font-awesome-icon :icon="['fas', 'plus']"/>
                            </b-button>
281
282
                            <b-tooltip :target="'button-create-token-' +  account.login_name" triggers="hover"
                                       variant="success" placement="left">
283
284
285
286
287
288
                                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"
289
                                      @click="showModalEditToken(data.item)">
290
291
292
                                <font-awesome-icon :icon="['far', 'edit']"/>
                            </b-button>
                            <b-tooltip :target="'button-edit-token-' + account.login_name+ '-' + data.index"
293
                                       triggers="hover" variant="primary" placement="left">
294
295
296
297
298
299
300
                                Token bearbeiten
                            </b-tooltip>
                        </template>
                    </b-table>
                </b-collapse>
            </b-card>
        </template>
janis.streib's avatar
janis.streib committed
301
302
303
304
    </div>
</template>

<script>
305
306
    import AccountTokenService from '@/api-services/account_token.service';
    import AccountService from '@/api-services.gen/cntl.mgr'
307
    import TokenService from '@/api-services.gen/cntl.wapi_auth'
308
    import ApiUtil from '@/util/apiutil'
janis.streib's avatar
janis.streib committed
309
310

    export default {
311
        name: 'tokens',
janis.streib's avatar
janis.streib committed
312
313
        data() {
            return {
314
315
316
317
318
319
320
321
322
                // TODO: remove test/wip data aka implement role management
                test_role: 'NetVS Overlord',
                test_roles: [
                    'NetVS Overlord',
                    'Dungeon Master',
                    'HiWi-Goblin',
                    'Guest',
                    'Individuell'
                ],
323
324
325
                tokens_by_account: null,
                accounts: null,
                new_account: {
326
                    parent_login_name: null,
327
328
                    description: '',
                    login_name: '',
Robert-K's avatar
Robert-K committed
329
                    expiration_date: null
330
331
                },
                new_token: {
332
333
                    description: '',
                    login_name: '',
Robert-K's avatar
Robert-K committed
334
                    expiration_date: null
335
                },
336
337
338
339
340
341
342
343
                filter_text: "",
                token_list_fields: [
                    {
                        key: 'description',
                        label: "Beschreibung",
                        sortable: false
                    },
                    {
Robert-K's avatar
Robert-K committed
344
                        key: 'expiration_date',
345
                        label: "Ablaufdatum",
346
                        formatter: this.formatDate, // TODO: show expired tokens in red
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
                        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: 'buttons',
                        label: '',
                        sortable: false
                    },
366
367
368
                ],
                show_modal_alert: false,
                modal_alert_content: "",
369
370
                token: "",
                token_copied: false
janis.streib's avatar
janis.streib committed
371
372
            }
        },
373
        computed: {
374
375
376
            filtered_accounts() {
                if (this.accounts == null) {
                    return null
377
                }
378
379
380
381
382
383
384
385
                if (this.filter_text === '') {
                    return this.accounts
                }
                return this.accounts.filter(account => {
                    return account.login_name.toLowerCase().includes(this.filter_text.toLowerCase())
                        || account.description.toLowerCase().includes(this.filter_text.toLowerCase())
                })
            }
386
        },
janis.streib's avatar
janis.streib committed
387
        created() {
388
            this.fetchData()
389
390
        },
        methods: {
391
            fetchData() {
392
                AccountTokenService.list(this.$store.state.netdb_axios_config, this.$store.state.user.login_name).then((response) => {
393
394
                    this.tokens_by_account = ApiUtil.dict_of_lists_by_value_of_array(response.data[1], 'login_name')
                    this.accounts = response.data[0]
395
396
397
                })
            },
            showModalEditAccount(account) {
398
399
                this.new_account.description = account.description
                this.new_account.login_name = account.login_name
400
401
402
                this.new_account.parent_login_name = account.parent_login_name
                this.show_modal_alert = false
                this.$bvModal.show('modal-edit-account')
403
            },
404
            showModalEditToken(token) {
405
406
                this.new_token.description = token.description
                this.new_token.login_name = token.login_name
Robert-K's avatar
Robert-K committed
407
                this.new_token.expiration_date = token.expiration_date != null ? this.formatDate(token.expiration_date) : null
408
409
410
411
412
413
                this.new_token.pk = token.pk
                this.show_modal_alert = false
                this.$bvModal.show('modal-edit-token')
            },
            showModalCreateToken(login_name) {
                this.new_token.description = ''
Robert-K's avatar
Robert-K committed
414
                this.new_token.expiration_date = null
415
416
417
                this.new_token.login_name = login_name
                this.show_modal_alert = false
                this.$bvModal.show('modal-create-token')
418
            },
419
            resetAccountData() {
420
421
                this.new_account.description = ''
                this.new_account.login_name = ''
Robert-K's avatar
Robert-K committed
422
                this.new_account.expiration_date = null
423
            },
424
            resetTokenData() {
425
426
                this.new_token.description = ''
                this.new_token.login_name = ''
Robert-K's avatar
Robert-K committed
427
                this.new_token.expiration_date = null
428
            },
429
430
            createAccount() {
                AccountService.create(this.$store.state.netdb_axios_config, {
431
432
433
434
435
436
437
438
                    do_copy_assignments_new: true,
                    description_new: this.new_account.description,
                    allow_data_manipulation_new: true,
                    login_name_new: null,
                    do_copy_roles_new: true
                }).then(() => {
                    this.$bvModal.hide('modal-create-account')
                    this.fetchData()
439
                }).catch(error => { //TODO : maybe second parameter????????? hopefully
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
                    this.modal_alert_content = error.message
                    this.show_modal_alert = true
                })
            },
            editAccount() {
                AccountService.update(this.$store.state.netdb_axios_config, {
                    description_new: this.new_account.description,
                    login_name_old: this.new_account.login_name,
                    login_name_new: this.new_account.login_name,
                    allow_data_manipulation_new: true
                }).then(() => {
                    this.$bvModal.hide('modal-edit-account')
                    this.fetchData()
                }).catch(error => {
                    this.modal_alert_content = error.message
                    this.show_modal_alert = true
                })
            },
            deleteAccount() {
                AccountService.delete(this.$store.state.netdb_axios_config, {
                    do_delete_references: true,
                    login_name: this.new_account.login_name
                }).then(() => {
                    this.$bvModal.hide('modal-edit-account')
                }).catch(error => {
                    this.modal_alert_content = error.message
                    this.show_modal_alert = true
                })
            },
            createToken() {
                TokenService.create(this.$store.state.netdb_axios_config, {
                    description_new: this.new_token.description,
                    login_name_new: this.new_token.login_name,
Robert-K's avatar
Robert-K committed
473
                    expiration_date_new: this.new_token.expiration_date
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
                }).then(response => {
                    this.$bvModal.hide('modal-create-token')
                    this.token = response.data[0][0].token
                    this.$bvModal.show('modal-token')
                    this.fetchData()
                }).catch(error => {
                    this.modal_alert_content = error.message
                    this.show_modal_alert = true
                })
            },
            editToken() {
                TokenService.update(this.$store.state.netdb_axios_config, {
                    description_new: this.new_token.description,
                    pk_old: this.new_token.pk,
                    do_refresh_token_new: true,
Robert-K's avatar
Robert-K committed
489
                    expiration_date_new: this.new_token.expiration_date
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
                }).then(() => {
                    this.$bvModal.hide('modal-edit-token')
                    this.fetchData()
                }).catch(error => {
                    this.modal_alert_content = error.message
                    this.show_modal_alert = true
                })
            },
            deleteToken() {
                TokenService.delete(this.$store.state.netdb_axios_config, {
                    pk_old: this.new_token.pk
                }).then(() => {
                    this.$bvModal.hide('modal-edit-token')
                    this.fetchData()
                }).catch(error => {
                    this.modal_alert_content = error.message
                    this.show_modal_alert = true
507
508
509
                })
            },
            formatDate(value) {
510
511
512
513
                if (value == null) {
                    return 'N/A'
                }
                return new Date(Date.parse(value)).toLocaleString('de-DE')
514
            },
515
            getDate30DaysAhead() {
516
                let d = new Date()
517
                d.setDate(d.getDate() + 29)
518
                return d
519
520
521
            },
            copyToken() {
                // https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
522
523
524
525
526
                let text = document.getElementById("input-token")
                text.select()
                text.setSelectionRange(0, 99999) /*For mobile devices*/
                document.execCommand("copy")
                this.token_copied = true
527
            }
janis.streib's avatar
janis.streib committed
528
529
530
531
532
        }
    }
</script>

<style scoped>
533
534
535
536
537
538
539
    .collapse-icon {
        transition: .2s transform ease-in-out;
    }

    .collapsed .collapse-icon {
        transform: rotate(-180deg);

540
    }
janis.streib's avatar
janis.streib committed
541
</style>