From ca5ab6edf50c69a0196c9d86ce62118a0b6b0fdd Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 10 Dec 2025 20:21:34 +0100
Subject: [PATCH] Show user avatar in user listing

Moving the role icon to the username and hiding
external directory flag. This is not too useful anyways
---
 dashboard/src/views/UsersView.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/dashboard/src/views/UsersView.vue b/dashboard/src/views/UsersView.vue
index cbb765329..630ef3ba6 100644
--- a/dashboard/src/views/UsersView.vue
+++ b/dashboard/src/views/UsersView.vue
@@ -23,8 +23,8 @@ const profileModel = ProfileModel.create();
 const dashboardModel = DashboardModel.create();
 
 const usersColumns = {
-  role: {
-    width: '33.5px'
+  avatar: {
+    width: '40px'
   },
   user: {
     label: t('users.users.user'),
@@ -279,18 +279,21 @@ onMounted(async () => {
       </template>
 
       <TableView :columns="usersColumns" :model="filteredUsers" :busy="busy" :fixed-layout="true" :placeholder="$t(search ? 'users.users.noMatchesPlaceholder' : 'users.users.emptyPlaceholder')">
-        <template #role="user">
-          <i class="fas fa-crown arrow" v-if="user.active && user.role === 'owner'" v-tooltip="$t('users.users.superadminTooltip')"></i>
-          <i class="fa fa-user-tie arrow" v-if="user.active && user.role === 'admin'" v-tooltip="$t('users.users.adminTooltip')"></i>
-          <i class="fas fa-users-cog arrow" v-if="user.active && user.role === 'usermanager'" v-tooltip="$t('users.users.usermanagerTooltip')"></i>
-          <i class="fas fa-mail-bulk arrow" v-if="user.active && user.role === 'mailmanager'" v-tooltip="$t('users.users.mailmanagerTooltip')"></i>
-          <i class="fa fa-ban" v-if="!user.active" v-tooltip="$t('users.users.inactiveTooltip')"></i>
+        <template #avatar="user">
+          <img v-if="user.hasAvatar" :src="user.avatarUrl" style="width: 30px; height: 30px; border-radius: 5px"/>
         </template>
         <template #user="user">
           {{ user.displayName }}
           <span class="text-muted" style="margin: 0 6px" v-if="user.username">{{ user.username }}</span>
           <span class="text-muted" style="margin: 0 6px" v-else>{{ user.email }}</span>
-          <i v-show="user.source" class="far fa-address-book" v-tooltip="$t('users.users.externalLdapTooltip')"></i>
+
+          <i class="fa fa-ban" v-if="!user.active" v-tooltip="$t('users.users.inactiveTooltip')"></i>
+
+          <i class="fas fa-crown arrow" v-if="user.active && user.role === 'owner'" v-tooltip="$t('users.users.superadminTooltip')"></i>
+          <i class="fa fa-user-tie arrow" v-if="user.active && user.role === 'admin'" v-tooltip="$t('users.users.adminTooltip')"></i>
+          <i class="fas fa-users-cog arrow" v-if="user.active && user.role === 'usermanager'" v-tooltip="$t('users.users.usermanagerTooltip')"></i>
+          <i class="fas fa-mail-bulk arrow" v-if="user.active && user.role === 'mailmanager'" v-tooltip="$t('users.users.mailmanagerTooltip')"></i>
+          <!-- <i v-show="user.source" class="far fa-address-book" v-tooltip="$t('users.users.externalLdapTooltip')"></i> -->
         </template>
         <template #groups="user">
           {{ user.groupIds.map(gid => groupsById[gid] ? groupsById[gid].name : gid).join(' ') }}