Skip to content

Commit

Permalink
fix: style and markup of my profile page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ymarcon
ymarcon committed Sep 28, 2024
1 parent cc7854c commit 0d7f462
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 55 deletions.
3 changes: 3 additions & 0 deletions opal-ui/src/components/profile/AddTokenDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<q-card-section style="max-height: 75vh" class="scroll">
<q-form ref="formRef" class="q-gutter-md" persistent>
<q-input
dense
type="text"
:label="$t('name') + ' *'"
:hint="$t('user_profile.token_dialog.name_hint')"
Expand All @@ -19,6 +20,7 @@
>
</q-input>
<q-input
dense
type="text"
readonly
:label="$t('token') + ' *'"
Expand All @@ -40,6 +42,7 @@
</q-input>

<q-select
dense
v-model="token.projects"
v-if="projectsFilterOptions.length > 0"
use-input
Expand Down
82 changes: 37 additions & 45 deletions opal-ui/src/components/profile/ProfileUser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<!-- !Account -->

<!-- 2FA -->
<div v-if="isAnOpalRealm" class="q-gutter-sm">
<div v-if="isAnOpalRealm">
<div class="text-h6 q-mt-lg">{{ $t('2fa.title') }}</div>
<div
class="text-help q-mb-md"
Expand Down Expand Up @@ -69,34 +69,34 @@
<!--!2FA -->

