tesm/srv/poe_manager/templates/switches.html

{% extends "base.html" %}
{% set active_page = "switches" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/xterm.css') }}">
{% endblock %}
{% set can_create = current_user.has_permission('switches.create') %}
{% set can_edit = current_user.has_permission('switches.edit') %}
{% set can_delete = current_user.has_permission('switches.delete') %}
{% block page_title %}Switche{% endblock %}
{% block page_sub %}<div class="topbar-sub">{{ switches|length }} Switche</div>{% endblock %}

{% block content %}

<div class="section-head">
  <div>
    <h2 style="font-size:16px;">Switche</h2>
    <div class="hint">Aruba-Switche mit ihren Zugangsdaten, über die der automatische PoE-Neustart bei Ausfällen sowie der Verbindungstest laufen.</div>
  </div>
  {% if can_create %}
  <button type="button" class="btn btn-primary" data-open-modal="addSwitchModal" onclick="resetCredentialChoice('add')">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
    Neuer Switch
  </button>
  {% endif %}
</div>

<div class="table-wrap">
  <div class="table-toolbar">
    <div class="search-input">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
      <input type="text" id="switchSearch" placeholder="Switches durchsuchen…" oninput="filterTable('switchSearch','switchesTable')">
    </div>
  </div>
  <div style="overflow-x:auto;">
  <table class="data-table" id="switchesTable" data-sortable>
    <thead>
      <tr>
        <th data-sort-key="hostname">Hostname</th>
        <th data-sort-key="ip">IP-Adresse</th>
        <th data-sort-key="credential">Zugangsdaten</th>
        <th style="width:1%;">Aktionen</th>
      </tr>
    </thead>
    <tbody>
      {% for s in switches %}
      <tr data-sort-hostname="{{ s['hostname']|lower }}" data-sort-ip="{{ s['ip']|lower }}" data-sort-credential="{{ (s['credential_name'] or '')|lower }}">
        <td class="cell-name">{{ s['hostname'] }}</td>
        <td class="mono">{{ s['ip'] }}</td>
        <td>
          {% if s['credential_name'] %}
          {{ s['credential_name'] }} <span class="text-faint mono" style="font-size:11.5px;">({{ s['credential_username'] }})</span>
          {% else %}
          <span class="text-faint">— keine —</span>
          {% endif %}
        </td>
        <td>
          <div class="row-actions">
            {% if can_edit %}
            <button class="icon-btn" title="Bearbeiten" data-open-modal="editSwitchModal{{ loop.index }}" onclick="resetCredentialChoice('edit{{ loop.index }}')">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>
            </button>
            {% endif %}
            {% if can_delete %}
            <form method="post" action="{{ url_for('delete_switch', hostname=s['hostname']) }}" data-confirm="Willst du den Switch „{{ s['hostname'] }}“ wirklich löschen?">
              <button type="submit" class="icon-btn" style="color:var(--danger);" title="Löschen">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0l-1 14a2 2 0 01-2 2H7a2 2 0 01-2-2L4 6"/></svg>
              </button>
            </form>
            {% endif %}
          </div>
        </td>
      </tr>

      {% if can_edit %}
      <div class="modal-overlay" id="editSwitchModal{{ loop.index }}">
        <div class="modal">
          <form method="post" onsubmit="return validateSwitchForm(this, 'edit{{ loop.index }}');">
            <input type="hidden" name="edit_switch" value="1">
            <input type="hidden" name="old_hostname" value="{{ s['hostname'] }}">
            <div class="modal-header">
              <h3>Switch bearbeiten</h3>
              <button type="button" class="modal-close" data-close-modal>&times;</button>
            </div>
            <div class="modal-body">
              <div class="field"><label>Hostname</label>
                <input type="text" name="hostname" value="{{ s['hostname'] }}" required>
              </div>
              <div class="field"><label>IP-Adresse</label>
                <input type="text" name="ip" value="{{ s['ip'] }}" required placeholder="z.B. 192.168.1.100">
                <div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben.</div>
              </div>
              <div class="field">
                <label>Zugangsdaten</label>
                <select name="credential_choice" class="credential-select" onchange="toggleNewCredentialFields(this)">
                  {% for c in all_credentials %}
                  <option value="{{ c['id'] }}" data-username="{{ c['username'] }}" {% if c['id'] == s['credential_id'] %}selected{% endif %}>{{ c['name'] }}</option>
                  {% endfor %}
                  <option value="new">+ Neue Zugangsdaten anlegen</option>
                </select>
              </div>
              <div class="new-credential-fields hidden">
                <div class="field"><label>Name der Zugangsdaten</label>
                  <input type="text" name="new_credential_name" placeholder="z.B. Lager-Switche">
                </div>
                <div class="field"><label>Username</label>
                  <input type="text" name="new_credential_username" placeholder="z.B. admin">
                </div>
                <div class="field"><label>Passwort</label>
                  <input type="password" id="password_edit{{ loop.index }}" name="new_credential_password">
                </div>
                <div class="field"><label>Passwort bestätigen</label>
                  <input type="password" id="password_confirm_edit{{ loop.index }}" name="new_credential_password_confirm">
                  <div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" style="margin-right:auto;" onclick="openTerminal(this.closest('form'))">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 9l4 3-4 3M13 15h5"/></svg>
                Verbindung testen
              </button>
              <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
              <button type="submit" class="btn btn-primary">Speichern</button>
            </div>
          </form>
        </div>
      </div>
      {% endif %}
      {% else %}
      <tr class="empty-row"><td colspan="4">Noch keine Switche vorhanden.</td></tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>

{% if can_create %}
<!-- Modal: Neuer Switch -->
<div class="modal-overlay" id="addSwitchModal">
  <div class="modal">
    <form method="post" onsubmit="return validateSwitchForm(this, 'add');">
      <div class="modal-header">
        <h3>Neuen Switch hinzufügen</h3>
        <button type="button" class="modal-close" data-close-modal>&times;</button>
      </div>
      <div class="modal-body">
        <input type="hidden" name="add_switch" value="1">
        <div class="field"><label>Hostname</label>
          <input type="text" name="hostname" required placeholder="z.B. Switch01">
        </div>
        <div class="field"><label>IP-Adresse</label>
          <input type="text" name="ip" required placeholder="z.B. 192.168.1.100">
          <div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben.</div>
        </div>
        <div class="field">
          <label>Zugangsdaten</label>
          <select name="credential_choice" class="credential-select" onchange="toggleNewCredentialFields(this)">
            {% if not all_credentials %}<option value="new" selected>+ Neue Zugangsdaten anlegen</option>
            {% else %}
            {% for c in all_credentials %}
            <option value="{{ c['id'] }}" data-username="{{ c['username'] }}">{{ c['name'] }}</option>
            {% endfor %}
            <option value="new">+ Neue Zugangsdaten anlegen</option>
            {% endif %}
          </select>
        </div>
        <div class="new-credential-fields {% if all_credentials %}hidden{% endif %}">
          <div class="field"><label>Name der Zugangsdaten</label>
            <input type="text" name="new_credential_name" placeholder="z.B. Lager-Switche">
          </div>
          <div class="field"><label>Username</label>
            <input type="text" name="new_credential_username" placeholder="z.B. admin">
          </div>
          <div class="field"><label>Passwort</label>
            <input type="password" id="password_add" name="new_credential_password">
          </div>
          <div class="field"><label>Passwort bestätigen</label>
            <input type="password" id="password_confirm_add" name="new_credential_password_confirm">
            <div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" style="margin-right:auto;" onclick="openTerminal(this.closest('form'))">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 9l4 3-4 3M13 15h5"/></svg>
          Verbindung testen
        </button>
        <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
        <button type="submit" class="btn btn-primary">Hinzufügen</button>
      </div>
    </form>
  </div>
</div>
{% endif %}

{% if can_create or can_edit %}
<!-- Modal: SSH-Verbindungstest (echtes Terminal, zum Akzeptieren von Host-Keys
     und Prüfen der Zugangsdaten, bevor der Switch gespeichert wird) -->
<div class="modal-overlay" id="terminalModal">
  <div class="modal" style="max-width:720px;">
    <div class="modal-header">
      <h3>SSH-Verbindungstest</h3>
      <button type="button" class="modal-close" data-close-modal onclick="closeTerminal()">&times;</button>
    </div>
    <div class="modal-body" style="padding:0;">
      <div class="term-toolbar">
        <div class="flex gap-2" style="align-items:center;">
          <span id="termStatus" class="pill unknown">Bereit</span>
          <span id="termTarget" class="text-faint mono" style="font-size:12px;"></span>
        </div>
        <button type="button" class="btn btn-sm btn-secondary" id="termPastePassword">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
          Passwort einfügen
        </button>
      </div>
      <div id="terminal" class="xterm-container"></div>
    </div>
    <div class="modal-footer">
      <p class="text-faint" style="font-size:11.5px; margin-right:auto;">
        Erste Verbindung? Bestätige den Host-Key mit „yes“, gib danach das Passwort ein — direkt hier im Terminal.
        Bei bestehenden Zugangsdaten ist das Passwort hier nicht bekannt (verschlüsselt gespeichert) — bitte manuell eingeben.
      </p>
      <button type="button" class="btn btn-secondary" data-close-modal onclick="closeTerminal()">Schließen</button>
    </div>
  </div>
</div>
{% endif %}

{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/vendor/xterm.js') }}"></script>
<script src="{{ url_for('static', filename='js/vendor/xterm-addon-fit.js') }}"></script>
<script>
// -------------------------------------------------------------------------
// Zugangsdaten-Auswahl: "+ Neue Zugangsdaten anlegen" blendet die Felder ein
// -------------------------------------------------------------------------
function toggleNewCredentialFields(select) {
    const fields = select.closest(".modal-body").querySelector(".new-credential-fields");
    if (fields) fields.classList.toggle("hidden", select.value !== "new");
}
function resetCredentialChoice(id) {
    // Beim Öffnen sicherstellen, dass die "Neue Zugangsdaten"-Felder passend
    // zur aktuellen Auswahl ein-/ausgeblendet sind (relevant v.a. nach
    // vorherigem Umschalten auf "neu" ohne zu speichern).
    setTimeout(() => {
        const select = document.querySelector(`#${id === 'add' ? 'addSwitchModal' : 'editSwitchModal' + id.replace('edit','')} .credential-select`);
        if (select) toggleNewCredentialFields(select);
    }, 0);
}

// -------------------------------------------------------------------------
// SSH-Verbindungstest (Web-Terminal via /ws/ssh_terminal)
// -------------------------------------------------------------------------
let term = null, fitAddon = null, termSocket = null, activePasswordInput = null;

function ensureTerminal() {
    if (term) return;
    term = new Terminal({
        convertEol: true,
        fontSize: 13,
        fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace",
        cursorBlink: true,
        theme: { background: "#0a0c10", foreground: "#c7ccd6" },
    });
    fitAddon = new FitAddon.FitAddon();
    term.loadAddon(fitAddon);
    term.open(document.getElementById("terminal"));
    fitAddon.fit();
    term.onData((data) => {
        if (termSocket && termSocket.readyState === WebSocket.OPEN) {
            termSocket.send(JSON.stringify({ type: "input", data }));
        }
    });
    term.onResize(({ cols, rows }) => {
        if (termSocket && termSocket.readyState === WebSocket.OPEN) {
            termSocket.send(JSON.stringify({ type: "resize", cols, rows }));
        }
    });
    window.addEventListener("resize", () => fitAddon && fitAddon.fit());
}

function setTermStatus(text, cls) {
    const el = document.getElementById("termStatus");
    el.className = "pill " + cls;
    el.innerText = text;
}

function getCredentialInfo(form) {
    const select = form.querySelector(".credential-select");
    if (!select || select.value === "new") {
        return {
            username: (form.querySelector("input[name='new_credential_username']") || {}).value?.trim(),
            passwordInput: form.querySelector("input[name='new_credential_password']"),
        };
    }
    const option = select.selectedOptions[0];
    return { username: option ? option.dataset.username : null, passwordInput: null };
}

function openTerminal(form) {
    const host = (form.querySelector("input[name='ip']") || {}).value?.trim();
    const { username, passwordInput } = getCredentialInfo(form);
    activePasswordInput = passwordInput;

    if (!host || !username) {
        showToast("Bitte IP-Adresse ausfüllen und Zugangsdaten auswählen/anlegen, bevor du die Verbindung testest.", "danger");
        return;
    }

    PoeUI.openModal("terminalModal");
    ensureTerminal();
    term.reset();
    document.getElementById("termTarget").innerText = `${username}@${host}`;
    setTermStatus("Verbinde…", "unknown");
    setTimeout(() => fitAddon && fitAddon.fit(), 60);

    if (termSocket) { try { termSocket.close(); } catch (e) {} }

    const proto = location.protocol === "https:" ? "wss:" : "ws:";
    termSocket = new WebSocket(`${proto}//${location.host}/ws/ssh_terminal`);

    termSocket.onopen = () => {
        termSocket.send(JSON.stringify({ host, username, port: 22 }));
        setTermStatus("Verbunden", "online");
    };
    termSocket.onmessage = (event) => term.write(event.data);
    termSocket.onclose = () => setTermStatus("Getrennt", "offline");
    // Bewusst kein Toast bei "error": manche Browser melden beim Schließen
    // einer WebSocket-Verbindung ein error-Event, obwohl die Sitzung
    // inhaltlich erfolgreich war. Terminal-Inhalt + Status-Pill genügen als
    // Feedback — der Verbindungsstatus wird zuverlässig über onclose gepflegt.
    termSocket.onerror = () => setTermStatus("Fehler", "offline");
}

function closeTerminal() {
    if (termSocket) {
        try { termSocket.close(); } catch (e) {}
        termSocket = null;
    }
}

const termPasteBtn = document.getElementById("termPastePassword");
if (termPasteBtn) {
    termPasteBtn.addEventListener("click", () => {
        if (!activePasswordInput || !activePasswordInput.value) {
            showToast("Kein Passwort bekannt — bitte manuell im Terminal eingeben.", "danger");
            return;
        }
        if (!termSocket || termSocket.readyState !== WebSocket.OPEN) {
            showToast("Keine aktive Terminal-Verbindung.", "danger");
            return;
        }
        termSocket.send(JSON.stringify({ type: "input", data: activePasswordInput.value + "\n" }));
    });
}

// Verbindung auch beim Schließen per Klick auf Backdrop / Escape sauber trennen
const terminalModalEl = document.getElementById("terminalModal");
if (terminalModalEl) {
    terminalModalEl.addEventListener("click", (e) => {
        if (e.target.id === "terminalModal") closeTerminal();
    });
    document.addEventListener("keydown", (e) => {
        if (e.key === "Escape" && terminalModalEl.classList.contains("open")) closeTerminal();
    });
}

const ipPattern = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;

function validateIP(input) {
    const ok = ipPattern.test(input.value);
    input.classList.toggle("is-invalid", !ok);
    return ok;
}

function validateNewCredentialPassword(form) {
    const select = form.querySelector(".credential-select");
    if (!select || select.value !== "new") return true;
    const pass = form.querySelector("input[name='new_credential_password']");
    const confirm = form.querySelector("input[name='new_credential_password_confirm']");
    if (!pass || !confirm) return true;
    if (pass.value !== confirm.value) { confirm.classList.add("is-invalid"); return false; }
    confirm.classList.remove("is-invalid");
    return true;
}

function validateSwitchForm(form, id) {
    const ipInput = form.querySelector("input[name='ip']");
    let valid = true;
    if (ipInput) valid = validateIP(ipInput) && valid;
    valid = validateNewCredentialPassword(form) && valid;
    return valid;
}

document.addEventListener("input", (e) => {
    if (e.target.name === "ip") validateIP(e.target);
    if (e.target.name === "new_credential_password_confirm") {
        const form = e.target.closest("form");
        const pass = form.querySelector("input[name='new_credential_password']");
        if (pass) e.target.classList.toggle("is-invalid", pass.value !== e.target.value);
    }
});

function filterTable(inputId, tableId) {
    const q = document.getElementById(inputId).value.trim().toLowerCase();
    document.querySelectorAll(`#${tableId} tbody tr`).forEach(row => {
        if (row.classList.contains("empty-row")) return;
        row.style.display = row.innerText.toLowerCase().includes(q) ? "" : "none";
    });
}
</script>
{% endblock %}