91 lines
3.7 KiB
PHP
91 lines
3.7 KiB
PHP
<x-layouts::auth>
|
|
<div class="flex flex-col gap-6">
|
|
<div
|
|
class="relative w-full h-auto"
|
|
x-cloak
|
|
x-data="{
|
|
showRecoveryInput: @js($errors->has('recovery_code')),
|
|
code: '',
|
|
recovery_code: '',
|
|
toggleInput() {
|
|
this.showRecoveryInput = !this.showRecoveryInput;
|
|
this.code = '';
|
|
this.recovery_code = '';
|
|
$nextTick(() => {
|
|
this.showRecoveryInput
|
|
? this.$refs.recovery_code?.focus()
|
|
: this.$refs.code?.focus();
|
|
});
|
|
},
|
|
}"
|
|
>
|
|
<div x-show="!showRecoveryInput">
|
|
<x-auth-header
|
|
:title="__('Authentication Code')"
|
|
:description="__('Enter the authentication code provided by your authenticator application.')"
|
|
/>
|
|
</div>
|
|
|
|
<div x-show="showRecoveryInput">
|
|
<x-auth-header
|
|
:title="__('Recovery Code')"
|
|
:description="__('Please confirm access to your account by entering one of your emergency recovery codes.')"
|
|
/>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('two-factor.login.store') }}">
|
|
@csrf
|
|
|
|
<div class="space-y-5 text-center">
|
|
<div x-show="!showRecoveryInput">
|
|
<div class="my-5">
|
|
<x-input
|
|
type="text"
|
|
name="code"
|
|
x-ref="code"
|
|
x-model="code"
|
|
x-bind:required="!showRecoveryInput"
|
|
autocomplete="one-time-code"
|
|
placeholder="000000"
|
|
class="text-center text-2xl tracking-widest"
|
|
maxlength="6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div x-show="showRecoveryInput">
|
|
<div class="my-5">
|
|
<x-input
|
|
type="text"
|
|
name="recovery_code"
|
|
x-ref="recovery_code"
|
|
x-bind:required="showRecoveryInput"
|
|
autocomplete="one-time-code"
|
|
x-model="recovery_code"
|
|
/>
|
|
</div>
|
|
|
|
@error('recovery_code')
|
|
<p class="text-error text-sm">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<x-button
|
|
type="submit"
|
|
label="{{ __('Continue') }}"
|
|
class="btn-primary w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mt-5 space-x-0.5 text-sm leading-5 text-center">
|
|
<span class="opacity-50">{{ __('or you can') }}</span>
|
|
<div class="inline font-medium underline cursor-pointer opacity-80">
|
|
<span x-show="!showRecoveryInput" @click="toggleInput()">{{ __('login using a recovery code') }}</span>
|
|
<span x-show="showRecoveryInput" @click="toggleInput()">{{ __('login using an authentication code') }}</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</x-layouts::auth>
|