Atomcms-edit/resources/themes/atom/views/user/settings/two-factor.blade.php

<x-app-layout>
 @push('title', __('Two factor'))

 <div class="col-span-12 flex flex-col gap-y-3 md:col-span-3">
 <x-user.settings.settings-navigation />
 </div>

 <div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
  <div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
   <div class="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
    <div>
     <h1 class="text-white font-bold text-lg">{{ __('Two factor authentication') }}</h1>
     <p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Add an extra layer of security to your account by enabling two-factor authentication') }}</p>
    </div>
   </div>

   <div class="p-4">
    @if (auth()->user()->two_factor_confirmed)
     <form action="{{ route('user.two-factor.disable') }}" method="post">
      @csrf
      @method('delete')

      <button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--button-danger-color, #ef4444);">
       {{ __('Disable 2FA') }}
      </button>
     </form>

    @elseif(auth()->user()->two_factor_secret)
     <div class="space-y-4">
      <p class="text-sm" style="color: var(--color-text);">{{ __('Validate your two-factor enabling by scanning the following QR-code and enter your auto-generated 2-factor code from your phone.') }}
      </p>

      <div class="flex flex-col items-center md:flex-row md:items-start md:justify-center">
       <div class="flex gap-x-8 rounded-lg px-4 py-3" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
        <span class="flex items-center">
         {!! auth()->user()->twoFactorQrCodeSvg() !!}
        </span>

        <div>
         <strong class="text-sm" style="color: var(--color-text);">
          {{ __('Recovery codes:') }}
         </strong>

         <ul class="mt-2 space-y-1">
          @foreach (auth()->user()->recoveryCodes() as $code)
          <li class="text-sm" style="color: var(--color-text-muted);">{{ $code }}</li>
          @endforeach
         </ul>
        </div>
       </div>
      </div>

      <div class="text-xs italic" style="color: var(--color-text-muted);">
       {{ __('Please save your recovery codes somewhere safe! If you lose access to your 2FA codes, those recovery codes will be needed to regain access your account.') }}
      </div>

      <form action="{{ route('two-factor.verify') }}" method="POST" class="flex flex-col gap-y-4">
       @csrf

       <div class="flex flex-col gap-y-1">
        <label class="block text-sm font-semibold" style="color: var(--color-text);" for="code">
         {{ __('Code') }}
        </label>
        <p class="text-xs mb-1" style="color: var(--color-text-muted);">
         {{ __('Please scan the QR-code above with your phone to retrieve your two-factor authentication code.') }}
        </p>
        <input name="code" placeholder="{{ __('Code') }}" class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0" style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
       </div>

       @if (setting('google_recaptcha_enabled'))
       <div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
       @endif

       @if (setting('cloudflare_turnstile_enabled'))
       <x-turnstile />
       @endif

       <div class="flex w-full justify-start md:justify-end">
        <button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
         {{ __('Verify 2FA') }}
        </button>
       </div>
      </form>
     </div>
    @else
     <div class="flex flex-col">
      <div class="flex w-full flex-col gap-y-3 text-sm" style="color: var(--color-text);">
       <p>
        {{ __('Here at :hotel we take security very serious and therefore we offer you as a user a way to secure your beloved account even further, by allowing you to enable Googles 2-factor authentication!', ['hotel' => setting('hotel_name')]) }}
       </p>

       <p>
        {{ __('2-factor authentication adds an extra layer of security to your account, making it physical impossible to access it without having access to your mobile phone as only your phone will contain the 2-factor authentication code which will be re-generated every 30 seconds automatically') }}
       </p>
      </div>

      <div class="flex w-full justify-start md:justify-end mt-6">
       <form action="{{ route('user.two-factor.enable') }}" method="post">
        @csrf
        <button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
         {{ __('Activate 2FA') }}
        </button>
       </form>
      </div>
     </div>
    @endif
   </div>
  </div>
 </div>
</x-app-layout>