UPD: implement hashed colors for role badges, highlight expired tokens

frontend/src/views/netdb/tokens.vue

@@ -251,11 +251,25 @@
                         </b-col>
                         <b-col>
                             <h5 class="mb-0">
-                                <b-badge
-                                        v-for="role in roles_by_account[account.login_name].slice(0, max_role_badge_count)"
-                                        :key="'role-badge-' + role.mgr_login_name + '-' + role.role_fq_name"
-                                        class="mr-1 mb-1">{{role.system.toUpperCase()}}<br>{{role.role}}
-                                </b-badge>
+                                <template
+                                        v-for="role in roles_by_account[account.login_name].slice(0, max_role_badge_count)">
+                                    <b-badge
+                                            :key="'role-badge-' + role.mgr_login_name + '-' + role.role_fq_name"
+                                            :id="account.login_name + '-role-badge-' + role.mgr_login_name + '-' + role.role_fq_name"
+                                            :style="{background: role.role_fq_name.toHSL({lit: [30, 40]})}"
+                                            class="mr-1 mb-1">{{role.system.toUpperCase()}}<br>{{role.role}}
+                                    </b-badge>
+                                    <b-popover
+                                            :key="'role-badge-tooltip' + role.mgr_login_name + '-' + role.role_fq_name"
+                                            :target="account.login_name + '-role-badge-' + role.mgr_login_name + '-' + role.role_fq_name"
+                                            triggers="hover"
+                                            placement="bottom"
+                                            title="Berechtigungen:">
+                                        <div v-for="(permission, name) in role.contained_permissions" :key="name">
+                                            <b>{{name}}:</b> {{permission}}
+                                        </div>
+                                    </b-popover>
+                                </template>
                             </h5>
                             <h6 v-if="roles_by_account[account.login_name].length > max_role_badge_count">
                                 + {{roles_by_account[account.login_name].length - max_role_badge_count}} Weitere
@@ -331,6 +345,7 @@
     import AccountService from '@/api-services.gen/cntl.mgr'
     import TokenService from '@/api-services.gen/cntl.wapi_auth'
     import ApiUtil from '@/util/apiutil'
+    import '@/util/colorutil'
 
     export default {
         name: 'tokens',
@@ -419,7 +434,7 @@
         methods: {
             fetchData() {
                 AccountTokenService.list(this.$store.state.netdb_axios_config, this.$store.state.user.login_name).then((response) => {
-                    this.tokens_by_account = ApiUtil.dict_of_lists_by_value_of_array(response.data[2].concat(response.data[3]), 'login_name')
+                    this.tokens_by_account = ApiUtil.dict_of_lists_by_value_of_array(this.formatExpiredTokens(response.data[2].concat(response.data[3])), 'login_name')
                     this.roles_by_account = ApiUtil.dict_of_lists_by_value_of_array(response.data[4].concat(response.data[5]), 'mgr_login_name')
                     this.accounts = response.data[0].concat(response.data[1])
                 })
@@ -554,6 +569,15 @@
                 text.setSelectionRange(0, 99999) /*For mobile devices*/
                 document.execCommand("copy")
                 this.token_copied = true
+            },
+            formatExpiredTokens(tokens) {
+                tokens.forEach(token => {
+                        if (token.is_expired) {
+                            token._rowVariant = 'danger'
+                        }
+                    }
+                )
+                return tokens
             }
         }
     }