ADD: Tooltip to indicate copied token

frontend/src/views/netdb/tokens.vue

@@ -133,10 +133,16 @@
         <b-modal id="modal-token" size=lg title="Token erstellt">
             <b-input-group>
                 <b-form-input id="input-token" v-model="token" readonly/>
+                <b-tooltip target="input-token" :show.sync="token_copied" :disabled="!token_copied" placement="bottom" variant="primary">
+                    Kopiert.
+                </b-tooltip>
                 <b-input-group-append>
                     <b-button id="button-token-copy" variant="primary" @click="copyToken">
                         <font-awesome-icon :icon="['fas', 'copy']"/>
                     </b-button>
+                    <b-tooltip target="button-token-copy" triggers="hover">
+                        Token kopieren
+                    </b-tooltip>
                 </b-input-group-append>
             </b-input-group>
             <template v-slot:modal-footer="{ok}">
@@ -204,10 +210,13 @@
                             <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>
+                                    <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>
+                                        <template v-else>{{tokens_by_account[account.login_name].length}} Tokens</template>
+                                    </template>
+                                    <template v-else>0 Tokens</template>
                                 </b-badge>
                             </h4>
                             <p class="text-muted">Login Name</p>
@@ -316,7 +325,7 @@
                     {
                         key: 'delete_date',
                         label: "Ablaufdatum",
-                        formatter: this.formatDate,
+                        formatter: this.formatDate, // TODO: show expired tokens in red
                         sortable: true
                     },
                     {
@@ -331,11 +340,6 @@
                         formatter: this.formatDate,
                         sortable: true
                     },
-                    {
-                        key: 'log_pk',
-                        label: "Log PK",
-                        sortable: true
-                    },
                     {
                         key: 'buttons',
                         label: '',
@@ -344,7 +348,8 @@
                 ],
                 show_modal_alert: false,
                 modal_alert_content: "",
-                token: ""
+                token: "",
+                token_copied: false
             }
         },
         computed: {
@@ -366,9 +371,9 @@
         },
         methods: {
             fetchData() {
-                AccountTokenService.list(this.$store.state.netdb_axios_config).then((response) => {
-                    this.tokens_by_account = ApiUtil.dict_of_lists_by_value_of_array(response.data[0], 'login_name')
-                    this.accounts = response.data[1] // TODO: This doesn't join correctly :(
+                AccountTokenService.list(this.$store.state.netdb_axios_config, this.$store.state.login_name).then((response) => {
+                    this.tokens_by_account = ApiUtil.dict_of_lists_by_value_of_array(response.data[1], 'login_name')
+                    this.accounts = response.data[0]
                 })
             },
             showModalEditAccount(account) {
@@ -413,7 +418,7 @@
                 }).then(() => {
                     this.$bvModal.hide('modal-create-account')
                     this.fetchData()
-                }).catch(error => {
+                }).catch(error => { //TODO : maybe second parameter????????? hopefully
                     this.modal_alert_content = error.message
                     this.show_modal_alert = true
                 })
@@ -496,10 +501,11 @@
             },
             copyToken() {
                 // https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
-                let text = document.getElementById("input-token");
-                text.select();
-                text.setSelectionRange(0, 99999); /*For mobile devices*/
-                document.execCommand("copy");
+                let text = document.getElementById("input-token")
+                text.select()
+                text.setSelectionRange(0, 99999) /*For mobile devices*/
+                document.execCommand("copy")
+                this.token_copied = true
             }
         }
     }