fix: remove old modal

This commit is contained in:
Andras Bacsai 2023-07-28 13:31:47 +02:00
parent 331b85c57e
commit 0d56d3a555
14 changed files with 86 additions and 99 deletions

View File

@ -7,6 +7,7 @@
use Illuminate\Database\Eloquent\Collection; use Illuminate\Database\Eloquent\Collection;
use Livewire\Component; use Livewire\Component;
use Visus\Cuid2\Cuid2; use Visus\Cuid2\Cuid2;
use Illuminate\Support\Str;
class StandaloneDocker extends Component class StandaloneDocker extends Component
{ {
@ -41,7 +42,11 @@ public function mount()
} else { } else {
$this->network = new Cuid2(7); $this->network = new Cuid2(7);
} }
$this->name = generate_random_name(); $this->name = Str::kebab("{$this->servers->first()->name}-{$this->network}");
}
public function generate_name() {
$this->server = Server::find($this->server_id);
$this->name = Str::kebab("{$this->server->name}-{$this->network}");
} }
private function createNetworkAndAttachToProxy() private function createNetworkAndAttachToProxy()
{ {
@ -50,7 +55,6 @@ private function createNetworkAndAttachToProxy()
} }
public function submit() public function submit()
{ {
$this->validate(); $this->validate();
try { try {
$this->server = Server::find($this->server_id); $this->server = Server::find($this->server_id);
@ -73,4 +77,4 @@ public function submit()
return general_error_handler(err: $e); return general_error_handler(err: $e);
} }
} }
} }

View File

@ -14,7 +14,6 @@ class Form extends Component
public $dockerVersion; public $dockerVersion;
public string|null $wildcard_domain = null; public string|null $wildcard_domain = null;
public int $cleanup_after_percentage; public int $cleanup_after_percentage;
public string|null $modalId = null;
protected $rules = [ protected $rules = [
'server.name' => 'required|min:6', 'server.name' => 'required|min:6',
@ -37,7 +36,6 @@ class Form extends Component
]; ];
public function mount() public function mount()
{ {
$this->modalId = new Cuid2(7);
$this->wildcard_domain = $this->server->settings->wildcard_domain; $this->wildcard_domain = $this->server->settings->wildcard_domain;
$this->cleanup_after_percentage = $this->server->settings->cleanup_after_percentage; $this->cleanup_after_percentage = $this->server->settings->cleanup_after_percentage;
} }
@ -90,4 +88,4 @@ public function submit()
$this->server->save(); $this->server->save();
$this->emit('success', 'Server updated successfully.'); $this->emit('success', 'Server updated successfully.');
} }
} }

View File

