jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add Section component instead of Card

Browse Source
This commit is contained in:
Johannes Zellner
2025-01-17 12:24:48 +01:00
parent 1dfa95d457
commit 7907d05847
6 changed files with 104 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/ProfileView.vue
+52 -50
View File
@@ -23,57 +23,58 @@
</div>
</Dialog>
<h1 class="header-with-button">
{{ $t('profile.title') }}
<Button @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
</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>
<Section :title="$t('profile.title')">
<template #header-buttons>
<Button @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
</template>
<template #body>
<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="user.twoFactorAuthenticationEnabled ? onTwoFADisable() : onOpenTwoFASetupDialog()">{{ $t(user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction') }}</Button>
</td>
</tr>
</tbody>
</table>
</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="user.twoFactorAuthenticationEnabled ? onTwoFADisable() : onOpenTwoFASetupDialog()">{{ $t(user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction') }}</Button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</Card>
</template>
</Section>
<AppPasswords/>
<ApiTokens v-show="user.isAtLeastAdmin"/>
@@ -95,9 +96,10 @@ const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, Dropdown, Dialog, InputDialog, Spinner, TextInput } from 'pankow';
import { Button, Dropdown, Dialog, InputDialog, TextInput } from 'pankow';
import { TOKEN_TYPES } from '../constants.js';
import AppPasswords from './AppPasswords.vue';
import Section from './Section.vue';
import Card from './Card.vue';
import ApiTokens from './ApiTokens.vue';