feat(ui): show two-factor status of team members (#11186)

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-authored-by: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>

resources/css/app.css

@@ -2487,6 +2487,10 @@ input[type="search"]::-webkit-search-results-decoration {
     grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr) 7rem minmax(10rem, 0.9fr);
 }
 
+.team-members-table-grid-2fa {
+    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr) 7rem 4rem minmax(10rem, 0.9fr);
+}
+
 .admin-users-table-grid {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 5rem;
 }
@@ -2551,6 +2555,10 @@ input[type="search"]::-webkit-search-results-decoration {
         grid-template-columns: minmax(0, 1fr) 7rem 7rem;
     }
 
+    .team-members-table-grid-2fa {
+        grid-template-columns: minmax(0, 1fr) 7rem 4rem 7rem;
+    }
+
     .team-members-table-grid > :nth-child(2) {
         display: none;
     }
@@ -2602,6 +2610,10 @@ input[type="search"]::-webkit-search-results-decoration {
         grid-template-columns: minmax(0, 1fr) 6.5rem;
     }
 
+    .team-members-table-grid-2fa {
+        grid-template-columns: minmax(0, 1fr) 4rem 6.5rem;
+    }
+
     .team-members-table-grid > :nth-child(3) {
         display: none;
     }

resources/views/components/two-factor-badge.blade.php

@@ -0,0 +1,25 @@
+@props([
+    'enabled' => false,
+])
+
+<span title="{{ $enabled ? 'Two-factor authentication is enabled for this account.' : 'This account is not protected by two-factor authentication.' }}"
+    {{ $attributes->class([
+        'inline-flex items-center',
+        'text-green-600 dark:text-green-400' => $enabled,
+        'text-neutral-400 dark:text-fg-faint' => ! $enabled,
+    ]) }}>
+    @if ($enabled)
+        <svg class="size-4 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+            stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
+        </svg>
+    @else
+        <svg class="size-4 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+            stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                d="M12 9v3.75m0-10.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Zm0 13.036h.008v.008H12v-.008Z" />
+        </svg>
+    @endif
+    <span class="sr-only">Two-factor authentication is {{ $enabled ? 'enabled' : 'disabled' }}</span>
+</span>

resources/views/livewire/team/member.blade.php

@@ -1,7 +1,10 @@
 <div wire:key="team-member-row-{{ $member->id }}"
     x-cloak x-show="isMemberVisible({{ $member->id }})"
     x-bind:style="{ order: memberOrder({{ $member->id }}) }"
-    class="data-table-row team-members-table-grid border-b border-neutral-200 last:border-b-0 dark:border-white/[0.07]">
+    @class([
+        'data-table-row team-members-table-grid border-b border-neutral-200 last:border-b-0 dark:border-white/[0.07]',
+        'team-members-table-grid-2fa' => auth()->user()?->can('manageMembers', currentTeam()),
+    ])>
     <div>
         <div class="flex items-center gap-2">
             <div
@@ -24,6 +27,11 @@
             {{ data_get($member, 'pivot.role') }}
         </span>
     </div>
+    @can('manageMembers', currentTeam())
+        <div class="flex items-center">
+            <x-two-factor-badge :enabled="filled($member->two_factor_confirmed_at)" />
+        </div>
+    @endcan
     <div class="flex justify-end">
         @can('manageMembers', currentTeam())
             @if ($member->id !== Auth::id())

resources/views/livewire/team/member/index.blade.php

@@ -4,7 +4,7 @@
     sortBy: 'name_asc',
     page: 1,
     perPage: 10,
-    members: @js(currentTeam()->members->map(fn ($member) => [
+    members: @js($members->map(fn ($member) => [
         'id' => $member->id,
         'name' => $member->name,
         'email' => $member->email,
@@ -95,14 +95,31 @@
                 </div>
             </div>
 
+            @can('manageMembers', currentTeam())
+                <div
+                    class="border-b border-neutral-200 px-4 py-2.5 text-[12px] dark:border-white/[0.08]">
+                    @if ($membersWithoutTwoFactorCount > 0)
+                        <span class="text-warning-700 dark:text-warning">{{ $membersWithoutTwoFactorCount }} of {{ $members->count() }} {{ Str::plural('member', $members->count()) }} {{ $membersWithoutTwoFactorCount === 1 ? 'does' : 'do' }} not have two-factor authentication enabled.</span>
+                    @else
+                        <span class="text-neutral-500 dark:text-fg-dim">All members have two-factor authentication enabled.</span>
+                    @endif
+                </div>
+            @endcan
+
             <div x-cloak x-show="filteredMembers.length > 0" class="data-table flex flex-col">
-                <div class="data-table-header team-members-table-grid">
+                <div @class([
+                    'data-table-header team-members-table-grid',
+                    'team-members-table-grid-2fa' => auth()->user()?->can('manageMembers', currentTeam()),
+                ])>
                     <span>Name</span>
                     <span>Email</span>
                     <span>Role</span>
+                    @can('manageMembers', currentTeam())
+                        <span>2FA</span>
+                    @endcan
                     <span class="text-right">Actions</span>
                 </div>
-                @foreach (currentTeam()->members as $member)
+                @foreach ($members as $member)
                     <livewire:team.member :member="$member" :wire:key="$member->id" />
                 @endforeach
             </div>