Feature: Auto submit form when 6 digits have been entered

Author: cannycookie

resources/lang/en/two-factor.php

@@ -9,15 +9,15 @@
 
     'success' => 'The OTP code has been validated successfully.',
 
-    'fail_2fa' => 'The TOTP code has expired or is invalid.',
+    'fail_2fa' => 'The OTP code has expired or is invalid.',
     'fail_confirm' => 'The OTP to activate Two-Factor Authentication is invalid.',
     'enabled'      => 'Two-Factor Authentication has been enabled.',
     'disabled'     => 'Two-Factor Authentication has been disabled.',
     'enabled_message' => 'Two-Factor Authentication was enabled on :date.',
 
     'safe_device' => 'We won\'t ask you for Two-Factor Authentication codes in this device for some time.',
     'safe_device_hint'=>'Uncheck this if using a public or shared device.',
-    'totp_or_recovery_code'   => 'One time Pin or Recovery code',
+    'totp_or_recovery_code'   => 'One Time Pin or Recovery code',
     'confirm_otp_hint'  => 'An OTP should have :otpLength digits, while a recovery code can be alphanumeric and should be :recoveryLength characters.',
     'one_time_pin'   => 'One Time Pin',
     'enable_safe_device'   => 'Remember this device for :days days.',
@@ -48,7 +48,7 @@
     'setup_step_1' => 'Step 1. Scan the QR Code',
     'setup_step_2' => 'Step 2. Enter the pin provided by your app',
 
-    'action_label'  => 'Submit TOTP Pin and complete setup',
+    'action_label'  => 'Submit pin and complete setup',
 
     'setup_message_1' => 'When two factor authentication is enabled, you will prompted for a secure pin during login. Your phone\'s authenticator application will provide a new pin every :interval seconds.',
     'setup_message_2' => 'To enable 2FA, scan the following QR code using an authenticator app on your phone (such as Google Authenticator, Microsoft Authenticator, Authy, or LastPass Authenticator). Then, enter the one-time passcode (OTP) to confirm the setup.',

src/Filament/Pages/Configure.php

@@ -134,6 +134,7 @@ protected function getSaveFormAction(): Action
         return Action::make('save')
             ->label($this->getUser()->hasTwoFactorEnabled() ? __('filament-2fa::two-factor.save_changes') : __('filament-2fa::two-factor.action_label'))
             ->submit('save')
+            ->visible(fn()=>!$this->getUser()->hasTwoFactorEnabled())
             ->keyBindings(['mod+s']);
     }
 
@@ -200,7 +201,7 @@ protected function getTwoFactorAuthFormComponent(): Component
             ->relationship('twoFactorAuth')
             ->schema([
                 $this->enable2FactorAuthGroupComponent(),
-                $this->disable2FactorAuthGroupComponent()
+                $this->manage2FactorAuthGroupComponent()
             ]);
     }
 
@@ -238,13 +239,19 @@ protected function enable2FactorAuthGroupComponent(): Component
                                     ->content(fn () => new HtmlString('<h3 class="text-lg font-bold text-primary">' . __('filament-2fa::two-factor.setup_step_2') . '</h3>')),
                                 TextInput::make('2fa_code')
                                     ->label(__('filament-2fa::two-factor.confirm'))
-                                    ->numeric()
                                     ->autofocus()
                                     ->required(!$this->getUser()->hasTwoFactorEnabled())
-                                    ->minLength(config('two-factor.totp.digits'))
-                                    ->maxLength(config('two-factor.totp.digits'))
+                                    ->length(config('two-factor.totp.digits'))
                                     ->autocomplete(false)
-                                    ->afterStateUpdated(fn ($state) => $this->data['2fa_code'] = $state),
+                                    ->live()
+                                    ->extraInputAttributes(['class'=>'text-center','style'=>'font-size:3em; letter-spacing:1rem'])
+                                    ->afterStateUpdated(function ($state) {
+                                        $requiredLength = config('two-factor.totp.digits');
+                                        if (strlen($state) == $requiredLength) {
+                                            $this->data['2fa_code'] = $state;
+                                            $this->save();
+                                        }
+                                    }),
                             ])
                             ->columnSpan([
                                 'sm' => 2, // Full-width on small screens
@@ -269,7 +276,7 @@ protected function prepareTwoFactor(): array
         ];
     }
 
-    protected function disable2FactorAuthGroupComponent(): Component
+    protected function manage2FactorAuthGroupComponent(): Component
     {
         return Group::make()
             ->schema([
@@ -293,21 +300,24 @@ protected function disable2FactorAuthGroupComponent(): Component
                             $this->recoveryCodes = $this->getUser()->generateRecoveryCodes();
                         })
                         ->visible($this->showRecoveryCodes)
+                        ->requiresConfirmation(),
+                    FormAction::make('disableTwoFactorAuth')
+                        ->label(__('filament-2fa::two-factor.disable_2fa'))
+                        ->color('danger')
                         ->requiresConfirmation()
+                        ->icon('heroicon-m-shield-exclamation')
+                        ->modalDescription('You will need to remove the account from your device.  That account will not work again.')
+                        ->action(function () {
+                            $this->getUser()->disableTwoFactorAuth();
+                            $this->data['disable_two_factor_auth'] = true;
+                            $this->save();
+                        }),
                 ]),
                 Placeholder::make('recovery_code')
                     ->label('')
                     ->content($this->prepareRecoveryCodes())
                     ->visible($this->showRecoveryCodes),
-                Toggle::make('disable_two_factor_auth')
-                    ->label(__('filament-2fa::two-factor.disable_2fa'))
-                    ->inline(false)
-                    ->onColor('danger')
-                    ->offColor('success')
-                    ->onIcon('heroicon-m-x-mark')
-                    ->offIcon('heroicon-m-check-circle')
-                    ->live()
-                    ->afterStateUpdated(fn($state) => $this->data['disable_two_factor_auth'] = $state),
+
             ])
             ->visible($this->getUser()->hasTwoFactorEnabled());
     }

src/Livewire/Confirm2Fa.php

@@ -142,6 +142,7 @@ protected function get2FaFormComponent(): Component
                     ->maxLength(8)
                     ->required()
                     ->autocomplete(false)
+                    ->extraInputAttributes(['class'=>'text-center','style'=>'font-size:2.6em; letter-spacing:1rem'])
                     ->live()
                     ->afterStateUpdated(function ($state) {
                         $requiredLength = config('two-factor.totp.digits');