feat: improve Proxmox modal handling by consolidating backdrop and transition effects across boot order and cloud-init views for a more cohesive user experience
This commit is contained in:
@@ -728,50 +728,51 @@
|
|||||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors" :disabled="!$this->hasChanges">
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors" :disabled="!$this->hasChanges">
|
||||||
<x-ri-question-line class="size-4" />
|
<x-ri-question-line class="size-4" />
|
||||||
</button>
|
</button>
|
||||||
<!-- Modal Backdrop -->
|
<!-- Modal Backdrop -->
|
||||||
<div x-show="open"
|
<div x-show="open"
|
||||||
x-transition:enter="transition ease-out duration-300"
|
x-transition:enter="transition ease-out duration-300"
|
||||||
x-transition:enter-start="opacity-0"
|
x-transition:enter-start="opacity-0"
|
||||||
x-transition:enter-end="opacity-100"
|
x-transition:enter-end="opacity-100"
|
||||||
x-transition:leave="transition ease-in duration-200"
|
x-transition:leave="transition ease-in duration-200"
|
||||||
x-transition:leave-start="opacity-100"
|
x-transition:leave-start="opacity-100"
|
||||||
x-transition:leave-end="opacity-0"
|
x-transition:leave-end="opacity-0"
|
||||||
@click="open = false"
|
@click="open = false"
|
||||||
@keydown.escape.window="open = false"
|
@keydown.escape.window="open = false"
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||||
style="display: none;">
|
style="display: none;">
|
||||||
</div>
|
</div>
|
||||||
<!-- Modal -->
|
<!-- Modal -->
|
||||||
<div x-show="open"
|
<div x-show="open"
|
||||||
x-transition:enter="transition ease-out duration-300"
|
x-transition:enter="transition ease-out duration-300"
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
x-transition:enter-start="opacity-0 scale-95"
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
x-transition:enter-end="opacity-100 scale-100"
|
||||||
x-transition:leave="transition ease-in duration-200"
|
x-transition:leave="transition ease-in duration-200"
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
x-transition:leave-start="opacity-100 scale-100"
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
x-transition:leave-end="opacity-0 scale-95"
|
||||||
@click.away="open = false"
|
@click.away="open = false"
|
||||||
@keydown.escape.window="open = false"
|
@keydown.escape.window="open = false"
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||||
style="display: none;">
|
style="display: none;">
|
||||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
||||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||||
<x-ri-close-line class="size-5" />
|
<x-ri-close-line class="size-5" />
|
||||||
</button>
|
</button>
|
||||||
<div class="flex items-center gap-3 mb-4 pr-8">
|
<div class="flex items-center gap-3 mb-4 pr-8">
|
||||||
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
||||||
<x-ri-restart-line class="size-5 text-primary" />
|
<x-ri-restart-line class="size-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
||||||
|
Reset to Current
|
||||||
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||||
Reset to Current
|
Discards any unsaved changes to the boot order and restores it to match the last saved configuration.
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
||||||
Discards any unsaved changes to the boot order and restores it to match the last saved configuration.
|
|
||||||
</p>
|
|
||||||
<div class="pt-4 mt-4 border-t border-neutral/30">
|
|
||||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
||||||
This button is only enabled when there are unsaved changes. Use this if you want to undo modifications without refreshing the entire configuration from the server.
|
|
||||||
</p>
|
</p>
|
||||||
|
<div class="pt-4 mt-4 border-t border-neutral/30">
|
||||||
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||||
|
This button is only enabled when there are unsaved changes. Use this if you want to undo modifications without refreshing the entire configuration from the server.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -786,57 +787,57 @@
|
|||||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors" :disabled="!$this->hasChanges">
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors" :disabled="!$this->hasChanges">
|
||||||
<x-ri-question-line class="size-4" />
|
<x-ri-question-line class="size-4" />
|
||||||
</button>
|
</button>
|
||||||
<!-- Modal Backdrop -->
|
<!-- Modal Backdrop -->
|
||||||
<div x-show="open"
|
<div x-show="open"
|
||||||
x-transition:enter="transition ease-out duration-300"
|
x-transition:enter="transition ease-out duration-300"
|
||||||
x-transition:enter-start="opacity-0"
|
x-transition:enter-start="opacity-0"
|
||||||
x-transition:enter-end="opacity-100"
|
x-transition:enter-end="opacity-100"
|
||||||
x-transition:leave="transition ease-in duration-200"
|
x-transition:leave="transition ease-in duration-200"
|
||||||
x-transition:leave-start="opacity-100"
|
x-transition:leave-start="opacity-100"
|
||||||
x-transition:leave-end="opacity-0"
|
x-transition:leave-end="opacity-0"
|
||||||
@click="open = false"
|
@click="open = false"
|
||||||
@keydown.escape.window="open = false"
|
@keydown.escape.window="open = false"
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||||
style="display: none;">
|
style="display: none;">
|
||||||
</div>
|
</div>
|
||||||
<!-- Modal -->
|
<!-- Modal -->
|
||||||
<div x-show="open"
|
<div x-show="open"
|
||||||
x-transition:enter="transition ease-out duration-300"
|
x-transition:enter="transition ease-out duration-300"
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
x-transition:enter-start="opacity-0 scale-95"
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
x-transition:enter-end="opacity-100 scale-100"
|
||||||
x-transition:leave="transition ease-in duration-200"
|
x-transition:leave="transition ease-in duration-200"
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
x-transition:leave-start="opacity-100 scale-100"
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
x-transition:leave-end="opacity-0 scale-95"
|
||||||
@click.away="open = false"
|
@click.away="open = false"
|
||||||
@keydown.escape.window="open = false"
|
@keydown.escape.window="open = false"
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||||
style="display: none;">
|
style="display: none;">
|
||||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
||||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||||
<x-ri-close-line class="size-5" />
|
<x-ri-close-line class="size-5" />
|
||||||
</button>
|
</button>
|
||||||
<div class="flex items-center gap-3 mb-4 pr-8">
|
<div class="flex items-center gap-3 mb-4 pr-8">
|
||||||
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
||||||
<x-ri-save-line class="size-5 text-primary" />
|
<x-ri-save-line class="size-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
||||||
|
Save Boot Order
|
||||||
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||||
Save Boot Order
|
Commits your boot order changes to the QEMU server configuration. The new boot sequence will be applied to the virtual machine and will take effect on the next power event (start, reboot, or reset).
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
||||||
Commits your boot order changes to the QEMU server configuration. The new boot sequence will be applied to the virtual machine and will take effect on the next power event (start, reboot, or reset).
|
|
||||||
</p>
|
|
||||||
<div class="pt-4 mt-4 border-t border-neutral/30">
|
|
||||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75 mb-2">
|
|
||||||
If the boot order is empty, the system will reset to the default platform boot sequence.
|
|
||||||
</p>
|
|
||||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
||||||
This button is only enabled when there are unsaved changes.
|
|
||||||
</p>
|
</p>
|
||||||
|
<div class="pt-4 mt-4 border-t border-neutral/30">
|
||||||
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75 mb-2">
|
||||||
|
If the boot order is empty, the system will reset to the default platform boot sequence.
|
||||||
|
</p>
|
||||||
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||||
|
This button is only enabled when there are unsaved changes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -53,32 +53,10 @@
|
|||||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||||
<x-ri-question-line class="size-4" />
|
<x-ri-question-line class="size-4" />
|
||||||
</button>
|
</button>
|
||||||
<!-- Modal Backdrop -->
|
<div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
<div x-show="open"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="open = false">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="open = false"
|
|
||||||
@keydown.escape.window="open = false"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-show="open"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="open = false"
|
|
||||||
@keydown.escape.window="open = false"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
|
||||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||||
<x-ri-close-line class="size-5" />
|
<x-ri-close-line class="size-5" />
|
||||||
</button>
|
</button>
|
||||||
@@ -124,32 +102,10 @@
|
|||||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||||
<x-ri-question-line class="size-4" />
|
<x-ri-question-line class="size-4" />
|
||||||
</button>
|
</button>
|
||||||
<!-- Modal Backdrop -->
|
<div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
<div x-show="open"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="open = false">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="open = false"
|
|
||||||
@keydown.escape.window="open = false"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-show="open"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="open = false"
|
|
||||||
@keydown.escape.window="open = false"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
|
||||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||||
<x-ri-close-line class="size-5" />
|
<x-ri-close-line class="size-5" />
|
||||||
</button>
|
</button>
|
||||||
@@ -206,32 +162,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<p class="text-xs text-base/60">Use distro-friendly names. Leave blank to keep the template default.</p>
|
<p class="text-xs text-base/60">Use distro-friendly names. Leave blank to keep the template default.</p>
|
||||||
|
|
||||||
<!-- Modal Backdrop -->
|
<div x-cloak x-show="showCiUserModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
|
||||||
<div x-cloak x-show="showCiUserModal"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showCiUserModal = false"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="showCiUserModal = false">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="showCiUserModal = false"
|
|
||||||
@keydown.escape.window="showCiUserModal = false"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-cloak x-show="showCiUserModal"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="showCiUserModal = false"
|
|
||||||
@keydown.escape.window="showCiUserModal = false"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<h4 class="text-base font-semibold text-base/90">Edit Cloud-init User</h4>
|
<h4 class="text-base font-semibold text-base/90">Edit Cloud-init User</h4>
|
||||||
<button type="button"
|
<button type="button"
|
||||||
@@ -291,32 +225,10 @@
|
|||||||
<p class="text-xs text-base/60">Matches the Overview tab control. Use Save for database only, Save & Apply to push via cloud-init.</p>
|
<p class="text-xs text-base/60">Matches the Overview tab control. Use Save for database only, Save & Apply to push via cloud-init.</p>
|
||||||
|
|
||||||
@if(isset($server->password) && $server->password)
|
@if(isset($server->password) && $server->password)
|
||||||
<!-- Modal Backdrop -->
|
<div x-cloak x-show="showPasswordViewModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
|
||||||
<div x-cloak x-show="showPasswordViewModal"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showPasswordViewModal = false"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0"
|
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="showPasswordViewModal = false"
|
|
||||||
@keydown.escape.window="showPasswordViewModal = false"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-cloak x-show="showPasswordViewModal"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="showPasswordViewModal = false"
|
|
||||||
@keydown.escape.window="showPasswordViewModal = false"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
|
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
|
||||||
|
x-on:keydown.escape.window="showPasswordViewModal = false"
|
||||||
x-data="{
|
x-data="{
|
||||||
copied: false,
|
copied: false,
|
||||||
copyText: {{ json_encode($server->password) }},
|
copyText: {{ json_encode($server->password) }},
|
||||||
@@ -350,32 +262,10 @@
|
|||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<!-- Modal Backdrop -->
|
<div x-cloak x-show="showPasswordEditModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
|
||||||
<div x-cloak x-show="showPasswordEditModal"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showPasswordEditModal = false; $wire.cancelEditingPassword()"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="showPasswordEditModal = false; $wire.cancelEditingPassword()"
|
|
||||||
@keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-cloak x-show="showPasswordEditModal"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="showPasswordEditModal = false; $wire.cancelEditingPassword()"
|
|
||||||
@keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<h4 class="text-base font-semibold text-base/90">Edit Root Password</h4>
|
<h4 class="text-base font-semibold text-base/90">Edit Root Password</h4>
|
||||||
<button type="button"
|
<button type="button"
|
||||||
@@ -450,32 +340,10 @@
|
|||||||
<x-ri-close-line class="inline size-4" />
|
<x-ri-close-line class="inline size-4" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Modal Backdrop -->
|
<div x-cloak x-show="showKeyModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
|
||||||
<div x-cloak x-show="showKeyModal"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showKeyModal = false"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="showKeyModal = false">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="showKeyModal = false"
|
|
||||||
@keydown.escape.window="showKeyModal = false"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-cloak x-show="showKeyModal"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="showKeyModal = false"
|
|
||||||
@keydown.escape.window="showKeyModal = false"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<h4 class="text-base font-semibold text-base/90">SSH Public Key</h4>
|
<h4 class="text-base font-semibold text-base/90">SSH Public Key</h4>
|
||||||
<button type="button"
|
<button type="button"
|
||||||
@@ -510,32 +378,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<p class="text-xs text-base/60">Add as many keys as needed. The platform management key is always kept but never shown.</p>
|
<p class="text-xs text-base/60">Add as many keys as needed. The platform management key is always kept but never shown.</p>
|
||||||
|
|
||||||
<!-- Modal Backdrop -->
|
<div x-cloak x-show="showAddKeyModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
|
||||||
<div x-cloak x-show="showAddKeyModal"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showAddKeyModal = false"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="showAddKeyModal = false">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="showAddKeyModal = false"
|
|
||||||
@keydown.escape.window="showAddKeyModal = false"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-cloak x-show="showAddKeyModal"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="showAddKeyModal = false"
|
|
||||||
@keydown.escape.window="showAddKeyModal = false"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<h4 class="text-base font-semibold text-base/90">Add SSH Public Key</h4>
|
<h4 class="text-base font-semibold text-base/90">Add SSH Public Key</h4>
|
||||||
<button type="button"
|
<button type="button"
|
||||||
@@ -584,32 +430,10 @@
|
|||||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||||
<x-ri-question-line class="size-4" />
|
<x-ri-question-line class="size-4" />
|
||||||
</button>
|
</button>
|
||||||
<!-- Modal Backdrop -->
|
<div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
<div x-show="open"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="open = false">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="open = false"
|
|
||||||
@keydown.escape.window="open = false"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-show="open"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="open = false"
|
|
||||||
@keydown.escape.window="open = false"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
|
||||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||||
<x-ri-close-line class="size-5" />
|
<x-ri-close-line class="size-5" />
|
||||||
</button>
|
</button>
|
||||||
@@ -701,32 +525,10 @@
|
|||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal Backdrop -->
|
<div x-cloak x-show="showNetworkModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
|
||||||
<div x-cloak x-show="showNetworkModal"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showNetworkModal = false; $wire.cancelEditingNetwork()"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-2xl mx-4 p-5 space-y-4"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="showNetworkModal = false; $wire.cancelEditingNetwork()">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="showNetworkModal = false; $wire.cancelEditingNetwork()"
|
|
||||||
@keydown.escape.window="showNetworkModal = false; $wire.cancelEditingNetwork()"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-cloak x-show="showNetworkModal"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="showNetworkModal = false; $wire.cancelEditingNetwork()"
|
|
||||||
@keydown.escape.window="showNetworkModal = false; $wire.cancelEditingNetwork()"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-2xl mx-4 p-5 space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<h4 class="text-base font-semibold text-base/90">Edit Network Configuration</h4>
|
<h4 class="text-base font-semibold text-base/90">Edit Network Configuration</h4>
|
||||||
<button type="button"
|
<button type="button"
|
||||||
@@ -787,32 +589,10 @@
|
|||||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||||
<x-ri-question-line class="size-4" />
|
<x-ri-question-line class="size-4" />
|
||||||
</button>
|
</button>
|
||||||
<!-- Modal Backdrop -->
|
<div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
<div x-show="open"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="open = false">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="open = false"
|
|
||||||
@keydown.escape.window="open = false"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-show="open"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="open = false"
|
|
||||||
@keydown.escape.window="open = false"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
|
||||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||||
<x-ri-close-line class="size-5" />
|
<x-ri-close-line class="size-5" />
|
||||||
</button>
|
</button>
|
||||||
@@ -869,32 +649,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<p class="text-xs text-base/60">Appended to short hostnames for resolution.</p>
|
<p class="text-xs text-base/60">Appended to short hostnames for resolution.</p>
|
||||||
|
|
||||||
<!-- Modal Backdrop -->
|
<div x-cloak x-show="showDnsDomainModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
|
||||||
<div x-cloak x-show="showDnsDomainModal"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showDnsDomainModal = false"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="showDnsDomainModal = false">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="showDnsDomainModal = false"
|
|
||||||
@keydown.escape.window="showDnsDomainModal = false"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-cloak x-show="showDnsDomainModal"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="showDnsDomainModal = false"
|
|
||||||
@keydown.escape.window="showDnsDomainModal = false"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<h4 class="text-base font-semibold text-base/90">Edit DNS Domain</h4>
|
<h4 class="text-base font-semibold text-base/90">Edit DNS Domain</h4>
|
||||||
<button type="button"
|
<button type="button"
|
||||||
@@ -946,32 +704,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<p class="text-xs text-base/60 mt-1">Entries are applied in order. Add one IPv4/IPv6 resolver per line.</p>
|
<p class="text-xs text-base/60 mt-1">Entries are applied in order. Add one IPv4/IPv6 resolver per line.</p>
|
||||||
|
|
||||||
<!-- Modal Backdrop -->
|
<div x-cloak x-show="showAddDnsModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
|
||||||
<div x-cloak x-show="showAddDnsModal"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showAddDnsModal = false"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="showAddDnsModal = false">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="showAddDnsModal = false"
|
|
||||||
@keydown.escape.window="showAddDnsModal = false"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-cloak x-show="showAddDnsModal"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="showAddDnsModal = false"
|
|
||||||
@keydown.escape.window="showAddDnsModal = false"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative bg-background-secondary border border-neutral rounded-lg shadow-xl w-full max-w-xl mx-4 p-5 space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<h4 class="text-base font-semibold text-base/90">Add DNS Nameserver</h4>
|
<h4 class="text-base font-semibold text-base/90">Add DNS Nameserver</h4>
|
||||||
<button type="button"
|
<button type="button"
|
||||||
@@ -1075,32 +811,10 @@
|
|||||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||||
<x-ri-question-line class="size-4" />
|
<x-ri-question-line class="size-4" />
|
||||||
</button>
|
</button>
|
||||||
<!-- Modal Backdrop -->
|
<div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
<div x-show="open"
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||||
x-transition:enter="transition ease-out duration-300"
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6"
|
||||||
x-transition:enter-start="opacity-0"
|
x-on:keydown.escape.window="open = false">
|
||||||
x-transition:enter-end="opacity-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
@click="open = false"
|
|
||||||
@keydown.escape.window="open = false"
|
|
||||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
||||||
style="display: none;">
|
|
||||||
</div>
|
|
||||||
<!-- Modal -->
|
|
||||||
<div x-show="open"
|
|
||||||
x-transition:enter="transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="opacity-0 scale-95"
|
|
||||||
@click.away="open = false"
|
|
||||||
@keydown.escape.window="open = false"
|
|
||||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
||||||
style="display: none;">
|
|
||||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
|
||||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||||
<x-ri-close-line class="size-5" />
|
<x-ri-close-line class="size-5" />
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user