Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
3ab261d777 |
@@ -16,9 +16,14 @@ FROM scratch
|
||||
# Kopiere die gebaute Binärdatei
|
||||
COPY --from=builder /app/password-generator /password-generator
|
||||
|
||||
# Kopiere die templates
|
||||
COPY templates/ /templates/
|
||||
|
||||
# Kopiere die static files
|
||||
COPY static/ /static/
|
||||
|
||||
# Setze die Umgebungsvariable für die Ports
|
||||
ENV PORT=8080
|
||||
|
||||
# Starte die Anwendung
|
||||
CMD ["/password-generator"]
|
||||
|
||||
|
||||
582
main.go
582
main.go
@@ -2,582 +2,76 @@ package main
|
||||
|
||||
import (
|
||||
"crypto/rand"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"log"
|
||||
"net/http"
|
||||
)
|
||||
|
||||
const (
|
||||
passwordLength = 32
|
||||
// Zeichensatz mit 62 möglichen Zeichen pro Position
|
||||
chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
|
||||
|
||||
// Zeichensatz mit 58 möglichen Zeichen pro Position
|
||||
// Verwechslungsanfällige Zeichen (0, O, 1, l, I) sind nicht enthalten.
|
||||
//
|
||||
// ## Security Note: ################################################
|
||||
// Der reduzierte Zeichensatz setzt den Keyspace von 10^57 auf 10^56 herab.
|
||||
// Die Entropie wird von ~192.6 Bit auf ~190.6 Bit herabgesetzt.
|
||||
// Solange die Passwortlänge von 32 Zeichen beibehalten wird ist der
|
||||
// Sicherheitsverlust durch einen reduzierten Zeichensatz akzeptabel,
|
||||
// weil der Keyspace immer noch so groß ist dass ein erraten praktisch
|
||||
// unmöglich ist.
|
||||
//
|
||||
//const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789"
|
||||
|
||||
)
|
||||
|
||||
//var tmpl *template.Template
|
||||
var templates = make(map[string]*template.Template)
|
||||
|
||||
func loadTemplates() {
|
||||
templates["index.html"] = template.Must(template.ParseFiles("templates/base.html", "templates/index.html"))
|
||||
templates["help.html"] = template.Must(template.ParseFiles("templates/base.html", "templates/help.html"))
|
||||
log.Printf("Alle Templates erfolgreich geladen")
|
||||
}
|
||||
|
||||
func generatePassword() string {
|
||||
password := make([]byte, passwordLength)
|
||||
_, err := rand.Read(password)
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
for i := 0; i < passwordLength; i++ {
|
||||
password[i] = chars[int(password[i])%len(chars)]
|
||||
}
|
||||
|
||||
return string(password)
|
||||
}
|
||||
|
||||
func passwordHandler(w http.ResponseWriter, r *http.Request) {
|
||||
log.Printf("APIHandler called from %s\n", r.RemoteAddr)
|
||||
password := generatePassword()
|
||||
fmt.Fprint(w, password)
|
||||
w.Header().Set("Content-Type", "text/plain")
|
||||
w.Write([]byte(password))
|
||||
}
|
||||
|
||||
func indexHandler(w http.ResponseWriter, r *http.Request) {
|
||||
log.Printf("call indexHandler: Request %s %s\n", r.Method, r.URL)
|
||||
password := generatePassword()
|
||||
data := struct {
|
||||
Password string
|
||||
}{
|
||||
Password: password,
|
||||
}
|
||||
err := templates["index.html"].ExecuteTemplate(w, "base.html", data)
|
||||
if err != nil {
|
||||
log.Printf("Fehler beim Rendern des Templates: %v", err)
|
||||
http.Error(w, "Interner Serverfehler", http.StatusInternalServerError)
|
||||
}
|
||||
}
|
||||
|
||||
// new help handler
|
||||
func helpHandler(w http.ResponseWriter, r *http.Request) {
|
||||
log.Printf("helpHandler called from %s\n", r.RemoteAddr)
|
||||
helpHTML := `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hilfe</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #f5f5f5;
|
||||
--text-color: #333;
|
||||
--container-bg: white;
|
||||
--button-bg: #007BFF;
|
||||
--button-hover: #0056b3;
|
||||
--copy-button-bg: #4CAF50;
|
||||
--copy-button-hover: #45a049;
|
||||
--password-bg: #f0f0f0;
|
||||
--border-color: #ddd;
|
||||
--shadow-color: rgba(0, 0, 0, 0.1);
|
||||
log.Printf("call helpHandler\n")
|
||||
err := templates["help.html"].ExecuteTemplate(w, "base.html", nil)
|
||||
if err != nil {
|
||||
log.Printf("Fehler beim Rendern des Templates: %v", err)
|
||||
http.Error(w, "Interner Serverfehler", http.StatusInternalServerError)
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-color: #121212;
|
||||
--text-color: #e0e0e0;
|
||||
--container-bg: #1e1e1e;
|
||||
--button-bg: #2a7df4;
|
||||
--button-hover: #1a5fb4;
|
||||
--copy-button-bg: #4caf60;
|
||||
--copy-button-hover: #3d8b40;
|
||||
--password-bg: #2d2d2d;
|
||||
--border-color: #444;
|
||||
--shadow-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
background: var(--container-bg);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px var(--shadow-color);
|
||||
width: 90%;
|
||||
min-width: 600px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#password {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 1px;
|
||||
margin: 1rem auto;
|
||||
padding: 0.8rem;
|
||||
background: var(--password-bg);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
width: 90%;
|
||||
word-break: break-all;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
background: var(--copy-button-bg);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin: 0.3rem;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: var(--copy-button-hover);
|
||||
}
|
||||
|
||||
.renew-button {
|
||||
background: var(--button-bg);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin: 0.3rem;
|
||||
}
|
||||
|
||||
.renew-button:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
.help-link {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.help-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#toast {
|
||||
visibility: hidden;
|
||||
min-width: 150px;
|
||||
background-color: var(--copy-button-bg);
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 0 2px 10px var(--shadow-color);
|
||||
}
|
||||
|
||||
.help-container {
|
||||
text-align: left;
|
||||
background: var(--container-bg);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px var(--shadow-color);
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
min-width: 600px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
background: var(--password-bg);
|
||||
padding: 0.8rem;
|
||||
border-radius: 4px;
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--button-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="help-container">
|
||||
<h1>Hilfe: API-Endpunkt</h1>
|
||||
<p>
|
||||
Diese Anwendung bietet einen API-Endpunkt, um Passwörter direkt über die Kommandozeile abzurufen.
|
||||
Der Endpunkt gibt das Passwort im Plain-Text-Format zurück.
|
||||
</p>
|
||||
<h2>Endpunkt:</h2>
|
||||
<p><code>http://localhost:8080/api/password</code></p>
|
||||
<h2>Beispiele:</h2>
|
||||
<h3>Mac/Linux (Terminal):</h3>
|
||||
<pre>echo $(curl -s http://localhost:8080/api/password)</pre>
|
||||
<h3>Windows (PowerShell):</h3>
|
||||
<pre>Invoke-RestMethod -Uri http://localhost:8080/api/password</pre>
|
||||
<h3>Windows (cmd):</h3>
|
||||
<pre>curl http://localhost:8080/api/password</pre>
|
||||
<p>
|
||||
<a href="/">Zurück zur Passwort-Generierung</a>
|
||||
</p>
|
||||
</div>
|
||||
<script>
|
||||
// Darkmode-Toggle-Funktion (optional)
|
||||
function toggleDarkMode() {
|
||||
const root = document.documentElement;
|
||||
const isDark = root.style.getPropertyValue('--bg-color') === 'rgb(18, 18, 18)';
|
||||
if (isDark) {
|
||||
// Zu Lightmode wechseln
|
||||
root.style.setProperty('--bg-color', '#f5f5f5');
|
||||
root.style.setProperty('--text-color', '#333');
|
||||
root.style.setProperty('--container-bg', 'white');
|
||||
root.style.setProperty('--button-bg', '#007BFF');
|
||||
root.style.setProperty('--button-hover', '#0056b3');
|
||||
root.style.setProperty('--copy-button-bg', '#4CAF50');
|
||||
root.style.setProperty('--copy-button-hover', '#45a049');
|
||||
root.style.setProperty('--password-bg', '#f0f0f0');
|
||||
root.style.setProperty('--border-color', '#ddd');
|
||||
root.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.1)');
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
// Zu Darkmode wechseln
|
||||
root.style.setProperty('--bg-color', '#121212');
|
||||
root.style.setProperty('--text-color', '#e0e0e0');
|
||||
root.style.setProperty('--container-bg', '#1e1e1e');
|
||||
root.style.setProperty('--button-bg', '#2a7df4');
|
||||
root.style.setProperty('--button-hover', '#1a5fb4');
|
||||
root.style.setProperty('--copy-button-bg', '#4caf60');
|
||||
root.style.setProperty('--copy-button-hover', '#3d8b40');
|
||||
root.style.setProperty('--password-bg', '#2d2d2d');
|
||||
root.style.setProperty('--border-color', '#444');
|
||||
root.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.3)');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
}
|
||||
|
||||
// Prüfe, ob Nutzer eine manuelle Einstellung gespeichert hat
|
||||
if (localStorage.getItem('theme') === 'dark') {
|
||||
toggleDarkMode();
|
||||
} else if (localStorage.getItem('theme') === 'light') {
|
||||
// Stelle sicher, dass Lightmode aktiv ist (falls Systemtheme dark ist)
|
||||
document.documentElement.style.setProperty('--bg-color', '#f5f5f5');
|
||||
document.documentElement.style.setProperty('--text-color', '#333');
|
||||
document.documentElement.style.setProperty('--container-bg', 'white');
|
||||
document.documentElement.style.setProperty('--button-bg', '#007BFF');
|
||||
document.documentElement.style.setProperty('--button-hover', '#0056b3');
|
||||
document.documentElement.style.setProperty('--copy-button-bg', '#4CAF50');
|
||||
document.documentElement.style.setProperty('--copy-button-hover', '#45a049');
|
||||
document.documentElement.style.setProperty('--password-bg', '#f0f0f0');
|
||||
document.documentElement.style.setProperty('--border-color', '#ddd');
|
||||
document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.1)');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
fmt.Fprint(w, helpHTML)
|
||||
}
|
||||
|
||||
|
||||
func webHandler(w http.ResponseWriter, r *http.Request) {
|
||||
log.Printf("webHandler called from %s\n", r.RemoteAddr)
|
||||
password := generatePassword()
|
||||
html := fmt.Sprintf(
|
||||
`<DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Passwort-Generator</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #f5f5f5;
|
||||
--text-color: #333;
|
||||
--container-bg: white;
|
||||
--button-bg: #007BFF;
|
||||
--button-hover: #0056b3;
|
||||
--copy-button-bg: #4CAF50;
|
||||
--copy-button-hover: #45a049;
|
||||
--password-bg: #f0f0f0;
|
||||
--border-color: #ddd;
|
||||
--shadow-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-color: #121212;
|
||||
--text-color: #e0e0e0;
|
||||
--container-bg: #1e1e1e;
|
||||
--button-bg: #2a7df4;
|
||||
--button-hover: #1a5fb4;
|
||||
--copy-button-bg: #4caf60;
|
||||
--copy-button-hover: #3d8b40;
|
||||
--password-bg: #2d2d2d;
|
||||
--border-color: #444;
|
||||
--shadow-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
background: var(--container-bg);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px var(--shadow-color);
|
||||
width: 90%;
|
||||
min-width: 600px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#password {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 1px;
|
||||
margin: 1rem auto;
|
||||
padding: 0.8rem;
|
||||
background: var(--password-bg);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
width: 90%;
|
||||
word-break: break-all;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
background: var(--copy-button-bg);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin: 0.3rem;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: var(--copy-button-hover);
|
||||
}
|
||||
|
||||
.renew-button {
|
||||
background: var(--button-bg);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin: 0.3rem;
|
||||
}
|
||||
|
||||
.renew-button:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
.help-link {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.help-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#toast {
|
||||
visibility: hidden;
|
||||
min-width: 150px;
|
||||
background-color: var(--copy-button-bg);
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 0 2px 10px var(--shadow-color);
|
||||
}
|
||||
|
||||
.help-container {
|
||||
text-align: left;
|
||||
background: var(--container-bg);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px var(--shadow-color);
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
min-width: 600px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
background: var(--password-bg);
|
||||
padding: 0.8rem;
|
||||
border-radius: 4px;
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--button-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<a href="/help" class="help-link">API</a>
|
||||
<button onclick="toggleDarkMode()" style="position: absolute; top: 1rem; left: 1rem; background: transparent; border: none; color: var(--text-color); font-size: 1.2rem; cursor: pointer;">🌓</button>
|
||||
|
||||
<a class="about-link" href="https://gitea.scu.si/FlorianWalther/Web-Password">code</a>
|
||||
<h1>Generiertes Passwort</h1>
|
||||
<div id="password">%s</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>
|
||||
<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); // Toast verschwindet nach 1,5 Sekunden
|
||||
}).catch(err => {
|
||||
console.error("Fehler beim Kopieren: ", err);
|
||||
alert("Kopieren fehlgeschlagen. Bitte manuell kopieren: " + password);
|
||||
});
|
||||
}
|
||||
function generateNewPassword() {
|
||||
fetch("/api/password")
|
||||
.then(response => response.text())
|
||||
.then(password => {
|
||||
document.getElementById("password").innerText = password;
|
||||
})
|
||||
.catch(error => console.error("Fehler:", error));
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
// Darkmode-Toggle-Funktion (optional)
|
||||
function toggleDarkMode() {
|
||||
const root = document.documentElement;
|
||||
const isDark = root.style.getPropertyValue('--bg-color') === 'rgb(18, 18, 18)';
|
||||
if (isDark) {
|
||||
// Zu Lightmode wechseln
|
||||
root.style.setProperty('--bg-color', '#f5f5f5');
|
||||
root.style.setProperty('--text-color', '#333');
|
||||
root.style.setProperty('--container-bg', 'white');
|
||||
root.style.setProperty('--button-bg', '#007BFF');
|
||||
root.style.setProperty('--button-hover', '#0056b3');
|
||||
root.style.setProperty('--copy-button-bg', '#4CAF50');
|
||||
root.style.setProperty('--copy-button-hover', '#45a049');
|
||||
root.style.setProperty('--password-bg', '#f0f0f0');
|
||||
root.style.setProperty('--border-color', '#ddd');
|
||||
root.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.1)');
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
// Zu Darkmode wechseln
|
||||
root.style.setProperty('--bg-color', '#121212');
|
||||
root.style.setProperty('--text-color', '#e0e0e0');
|
||||
root.style.setProperty('--container-bg', '#1e1e1e');
|
||||
root.style.setProperty('--button-bg', '#2a7df4');
|
||||
root.style.setProperty('--button-hover', '#1a5fb4');
|
||||
root.style.setProperty('--copy-button-bg', '#4caf60');
|
||||
root.style.setProperty('--copy-button-hover', '#3d8b40');
|
||||
root.style.setProperty('--password-bg', '#2d2d2d');
|
||||
root.style.setProperty('--border-color', '#444');
|
||||
root.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.3)');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
}
|
||||
|
||||
// Prüfe, ob Nutzer eine manuelle Einstellung gespeichert hat
|
||||
if (localStorage.getItem('theme') === 'dark') {
|
||||
toggleDarkMode();
|
||||
} else if (localStorage.getItem('theme') === 'light') {
|
||||
// Stelle sicher, dass Lightmode aktiv ist (falls Systemtheme dark ist)
|
||||
document.documentElement.style.setProperty('--bg-color', '#f5f5f5');
|
||||
document.documentElement.style.setProperty('--text-color', '#333');
|
||||
document.documentElement.style.setProperty('--container-bg', 'white');
|
||||
document.documentElement.style.setProperty('--button-bg', '#007BFF');
|
||||
document.documentElement.style.setProperty('--button-hover', '#0056b3');
|
||||
document.documentElement.style.setProperty('--copy-button-bg', '#4CAF50');
|
||||
document.documentElement.style.setProperty('--copy-button-hover', '#45a049');
|
||||
document.documentElement.style.setProperty('--password-bg', '#f0f0f0');
|
||||
document.documentElement.style.setProperty('--border-color', '#ddd');
|
||||
document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.1)');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>`,
|
||||
password,
|
||||
)
|
||||
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
fmt.Fprint(w, html)
|
||||
}
|
||||
|
||||
func main() {
|
||||
http.HandleFunc("/", webHandler)
|
||||
loadTemplates()
|
||||
fs := http.FileServer(http.Dir("static"))
|
||||
http.Handle("/static/", http.StripPrefix("/static/", fs))
|
||||
|
||||
http.HandleFunc("/", indexHandler)
|
||||
http.HandleFunc("/api/password", passwordHandler)
|
||||
http.HandleFunc("/help", helpHandler)
|
||||
|
||||
log.Println("Server läuft auf http://localhost:8080")
|
||||
log.Println("Plain-Text-Passwort: curl http://localhost:8080/api/password")
|
||||
log.Fatal(http.ListenAndServe(":8080", nil))
|
||||
}
|
||||
|
||||
171
static/style.css
Normal file
171
static/style.css
Normal file
@@ -0,0 +1,171 @@
|
||||
:root {
|
||||
--bg-color: #f5f5f5;
|
||||
--text-color: #333;
|
||||
--container-bg: white;
|
||||
--button-bg: #007BFF;
|
||||
--button-hover: #0056b3;
|
||||
--copy-button-bg: #4CAF50;
|
||||
--copy-button-hover: #45a049;
|
||||
--password-bg: #f0f0f0;
|
||||
--border-color: #ddd;
|
||||
--shadow-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--bg-color: #121212;
|
||||
--text-color: #e0e0e0;
|
||||
--container-bg: #1e1e1e;
|
||||
--button-bg: #2a7df4;
|
||||
--button-hover: #1a5fb4;
|
||||
--copy-button-bg: #4caf60;
|
||||
--copy-button-hover: #3d8b40;
|
||||
--password-bg: #2d2d2d;
|
||||
--border-color: #444;
|
||||
--shadow-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
background: var(--container-bg);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px var(--shadow-color);
|
||||
width: 50%;
|
||||
min-width: 600px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#password {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 1px;
|
||||
margin: 1rem auto;
|
||||
padding: 0.8rem;
|
||||
background: var(--password-bg);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
width: 90%;
|
||||
word-break: break-all;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
background: var(--copy-button-bg);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: var(--copy-button-hover);
|
||||
}
|
||||
|
||||
.renew-button {
|
||||
background: var(--button-bg);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.renew-button:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
.code-link {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.code-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.help-link {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.help-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#toast {
|
||||
visibility: hidden;
|
||||
min-width: 150px;
|
||||
background-color: var(--copy-button-bg);
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 0 2px 10px var(--shadow-color);
|
||||
}
|
||||
|
||||
#theme-toggle {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
background: var(--password-bg);
|
||||
padding: 0.8rem;
|
||||
border-radius: 4px;
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--button-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
48
templates/base.html
Normal file
48
templates/base.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ block "title" . }}Passwort-Generator{{ end }}</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const root = document.documentElement;
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
|
||||
// Setze das Theme basierend auf localStorage oder Systemeinstellung
|
||||
if (savedTheme === 'dark') {
|
||||
root.classList.add('dark');
|
||||
} else if (savedTheme === 'light') {
|
||||
root.classList.remove('dark');
|
||||
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
root.classList.add('dark');
|
||||
}
|
||||
|
||||
// Toggle-Button-Logik
|
||||
themeToggle.addEventListener('click', function() {
|
||||
if (root.classList.contains('dark')) {
|
||||
root.classList.remove('dark');
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
root.classList.add('dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
});
|
||||
|
||||
// Systemtheme-Änderungen abhören
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
|
||||
if (!localStorage.getItem('theme')) {
|
||||
e.matches ? root.classList.add('dark') : root.classList.remove('dark');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{ block "head" . }}{{ end }}
|
||||
</head>
|
||||
<body>
|
||||
<button id="theme-toggle">🌓</button>
|
||||
{{ block "body" . }}{{end}}
|
||||
</body>
|
||||
</html>
|
||||
35
templates/help.html
Normal file
35
templates/help.html
Normal file
@@ -0,0 +1,35 @@
|
||||
{{ define "help.html" }}
|
||||
|
||||
{{ block "title" . }}Hilfe{{ end }}
|
||||
|
||||
{{ block "head" . }}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const currentHost = window.location.host;
|
||||
const apiEndpoint = window.location.protocol + "//" + currentHost + "/api/password";
|
||||
|
||||
document.getElementById("api-endpoint").textContent = apiEndpoint;
|
||||
document.getElementById("curl-example").textContent = "curl " + apiEndpoint;
|
||||
document.getElementById("powershell-example").textContent = "Invoke-RestMethod -Uri " + apiEndpoint;
|
||||
document.getElementById("cmd-example").textContent = "curl " + apiEndpoint;
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
{{ block "body" . }}
|
||||
<div class="container">
|
||||
<h1>Hilfe: API-Endpunkt</h1>
|
||||
<p>Diese Anwendung bietet einen API-Endpunkt, um Passwörter direkt über die Kommandozeile abzurufen.</p>
|
||||
<h2>Endpunkt:</h2>
|
||||
<p><code id="api-endpoint"></code></p>
|
||||
<h2>Beispiele:</h2>
|
||||
<h3>Mac/Linux (Terminal):</h3>
|
||||
<pre id="curl-example"></pre>
|
||||
<h3>Windows (PowerShell):</h3>
|
||||
<pre id="powershell-example"></pre>
|
||||
<h3>Windows (cmd):</h3>
|
||||
<pre id="cmd-example"></pre>
|
||||
<p><a href="/">Zurück zur Passwort-Generierung</a></p>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
43
templates/index.html
Normal file
43
templates/index.html
Normal file
@@ -0,0 +1,43 @@
|
||||
{{ 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("/api/password")
|
||||
.then(response => response.text())
|
||||
.then(password => {
|
||||
document.getElementById("password").innerText = password;
|
||||
})
|
||||
.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>Generiertes Passwort</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 }}
|
||||
Reference in New Issue
Block a user