76 lines
4.5 KiB
PHP
76 lines
4.5 KiB
PHP
<div class="mx-auto max-w-3xl space-y-6">
|
|
<div class="animate-rise">
|
|
<h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('two_factor_setup.title') }}</h1>
|
|
<p class="mt-1 text-sm text-muted">{{ __('two_factor_setup.sub') }}</p>
|
|
</div>
|
|
|
|
{{-- Every action is re-checked server-side against a recent password
|
|
confirmation — hiding the buttons stops nobody who can post to
|
|
/livewire/update. --}}
|
|
<div class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise">
|
|
<span class="inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-0.5 text-xs font-medium
|
|
{{ $twoFactorOn ? 'border-success-border bg-success-bg text-success' : 'border-line-strong bg-surface-2 text-muted' }}">
|
|
<span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
|
|
{{ $twoFactorOn ? __('two_factor_setup.state_on') : __('two_factor_setup.state_off') }}
|
|
</span>
|
|
|
|
@if (! $passwordConfirmed)
|
|
{{-- The gate. A signed-in session is not enough to change how the
|
|
account is protected — the risk is an unlocked machine. --}}
|
|
<form wire:submit="confirmPassword" class="rounded-lg border border-line bg-surface-2 p-4">
|
|
<p class="text-sm text-body">{{ __('two_factor_setup.confirm_first') }}</p>
|
|
<div class="mt-3 flex flex-wrap items-start gap-2">
|
|
<div class="min-w-56 flex-1">
|
|
<x-ui.input name="confirmablePassword" type="password" autocomplete="current-password"
|
|
:label="__('admin_settings.password_current')" wire:model="confirmablePassword" />
|
|
</div>
|
|
<x-ui.button type="submit" variant="secondary" class="mt-7" wire:loading.attr="disabled" wire:target="confirmPassword">
|
|
{{ __('two_factor_setup.confirm_button') }}
|
|
</x-ui.button>
|
|
</div>
|
|
</form>
|
|
@elseif ($twoFactorOn)
|
|
<div class="flex flex-wrap gap-2">
|
|
<x-ui.button variant="secondary" wire:click="regenerateRecoveryCodes" wire:loading.attr="disabled" wire:target="regenerateRecoveryCodes">
|
|
{{ __('two_factor_setup.new_codes') }}
|
|
</x-ui.button>
|
|
<x-ui.button variant="danger" wire:click="disableTwoFactor"
|
|
wire:confirm="{{ __('two_factor_setup.off_confirm') }}"
|
|
wire:loading.attr="disabled" wire:target="disableTwoFactor">
|
|
{{ __('two_factor_setup.disable') }}
|
|
</x-ui.button>
|
|
</div>
|
|
@elseif ($twoFactorPending)
|
|
<div class="grid gap-5 sm:grid-cols-[auto_1fr] sm:items-start">
|
|
<div class="rounded-lg border border-line bg-white p-3">{!! $twoFactorQr !!}</div>
|
|
<form wire:submit="confirmTwoFactor" class="space-y-3">
|
|
<p class="text-sm text-muted">{{ __('two_factor_setup.scan') }}</p>
|
|
<div class="max-w-48">
|
|
<x-ui.input name="twoFactorCode" inputmode="numeric" autocomplete="one-time-code"
|
|
:label="__('two_factor_setup.code')" wire:model="twoFactorCode" />
|
|
</div>
|
|
<x-ui.button type="submit" variant="primary" wire:loading.attr="disabled" wire:target="confirmTwoFactor">
|
|
{{ __('two_factor_setup.activate') }}
|
|
</x-ui.button>
|
|
</form>
|
|
</div>
|
|
@else
|
|
<x-ui.button variant="primary" wire:click="enableTwoFactor" wire:loading.attr="disabled" wire:target="enableTwoFactor">
|
|
{{ __('two_factor_setup.enable') }}
|
|
</x-ui.button>
|
|
@endif
|
|
|
|
@if ($recoveryCodes)
|
|
{{-- Shown once, on purpose: nobody writes down what they were never
|
|
shown, and these are the way back in when the phone is gone. --}}
|
|
<div class="rounded-lg border border-warning-border bg-warning-bg p-4">
|
|
<p class="text-sm font-medium text-warning">{{ __('two_factor_setup.codes_title') }}</p>
|
|
<p class="mt-1 text-xs text-warning">{{ __('two_factor_setup.codes_hint') }}</p>
|
|
<ul class="mt-3 grid grid-cols-2 gap-x-6 gap-y-1 font-mono text-sm text-ink sm:grid-cols-4">
|
|
@foreach ($recoveryCodes as $code)<li class="select-all">{{ $code }}</li>@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|