Manage site aliases (#206)

* manage site aliases

* build assets

* fix tests

resources/views/components/status.blade.php

@@ -4,11 +4,11 @@
 
 @php
     $class = [
-        "success" => "rounded-md border border-green-300 bg-green-50 px-2 py-1 text-xs uppercase text-green-500 dark:border-green-600 dark:bg-green-500 dark:bg-opacity-10",
-        "danger" => "rounded-md border border-red-300 bg-red-50 px-2 py-1 text-xs uppercase text-red-500 dark:border-red-600 dark:bg-red-500 dark:bg-opacity-10",
-        "warning" => "rounded-md border border-yellow-300 bg-yellow-50 px-2 py-1 text-xs uppercase text-yellow-500 dark:border-yellow-600 dark:bg-yellow-500 dark:bg-opacity-10",
-        "disabled" => "rounded-md border border-gray-300 bg-gray-50 px-2 py-1 text-xs uppercase text-gray-500 dark:border-gray-600 dark:bg-gray-500 dark:bg-opacity-30 dark:text-gray-400",
-        "info" => "rounded-md border border-primary-300 bg-primary-50 px-2 py-1 text-xs uppercase text-primary-500 dark:border-primary-600 dark:bg-primary-500 dark:bg-opacity-10",
+        "success" => "max-w-max rounded-md border border-green-300 bg-green-50 px-2 py-1 text-xs uppercase text-green-500 dark:border-green-600 dark:bg-green-500 dark:bg-opacity-10",
+        "danger" => "max-w-max rounded-md border border-red-300 bg-red-50 px-2 py-1 text-xs uppercase text-red-500 dark:border-red-600 dark:bg-red-500 dark:bg-opacity-10",
+        "warning" => "max-w-max rounded-md border border-yellow-300 bg-yellow-50 px-2 py-1 text-xs uppercase text-yellow-500 dark:border-yellow-600 dark:bg-yellow-500 dark:bg-opacity-10",
+        "disabled" => "max-w-max rounded-md border border-gray-300 bg-gray-50 px-2 py-1 text-xs uppercase text-gray-500 dark:border-gray-600 dark:bg-gray-500 dark:bg-opacity-30 dark:text-gray-400",
+        "info" => "max-w-max rounded-md border border-primary-300 bg-primary-50 px-2 py-1 text-xs uppercase text-primary-500 dark:border-primary-600 dark:bg-primary-500 dark:bg-opacity-10",
     ];
 @endphp
 

resources/views/components/td.blade.php

@@ -1,5 +1,5 @@
 <td
-    {!! $attributes->merge(["class" => "whitespace-nowrap px-6 py-4 text-gray-700 dark:text-gray-300 w-1"]) !!}
+    {!! $attributes->merge(["class" => "text-sm whitespace-nowrap px-6 py-4 text-gray-700 dark:text-gray-300 w-1"]) !!}
 >
     {{ $slot }}
 </td>

resources/views/site-settings/index.blade.php

@@ -3,6 +3,8 @@
 
     @include("site-settings.partials.change-php-version")
 
+    @include("site-settings.partials.update-aliases")
+
     @if ($site->source_control_id)
         @include("site-settings.partials.update-source-control")
     @endif

resources/views/site-settings/partials/update-aliases.blade.php

@@ -0,0 +1,30 @@
+<x-card>
+    <x-slot name="title">{{ __("Update Aliases") }}</x-slot>
+
+    <x-slot name="description">
+        {{ __("Add/Remove site aliases") }}
+    </x-slot>
+
+    <form
+        id="update-aliases"
+        hx-post="{{ route("servers.sites.settings.aliases", ["server" => $server, "site" => $site]) }}"
+        hx-swap="outerHTML"
+        hx-select="#update-aliases"
+        hx-ext="disable-element"
+        hx-disable-element="#btn-update-aliases"
+        class="space-y-6"
+    >
+        @include(
+            "sites.partials.create.fields.aliases",
+            [
+                "aliases" => $site->aliases,
+            ]
+        )
+    </form>
+
+    <x-slot name="actions">
+        <x-primary-button id="btn-update-aliases" form="update-aliases" hx-disable>
+            {{ __("Save") }}
+        </x-primary-button>
+    </x-slot>
+</x-card>

resources/views/sites/partials/create-site.blade.php

@@ -55,21 +55,7 @@ class="mt-1 block w-full"
                 @enderror
             </div>
 
-            <div>
-                <x-input-label for="alias" :value="__('Alias')" />
-                <x-text-input
-                    value="{{ old('alias') }}"
-                    id="alias"
-                    name="alias"
-                    type="text"
-                    class="mt-1 block w-full"
-                    autocomplete="alias"
-                    placeholder="www.example.com"
-                />
-                @error("alias")
-                    <x-input-error class="mt-2" :messages="$message" />
-                @enderror
-            </div>
+            @include("sites.partials.create.fields.aliases")
 
             @include("sites.partials.create." . $type)
         </form>

resources/views/sites/partials/create/fields/aliases.blade.php

@@ -0,0 +1,55 @@
+<script>
+    let aliases = @json($aliases ?? []);
+</script>
+<div
+    x-data="{
+        aliasInput: '',
+        aliases: aliases,
+        removeAlias(alias) {
+            this.aliases = this.aliases.filter((a) => a !== alias)
+        },
+        addAlias() {
+            if (! this.aliasInput) {
+                return
+            }
+
+            if (this.aliases.includes(this.aliasInput)) {
+                return
+            }
+
+            this.aliases.push(this.aliasInput)
+            this.aliasInput = ''
+        },
+    }"
+>
+    <x-input-label for="alias" :value="__('Alias')" />
+    <div class="flex items-center">
+        <x-text-input
+            value="{{ old('alias') }}"
+            id="alias"
+            x-model="aliasInput"
+            name="alias"
+            type="text"
+            class="mt-1 block w-full"
+            autocomplete="alias"
+            placeholder="www.example.com"
+        />
+        <x-secondary-button type="button" class="ml-2 flex-none" x-on:click="addAlias()">
+            {{ __("Add") }}
+        </x-secondary-button>
+    </div>
+    <div class="mt-1">
+        <template x-for="alias in aliases">
+            <div class="mr-1 inline-flex">
+                <x-status status="info" class="flex items-center lowercase">
+                    <span x-text="alias"></span>
+                    <x-heroicon name="o-x-mark" class="ml-1 h-4 w-4 cursor-pointer" x-on:click="removeAlias(alias)" />
+                    <input type="hidden" name="aliases[]" x-bind:value="alias" />
+                </x-status>
+            </div>
+        </template>
+    </div>
+    @error("aliases")
+        <x-input-error class="mt-2" :messages="$message" />
+    @enderror
+</div>