<!-- PERSONAL ACCESS TOKENS-->
<div class="q-gutter-sm">
<div class="text-h6 q-mt-lg">{{ $t('user_profile.personal_access_tokens') }}</div>
<div class="text-help q-mb-md">{{ $t('user_profile.tokens_info') }}</div>
<q-btn-dropdown no-caps color="primary" :title="$t('user_profile.add_token')" icon="add" size="sm">
<q-list>
<q-item clickable v-close-popup @click.prevent="onAddDataShieldToken">
<q-item-section>
<q-item-label>{{ $t('user_profile.add_datashield_token') }}</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click.prevent="onAddRToken">
<q-item-section>
<q-item-label>{{ $t('user_profile.add_r_token') }}</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click.prevent="onAddSqlToken">
<q-item-section>
<q-item-label>{{ $t('user_profile.add_sql_token') }}</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click.prevent="onAddCustomToken">
<q-item-section>
<q-item-label>{{ $t('user_profile.add_custom_token') }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>

<div class="text-h6 q-mt-lg">{{ $t('user_profile.personal_access_tokens') }}</div>
<div class="text-help q-mb-md">{{ $t('user_profile.tokens_info') }}</div>
<q-btn-dropdown no-caps color="primary" :title="$t('user_profile.add_token')" icon="add" size="sm">
<q-list>
<q-item clickable v-close-popup @click.prevent="onAddDataShieldToken">
<q-item-section>
<q-item-label>{{ $t('user_profile.add_datashield_token') }}</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click.prevent="onAddRToken">
<q-item-section>
<q-item-label>{{ $t('user_profile.add_r_token') }}</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click.prevent="onAddSqlToken">
<q-item-section>
<q-item-label>{{ $t('user_profile.add_sql_token') }}</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click.prevent="onAddCustomToken">
<q-item-section>
<q-item-label>{{ $t('user_profile.add_custom_token') }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>

<div v-if="tokens.length" class="q-mt-md q-mb-md">
<q-table
flat
:rows="tokens"
Expand Down Expand Up @@ -185,6 +185,7 @@
</template>
</q-table>
</div>
<div v-else class="text-hint q-mt-md q-mb-md">{{ $t('user_profile.no_tokens') }}</div>
<!-- !PERSONAL ACCESS TOKENS-->

<!-- Dialogs -->
Expand All @@ -198,13 +199,6 @@

<update-password-dialog v-model="showUpdatePassword" :name="authStore.profile.principal || ''" />

<bookmarks-list>
<template #title>
<div class="text-h6 q-mt-lg">{{ $t('bookmarks') }}</div>
<div class="text-help q-mb-md">{{ $t('user_profile.bookmarks_hint') }}</div>
</template>
</bookmarks-list>

<add-token-dialog
v-model="showAddToken"
:type="tokenType"
Expand Down Expand Up @@ -252,9 +246,7 @@ import { notifyError } from 'src/utils/notify';
import ConfirmDialog from 'src/components/ConfirmDialog.vue';
import UpdatePasswordDialog from 'src/components/profile/UpdatePasswordDialog.vue';
import AddTokenDialog from 'src/components/profile/AddTokenDialog.vue';
import BookmarksList from 'src/components/BookmarksList.vue';
import { getDateLabel, getDateDistanceLabel } from 'src/utils/dates';
import { on } from 'events';
const loading = ref(false);
const authStore = useAuthStore();
Expand Down Expand Up @@ -314,20 +306,20 @@ const columns = computed(() => [
headerStyle: 'width: 40%; white-space: normal;',
style: 'width: 40%; white-space: normal;',
},
{
name: 'services',
label: t('services'),
align: 'left ',
field: (row: SubjectTokenDto) => getServicesField(row),
format: (values: string[]) => values.map((val) => t(`token_services.${val}`)).sort(),
},
{
name: 'administration',
label: t('administration'),
align: 'left ',
field: (row: SubjectTokenDto) => getAdministrationField(row),
format: (values: string[]) => values.map((val) => t(`token_administration.${val}`)).sort(),
},
{
name: 'services',
label: t('services'),
align: 'left ',
field: (row: SubjectTokenDto) => getServicesField(row),
format: (values: string[]) => values.map((val) => t(`token_services.${val}`)).sort(),
},
{
name: 'inactive',
label: t('inactive'),
Expand Down
14 changes: 8 additions & 6 deletions opal-ui/src/components/profile/UpdatePasswordDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@
</q-card-section>

<q-separator />
<q-card-section style="max-height: 75vh" class="scroll">
<p>{{ $t('user_profile.password_dialog.info') }}</p>
<q-card-section>
<div class="q-mb-lg text-help">{{ $t('user_profile.password_dialog.info') }}</div>
<q-form ref="formRef" class="q-gutter-md" persistent>
<q-input
dense
autocomplete="off"
type="password"
:label="$t('user_profile.password_dialog.old_password') + ' *'"
Expand All @@ -19,11 +20,12 @@
:rules="[validateRequiredOldPassword]"
>
<template v-slot:prepend>
<q-icon name="fas fa-lock" size="xs" />
<q-icon name="fas fa-lock" size="12px" />
</template>
</q-input>

<q-input
dense
autocomplete="off"
type="password"
:label="$t('user_profile.password_dialog.new_password') + ' *'"
Expand All @@ -33,22 +35,22 @@
:rules="[validateRequiredNewPassword]"
>
<template v-slot:prepend>
<q-icon name="fas fa-lock" size="xs" />
<q-icon name="fas fa-lock" size="12px" />
</template>
</q-input>

<q-input
dense
autocomplete="off"
v-model="confirmPassword"
dense
type="password"
:label="$t('password_confirm') + '*'"
class="q-mb-md"
lazy-rules
:rules="[validateRequiredConfirmPassword, validateMatchingPasswords]"
>
<template v-slot:prepend>
<q-icon name="fas fa-lock" size="xs" />
<q-icon name="fas fa-lock" size="12px" />
</template>
</q-input>
</q-form>
Expand Down
2 changes: 1 addition & 1 deletion opal-ui/src/i18n/en/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -468,7 +468,7 @@ export default {
add_r_token: 'Add R Token',
add_sql_token: 'Add SQL Token',
add_custom_token: 'Add Custom Token',
bookmarks_hint: 'Quickly access your favorite items by clicking on them.',
no_tokens: 'No personal access tokens.',
password_dialog: {
old_password: 'Old Password',
new_password: 'New Password',
Expand Down
2 changes: 1 addition & 1 deletion opal-ui/src/i18n/fr/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -468,7 +468,7 @@ export default {
add_r_token: 'Ajouter un jeton R',
add_sql_token: 'Ajouter un jeton SQL',
add_custom_token: 'Ajouter un jeton personnalisé',
bookmarks_hint: 'Accédez rapidement à vos articles préférés en cliquant dessus.',
no_tokens: 'Aucun jeton d\'accès personnel.',
password_dialog: {
old_password: 'Ancien mot de passe',
new_password: 'Nouveau mot de passe',
Expand Down
4 changes: 2 additions & 2 deletions opal-ui/src/pages/ProfilePage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
<div class="text-h5 q-mb-md">
{{ $t('user_profile.title') }}
</div>
<profile-user></profile-user>
<profile-user />

<div class="text-h6 q-mt-md q-mb-md">
<div class="text-h6 q-mt-lg q-mb-md">
{{ $t('r_activity') }}
</div>
<div class="text-help q-mb-md">
Expand Down

0 comments on commit 0d7f462

Please sign in to comment.