feat(ui): Serverseitig gerenderte Oberflaeche ohne Build-Schritt

Eigenes CSS statt Framework, Vanilla-JavaScript, heller und dunkler
Modus. Ohne JavaScript bleibt alles bedienbar; das Liniendiagramm
faellt auf eine selbst gezeichnete Balkendarstellung zurueck, wenn das
CDN nicht erreichbar ist.

Chart.js ist auf eine Version festgelegt und per Subresource Integrity
an seinen Hash gebunden.

Die Domain-Seite enthaelt eine Schritt-fuer-Schritt-Anleitung fuer DNS,
Hosting-Panel und Zertifikat samt Fehlersuche.
This commit is contained in:
2026-08-03 18:11:40 +02:00
parent 7238e7a937
commit fabaef1f2b
19 changed files with 2378 additions and 0 deletions
+118
View File
@@ -0,0 +1,118 @@
<?php
/**
* @var array<string,mixed>|null $link
* @var list<array<string,mixed>> $domains
* @var array{target_url:string,slug:string,title:string,is_active:string,domain_id:string} $values
* @var array<string,string> $errors
* @var App\Config $config
* @var App\Security\Csrf $csrf
*/
use App\Support\ShortDomain;
$isEdit = $link !== null;
$action = $isEdit ? $url('/admin/links/' . $link['id'] . '/edit') : $url('/admin/links/new');
$selectedId = (int) $values['domain_id'];
$selectedBase = $config->baseUrl();
foreach ($domains as $domain) {
if ((int) $domain['id'] === $selectedId) {
$selectedBase = (string) $domain['base_url'];
break;
}
}
?>
<div class="page-head">
<div>
<h1><?= $isEdit ? 'Kurzlink bearbeiten' : 'Neuer Kurzlink' ?></h1>
<?php if ($isEdit): ?>
<p class="muted mono"><?= $e(rtrim($selectedBase, '/') . '/' . $link['slug']) ?></p>
<?php else: ?>
<p class="muted">Ziel-URL eintragen – der Slug wird automatisch erzeugt, wenn du keinen angibst.</p>
<?php endif; ?>
</div>
<a href="<?= $e($url('/admin/links')) ?>" class="btn btn--ghost">Zurück zur Liste</a>
</div>
<div class="card card--form">
<form method="post" action="<?= $e($action) ?>" class="form">
<?= $csrf->field() ?>
<div class="field <?= isset($errors['target_url']) ? 'field--error' : '' ?>">
<label for="target_url">Ziel-URL <span class="req">*</span></label>
<input type="text" id="target_url" name="target_url" value="<?= $e($values['target_url']) ?>"
placeholder="https://www.beispiel.de/eine/lange/adresse" required autofocus
inputmode="url" spellcheck="false">
<p class="field__hint">
Nur <code>http://</code> und <code>https://</code>. Fehlt das Schema, wird <code>https://</code> ergänzt.
Umlaut-Domains (<code>müller.de</code>), Umlaute im Pfad, IPv6-Adressen sowie interne Hostnamen
ohne Punkt (<code>intranet</code>, <code>nas:5000</code>) sind zulässig.
</p>
<?php if (isset($errors['target_url'])): ?>
<p class="field__error"><?= $e($errors['target_url']) ?></p>
<?php endif; ?>
</div>
<div class="field <?= isset($errors['domain_id']) ? 'field--error' : '' ?>">
<label for="domain_id">Kurzlink-Domain</label>
<select id="domain_id" name="domain_id" data-domain-select>
<?php foreach ($domains as $domain): ?>
<option value="<?= (int) $domain['id'] ?>"
data-base-url="<?= $e(rtrim((string) $domain['base_url'], '/')) ?>"
<?= (int) $domain['id'] === $selectedId ? 'selected' : '' ?>>
<?= $e(ShortDomain::displayName((string) $domain['base_url'])) ?><?php
if (($domain['label'] ?? '') !== ''): ?> – <?= $e($domain['label']) ?><?php endif;
if ((int) $domain['is_default'] === 1): ?> (Standard)<?php endif; ?>
</option>
<?php endforeach; ?>
</select>
<p class="field__hint">
<a href="<?= $e($url('/admin/domains')) ?>">Domains verwalten</a> – derselbe Slug kann auf
verschiedenen Domains auf unterschiedliche Ziele zeigen.
</p>
<?php if (isset($errors['domain_id'])): ?>
<p class="field__error"><?= $e($errors['domain_id']) ?></p>
<?php endif; ?>
</div>
<div class="field <?= isset($errors['slug']) ? 'field--error' : '' ?>">
<label for="slug">Wunsch-Slug<?= $isEdit ? ' <span class="req">*</span>' : ' (optional)' ?></label>
<div class="input-prefix">
<span class="input-prefix__label mono" data-slug-prefix><?= $e(rtrim($selectedBase, '/')) ?>/</span>
<input type="text" id="slug" name="slug" value="<?= $e($values['slug']) ?>"
placeholder="<?= $isEdit ? '' : 'z. B. messe2026 (leer = zufällig)' ?>"
pattern="[a-z0-9-]*" spellcheck="false" autocapitalize="off" autocomplete="off"
<?= $isEdit ? 'required' : '' ?>>
</div>
<p class="field__hint">Erlaubt sind Kleinbuchstaben, Ziffern und Bindestriche.</p>
<?php if (isset($errors['slug'])): ?>
<p class="field__error"><?= $e($errors['slug']) ?></p>
<?php endif; ?>
<?php if ($isEdit): ?>
<p class="field__hint warn">Achtung: Beim Ändern von Slug oder Domain funktionieren bereits
verteilte Links und gedruckte QR-Codes nicht mehr.</p>
<?php endif; ?>
</div>
<div class="field">
<label for="title">Interne Bezeichnung (optional)</label>
<input type="text" id="title" name="title" value="<?= $e($values['title']) ?>" maxlength="255"
placeholder="z. B. Flyer Messestand Halle 3">
<p class="field__hint">Nur zur eigenen Orientierung in der Liste – wird nirgends öffentlich angezeigt.</p>
</div>
<div class="field field--check">
<label class="check">
<input type="checkbox" name="is_active" value="1" <?= $values['is_active'] === '1' ? 'checked' : '' ?>>
<span>Kurzlink ist aktiv</span>
</label>
<p class="field__hint">Deaktivierte Links liefern eine 404-Seite aus, bleiben aber samt Statistik erhalten.</p>
</div>
<div class="form__actions">
<button type="submit" class="btn btn--primary"><?= $isEdit ? 'Änderungen speichern' : 'Kurzlink anlegen' ?></button>
<a href="<?= $e($url('/admin/links')) ?>" class="btn btn--ghost">Abbrechen</a>
</div>
</form>
</div>