Files
Web-Password/main.go
Florian Walther 2f9ee42071 added darkmode
2026-02-03 23:55:35 +01:00

579 lines
17 KiB
Go

package main
import (
"crypto/rand"
"fmt"
"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"
)
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) {
password := generatePassword()
fmt.Fprint(w, password)
}
func helpHandler(w http.ResponseWriter, r *http.Request) {
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);
}
@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) {
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)
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))
}