Aruba-PoE/srv/poe_manager/templates/switche.html

{% extends "base.html" %}
{% block content %}
<h2>Switch Verwaltung</h2>

<!-- Button zum Hinzufügen -->
<button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addSwitchModal">Neuen Switch hinzufügen</button>

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Hostname</th>
            <th>IP-Adresse</th>
            <th>Username</th>
            <th>Aktionen</th>
        </tr>
    </thead>
    <tbody>
        {% for s in switches %}
        <tr>
            <td>{{ s['hostname'] }}</td>
            <td>{{ s['ip'] }}</td>
            <td>{{ s['username'] }}</td>
            <td>
                <!-- Bearbeiten -->
                <button class="btn btn-sm button login white" data-bs-toggle="modal" data-bs-target="#editSwitchModal{{ loop.index }}">Bearbeiten</button>

                <!-- Löschen -->
                <form method="post" style="display:inline;">
                    <input type="hidden" name="delete_switch" value="{{ s['hostname'] }}">
                    <button class="btn btn-sm btn-danger" type="submit">Löschen</button>
                </form>
            </td>
        </tr>

        <!-- Bearbeiten Modal -->
        <div class="modal fade" id="editSwitchModal{{ loop.index }}" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-dark">Switch bearbeiten</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form method="post" onsubmit="return validatePassword('{{ loop.index }}', true)">
                        <div class="modal-body">
                            <input type="hidden" name="edit_switch" value="1">
                            <input type="hidden" name="old_hostname" value="{{ s['hostname'] }}">
                            <div class="mb-3">
                                <label class="form-label">Hostname</label>
                                <input type="text" name="hostname" class="form-control" value="{{ s['hostname'] }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">IP-Adresse</label>
                                <input type="text" name="ip" class="form-control" value="{{ s['ip'] }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Username</label>
                                <input type="text" name="username" class="form-control" value="{{ s['username'] }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Neues Passwort</label>
                                <input type="password" id="password_edit_{{ loop.index }}" name="password" class="form-control" placeholder="Neues Passwort (optional)">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Passwort bestätigen</label>
                                <input type="password" id="password_confirm_edit_{{ loop.index }}" name="password_confirm" class="form-control" placeholder="Bestätigen">
                                <div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                            <button class="btn btn-success" type="submit">Speichern</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
    </tbody>
</table>

<!-- Hinzufügen Modal -->
<div class="modal fade" id="addSwitchModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-dark">Neuen Switch hinzufügen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" onsubmit="return validatePassword('add', false)">
                <div class="modal-body">
                    <input type="hidden" name="add_switch" value="1">
                    <div class="mb-3">
                        <label class="form-label">Hostname</label>
                        <input type="text" name="hostname" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">IP-Adresse</label>
                        <input type="text" name="ip" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Username</label>
                        <input type="text" name="username" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Passwort</label>
                        <input type="password" id="password_add" name="password" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Passwort bestätigen</label>
                        <input type="password" id="password_confirm_add" name="password_confirm" class="form-control" required>
                        <div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button class="btn btn-primary" type="submit">Hinzufügen</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- JS: Passwortvalidierung -->
<script>
function validatePassword(id, isEdit) {
    let pass = document.getElementById(isEdit ? `password_edit_${id}` : `password_${id}`) || document.getElementById('password_add');
    let confirm = document.getElementById(isEdit ? `password_confirm_edit_${id}` : `password_confirm_${id}`) || document.getElementById('password_confirm_add');

    if (!pass || !confirm) return true;
    if (pass.value !== confirm.value) {
        confirm.classList.add("is-invalid");
        return false;
    } else {
        confirm.classList.remove("is-invalid");
        return true;
    }
}

// Live-Feedback beim Tippen
document.addEventListener('input', e => {
    if (e.target.id.startsWith('password_confirm')) {
        const id = e.target.id.replace('password_confirm_', '');
        const pass = document.getElementById('password_' + id);
        if (pass && pass.value !== e.target.value) {
            e.target.classList.add('is-invalid');
        } else {
            e.target.classList.remove('is-invalid');
        }
    }
});
</script>
{% endblock %}