@ -14,10 +14,13 @@ class Button extends Component
public function __construct( public function __construct(
public bool $disabled = false, public bool $disabled = false,
public bool $isModal = false, public bool $isModal = false,
public bool $noStyle = false,
public string|null $modalId = null, public string|null $modalId = null,
public string $defaultClass = "btn btn-primary btn-sm font-normal text-white normal-case no-animation rounded border-none" public string $defaultClass = "btn btn-primary btn-sm font-normal text-white normal-case no-animation rounded border-none"
) { ) {
// if ($this->noStyle) {
$this->defaultClass = "";
}
} }
/** /**
@ -27,4 +30,4 @@ public function render(): View|Closure|string
{ {
return view('components.forms.button'); return view('components.forms.button');
} }
} }

View File

@ -1,42 +0,0 @@
@props([
'show' => null,
'title' => 'Delete',
'message' => 'Are you sure you want to delete this?',
'action' => 'delete',
])
<div x-cloak x-show="{{ $show }}" x-transition class="relative z-10" aria-labelledby="modal-title" role="dialog"
aria-modal="true">
<div class="fixed inset-0 transition-opacity bg-coolgray-100/75"></div>
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
<div
class="relative px-4 pt-5 pb-4 overflow-hidden text-left text-white transition-all transform rounded-lg shadow-xl bg-coolgray-200 sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
<div class="sm:flex sm:items-start">
<div
class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full sm:mx-0 sm:h-10 sm:w-10">
<svg class="w-8 h-8 text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<div class="mt-4 text-center sm:ml-4 sm:mt-1 sm:text-left">
<h3 class="text-base font-semibold leading-6 text-white" id="modal-title">{{ $title }}
</h3>
<div class="mt-2">
<p class=" text-neutral-200">{!! $message !!}</p>
</div>
</div>
</div>
<div class="gap-4 pt-10 sm:mt-4 sm:flex">
<x-forms.button class="w-24 bg-coolgray-200 hover:bg-coolgray-100"
x-on:click="{{ $show }} = false" type="button">Cancel
</x-forms.button>
<div class="flex-1"></div>
<x-forms.button class="w-24" wire:click='{{ $action }}'
x-on:click="{{ $show }} = false" isError type="button">Continue</x-forms.button>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,14 +1,17 @@
<div x-data="{ deleteDestination: false }"> <div>
<x-naked-modal show="deleteDestination" title="Delete Destination" <x-modal yesOrNo modalId="deleteDestination" modalTitle="Delete Destination">
message='This destination will be deleted. It is not reversible. <br>Please think again.' /> <x-slot:modalBody>
<p>This destination will be deleted. It is not reversible. <br>Please think again.</p>
</x-slot:modalBody>
</x-modal>
<form class="flex flex-col"> <form class="flex flex-col">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<h1>Destination</h1> <h1>Destination</h1>
<x-forms.button wire:click.prevent='submit' type="submit"> <x-forms.button wire:click.prevent='submit' type="submit">
Save Save
</x-forms.button> </x-forms.button>
@if ($destination->server->id === 0 && $destination->network !== 'coolify') @if ($destination->network !== 'coolify')
<x-forms.button x-on:click.prevent="deleteDestination = true"> <x-forms.button isError isModal modalId="deleteDestination">
Delete Delete
</x-forms.button> </x-forms.button>
@endif @endif

View File

@ -6,7 +6,7 @@
<x-forms.input id="name" label="Name" required /> <x-forms.input id="name" label="Name" required />
<x-forms.input id="network" label="Network" required /> <x-forms.input id="network" label="Network" required />
</div> </div>
<x-forms.select id="server_id" label="Select a server" required> <x-forms.select id="server_id" label="Select a server" required wire:change="generate_name">
<option disabled>Select a server</option> <option disabled>Select a server</option>
@foreach ($servers as $server) @foreach ($servers as $server)
<option value="{{ $server->id }}">{{ $server->name }}</option> <option value="{{ $server->id }}">{{ $server->name }}</option>

View File

@ -1,6 +1,9 @@
<div x-data="{ deletePrivateKey: false, showPrivateKey: false }"> <div x-data="{ showPrivateKey: false }">
<x-naked-modal show="deletePrivateKey" title="Delete Private Key" <x-modal yesOrNo modalId="deletePrivateKey" modalTitle="Delete Private Key">
message='This private key will be deleted. It is not reversible. <br>Please think again.' /> <x-slot:modalBody>
<p>This private key will be deleted. It is not reversible. <br>Please think again.</p>
</x-slot:modalBody>
</x-modal>
<form class="flex flex-col gap-2" wire:submit.prevent='changePrivateKey'> <form class="flex flex-col gap-2" wire:submit.prevent='changePrivateKey'>
<div class="flex items-end gap-2"> <div class="flex items-end gap-2">
<h1>Private Key</h1> <h1>Private Key</h1>
@ -8,7 +11,7 @@
Save Save
</x-forms.button> </x-forms.button>
@if ($private_key->id > 0) @if ($private_key->id > 0)
<x-forms.button isError x-on:click.prevent="deletePrivateKey = true"> <x-forms.button isError isModal modalId="deletePrivateKey">
Delete Delete
</x-forms.button> </x-forms.button>
@endif @endif

View File

@ -1,7 +1,8 @@
<div x-data="{ deleteEnvironment: false }"> <div>
<x-naked-modal show="deleteEnvironment" title="Delete Environment" <x-modal yesOrNo modalId="deleteEnvironment" modalTitle="Delete Environment">
message='This environment will be deleted. It is not reversible. <br>Please think again.' /> <x-slot:modalBody>
<x-forms.button isError x-on:click.prevent="deleteEnvironment = true"> <p>This environment will be deleted. It is not reversible. <br>Please think again.</p>
Delete Environment </x-slot:modalBody>
</x-forms.button> </x-modal>
<x-forms.button isError isModal modalId="deleteEnvironment"> Delete Environment </x-forms.button>
</div> </div>

View File

@ -1,7 +1,10 @@
<div x-data="{ deleteProject: false }"> <div>
<x-naked-modal show="deleteProject" title="Delete Project" <x-modal yesOrNo modalId="deleteProject" modalTitle="Delete Project">
message='This project will be deleted. It is not reversible. <br>Please think again.' /> <x-slot:modalBody>
<x-forms.button isError x-on:click.prevent="deleteProject = true"> <p>This project will be deleted. It is not reversible. <br>Please think again.</p>
</x-slot:modalBody>
</x-modal>
<x-forms.button isError isModal modalId="deleteProject">
Delete Project Delete Project
</x-forms.button> </x-forms.button>
</div> </div>

View File

@ -1,19 +1,21 @@
<div x-data="{ changeLocalhost: false }"> <div>
<x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Server"> <x-modal yesOrNo modalId="deleteServer" modalTitle="Delete Server">
<x-slot:modalBody> <x-slot:modalBody>
<p>This server will be deleted. It is not reversible. <br>Please think again..</p> <p>This server will be deleted. It is not reversible. <br>Please think again..</p>
</x-slot:modalBody> </x-slot:modalBody>
</x-modal> </x-modal>
<x-naked-modal show="changeLocalhost" action="submit" title="Change localhost" <x-modal yesOrNo modalId="changeLocalhost" modalTitle="Change Localhost" action="submit">
message='You could lost a lot of functionalities if you change the server details of the server where Coolify is running on.<br>Please think again.' /> <x-slot:modalBody>
<p>You could lost a lot of functionalities if you change the server details of the server where Coolify is
running on.<br>Please think again.</p>
</x-slot:modalBody>
</x-modal>
@if ($server->settings->is_reachable) @if ($server->settings->is_reachable)
<form wire:submit.prevent='submit' class="flex flex-col"> <form wire:submit.prevent='submit' class="flex flex-col">
<div class="flex gap-2"> <div class="flex gap-2">
<h2>General</h2> <h2>General</h2>
@if ($server->id === 0) @if ($server->id === 0)
<x-forms.button x-on:click.prevent="changeLocalhost = true">Save</x-forms.button> <x-forms.button isModal modalId="changeLocalhost">Save</x-forms.button>
@else @else
<x-forms.button type="submit">Save</x-forms.button> <x-forms.button type="submit">Save</x-forms.button>
@endif @endif
@ -86,7 +88,7 @@
back! back!
</div> </div>
@if ($server->id !== 0 || isDev()) @if ($server->id !== 0 || isDev())
<x-forms.button isError isModal modalId="{{ $modalId }}"> <x-forms.button isError isModal modalId="deleteServer">
Delete Delete
</x-forms.button> </x-forms.button>
@endif @endif

View File

@ -1,6 +1,4 @@
<div x-data="{ stopProxy: false }"> <div>
<x-naked-modal show="stopProxy" action="stopProxy" title="Stop Proxy"
message='This proxy will be stopped. It is not reversible. <br>All resources will be unavailable. <br>Please think again.' />
@if ($server->settings->is_usable) @if ($server->settings->is_usable)
@if ($server->proxy->type) @if ($server->proxy->type)
<div x-init="$wire.checkProxySettingsInSync"> <div x-init="$wire.checkProxySettingsInSync">

View File

@ -1,6 +1,14 @@
<div> <div>
@if (data_get($server, 'proxy.type')) @if (data_get($server, 'proxy.type'))
@if (data_get($server, 'proxy.status') === 'running') @if (data_get($server, 'proxy.status') === 'running')
<x-modal yesOrNo modalId="stopProxy" modalTitle="Stop Proxy" action="stop">
<x-slot:modalBody>
<p>This proxy will be stopped. It is not reversible. <br>All resources will be unavailable.
<br>Please think
again.
</p>
</x-slot:modalBody>
</x-modal>
<div class="flex gap-4"> <div class="flex gap-4">
<div class="group"> <div class="group">
<label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Links <label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Links
@ -49,8 +57,9 @@ class="relative text-xs text-white normal-case rounded min-w-max menu bg-coolgra
</svg>Restart</div> </svg>Restart</div>
</li> </li>
<li> <li>
<div class="rounded-none hover:bg-red-500 hover:text-white" wire:click='stop'><svg <x-forms.button isModal noStyle modalId="stopProxy"
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" class="rounded-none hover:bg-red-500 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@ -59,7 +68,9 @@ class="relative text-xs text-white normal-case rounded min-w-max menu bg-coolgra
<path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5" /> <path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5" />
<path <path
d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" /> d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
</svg>Stop</div> </svg>Stop
</x-forms.button>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -1,6 +1,9 @@
<div x-data="{ deleteSource: false }"> <div>
<x-naked-modal show="deleteSource" title="Delete Source" <x-modal yesOrNo modalId="deleteSource" modalTitle="Delete Source">
message='This source will be deleted. It is not reversible. <br>Please think again.' /> <x-slot:modalBody>
<p>This source will be deleted. It is not reversible. <br>Please think again.</p>
</x-slot:modalBody>
</x-modal>
<form wire:submit.prevent='submit'> <form wire:submit.prevent='submit'>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<h1>GitHub App</h1> <h1>GitHub App</h1>
@ -19,16 +22,12 @@
@endif @endif
</x-forms.button> </x-forms.button>
</a> </a>
<x-forms.button isError x-on:click.prevent="deleteSource = true">
Delete
</x-forms.button>
@else @else
<x-forms.button disabled type="submit">Save</x-forms.button> <x-forms.button disabled type="submit">Save</x-forms.button>
<x-forms.button isError x-on:click.prevent="deleteSource = true">
Delete
</x-forms.button>
@endif @endif
<x-forms.button isError isModal modalId="deleteSource">
Delete
</x-forms.button>
</div> </div>
</div> </div>
<div class="pt-2 pb-10 ">Your Private GitHub App for private repositories.</div> <div class="pt-2 pb-10 ">Your Private GitHub App for private repositories.</div>

View File

@ -1,6 +1,9 @@
<div x-data="{ deleteTeam: false }"> <div>
<x-naked-modal show="deleteTeam" title="Delete Team" <x-modal yesOrNo modalId="deleteTeam" modalTitle="Delete Team">
message='This team will be deleted. It is not reversible. <br>Please think again.' /> <x-slot:modalBody>
<p>This team be deleted. It is not reversible. <br>Please think again.</p>
</x-slot:modalBody>
</x-modal>
<h3>Danger Zone</h3> <h3>Danger Zone</h3>
<div class="pb-4">Woah. I hope you know what are you doing.</div> <div class="pb-4">Woah. I hope you know what are you doing.</div>
<h4 class="pb-4">Delete Team</h4> <h4 class="pb-4">Delete Team</h4>
@ -8,12 +11,13 @@
<div>This is the default team. You can't delete it.</div> <div>This is the default team. You can't delete it.</div>
@elseif(auth()->user()->teams()->get()->count() === 1) @elseif(auth()->user()->teams()->get()->count() === 1)
<div>You can't delete your last team.</div> <div>You can't delete your last team.</div>
@elseif(auth()->user()->currentTeam()->subscription?->lemon_status !== 'cancelled') @elseif(auth()->user()->currentTeam()->subscription &&
auth()->user()->currentTeam()->subscription?->lemon_status !== 'cancelled')
<div>Please cancel your subscription before delete this team (Manage My Subscription button).</div> <div>Please cancel your subscription before delete this team (Manage My Subscription button).</div>
@else @else
@if (session('currentTeam')->isEmpty()) @if (session('currentTeam')->isEmpty())
<div class="pb-4">This will delete your team. Beware! There is no coming back!</div> <div class="pb-4">This will delete your team. Beware! There is no coming back!</div>
<x-forms.button isError x-on:click.prevent="deleteTeam = true"> <x-forms.button isError isModal modalId="deleteTeam">
Delete Delete
</x-forms.button> </x-forms.button>
@else @else