laravel / jetstream

Tailwind scaffolding for the Laravel framework.
https://jetstream.laravel.com
MIT License
3.93k stars 809 forks source link

Sugestion of change of buttons positions in two-factor-authentication-form.blade.php for better UX #1466

Closed allyson-silva closed 3 months ago

allyson-silva commented 3 months ago

The confirmation button of two factor is displayed on the left side, but in all another UI's of jetstream this was displayed on the right, i changed this blade um my own project, my code was bellow:

`` @if (! $this->enabled)

{{ __('Enable') }}
        @else

            @if ($showingRecoveryCodes)
                <x-m-confirms-password wire:then="regenerateRecoveryCodes">
                    <x-mary-button class="btn btn-active mr-4">
                        {{ __('Regenerate Recovery Codes') }}
                    </x-mary-button>
                </x-m-confirms-password>
            @elseif ($showingConfirmation)

                <x-m-confirms-password wire:then="disableTwoFactorAuthentication">
                    <x-mary-button class="btn btn-active" wire:loading.attr="disabled">
                        {{ __('Cancel') }}
                    </x-mary-button>
                </x-m-confirms-password>

                <x-m-confirms-password wire:then="confirmTwoFactorAuthentication">
                    <x-mary-button class="btn btn-neutral mr-4 " type="button"  wire:loading.attr="disabled">
                        {{ __('Confirm') }}
                    </x-mary-button>
                </x-m-confirms-password>

            @else
                <x-m-confirms-password wire:then="showRecoveryCodes">
                    <x-mary-button class="btn btn-active mr-4">
                        {{ __('Show Recovery Codes') }}
                    </x-mary-button>
                </x-m-confirms-password>
            @endif

            @if (!$showingConfirmation)
                <x-confirms-password wire:then="disableTwoFactorAuthentication">
                    <x-mary-button class="btn btn-error" wire:loading.attr="disabled">
                        {{ __('Disable') }}
                    </x-mary-button>
                </x-confirms-password>
            @endif

        @endif`

     Please ignore the mary UI components im was personalizing the jetstream to use with daisiui themes.
driesvints commented 3 months ago

Feel free to attempt a PR!