Allow admins to set users avatars

dashboard/src/components/UserDialog.vue

@@ -7,6 +7,7 @@ const t = i18n.t;
 import { ref, useTemplateRef } from 'vue';
 import { Dialog, TextInput, FormGroup, Checkbox, MultiSelect, SingleSelect } from 'pankow';
 import { ROLES } from '../constants.js';
+import ImagePicker from '../components/ImagePicker.vue';
 import DashboardModel from '../models/DashboardModel.js';
 import ProfileModel from '../models/ProfileModel.js';
 import UsersModel from '../models/UsersModel.js';
@@ -33,6 +34,7 @@ const formError = ref({});
 const displayName = ref('');
 const email = ref('');
 const fallbackEmail = ref('');
+const avatarUrl = ref('');
 const username = ref('');
 const role = ref('');
 const groups = ref([]);
@@ -56,6 +58,11 @@ async function onReset2FA() {
   reset2FABusy.value = false;
 }
 
+let newAvatarFile = null;
+function onAvatarSet(file) {
+  newAvatarFile = file;
+}
+
 async function onSubmit() {
   if (!form.value.reportValidity()) return;
 
@@ -147,6 +154,15 @@ async function onSubmit() {
     }
   }
 
+  if (newAvatarFile) {
+    const [error] = await usersModel.setAvatar(userId, newAvatarFile);
+    if (error) {
+      formError.value.generic = error.body ? error.body.message : 'Internal error';
+      busy.value = false;
+      return console.error(error);
+    }
+  }
+
   emit('success');
   dialog.value.close();
   busy.value = false;
@@ -164,6 +180,8 @@ defineExpose({
     role.value = u ? u.role : ROLES.USER;
     sendInvite.value = false;
     active.value = u ? u.active : true;
+    avatarUrl.value = u ? u.avatarUrl : '';
+    newAvatarFile = null;
 
     let [error, result] = await groupsModel.list();
     if (error) return console.error(error);
@@ -219,6 +237,10 @@ defineExpose({
       <fieldset :disabled="busy">
         <input type="submit" style="display: none;" />
 
+        <div style="width: 128px;">
+          <ImagePicker :src="avatarUrl" fallback-src="/img/avatar-default-symbolic.svg" :size="512" :save-handler="onAvatarSet" display-width="128px"/>
+        </div>
+
         <FormGroup>
           <label for="displayNameInput">{{ $t('users.user.fullName') }}</label>
           <TextInput id="displayNameInput" v-model="displayName" :disabled="(user && user.source) ? true : null" :placeholder="$t('users.user.displayNamePlaceholder')"/>