cloudron-box/dashboard/src/components/ProfileView.vue

<template>
  <div class="content">
    <InputDialog ref="inputDialog" />

    <h1>{{ $t('profile.title') }}</h1>
    <Card>
      <div style="display: flex;">
        <div style="width: 150px;">
          <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>
        <div style="flex-grow: 1;">
          <table style="width: 100%;">
            <tbody>
              <tr>
                <td class="text-muted">{{ $t('main.username') }}</td>
                <td style="width: 100px; height: 34px;">{{ user.username }}</td>
                <td style="width: 32px"></td>
              </tr>
              <tr>
                <td class="text-muted">{{ $t('main.displayName') }}</td>
                <td style="white-space: nowrap;">{{ user.displayName }}</td>
                <td><Button small tool outline @click="onChangeDisplayName(user.displayName)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
              </tr>
              <tr>
                <td class="text-muted">{{ $t('profile.primaryEmail') }}</td>
                <td style="white-space: nowrap;">{{ user.email }}</td>
                <td><Button small tool outline @click="onChangeEmail(user.email)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
              </tr>
              <tr>
                <td class="text-muted">{{ $t('profile.passwordRecoveryEmail') }}</td>
                <td style="white-space: nowrap;">{{ user.fallbackEmail }}</td>
                <td><Button small tool outline @click="onChangeFallbackEmail(user.fallbackEmail)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
              </tr>
              <tr>
                <td class="text-muted">{{ $t('profile.language') }}</td>
                <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 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="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </Card>

    <AppPasswords/>
    <ApiTokens v-show="user.isAtLeastAdmin"/>

    <h2 class="header">{{ $t('profile.loginTokens.title') }}</h2>
    <Card>
      <p>{{ $t('profile.loginTokens.description', { webadminTokenCount: webadminTokens.length, cliTokenCount: cliTokens.length }) }}</p>
      <Button danger :loading="revokeTokensBusy" :disabled="revokeTokensBusy" @click="onRevokeAllWebAndCliTokens()">{{ $t('profile.loginTokens.logoutAll') }}</Button>
    </Card>
  </div>
</template>

<script setup>

const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, Dropdown, InputDialog } from 'pankow';
import { TOKEN_TYPES } from '../constants.js';
import AppPasswords from './AppPasswords.vue';
import Card from './Card.vue';
import ApiTokens from './ApiTokens.vue';

import ProfileModel from '../models/ProfileModel.js';
import CloudronModel from '../models/CloudronModel.js';
import TokensModel from '../models/TokensModel.js';

const profileModel = ProfileModel.create(API_ORIGIN, localStorage.token);
const cloudronModel = CloudronModel.create(API_ORIGIN, localStorage.token);
const tokensModel = TokensModel.create(API_ORIGIN, localStorage.token);

const config = ref({}); // TODO what is this?
const user = ref({});
const inputDialog = useTemplateRef('inputDialog');

// Language selector
const languages = ref([]);
const language = ref('');
async function onSelectLanguage(lang) {
  window.localStorage.NG_TRANSLATE_LANG_KEY = lang.id;

  const error = await profileModel.setLanguage(lang.id);
  if (error) console.error('Failed to set language', error);
  else window.location.reload();

  // TODO dynamically change lange instead of reloading
}


// Profile edits
async function onChangeDisplayName(currentDisplayName) {
  const displayName = await inputDialog.value.prompt({
    message: t('profile.changeDisplayName.title'),
    modal: false,
    value: currentDisplayName,
    confirmStyle: 'success',
    confirmLabel: t('main.dialog.save'),
    rejectLabel: t('main.dialog.cancel')
  });

  if (!displayName || currentDisplayName === displayName) return;

  const error = await profileModel.setDisplayName(displayName);
  if (error) return console.error('Failed to set displayName', error);

  user.value = await profileModel.get();
}

async function onChangeEmail(currentEmail) {
  const result = await inputDialog.value.prompt({
    message: [ t('profile.changeEmail.title'), t('profile.changeEmail.password') ],
    type: [ 'email', 'password' ],
    modal: false,
    value: [ currentEmail, '' ],
    confirmStyle: 'success',
    confirmLabel: t('main.dialog.save'),
    rejectLabel: t('main.dialog.cancel')
  });

  if (!result || !result[0] || !result[1] || currentEmail === result[0]) return;

  const error = await profileModel.setEmail(result[0], result[1]);
  if (error) return console.error('Failed to set email', error);

  user.value = await profileModel.get();
}

async function onChangeFallbackEmail(currentFallbackEmail) {
  const result = await inputDialog.value.prompt({
    message: [ t('profile.changeFallbackEmail.title'), t('profile.changeEmail.password') ],
    type: [ 'email', 'password' ],
    modal: false,
    value: [ currentFallbackEmail, '' ],
    confirmStyle: 'success',
    confirmLabel: t('main.dialog.save'),
    rejectLabel: t('main.dialog.cancel')
  });

  if (!result || !result[1] || currentFallbackEmail === result[0]) return;

  const error = await profileModel.setFallbackEmail(result[0], result[1]);
  if (error) return console.error('Failed to set fallback email', error);

  user.value = await profileModel.get();
}

const avatarFileInput = useTemplateRef('avatarFileInput');
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();
}


// Password changes
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);

  window.pankow.notify({ type: 'success', timeout: 5000, text: t('profile.passwordResetNotification.title') + '. ' + t('profile.passwordResetNotification.body', { email: user.value.fallbackEmail || user.value.email }) });
}


// Tokens
const webadminTokens = ref([]);
const cliTokens = ref([]);
const revokeTokensBusy = ref(false);

async function onRevokeAllWebAndCliTokens() {
  revokeTokensBusy.value = true;

  // filter current access token to be able to logout still
  const tokens = webadminTokens.value.concat(cliTokens.value).filter(t => t.accessToken !== localStorage.token);
  for (const token of tokens) {
    const [error] = await tokensModel.remove(token.id);
    if (error) console.error(error);
  }

  await profileModel.logout();
}


// Init
onMounted(async () => {
  user.value = await profileModel.get();

  const langs = await cloudronModel.languages();
  languages.value = langs.map(l => {
    return {
      id: l,
      display: t(`lang.${l}`)
    };
  }).sort((a, b) => {
    return a.display.localeCompare(b.display);
  });

  const usedLang = window.localStorage.NG_TRANSLATE_LANG_KEY || 'en';
  language.value = languages.value.find(l => l.id === usedLang).id;

  const [error, tokens] = await tokensModel.list();
  if (error) return console.error(error);

  // dashboard and development clientIds were issued with 7.5.0
  webadminTokens.value = tokens.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_WEBADMIN || c.clientId === TOKEN_TYPES.ID_DEVELOPMENT || c.clientId === 'dashboard' || c.clientId === 'development'; });
  cliTokens.value = tokens.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_CLI; });
});


</script>

<style scoped>

.content {
  margin-right: 10px;
}

</style>