refactor(public-git-repository): enhance form structure and add autofocus to repository URL input

This commit is contained in:
Andras Bacsai
2025-08-02 15:50:09 +02:00
parent 1ddec358a5
commit a2c5f4b9d1

View File

@@ -1,12 +1,13 @@
<div> <div x-data x-init="$nextTick(() => { if ($refs.autofocusInput) $refs.autofocusInput.focus(); })">
<h1>Create a new Application</h1> <h1>Create a new Application</h1>
<div class="pb-4">Deploy any public Git repositories.</div> <div class="pb-4">Deploy any public Git repositories.</div>
<!-- Repository URL Form -->
<form class="flex flex-col gap-2" wire:submit='loadBranch'> <form class="flex flex-col gap-2" wire:submit='loadBranch'>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="flex gap-2 items-end"> <div class="flex gap-2 items-end">
<x-forms.input required id="repository_url" label="Repository URL (https://)" <x-forms.input required id="repository_url" label="Repository URL (https://)"
helper="{!! __('repository.url') !!}" /> helper="{!! __('repository.url') !!}" autofocus />
<x-forms.button type="submit"> <x-forms.button type="submit">
Check repository Check repository
</x-forms.button> </x-forms.button>
@@ -16,6 +17,9 @@
href="https://github.com/coollabsio/coolify-examples/" target="_blank">Coolify href="https://github.com/coollabsio/coolify-examples/" target="_blank">Coolify
Examples</a>. Examples</a>.
</div> </div>
</div>
</form>
@if ($branchFound) @if ($branchFound)
@if ($rate_limit_remaining && $rate_limit_reset) @if ($rate_limit_remaining && $rate_limit_reset)
<div class="flex gap-2 py-2"> <div class="flex gap-2 py-2">
@@ -24,6 +28,9 @@
helper="Rate limit remaining: {{ $rate_limit_remaining }}<br>Rate limit reset at: {{ $rate_limit_reset }} UTC" /> helper="Rate limit remaining: {{ $rate_limit_remaining }}<br>Rate limit reset at: {{ $rate_limit_reset }} UTC" />
</div> </div>
@endif @endif
<!-- Application Configuration Form -->
<form class="flex flex-col gap-2 pt-4" wire:submit='submit'>
<div class="flex flex-col gap-2 pb-6"> <div class="flex flex-col gap-2 pb-6">
<div class="flex gap-2"> <div class="flex gap-2">
@if ($git_source === 'other') @if ($git_source === 'other')
@@ -45,13 +52,18 @@
@endif @endif
</div> </div>
@if ($build_pack === 'dockercompose') @if ($build_pack === 'dockercompose')
<div x-data="{ baseDir: '{{ $base_directory }}', composeLocation: '{{ $docker_compose_location }}' }" class="gap-2 flex flex-col">
<x-forms.input placeholder="/" wire:model.blur-sm="base_directory" label="Base Directory" <x-forms.input placeholder="/" wire:model.blur-sm="base_directory" label="Base Directory"
helper="Directory to use as root. Useful for monorepos." /> helper="Directory to use as root. Useful for monorepos." x-model="baseDir" />
<x-forms.input placeholder="/docker-compose.yaml" wire:model.blur-sm="docker_compose_location" <x-forms.input placeholder="/docker-compose.yaml" wire:model.blur-sm="docker_compose_location"
label="Docker Compose Location" label="Docker Compose Location" helper="It is calculated together with the Base Directory."
helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>" /> x-model="composeLocation" />
Compose file location in your repository:<span <div class="pt-2">
class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span> <span>
Compose file location in your repository: </span><span class='dark:text-warning'
x-text='(baseDir === "/" ? "" : baseDir) + (composeLocation.startsWith("/") ? composeLocation : "/" + composeLocation)'></span>
</div>
</div>
@else @else
<x-forms.input wire:model="base_directory" label="Base Directory" <x-forms.input wire:model="base_directory" label="Base Directory"
helper="Directory to use as root. Useful for monorepos." /> helper="Directory to use as root. Useful for monorepos." />
@@ -74,11 +86,9 @@
id="new_compose_services"></x-forms.checkbox> id="new_compose_services"></x-forms.checkbox>
@endif --}} @endif --}}
</div> </div>
<x-forms.button wire:click.prevent='submit'> <x-forms.button type="submit">
Continue Continue
</x-forms.button> </x-forms.button>
@endif
</div>
</div>
</form> </form>
@endif
</div> </div>