Use ImagePicker also in profile view

dashboard/src/components/ImagePicker.vue

@@ -51,7 +51,7 @@ function onChanged(event) {
   fr.onload = function () {
     const image = new Image();
     image.onload = function () {
-      const size = props.size ? parseInt(props.size) : 0;
+      const size = props.size ? parseInt(props.size) : 512;
       const maxSize = props.maxSize ? parseInt(props.maxSize) : 0;
 
       const canvas = document.createElement('canvas');

dashboard/src/views/ProfileView.vue

@@ -11,6 +11,7 @@ import AppPasswords from '../components/AppPasswords.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import Section from '../components/Section.vue';
 import ApiTokens from '../components/ApiTokens.vue';
+import ImagePicker from '../components/ImagePicker.vue';
 
 import DashboardModel from '../models/DashboardModel.js';
 import ProfileModel from '../models/ProfileModel.js';
@@ -106,11 +107,10 @@ async function onChangeFallbackEmail(currentFallbackEmail) {
   await refreshProfile();
 }
 
-const avatarFileInput = useTemplateRef('avatarFileInput');
-async function onAvatarChanged() {
-  if (!avatarFileInput.value.files[0]) return;
-  await profileModel.setAvatar(avatarFileInput.value.files[0]);
+async function onAvatarChanged(file) {
+  await profileModel.setAvatar(file);
 
+  // TODO we somehow need to do this globally
   // invalidate and refresh profile avatar url
   const u = new URL(user.value.avatarUrl);
   u.searchParams.set('ts', Date.now());
@@ -268,10 +268,7 @@ onMounted(async () => {
 
       <div style="display: flex; flex-wrap: wrap">
         <div style="width: 150px;">
-          <input type="file" ref="avatarFileInput" style="display: none" accept="image/*" @change="onAvatarChanged()"/>
-          <div class="profile-avatar" :style="`background-image: url('${user.avatarUrl}');`" @click="avatarFileInput.click()">
-            <i class="profile-avatar-edit-indicator fa fa-pencil-alt"></i>
-          </div>
+          <ImagePicker :src="user.avatarUrl" fallback-src="/img/appicon_fallback.png" size="512" @changed="onAvatarChanged" display-height="128px"/>
         </div>
         <div style="flex-grow: 1;">
           <SettingsItem>