rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #4017 from coollabsio/fix-rendering-glitch

Browse source 
Fix: 2-step confirmation button rendering bug
This commit is contained in:
Andras Bacsai 2024-10-28 21:04:32 +01:00 committed by GitHub
commit 9217d5aa96
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 64 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
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 @@ class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-f
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,36 @@ class="p-2 mt-1 w-full text-black rounded input">
</div> </div>
@endif @endif
@endif @endif
<div class="flex flex-wrap gap-2 justify-between mt-4">
@if (!empty($checkboxes))
<x-forms.button @click="step--" class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
Back
</x-forms.button>
@else
<x-forms.button @click="modalOpen = false; resetModal()"
class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
Cancel
</x-forms.button>
@endif
<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,68 +331,30 @@ class="w-full input" placeholder="Enter your password">
<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">
<template x-if="step > initialStep">
<x-forms.button @click="step--" class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
Back
</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"> <div class="flex flex-wrap gap-2 justify-between mt-4">
<x-forms.button @click="step++" class="w-auto" isError> <x-forms.button @click="step--" class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
<span x-text="step1ButtonText"></span> Back
</x-forms.button> </x-forms.button>
</template> <x-forms.button x-bind:disabled="!password" class="w-auto" isError
@click="
<template x-if="step === 2"> if (dispatchEvent) {
<x-forms.button $wire.dispatch(dispatchEventType, dispatchEventMessage);
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
@click="
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;
password = ''; // Clear the password field
}
});
">
<span x-text="step3ButtonText"></span>
</x-forms.button>
</div>
</div>
@endif @endif
</div> </div>
</div> </div>