From b428ee06359d82493b100b3ced3a95b3a0e3a58c Mon Sep 17 00:00:00 2001
From: Lars Gebhardt-Kusche <lars@kusche.berlin>
Date: Thu, 5 Mar 2026 01:36:07 +0100
Subject: [PATCH] asd

---
 modules/pi_control/pages/hosts.php | 44 +++++++++++++++++++++++-------
 public/assets/css/app.css          |  7 +++++
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/modules/pi_control/pages/hosts.php b/modules/pi_control/pages/hosts.php
index 2f7673f..7713281 100644
--- a/modules/pi_control/pages/hosts.php
+++ b/modules/pi_control/pages/hosts.php
@@ -53,21 +53,45 @@ $hosts = $pdo->query('SELECT * FROM ' . $table('hosts') . ' ORDER BY id DESC')->
   <?php endif; ?>
 
   <div class="grid" style="margin-top:1rem;">
-    <div class="card" style="background:var(--panel-2);">
+    <div class="card form-card" style="background:var(--panel-2);">
       <strong>Neuer Host</strong>
-      <form method="post" style="display:grid; gap:10px; margin-top:.75rem;">
-        <input type="text" name="name" placeholder="Name" required>
-        <input type="text" name="host" placeholder="Host/IP" required>
-        <input type="number" name="port" placeholder="Port" value="22">
-        <input type="text" name="username" placeholder="SSH User" required>
-        <input type="text" name="auth_type" placeholder="auth_type (key/pass)" value="key">
-        <input type="text" name="key_path" placeholder="Key Path (optional)">
-        <input type="password" name="password" placeholder="Password (optional)">
+      <form method="post" class="form-grid" style="margin-top:.75rem;">
+        <label class="form-field">
+          <span class="muted">Name</span>
+          <input type="text" name="name" placeholder="z.B. Wohnzimmer-Pi" required title="Eindeutiger Anzeigename für diesen Pi.">
+        </label>
+        <label class="form-field">
+          <span class="muted">Host / IP</span>
+          <input type="text" name="host" placeholder="z.B. 192.168.178.14 oder pi.local" required title="Hostname oder IP im Heimnetzwerk.">
+        </label>
+        <label class="form-field">
+          <span class="muted">SSH Port</span>
+          <input type="number" name="port" placeholder="22" value="22" title="Standard ist 22.">
+        </label>
+        <label class="form-field">
+          <span class="muted">SSH Benutzer</span>
+          <input type="text" name="username" placeholder="z.B. pi" required title="Benutzername auf dem Pi.">
+        </label>
+        <label class="form-field">
+          <span class="muted">Auth-Typ</span>
+          <select name="auth_type" title="key = SSH-Key, password = Passwort">
+            <option value="key">key (SSH-Key)</option>
+            <option value="pass">pass (Passwort)</option>
+          </select>
+        </label>
+        <label class="form-field">
+          <span class="muted">Key-Pfad (optional)</span>
+          <input type="text" name="key_path" placeholder="/home/app/.ssh/id_rsa" title="Pfad zum Private-Key im Webserver-Container.">
+        </label>
+        <label class="form-field">
+          <span class="muted">Passwort (optional)</span>
+          <input type="password" name="password" placeholder="SSH-Passwort" title="Nur nutzen, wenn Auth-Typ = pass.">
+        </label>
         <button class="cta-button" type="submit">Speichern</button>
       </form>
     </div>
 
-    <div class="card" style="background:var(--panel-2);">
+    <div class="card form-card" style="background:var(--panel-2);">
       <strong>Registrierte Hosts</strong>
       <div style="margin-top:.75rem; overflow:auto;">
         <table class="table" style="min-width:560px;">
diff --git a/public/assets/css/app.css b/public/assets/css/app.css
index 53a9dec..adeeb4e 100644
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -147,6 +147,13 @@ body {
 }
 .module-subnav.card { background-color: var(--panel); background-image: none; }
 
+.form-card { padding: 14px; }
+.form-grid { display: grid; gap: 12px; }
+.form-field { display: grid; gap: 6px; }
+.form-field input,
+.form-field select,
+.form-field textarea { width: 100%; }
+
 .layout-body {
   display: grid;
   grid-template-columns: 1fr;