resources/views/ssls/partials/create-ssl.blade.php

@@ -82,6 +82,12 @@ class="mt-1 w-full"
                 </div>
             </div>
 
+            <div class="mt-6">
+                <x-checkbox id="aliases" name="aliases" :checked="old('aliases')" value="1">
+                    Set SSL for site's aliases as well
+                </x-checkbox>
+            </div>
+
             <div class="mt-6 flex justify-end">
                 <x-secondary-button type="button" x-on:click="$dispatch('close')">
                     {{ __("Cancel") }}

resources/views/ssls/partials/ssls-list.blade.php

@@ -14,6 +14,7 @@
                 <x-table>
                     <x-tr>
                         <x-th>{{ __("Type") }}</x-th>
+                        <x-th>{{ __("Domains") }}</x-th>
                         <x-th>{{ __("Created") }}</x-th>
                         <x-th>{{ __("Expires at") }}</x-th>
                         <x-th></x-th>
@@ -21,6 +22,15 @@
                     @foreach ($ssls as $ssl)
                         <x-tr>
                             <x-td>{{ $ssl->type }}</x-td>
+                            <x-td>
+                                <div class="flex-col space-y-1">
+                                    @foreach ($ssl->getDomains() as $domain)
+                                        <x-status status="disabled" class="lowercase">
+                                            {{ $domain }}
+                                        </x-status>
+                                    @endforeach
+                                </div>
+                            </x-td>
                             <x-td>
                                 <x-datetime :value="$ssl->created_at" />
                             </x-td>