Add profile avatar settings

dashboard/src/components/ProfileView.vue

@@ -6,7 +6,8 @@
     <Card>
       <div style="display: flex;">
         <div style="width: 150px;">
-          <div class="settings-avatar" :style="`background-image: url('${user.avatarUrl}');`" ng-click="avatarChange.showChangeAvatar()">
+          <input type="file" ref="avatarFileInput" style="display: none" accept="image/*" @change="onAvatarChanged()"/>
+          <div class="settings-avatar" :style="`background-image: url('${user.avatarUrl}');`" @click="avatarFileInput.click()">
             <i class="picture-edit-indicator fa fa-pencil-alt"></i>
           </div>
         </div>
@@ -38,7 +39,12 @@
                 <td colspan="2" class="text-right"><Dropdown small tool outline v-model="language" :options="languages" option-label="display" option-key="id" @select="onSelectLanguage"/></td>
               </tr>
               <tr v-show="!user.source">
-                <td colspan="3" class="text-right"><Button small tool outline @click="onPasswordReset()">{{ $t('profile.passwordResetAction') }}</Button></td>
+                <td colspan="3" class="text-right">
+                  <!-- <Button tool @click="onPasswordReset()">{{ $t('profile.passwordResetAction') }}</Button> -->
+                  <Button tool @click="onPasswordChange()">{{ $t('profile.changePasswordAction') }}</Button>
+                  <Button tool v-show="!user.source && !config.external2FA" @click="on2FactorAuthConfig()">{{ $t(user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction') }}</Button>
+                  <Button tool @click="onLogout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
+                </td>
               </tr>
             </tbody>
           </table>
@@ -72,6 +78,7 @@ const user = ref({});
 const languages = ref([]);
 const language = ref('');
 const inputDialog = useTemplateRef('inputDialog');
+const avatarFileInput = useTemplateRef('avatarFileInput');
 
 onMounted(async () => {
   user.value = await profileModel.get();
@@ -156,6 +163,22 @@ async function onChangeFallbackEmail(currentFallbackEmail) {
   user.value = await profileModel.get();
 }
 
+async function onPasswordChange() {
+  const result = await inputDialog.value.prompt({
+    message: [ t('profile.changePassword.newPassword'), t('profile.changePassword.newPasswordRepeat'), t('profile.changePassword.currentPassword') ],
+    type: [ 'password', 'password', 'password' ],
+    modal: false,
+    confirmStyle: 'success',
+    confirmLabel: t('main.dialog.save'),
+    rejectLabel: t('main.dialog.cancel')
+  });
+
+  if (!result || !result[0] || !result[1] || !result[2] || result[0] === result[1]) return;
+
+  const error = await profileModel.setPassword(result[2], result[0]);
+  if (error) return console.error('Failed to change password', error);
+}
+
 async function onPasswordReset() {
   const error = await profileModel.sendPasswordReset(user.value.email);
   if (error) return console.error('Failed to reset password:', error);
@@ -163,6 +186,21 @@ async function onPasswordReset() {
   window.pankow.notify({ type: 'success', timeout: 5000, text: t('profile.passwordResetNotification.title') + '. ' + t('profile.passwordResetNotification.body', { email: user.value.fallbackEmail || user.value.email }) });
 }
 
+async function onLogout() {
+  await profileModel.logout();
+}
+
+async function onAvatarChanged() {
+  if (!avatarFileInput.value.files[0]) return;
+  await profileModel.setAvatar(avatarFileInput.value.files[0]);
+
+  // invalidate and refresh profile avatar url
+  const u = new URL(user.value.avatarUrl);
+  u.searchParams.set('ts', Date.now());
+  user.value.avatarUrl = u.toString();
+}
+
+
 </script>
 
 <style scoped>