From ffc17966efcf68f4204d1adee9202f1079523fb1 Mon Sep 17 00:00:00 2001
From: boban <boban@git.bave.dev>
Date: Sat, 20 Jun 2026 20:07:59 +0200
Subject: [PATCH] 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>
---
 resources/views/components/sidebar.blade.php          | 2 +-
 resources/views/components/two-factor-badge.blade.php | 8 ++++++++
 resources/views/livewire/settings/index.blade.php     | 8 +-------
 resources/views/livewire/settings/users.blade.php     | 8 +-------
 4 files changed, 11 insertions(+), 15 deletions(-)
 create mode 100644 resources/views/components/two-factor-badge.blade.php

diff --git a/resources/views/components/sidebar.blade.php b/resources/views/components/sidebar.blade.php
index 4354517..d0f5f0a 100644
--- a/resources/views/components/sidebar.blade.php
+++ b/resources/views/components/sidebar.blade.php
@@ -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">
diff --git a/resources/views/components/two-factor-badge.blade.php b/resources/views/components/two-factor-badge.blade.php
new file mode 100644
index 0000000..eb5d217
--- /dev/null
+++ b/resources/views/components/two-factor-badge.blade.php
@@ -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
diff --git a/resources/views/livewire/settings/index.blade.php b/resources/views/livewire/settings/index.blade.php
index 4db2973..7e96874 100644
--- a/resources/views/livewire/settings/index.blade.php
+++ b/resources/views/livewire/settings/index.blade.php
@@ -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>
 
diff --git a/resources/views/livewire/settings/users.blade.php b/resources/views/livewire/settings/users.blade.php
index 534a5b5..6243acf 100644
--- a/resources/views/livewire/settings/users.blade.php
+++ b/resources/views/livewire/settings/users.blade.php
@@ -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>