You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.6 KiB
47 lines
1.6 KiB
2 years ago
|
@props(['title' => __('Confirm Password'), 'content' => __('For your security, please confirm your password to continue.'), 'button' => __('Confirm')])
|
||
|
|
|
||
|
|
@php
|
||
|
|
$confirmableId = md5($attributes->wire('then'));
|
||
|
|
@endphp
|
||
|
|
|
||
|
|
<span
|
||
|
|
{{ $attributes->wire('then') }}
|
||
|
|
x-data
|
||
|
|
x-ref="span"
|
||
|
|
x-on:click="$wire.startConfirmingPassword('{{ $confirmableId }}')"
|
||
|
|
x-on:password-confirmed.window="setTimeout(() => $event.detail.id === '{{ $confirmableId }}' && $refs.span.dispatchEvent(new CustomEvent('then', { bubbles: false })), 250);"
|
||
|
|
>
|
||
|
|
{{ $slot }}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
@once
|
||
|
|
<x-dialog-modal wire:model="confirmingPassword">
|
||
|
|
<x-slot name="title">
|
||
|
|
{{ $title }}
|
||
|
|
</x-slot>
|
||
|
|
|
||
|
|
<x-slot name="content">
|
||
|
|
{{ $content }}
|
||
|
|
|
||
|
|
<div class="mt-4" x-data="{}" x-on:confirming-password.window="setTimeout(() => $refs.confirmable_password.focus(), 250)">
|
||
|
|
<x-input type="password" class="mt-1 block w-3/4" placeholder="{{ __('Password') }}" autocomplete="current-password"
|
||
|
|
x-ref="confirmable_password"
|
||
|
|
wire:model.defer="confirmablePassword"
|
||
|
|
wire:keydown.enter="confirmPassword" />
|
||
|
|
|
||
|
|
<x-input-error for="confirmable_password" class="mt-2" />
|
||
|
|
</div>
|
||
|
|
</x-slot>
|
||
|
|
|
||
|
|
<x-slot name="footer">
|
||
|
|
<x-secondary-button wire:click="stopConfirmingPassword" wire:loading.attr="disabled">
|
||
|
|
{{ __('Cancel') }}
|
||
|
|
</x-secondary-button>
|
||
|
|
|
||
|
|
<x-button class="ml-3" dusk="confirm-password-button" wire:click="confirmPassword" wire:loading.attr="disabled">
|
||
|
|
{{ $button }}
|
||
|
|
</x-button>
|
||
|
|
</x-slot>
|
||
|
|
</x-dialog-modal>
|
||
|
|
@endonce
|