dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

disable tow step confirmation

Browse Source
This commit is contained in:
peaklabs-dev
2024-10-17 12:07:48 +02:00
parent 2cb424ed7b
commit b67f4d1975
1 changed files with 103 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
resources/views/components/modal-confirmation.blade.php
View File

@@ -22,18 +22,23 @@
'dispatchEventMessage' => '', 'dispatchEventMessage' => '',
]) ])
@php
$settings = instanceSettings();
$disableTwoStepConfirmation = $settings->disable_two_step_confirmation ?? false;
@endphp
<div x-data="{ <div x-data="{
modalOpen: false, modalOpen: false,
step: {{ empty($checkboxes) ? 2 : 1 }}, step: {{ empty($checkboxes) ? 2 : 1 }},
initialStep: {{ empty($checkboxes) ? 2 : 1 }}, initialStep: {{ empty($checkboxes) ? 2 : 1 }},
finalStep: {{ $confirmWithPassword ? 3 : 2 }}, finalStep: {{ $confirmWithPassword && !$disableTwoStepConfirmation ? 3 : 2 }},
deleteText: '', deleteText: '',
password: '', password: '',
actions: @js($actions), actions: @js($actions),
confirmationText: @js($confirmationText), confirmationText: @js($confirmationText),
userConfirmationText: '', userConfirmationText: '',
confirmWithText: @js($confirmWithText), confirmWithText: @js($confirmWithText && !$disableTwoStepConfirmation),
confirmWithPassword: @js($confirmWithPassword), confirmWithPassword: @js($confirmWithPassword && !$disableTwoStepConfirmation),
copied: false, copied: false,
submitAction: @js($submitAction), submitAction: @js($submitAction),
passwordError: '', passwordError: '',
@@ -41,6 +46,7 @@
dispatchEvent: @js($dispatchEvent), dispatchEvent: @js($dispatchEvent),
dispatchEventType: @js($dispatchEventType), dispatchEventType: @js($dispatchEventType),
dispatchEventMessage: @js($dispatchEventMessage), dispatchEventMessage: @js($dispatchEventMessage),
disableTwoStepConfirmation: @js($disableTwoStepConfirmation),
resetModal() { resetModal() {
this.step = this.initialStep; this.step = this.initialStep;
this.deleteText = ''; this.deleteText = '';
@@ -222,66 +228,70 @@
</template> </template>
@endforeach @endforeach
</ul> </ul>
@if ($confirmWithText) @if (!$disableTwoStepConfirmation)
<div class="mb-4"> @if ($confirmWithText)
<h4 class="mb-2 text-lg font-semibold">Confirm Actions</h4> <div class="mb-4">
<p class="mb-2 text-sm">{{ $confirmationLabel }}</p> <h4 class="mb-2 text-lg font-semibold">Confirm Actions</h4>
<div class="relative mb-2"> <p class="mb-2 text-sm">{{ $confirmationLabel }}</p>
<input type="text" x-model="confirmationText" <div class="relative mb-2">
class="p-2 pr-10 w-full text-black rounded cursor-text input" readonly> <input type="text" x-model="confirmationText"
<button @click="copyConfirmationText()" class="p-2 pr-10 w-full text-black rounded cursor-text input" readonly>
class="absolute right-2 top-1/2 text-gray-500 transform -translate-y-1/2 hover:text-gray-700" <button @click="copyConfirmationText()"
title="Copy confirmation text" x-ref="copyButton"> class="absolute right-2 top-1/2 text-gray-500 transform -translate-y-1/2 hover:text-gray-700"
<template x-if="!copied"> title="Copy confirmation text" x-ref="copyButton">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" <template x-if="!copied">
fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20"
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" /> fill="currentColor">
<path <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" /> <path
</svg> d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
</template> </svg>
<template x-if="copied"> </template>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500" <template x-if="copied">
viewBox="0 0 20 20" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500"
<path fill-rule="evenodd" viewBox="0 0 20 20" fill="currentColor">
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" <path fill-rule="evenodd"
clip-rule="evenodd" /> d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
</svg> clip-rule="evenodd" />
</template> </svg>
</button> </template>
</div> </button>
</div>
<label for="userConfirmationText" <label for="userConfirmationText"
class="block mt-4 text-sm font-medium text-gray-700 dark:text-gray-300"> class="block mt-4 text-sm font-medium text-gray-700 dark:text-gray-300">
{{ $shortConfirmationLabel }} {{ $shortConfirmationLabel }}
</label> </label>
<input type="text" x-model="userConfirmationText" <input type="text" x-model="userConfirmationText"
class="p-2 mt-1 w-full text-black rounded input"> class="p-2 mt-1 w-full text-black rounded input">
</div> </div>
@endif
@endif @endif
</div> </div>
<!-- Step 3: Password confirmation --> <!-- Step 3: Password confirmation -->
<div x-show="step === 3 && confirmWithPassword"> @if (!$disableTwoStepConfirmation)
<div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert"> <div x-show="step === 3 && confirmWithPassword">
<p class="font-bold">Final Confirmation</p> <div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
<p>Please enter your password to confirm this destructive action.</p> <p class="font-bold">Final Confirmation</p>
<p>Please enter your password to confirm this destructive action.</p>
</div>
<div class="flex flex-col gap-2 mb-4">
<label for="password-confirm"
class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Your Password
</label>
<form @submit.prevent @keydown.enter.prevent>
<input type="password" id="password-confirm" x-model="password" class="w-full input"
placeholder="Enter your password">
</form>
<p x-show="passwordError" x-text="passwordError" class="mt-1 text-sm text-red-500"></p>
@error('password')
<p class="mt-1 text-sm text-red-500">{{ $message }}</p>
@enderror
</div>
</div> </div>
<div class="flex flex-col gap-2 mb-4"> @endif
<label for="password-confirm"
class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Your Password
</label>
<form @submit.prevent @keydown.enter.prevent>
<input type="password" id="password-confirm" x-model="password" class="w-full input"
placeholder="Enter your password">
</form>
<p x-show="passwordError" x-text="passwordError" class="mt-1 text-sm text-red-500"></p>
@error('password')
<p class="mt-1 text-sm text-red-500">{{ $message }}</p>
@enderror
</div>
</div>
</div> </div>
<!-- Navigation buttons --> <!-- Navigation buttons -->
<div class="flex flex-wrap gap-2 justify-between mt-4"> <div class="flex flex-wrap gap-2 justify-between mt-4">
@@ -304,41 +314,47 @@
</template> </template>
<template x-if="step === 2"> <template x-if="step === 2">
<x-forms.button x-bind:disabled="confirmWithText && userConfirmationText !== confirmationText" <x-forms.button
class="w-auto" isError x-bind:disabled="!disableTwoStepConfirmation && confirmWithText && userConfirmationText !== confirmationText"
class="w-auto"
isError
@click=" @click="
if (dispatchEvent) { if (dispatchEvent) {
$wire.dispatch(dispatchEventType, dispatchEventMessage); $wire.dispatch(dispatchEventType, dispatchEventMessage);
} }
if (confirmWithPassword) { if (confirmWithPassword) {
step++; step++;
} else { } else {
modalOpen = false; modalOpen = false;
resetModal(); resetModal();
submitForm(); submitForm();
}"> }
<span x-text="step2ButtonText"></span> "
>
<span x-text="disableTwoStepConfirmation ? 'Permanently Delete' : step2ButtonText"></span>
</x-forms.button> </x-forms.button>
</template> </template>
<template x-if="step === 3 && confirmWithPassword"> @if (!$disableTwoStepConfirmation)
<x-forms.button x-bind:disabled="!password" class="w-auto" isError <template x-if="step === 3 && confirmWithPassword">
@click=" <x-forms.button x-bind:disabled="!password" class="w-auto" isError
if (dispatchEvent) { @click="
$wire.dispatch(dispatchEventType, dispatchEventMessage); if (dispatchEvent) {
} $wire.dispatch(dispatchEventType, dispatchEventMessage);
submitForm().then((result) => {
if (result === true) {
modalOpen = false;
resetModal();
} else {
passwordError = result;
} }
}); submitForm().then((result) => {
"> if (result === true) {
<span x-text="step3ButtonText"></span> modalOpen = false;
</x-forms.button> resetModal();
</template> } else {
passwordError = result;
}
});
">
<span x-text="step3ButtonText"></span>
</x-forms.button>
</template>
@endif
</div> </div>
</div> </div>
</div> </div>