renaming and re-organizing

Author: tnylea

app/Http/Controllers/Auth/TwoFactorAuthenticatedSessionController.php

@@ -23,7 +23,6 @@ class TwoFactorAuthController extends Controller
     public function edit(Request $request)
     {
         return Inertia::render('settings/two-factor', [
-            'enabled' => $this->twoFactorEnabled($request->user()),
             'confirmed' => !is_null($request->user()->two_factor_confirmed_at),
             'recoveryCodes' => $this->getRecoveryCodes($request->user()),
         ]);

app/Http/Controllers/Settings/TwoFactorAuthController.php

@@ -111,6 +111,10 @@
     --sidebar-accent-foreground: oklch(0.205 0 0);
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.87 0 0);
+
+    /* Allows us to transition an element from a certain length to its intrinsic size */
+    /* Learn more here: https://css-tricks.com/almanac/properties/i/interpolate-size/  */
+    interpolate-size: allow-keywords;
 }
 
 .dark {

resources/css/app.css

@@ -18,20 +18,17 @@ const breadcrumbs: BreadcrumbItem[] = [
 ];
 
 interface TwoFactorProps {
-    enabled: boolean;
     confirmed: boolean;
-    qrCode: boolean;
     recoveryCodes: string[];
 }
 
-export default function TwoFactor({ enabled: initialEnabled, confirmed: initialConfirmed, qrCode, recoveryCodes }: TwoFactorProps) {
-    const [enabled, setEnabled] = useState(initialEnabled);
+export default function TwoFactor({ confirmed: initialConfirmed, recoveryCodes }: TwoFactorProps) {
     const [confirmed, setConfirmed] = useState(initialConfirmed);
     const [showModal, setShowModal] = useState(false);
     const [verifyStep, setVerifyStep] = useState(false);
     const [qrCodeSvg, setQrCodeSvg] = useState('');
     const [secretKey, setSecretKey] = useState('');
-    const [showingRecoveryCodes, setShowingRecoveryCodes] = useState(initialEnabled);
+    const [showingRecoveryCodes, setShowingRecoveryCodes] = useState(false);
     const [recoveryCodesList, setRecoveryCodesList] = useState(recoveryCodes);
     const [copied, setCopied] = useState(false);
 
@@ -51,7 +48,6 @@ export default function TwoFactor({ enabled: initialEnabled, confirmed: initialC
                 preserveScroll: true,
                 onSuccess: async () => {
                     // Only set enabled to true, but not confirmed yet
-                    setEnabled(true);
                     const response = await fetch(route('two-factor.qr-code'));
                     const data = await response.json();
                     setQrCodeSvg(data.svg);
@@ -117,7 +113,6 @@ export default function TwoFactor({ enabled: initialEnabled, confirmed: initialC
         destroy(route('two-factor.disable'), {
             preserveScroll: true,
             onSuccess: () => {
-                setEnabled(false);
                 setConfirmed(false);
                 setShowingRecoveryCodes(false);
                 setQrCodeSvg('');
@@ -319,18 +314,22 @@ export default function TwoFactor({ enabled: initialEnabled, confirmed: initialC
                                             </Button>
                                         )}
                                     </div>
-                                    {showingRecoveryCodes && (
-                                        <div className="relative">
-                                            <div className="grid max-w-xl gap-1 px-4 py-4 font-mono text-sm bg-stone-200 dark:bg-stone-900 dark:text-stone-100">
-                                                {recoveryCodesList.map((code, index) => (
-                                                    <div key={index}>{code}</div>
-                                                ))}
-                                            </div>
-                                            <p className="px-4 py-3 text-xs select-none text-stone-500 dark:text-stone-400">
-                                                You have {recoveryCodesList.length} recovery codes left. Each can be used once to access your account and will be removed after use. If you need more, click <span className="font-bold">Regenerate Codes</span> above.
-                                            </p>
+                                    <div 
+                                        className="relative overflow-hidden transition-all duration-300"
+                                        style={{
+                                            height: showingRecoveryCodes ? 'auto' : '0',
+                                            opacity: showingRecoveryCodes ? 1 : 0,
+                                        }}
+                                    >
+                                        <div className="grid max-w-xl gap-1 px-4 py-4 font-mono text-sm bg-stone-200 dark:bg-stone-900 dark:text-stone-100">
+                                            {recoveryCodesList.map((code, index) => (
+                                                <div key={index}>{code}</div>
+                                            ))}
                                         </div>
-                                    )}
+                                        <p className="px-4 py-3 text-xs select-none text-stone-500 dark:text-stone-400">
+                                            You have {recoveryCodesList.length} recovery codes left. Each can be used once to access your account and will be removed after use. If you need more, click <span className="font-bold">Regenerate Codes</span> above.
+                                        </p>
+                                    </div>
                                 </div>
                             </div>
                             <div className="inline relative">

resources/js/pages/settings/two-factor.tsx

@@ -8,7 +8,7 @@
 use App\Http\Controllers\Auth\PasswordResetLinkController;
 use App\Http\Controllers\Auth\RegisteredUserController;
 use App\Http\Controllers\Auth\VerifyEmailController;
-use App\Http\Controllers\Auth\TwoFactorAuthenticatedSessionController;
+use App\Http\Controllers\Auth\TwoFactorAuthChallengeController;
 use Illuminate\Support\Facades\Route;
 
 Route::middleware('guest')->group(function () {
@@ -58,8 +58,8 @@
 
 // Two-factor challenge routes with the ensure-two-factor-challenge-session middleware
 Route::middleware('ensure-two-factor-challenge-session')->group(function () {
-    Route::get('two-factor-challenge', [TwoFactorAuthenticatedSessionController::class, 'create'])
+    Route::get('two-factor-challenge', [TwoFactorAuthChallengeController::class, 'create'])
             ->name('two-factor.challenge');
 
-    Route::post('two-factor-challenge', [TwoFactorAuthenticatedSessionController::class, 'store']);
+    Route::post('two-factor-challenge', [TwoFactorAuthChallengeController::class, 'store']);
 });

routes/auth.php

@@ -27,10 +27,8 @@ public function test_can_view_two_factor_settings_page()
         $inertiaProps = $response->original?->getData() ?? [];
         if (isset($inertiaProps['page']['props'])) {
             $props = $inertiaProps['page']['props'];
-            $this->assertArrayHasKey('enabled', $props);
             $this->assertArrayHasKey('confirmed', $props);
             $this->assertArrayHasKey('recoveryCodes', $props);
-            $this->assertFalse($props['enabled']);
             $this->assertFalse($props['confirmed']);
         } else {
             // Fallback: check for expected strings in HTML (legacy/SSR)
@@ -82,8 +80,8 @@ public function test_can_manually_enable_two_factor_authentication()
         if (isset($inertiaProps['page']['props'])) {
             $props = $inertiaProps['page']['props'];
             $this->assertTrue(
-                ($props['enabled'] ?? false) === true,
-                '2FA should be enabled in page props.'
+                ($props['confirmed'] ?? false) === true,
+                '2FA should be confirmed in page props.'
             );
             $this->assertArrayHasKey('recoveryCodes', $props);
         } else {