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

Move vue views from Card to Sections

Browse Source
This commit is contained in:
Johannes Zellner
2025-01-17 14:02:05 +01:00
parent 7907d05847
commit 5feb5ee015
10 changed files with 84 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/ProfileView.vue
+46 -49
View File
@@ -27,63 +27,61 @@
<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 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>
</template>
<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>
</Section>
<AppPasswords/>
<ApiTokens v-show="user.isAtLeastAdmin"/>
<h2 class="header">{{ $t('profile.loginTokens.title') }}</h2>
<Card>
<Section :title="$t('profile.loginTokens.title')">
<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>
</Section>
</div>
</template>
@@ -100,7 +98,6 @@ 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';
import ProfileModel from '../models/ProfileModel.js';