added display name to users

client/components/app/Appbar.vue

@@ -116,7 +116,7 @@ export default {
       return this.$store.getters['user/getIsAdminOrUp']
     },
     username() {
-      return this.user ? this.user.username : 'err'
+      return this.user ? this.user.displayName || this.user.username : 'err'
     },
     numMediaItemsSelected() {
       return this.selectedMediaItems.length

client/components/modals/AccountModal.vue

@@ -18,9 +18,14 @@
             </div>
           </div>
           <div v-show="!isEditingRoot" class="flex py-2">
+            <div class="w-1/2 px-2">
+              <ui-text-input-with-label v-model.trim="newUser.displayName" :label="'Display Name'" />
+            </div>
             <div class="w-1/2 px-2">
               <ui-text-input-with-label v-model.trim="newUser.email" :label="$strings.LabelEmail" />
             </div>
+          </div>
+          <div v-show="!isEditingRoot" class="flex py-2">
             <div class="px-2 w-52">
               <ui-dropdown v-model="newUser.type" :label="$strings.LabelAccountType" :disabled="isEditingRoot" :items="accountTypes" small @input="userTypeUpdated" />
             </div>
@@ -387,6 +392,7 @@ export default {
           username: null,
           email: null,
           password: null,
+          displayName: null,
           type: 'user',
           isActive: true,
           permissions: {

client/components/tables/UsersTable.vue

@@ -4,6 +4,7 @@
       <table id="accounts">
         <tr>
           <th>{{ $strings.LabelUsername }}</th>
+          <th>{{ $strings.LabelDisplayName }}</th>
           <th class="w-20">{{ $strings.LabelAccountType }}</th>
           <th class="hidden lg:table-cell">{{ $strings.LabelActivity }}</th>
           <th class="w-32 hidden sm:table-cell">{{ $strings.LabelLastSeen }}</th>
@@ -17,6 +18,9 @@
               <p class="pl-2 truncate">{{ user.username }}</p>
             </div>
           </td>
+          <td>
+            <p class="truncate">{{ user.displayName || '-' }}</p>
+          </td>
           <td class="text-sm">{{ user.type }}</td>
           <td class="hidden lg:table-cell">
             <div v-if="usersOnline[user.id]?.session?.displayTitle">