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;">
          <div class="settings-avatar" :style="`background-image: url('${user.avatarUrl}');`" ng-click="avatarChange.showChangeAvatar()">
            <i class="picture-edit-indicator fa fa-pencil-alt"></i>
          </div>
        </div>
        <div style="flex-grow: 1;">
          <table style="width: 100%; max-width: 1024px;">
            <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 small tool outline @click="onPasswordReset()">{{ $t('profile.passwordResetAction') }}</Button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </Card>
  </div>
</template>

<script setup>

import { useI18n } from 'vue-i18n';
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, Dropdown, InputDialog } from 'pankow';
import Card from './Card.vue';
import ProfileModel from '../models/ProfileModel.js';
import CloudronModel from '../models/CloudronModel.js';

const i18n = useI18n();
const t = i18n.t;

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

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

// TODO what is this?
const config = ref({});

const user = ref({});
const languages = ref([]);
const language = ref('');
const inputDialog = useTemplateRef('inputDialog');

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;
});

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
}

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();
}

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 }) });
}

</script>

<style scoped>

.content {
  margin-right: 10px;
}

</style>