fix(ui): unify the 2FA status badge into one x-two-factor-badge component

Replace three divergent 2FA indicator styles (cyan x-badge in users list,
custom inline-flex chip in settings header, plain mono text in sidebar) with a
single x-two-factor-badge component using the cyan x-badge + shield icon style
and the canonical settings.two_factor_on/off lang keys throughout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feat/v1-foundation
boban 2026-06-20 20:07:59 +02:00
parent 001f44d959
commit ffc17966ef
4 changed files with 11 additions and 15 deletions

View File

@ -45,7 +45,7 @@
<span class="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-raised font-mono text-xs text-ink-2">{{ strtoupper(substr($u?->name ?? 'U', 0, 2)) }}</span>
<span class="min-w-0 flex-1">
<span class="block truncate text-sm text-ink">{{ $u?->name ?? '—' }}</span>
<span class="block truncate font-mono text-[11px] {{ $u?->hasTwoFactorEnabled() ? 'text-online' : 'text-ink-3' }}">{{ $u?->hasTwoFactorEnabled() ? __('shell.twofa_on') : __('shell.twofa_off') }}</span>
<x-two-factor-badge :enabled="$u?->hasTwoFactorEnabled() ?? false" />
</span>
</a>
<form method="POST" action="{{ route('logout') }}" class="shrink-0">

View File

@ -0,0 +1,8 @@
@props(['enabled' => false])
@if ($enabled)
<x-badge tone="cyan">
<x-icon name="shield" class="h-3 w-3" /> {{ __('settings.two_factor_on') }}
</x-badge>
@else
<x-badge tone="neutral">{{ __('settings.two_factor_off') }}</x-badge>
@endif

View File

@ -26,13 +26,7 @@
</div>
<div class="flex items-center gap-2">
<x-badge tone="neutral">{{ __('settings.role_admin') }}</x-badge>
<span @class([
'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-mono text-[11px]',
'border-online/30 text-online' => $twoFactorEnabled,
'border-line text-ink-3' => ! $twoFactorEnabled,
])>
<x-status-dot :status="$twoFactorEnabled ? 'online' : 'offline'" />{{ $twoFactorEnabled ? __('settings.two_factor_on') : __('settings.two_factor_off') }}
</span>
<x-two-factor-badge :enabled="$twoFactorEnabled" />
</div>
</div>

View File

@ -24,13 +24,7 @@
@if ($isSelf)
<x-badge tone="accent">{{ __('accounts.you') }}</x-badge>
@endif
@if ($user->hasTwoFactorEnabled())
<x-badge tone="cyan">
<x-icon name="shield" class="h-3 w-3" /> {{ __('accounts.twofa_on') }}
</x-badge>
@else
<x-badge tone="neutral">{{ __('accounts.twofa_off') }}</x-badge>
@endif
<x-two-factor-badge :enabled="$user->hasTwoFactorEnabled()" />
</div>
<p class="truncate font-mono text-[11px] text-ink-3">{{ $user->email }}</p>
</div>