minor UI improvements

Author: mms-gianni

client/src/components/accounts/tokens.vue

@@ -24,6 +24,9 @@
       <template v-slot:[`item.token`]="{ item }">
         {{ item.id }}
       </template>
+      <template v-slot:[`item.user.username`]="{ item }">
+        <span>{{ item.user.username }}</span>
+      </template>
       <template v-slot:[`item.expiresAt`]="{ item }">
         <span v-if="item.expiresAt">{{ new Date(item.expiresAt).toLocaleString() }}</span>
         <span v-else class="text--secondary">-</span>
@@ -99,7 +102,8 @@ export default defineComponent({
     const newToken = ref<Token>({ token: '', expiresAt: '', userId: '' })
 
     const headers = [
-      { title: 'Token', value: 'token' },
+      { title: 'Token ID', value: 'token' },
+      { title: 'Owner', value: 'user.username' },
       { title: 'Expires At', value: 'expiresAt' },
       { title: 'Actions', value: 'actions', sortable: false, align: 'end' as const },
     ]

client/src/components/accounts/users.vue

@@ -308,7 +308,7 @@ export default defineComponent({
       //{ title: 'First Name', value: 'firstName' },
       //{ title: 'Last Name', value: 'lastName' },
       { title: 'E-Mail', value: 'email' },
-      { title: 'Roles', value: 'role', sortable: false },
+      { title: 'Role', value: 'role', sortable: false },
       { title: 'Teams', value: 'userGroups', sortable: false },
       /*
       { text: 'Created', value: 'createdAt' },

client/src/components/profile/index.vue

@@ -60,24 +60,30 @@
             <thead>
               <tr>
                 <th>Name</th>
-                <th>Token</th>
                 <th>Expires At</th>
-                <th>Actions</th>
+                <th class="text-end">Actions</th>
               </tr>
             </thead>
             <tbody>
               <tr v-for="token in tokens" :key="token.id">
                 <td>{{ token.name }}</td>
-                <td>{{ token.token }}</td>
                 <td>{{ token.expiresAt ? new Date(token.expiresAt).toLocaleString() : '-' }}</td>
-                <td>
-                  <v-btn icon color="red" @click="deleteToken(token)">
-                    <v-icon>mdi-delete</v-icon>
+                <td class="text-end">
+                  <v-btn
+                    elevation="0"
+                    variant="tonal"
+                    size="small"
+                    class="ma-2"
+                    @click="deleteToken(token)"
+                  >
+                    <v-icon color="primary">
+                      mdi-delete
+                    </v-icon>
                   </v-btn>
                 </td>
               </tr>
               <tr v-if="tokens.length === 0">
-                <td colspan="4" class="text-center">No tokens found.</td>
+                <td colspan="3" class="text-center">No tokens found.</td>
               </tr>
             </tbody>
           </v-table>
@@ -120,8 +126,7 @@ export default defineComponent({
     const loadTokens = async () => {
       try {
         const res = await axios.get('/api/tokens/my')
-        // Filter tokens for the current user if needed, or assume API returns only user's tokens
-        tokens.value = res.data.filter((t: any) => t.userId === user.value.id)
+        tokens.value = res.data 
       } catch (e) {
         tokens.value = []
       }