bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve MFA section visual hierarchy in SecurityTab

Browse Source 
Redesigns the MFA method cards and supporting sections for better
visual hierarchy and professional styling:

Method cards (organizer):
- Vertical layout with large icon (VAvatar 44px) at top
- Description text explaining each method
- Status chip with check icon when configured
- VCardActions with primary chip/button + "Opnieuw instellen"
- Primary method card highlighted with 2px primary border
- Proper h-100 for equal height side-by-side

Backup codes:
- Separate outlined VCard with key icon, progress bar, refresh button
- Cleaner spacing and visual grouping

Disable MFA:
- Replaced heavy danger-zone card with subtle text button
  (tabler-shield-off icon, error color) — less visual weight for a
  rarely-used destructive action

Portal:
- Per-method rows with VAvatar icons and stacked status chips
- Matching text-button style for disable action

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
bert.hausmans
2026-04-15 22:51:54 +02:00
parent d5fb15e5fe
commit 0cdee1382e
2 changed files with 230 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
apps/portal/src/pages/profiel.vue
View File

@@ -676,29 +676,39 @@ function viewEvent(eventId: string) {
<div class="d-flex flex-column gap-3 mb-4">
<!-- TOTP row -->
<div class="d-flex align-center justify-space-between">
<div class="d-flex align-center">
<VIcon
icon="tabler-device-mobile"
size="20"
class="me-2"
/>
<span class="text-body-2 font-weight-medium me-2">Authenticator app</span>
<VChip
:color="totpConfigured ? 'success' : 'default'"
variant="tonal"
size="x-small"
>
{{ totpConfigured ? 'Actief' : 'Niet ingesteld' }}
</VChip>
<VChip
v-if="totpConfigured && preferredMethod === 'totp'"
<div class="d-flex align-center gap-2">
<VAvatar
color="primary"
variant="tonal"
size="x-small"
class="ms-1"
size="32"
rounded
>
Primair
</VChip>
<VIcon
icon="tabler-device-mobile"
size="18"
/>
</VAvatar>
<div>
<span class="text-body-2 font-weight-medium">Authenticator app</span>
<div class="d-flex align-center gap-1 mt-1">
<VChip
:color="totpConfigured ? 'success' : 'default'"
variant="tonal"
size="x-small"
:prepend-icon="totpConfigured ? 'tabler-check' : undefined"
>
{{ totpConfigured ? 'Actief' : 'Niet ingesteld' }}
</VChip>
<VChip
v-if="totpConfigured && preferredMethod === 'totp'"
color="primary"
variant="tonal"
size="x-small"
>
Primair
</VChip>
</div>
</div>
</div>
<VBtn
v-if="totpConfigured && preferredMethod !== 'totp'"
@@ -714,29 +724,39 @@ function viewEvent(eventId: string) {
<!-- Email row -->
<div class="d-flex align-center justify-space-between">
<div class="d-flex align-center">
<VIcon
icon="tabler-mail"
size="20"
class="me-2"
/>
<span class="text-body-2 font-weight-medium me-2">E-mailcode</span>
<VChip
color="success"
variant="tonal"
size="x-small"
>
Actief
</VChip>
<VChip
v-if="preferredMethod === 'email'"
<div class="d-flex align-center gap-2">
<VAvatar
color="primary"
variant="tonal"
size="x-small"
class="ms-1"
size="32"
rounded
>
Primair
</VChip>
<VIcon
icon="tabler-mail"
size="18"
/>
</VAvatar>
<div>
<span class="text-body-2 font-weight-medium">E-mailcode</span>
<div class="d-flex align-center gap-1 mt-1">
<VChip
color="success"
variant="tonal"
size="x-small"
prepend-icon="tabler-check"
>
Actief
</VChip>
<VChip
v-if="preferredMethod === 'email'"
color="primary"
variant="tonal"
size="x-small"
>
Primair
</VChip>
</div>
</div>
</div>
<VBtn
v-if="preferredMethod !== 'email'"
@@ -752,9 +772,10 @@ function viewEvent(eventId: string) {
</div>
<VBtn
variant="text"
color="error"
variant="tonal"
size="small"
prepend-icon="tabler-shield-off"
class="mb-4"
@click="showDisableDialog = true"
>