From 2676f9a8db0f45468bef90c7d7af4ec1cc52c4bb Mon Sep 17 00:00:00 2001
From: peaklabs-dev <122374094+peaklabs-dev@users.noreply.github.com>
Date: Fri, 8 Nov 2024 15:09:54 +0100
Subject: [PATCH] fix disable 2 stp confirmation UI

---
 .../views/livewire/settings/index.blade.php   | 56 +++++++++++--------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/resources/views/livewire/settings/index.blade.php b/resources/views/livewire/settings/index.blade.php
index 193156bf0..7ab92d9c1 100644
--- a/resources/views/livewire/settings/index.blade.php
+++ b/resources/views/livewire/settings/index.blade.php
@@ -130,29 +130,39 @@
         </div>
 
         <h4 class="py-4">Confirmation Settings</h4>
-        @if ($disable_two_step_confirmation)
-            <div class="md:w-96 pb-4">
-                <x-forms.checkbox instantSave id="disable_two_step_confirmation" label="Disable Two Step Confirmation"
-                    helper="When disabled, you will not need to confirm actions with a text and user password. This significantly reduces security and may lead to accidental deletions or unwanted changes. Use with extreme caution, especially on production servers." />
+        <div x-data="{ open: false }" class="mb-32 md:w-[40rem]">
+            <button type="button" @click.prevent="open = !open" class="flex items-center justify-between w-full p-4 bg-coolgray-100 hover:bg-coolgray-200 rounded-md">
+                <span class="font-medium">Two-Step Confirmation Settings</span>
+                <svg class="w-5 h-5 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+            </button>
+            
+            <div x-show="open" x-transition class="mt-4">
+                @if ($disable_two_step_confirmation)
+                    <div class="md:w-96 pb-4">
+                        <x-forms.checkbox instantSave id="disable_two_step_confirmation" label="Disable Two Step Confirmation"
+                            helper="When disabled, you will not need to confirm actions with a text and user password. This significantly reduces security and may lead to accidental deletions or unwanted changes. Use with extreme caution, especially on production servers." />
+                    </div>
+                @else
+                    <div class="md:w-96 pb-4">
+                        <x-modal-confirmation title="Disable Two Step Confirmation?"
+                            buttonTitle="Disable Two Step Confirmation" isErrorButton submitAction="toggleTwoStepConfirmation"
+                            :actions="[
+                                'Tow Step confimation will be disabled globally.',
+                                'Disabling two step confirmation reduces security (as anyone can easily delete anything).',
+                                'The risk of accidental actions will increase.',
+                            ]" confirmationText="DISABLE TWO STEP CONFIRMATION"
+                            confirmationLabel="Please type the confirmation text to disable two step confirmation."
+                            shortConfirmationLabel="Confirmation text" step3ButtonText="Disable Two Step Confirmation" />
+                    </div>
+                    <div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error w-full">
+                        <p class="font-bold">Warning!</p>
+                        <p>Disabling two step confirmation reduces security (as anyone can easily delete anything) and increases
+                            the risk of accidental actions. This is not recommended for production servers.</p>
+                    </div>
+                @endif
             </div>
-        @else
-            <div class="md:w-96 pb-4">
-                <x-modal-confirmation title="Disable Two Step Confirmation?"
-                    buttonTitle="Disable Two Step Confirmation" isErrorButton submitAction="toggleTwoStepConfirmation"
-                    :actions="[
-                        'Tow Step confimation will be disabled globally.',
-                        'Disabling two step confirmation reduces security (as anyone can easily delete anything).',
-                        'The risk of accidental actions will increase.',
-                    ]" confirmationText="DISABLE TWO STEP CONFIRMATION"
-                    confirmationLabel="Please type the confirmation text to disable two step confirmation."
-                    shortConfirmationLabel="Confirmation text" step3ButtonText="Disable Two Step Confirmation" />
-            </div>
-            <div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error md:w-[40rem] w-full mb-32">
-                <p class="font-bold">Warning!</p>
-                <p>Disabling two step confirmation reduces security (as anyone can easily delete anything) and increases
-                    the
-                    risk of accidental actions. This is not recommended for production servers.</p>
-            </div>
-        @endif
+        </div>
     </form>
 </div>