192 lines
7.8 KiB
HTML
192 lines
7.8 KiB
HTML
<div class="flex h-full min-h-0 flex-col">
|
|
<header class="flex items-center gap-3 border-b border-border px-4 py-3">
|
|
<a
|
|
routerLink="/dashboard"
|
|
[attr.aria-label]="'common.actions.backToDashboard' | translate"
|
|
class="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-border bg-secondary text-muted-foreground transition-colors hover:bg-secondary/80"
|
|
>
|
|
<ng-icon
|
|
name="lucideArrowLeft"
|
|
class="h-5 w-5"
|
|
/>
|
|
</a>
|
|
<div class="min-w-0">
|
|
<h1 class="truncate text-lg font-semibold text-foreground">{{ 'servers.create.title' | translate }}</h1>
|
|
<p class="truncate text-xs text-muted-foreground">{{ 'servers.create.subtitle' | translate }}</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="min-h-0 flex-1 overflow-y-auto">
|
|
<form
|
|
class="mx-auto w-full max-w-lg space-y-6 p-4 sm:p-6"
|
|
(ngSubmit)="createServer()"
|
|
>
|
|
<div>
|
|
<span class="mb-2 block text-sm font-medium text-foreground">{{ 'servers.create.pickCategory' | translate }}</span>
|
|
<div class="flex flex-wrap gap-2">
|
|
@for (category of categories; track category.id) {
|
|
<button
|
|
type="button"
|
|
class="rounded-full border px-3 py-1.5 text-sm font-medium transition-colors"
|
|
[class.border-primary]="selectedCategoryId() === category.id"
|
|
[class.bg-primary/10]="selectedCategoryId() === category.id"
|
|
[class.text-primary]="selectedCategoryId() === category.id"
|
|
[class.border-border]="selectedCategoryId() !== category.id"
|
|
[class.bg-secondary]="selectedCategoryId() !== category.id"
|
|
[class.text-foreground]="selectedCategoryId() !== category.id"
|
|
(click)="selectCategory(category)"
|
|
>
|
|
{{ 'servers.create.categories.' + category.id | translate }}
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="create-server-name"
|
|
class="mb-1 block text-sm font-medium text-foreground"
|
|
>{{ 'servers.create.serverName' | translate }}</label
|
|
>
|
|
<input
|
|
id="create-server-name"
|
|
type="text"
|
|
name="serverName"
|
|
appAutoFocus
|
|
appSelectOnFocus
|
|
[ngModel]="name()"
|
|
(ngModelChange)="name.set($event)"
|
|
[placeholder]="'servers.create.namePlaceholder' | translate"
|
|
class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="create-server-description"
|
|
class="mb-1 block text-sm font-medium text-foreground"
|
|
>{{ 'servers.create.descriptionOptional' | translate }}</label
|
|
>
|
|
<textarea
|
|
id="create-server-description"
|
|
name="serverDescription"
|
|
[ngModel]="description()"
|
|
(ngModelChange)="description.set($event)"
|
|
[placeholder]="'servers.create.descriptionPlaceholder' | translate"
|
|
rows="3"
|
|
class="w-full resize-none rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-border">
|
|
<button
|
|
type="button"
|
|
class="flex w-full items-center justify-between px-3 py-2.5 text-left text-sm font-medium text-foreground"
|
|
[attr.aria-expanded]="showAdvanced()"
|
|
(click)="toggleAdvanced()"
|
|
>
|
|
<span>{{ 'servers.create.advancedSettings' | translate }}</span>
|
|
<ng-icon
|
|
[name]="showAdvanced() ? 'lucideChevronUp' : 'lucideChevronDown'"
|
|
class="h-4 w-4 text-muted-foreground"
|
|
/>
|
|
</button>
|
|
|
|
@if (showAdvanced()) {
|
|
<div class="space-y-4 border-t border-border p-3">
|
|
<div>
|
|
<label
|
|
for="create-server-topic"
|
|
class="mb-1 block text-sm font-medium text-foreground"
|
|
>{{ 'servers.create.topicOptional' | translate }}</label
|
|
>
|
|
<input
|
|
id="create-server-topic"
|
|
type="text"
|
|
name="serverTopic"
|
|
appSelectOnFocus
|
|
[ngModel]="topic()"
|
|
(ngModelChange)="topic.set($event)"
|
|
[placeholder]="'servers.create.topicPlaceholder' | translate"
|
|
class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="create-server-signal-endpoint"
|
|
class="mb-1 block text-sm font-medium text-foreground"
|
|
>{{ 'servers.create.signalEndpoint' | translate }}</label
|
|
>
|
|
<select
|
|
id="create-server-signal-endpoint"
|
|
name="sourceId"
|
|
[(ngModel)]="sourceId"
|
|
class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
>
|
|
@for (endpoint of activeEndpoints(); track endpoint.id) {
|
|
<option [value]="endpoint.id">{{ endpoint.name }} ({{ endpoint.url }})</option>
|
|
}
|
|
</select>
|
|
<p class="mt-1 text-xs text-muted-foreground">{{ 'servers.create.signalEndpointHint' | translate }}</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
id="create-server-private"
|
|
type="checkbox"
|
|
name="isPrivate"
|
|
[ngModel]="isPrivate()"
|
|
(ngModelChange)="isPrivate.set($event)"
|
|
class="h-4 w-4 rounded border-border bg-secondary"
|
|
/>
|
|
<label
|
|
for="create-server-private"
|
|
class="text-sm text-foreground"
|
|
>{{ 'servers.create.privateServer' | translate }}</label
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="create-server-password"
|
|
class="mb-1 block text-sm font-medium text-foreground"
|
|
>{{ 'servers.create.passwordOptional' | translate }}</label
|
|
>
|
|
<input
|
|
id="create-server-password"
|
|
type="password"
|
|
name="serverPassword"
|
|
[ngModel]="password()"
|
|
(ngModelChange)="password.set($event)"
|
|
[placeholder]="'servers.create.passwordPlaceholder' | translate"
|
|
class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
<p class="mt-1 text-xs text-muted-foreground">{{ 'servers.create.passwordHint' | translate }}</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-2">
|
|
<button
|
|
id="create-server-cancel"
|
|
type="button"
|
|
class="flex-1 rounded-lg bg-secondary px-4 py-2 text-foreground transition-colors hover:bg-secondary/80"
|
|
(click)="cancel()"
|
|
>
|
|
{{ 'common.actions.cancel' | translate }}
|
|
</button>
|
|
<button
|
|
id="create-server-submit"
|
|
type="submit"
|
|
class="flex-1 rounded-lg bg-primary px-4 py-2 font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
|
|
[disabled]="!canCreate"
|
|
>
|
|
{{ 'servers.create.submit' | translate }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|