confirm with password

This commit is contained in:
ayntk-ai
2024-08-27 13:44:12 +02:00
parent ac50d8b4d8
commit 9040f5d2a1
2 changed files with 93 additions and 68 deletions

View File

@@ -5,6 +5,8 @@ namespace App\Livewire\Project\Shared;
use App\Jobs\DeleteResourceJob; use App\Jobs\DeleteResourceJob;
use Livewire\Component; use Livewire\Component;
use Visus\Cuid2\Cuid2; use Visus\Cuid2\Cuid2;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Auth;
class Danger extends Component class Danger extends Component
{ {
@@ -32,8 +34,13 @@ class Danger extends Component
$this->environmentName = data_get($parameters, 'environment_name'); $this->environmentName = data_get($parameters, 'environment_name');
} }
public function delete() public function delete($selectedActions, $password)
{ {
if (!Hash::check($password, Auth::user()->password)) {
$this->addError('password', 'The provided password is incorrect.');
return;
}
try { try {
// $this->authorize('delete', $this->resource); // $this->authorize('delete', $this->resource);
$this->resource->delete(); $this->resource->delete();

View File

@@ -1,13 +1,18 @@
<div> <div class="border border-red-600 rounded-md p-6 mt-8">
<h2>Danger Zone</h2> <h2 class="text-3xl font-bold mb-4">Danger Zone</h2>
<div class="">Woah. I hope you know what are you doing.</div>
<h4 class="pt-4">Delete Resource</h4>
<div class="pb-4">This will stop your containers, delete all related data, etc. Beware! There is no coming
back!
</div>
<x-modal-confirmation isErrorButton buttonTitle="Delete" confirm={{ $confirm }}> <div class="space-y-6">
<div x-data="{ step: 1, deleteText: '', selectedActions: [], getActionText(action) { <div class="flex items-center justify-between">
<div>
<h4 class="text-lg font-semibold">Delete Resource</h4>
<p class="text-gray-600 dark:text-gray-400">Once you delete a resource, there is no going back. Please be certain.</p>
</div>
<x-modal-confirmation
isError
type="button"
buttonTitle="Delete this resource"
>
<div x-data="{ step: 1, deleteText: '', password: '', selectedActions: [], getActionText(action) {
const actionTexts = { const actionTexts = {
'delete_volumes': 'Delete associated volumes', 'delete_volumes': 'Delete associated volumes',
'delete_connected_networks': 'Delete connected networks', 'delete_connected_networks': 'Delete connected networks',
@@ -25,13 +30,7 @@
<x-forms.checkbox id="delete_images" wire:model="delete_images" label="Permanently delete associated unused images?"></x-forms.checkbox> <x-forms.checkbox id="delete_images" wire:model="delete_images" label="Permanently delete associated unused images?"></x-forms.checkbox>
<div class="flex justify-between mt-4"> <div class="flex justify-between mt-4">
<x-forms.button @click="$dispatch('close-modal')">Cancel</x-forms.button> <x-forms.button @click="$dispatch('close-modal')">Cancel</x-forms.button>
<x-forms.button <x-forms.button isError x-show="step === 1" @click="step = 2; selectedActions = [$wire.delete_volumes ? 'delete_volumes' : null, $wire.delete_connected_networks ? 'delete_connected_networks' : null, $wire.delete_configurations ? 'delete_configurations' : null, $wire.delete_images ? 'delete_images' : null].filter(Boolean)" x-bind:disabled="!($wire.delete_volumes || $wire.delete_connected_networks || $wire.delete_configurations || $wire.delete_images)" type="button">
isError
x-show="step === 1"
@click="step = 2; selectedActions = [$wire.delete_volumes ? 'delete_volumes' : null, $wire.delete_connected_networks ? 'delete_connected_networks' : null, $wire.delete_configurations ? 'delete_configurations' : null, $wire.delete_images ? 'delete_images' : null].filter(Boolean)"
x-bind:disabled="!($wire.delete_volumes || $wire.delete_connected_networks || $wire.delete_configurations || $wire.delete_images)"
type="button"
>
Continue Continue
</x-forms.button> </x-forms.button>
</div> </div>
@@ -58,16 +57,35 @@
<input type="text" x-model="deleteText" class="w-full p-2 rounded mb-6 text-black input"> <input type="text" x-model="deleteText" class="w-full p-2 rounded mb-6 text-black input">
<div class="flex justify-between"> <div class="flex justify-between">
<x-forms.button @click="step = 1">Back</x-forms.button> <x-forms.button @click="step = 1">Back</x-forms.button>
<x-forms.button <x-forms.button isError type="button" @click="step = 3" x-bind:disabled="deleteText !== 'DELETE'">
isError
type="button"
@click="$wire.delete(selectedActions)"
x-bind:disabled="deleteText !== 'DELETE'"
>
Permanently Delete Permanently Delete
</x-forms.button> </x-forms.button>
</div> </div>
</div> </div>
<!-- Step 3: Password confirmation -->
<div x-show="step === 3">
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
<p class="font-bold">Final Confirmation</p>
<p>Please enter your password to confirm this destructive action.</p>
</div>
<div class="mb-4">
<label for="password-confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Your Password
</label>
<input type="password" id="password-confirm" x-model="password"
class="input"
placeholder="Enter your password">
</div>
<div class="flex justify-between">
<x-forms.button @click="step = 2">Back</x-forms.button>
<x-forms.button isError type="button" @click="$wire.delete(selectedActions, password)" x-bind:disabled="!password">
Confirm Deletion
</x-forms.button>
</div>
</div>
</div> </div>
</x-modal-confirmation> </x-modal-confirmation>
</div>
</div>
</div> </div>