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

fix rendering glitch with tow step confirmation

Browse Source
This commit is contained in:
peaklabs-dev
2024-10-25 20:58:17 +02:00
parent a1bd218d16
commit 34ff8e9a98
1 changed files with 57 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,8 +23,8 @@
]) ])
@php @php
$settings = instanceSettings(); use App\Models\InstanceSettings;
$disableTwoStepConfirmation = $settings->disable_two_step_confirmation ?? false; $disableTwoStepConfirmation = data_get(InstanceSettings::get(), 'disable_two_step_confirmation');
@endphp @endphp
<div x-data="{ <div x-data="{
@@ -193,6 +193,16 @@
x-bind:checked="selectedActions.includes('{{ $checkbox['id'] }}')" /> x-bind:checked="selectedActions.includes('{{ $checkbox['id'] }}')" />
</div> </div>
@endforeach @endforeach
<div class="flex flex-wrap gap-2 justify-between mt-4">
<x-forms.button @click="modalOpen = false; resetModal()"
class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
Cancel
</x-forms.button>
<x-forms.button @click="step++" class="w-auto" isError>
<span x-text="step1ButtonText"></span>
</x-forms.button>
</div>
</div> </div>
@endif @endif
@@ -267,6 +277,29 @@
</div> </div>
@endif @endif
@endif @endif
<div class="flex flex-wrap gap-2 justify-between mt-4">
<x-forms.button @click="step--" class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
Back
</x-forms.button>
<x-forms.button
x-bind:disabled="!disableTwoStepConfirmation && confirmWithText && userConfirmationText !== confirmationText"
class="w-auto" isError
@click="
if (dispatchEvent) {
$wire.dispatch(dispatchEventType, dispatchEventMessage);
}
if (confirmWithPassword && !disableTwoStepConfirmation) {
step++;
} else {
modalOpen = false;
resetModal();
submitForm();
}
">
<span x-text="step2ButtonText"></span>
</x-forms.button>
</div>
</div> </div>
<!-- Step 3: Password confirmation --> <!-- Step 3: Password confirmation -->
@@ -291,51 +324,11 @@
<p class="mt-1 text-sm text-red-500">{{ $message }}</p> <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
@enderror @enderror
</div> </div>
</div>
@endif
</div>
<!-- Navigation buttons -->
<div class="flex flex-wrap gap-2 justify-between mt-4"> <div class="flex flex-wrap gap-2 justify-between mt-4">
<template x-if="step > initialStep">
<x-forms.button @click="step--" class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300"> <x-forms.button @click="step--" class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
Back Back
</x-forms.button> </x-forms.button>
</template>
<template x-if="step === initialStep">
<x-forms.button @click="modalOpen = false; resetModal()"
class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
Cancel
</x-forms.button>
</template>
<template x-if="step === 1">
<x-forms.button @click="step++" class="w-auto" isError>
<span x-text="step1ButtonText"></span>
</x-forms.button>
</template>
<template x-if="step === 2">
<x-forms.button
x-bind:disabled="!disableTwoStepConfirmation && confirmWithText && userConfirmationText !== confirmationText"
class="w-auto" isError
@click="
if (dispatchEvent) {
$wire.dispatch(dispatchEventType, dispatchEventMessage);
}
if (confirmWithPassword) {
step++;
} else {
modalOpen = false;
resetModal();
submitForm();
}
">
<span x-text="step2ButtonText"></span>
</x-forms.button>
</template>
@if (!$disableTwoStepConfirmation)
<template x-if="step === 3 && confirmWithPassword">
<x-forms.button x-bind:disabled="!password" class="w-auto" isError <x-forms.button x-bind:disabled="!password" class="w-auto" isError
@click=" @click="
if (dispatchEvent) { if (dispatchEvent) {
@@ -347,12 +340,14 @@
resetModal(); resetModal();
} else { } else {
passwordError = result; passwordError = result;
password = ''; // Clear the password field
} }
}); });
"> ">
<span x-text="step3ButtonText"></span> <span x-text="step3ButtonText"></span>
</x-forms.button> </x-forms.button>
</template> </div>
</div>
@endif @endif
</div> </div>
</div> </div>