Web-Password/templates/index.html

{{ define "index.html" }}

{{ block "title" . }}Passwort-Generator{{ end }}

{{ block "head" . }}
<script>
    function copyToClipboard() {
        const password = document.getElementById("password").innerText;
        navigator.clipboard.writeText(password).then(() => {
            const toast = document.getElementById("toast");
            toast.style.visibility = "visible";
            setTimeout(() => { toast.style.visibility = "hidden"; }, 1500);
        }).catch(err => {
            console.error("Fehler beim Kopieren: ", err);
            alert("Kopieren fehlgeschlagen. Bitte manuell kopieren: " + password);
        });
    }

    function generateNewPassword() {
        fetch("/json/password")
            .then(response => response.json()) // Jetzt .json() statt .text()
            .then(data => {
               // Passwort aktualisieren
               document.getElementById("password").innerText = data.password;
            
               // Counter im Footer aktualisieren
               // Wir suchen das Element mit der Klasse 'badge-blue' (oder gib ihm eine ID)
               const counterElement = document.getElementById("global-counter");
               if (counterElement) {
                   document.getElementById("global-counter").innerText = data.count;
                   // Animation triggern
                   counterElement.classList.remove("counter-update"); // Vorherige Animation zurücksetzen
                   void counterElement.offsetWidth;                 // Trick, um CSS-Reflow zu erzwingen
                   counterElement.classList.add("counter-update");
               }
        })
        .catch(error => console.error("Fehler:", error));
}
</script>
{{ end }}

{{ block "body" . }}
<div class="container">
    <a href="/help" class="help-link">?</a>
    <a href="https://gitea.scu.si/Florian.Walther/Web-Password" class="code-link">Sourcecode</a>
    <h1>Passwort Generator</h1>
    <div id="password">{{ .Password }}</div>
    <div class="buttons">
        <button class="copy-button" onclick="copyToClipboard()">In Zwischenablage kopieren</button>
        <button class="renew-button" onclick="generateNewPassword()">Neues Passwort generieren</button>
    </div>
    <div id="toast">✓ Kopiert!</div>
</div>
{{ end }}
{{ end }}