AZ-Intec-GmbH/AZess
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First version

Browse Source
This commit is contained in:
Jannik
2026-07-07 10:19:18 +02:00
parent 368a691484
commit f769d78a14
5 changed files with 631 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/benutzer_template.html
+131
View File
@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Benutzerantrag - {{VORNAME}} {{NACHNAME}}</title>
<style>
@page {
size: A4 landscape;
margin: 0;
}
body {
font-family: 'Corbel', sans-serif;
color: #000;
margin: 0;
padding: 0;
background-color: white;
box-sizing: border-box;
}
.page-container {
width: 297mm;
height: 209mm; /* slightly less than 210mm to avoid page breaks */
display: flex;
flex-direction: row;
}
.left-side {
width: 50%;
height: 100%;
box-sizing: border-box;
border-right: none;
padding: 15mm 20mm 15mm 15mm;
}
.right-side {
width: 50%;
height: 100%;
/* Empty */
}
.title {
font-size: 14.5pt;
font-weight: bold;
margin: 0 0 5px 0;
line-height: 1.2;
}
.credentials-section {
margin-top: 38px;
}
.cred-row {
margin-bottom: 8px;
font-size: 11pt;
display: flex; /* WeasyPrint supports flexbox */
}
.cred-label {
font-weight: bold;
width: 4cm;
display: inline-block;
}
.cred-value {
display: inline-block;
font-family: 'Consolas', monospace;
}
.sage-section {
margin-top: 60px;
}
.sage-title {
font-weight: bold;
font-size: 11pt;
text-transform: uppercase;
margin-bottom: 10px;
}
.sage-checkbox {
font-size: 11pt;
display: flex;
align-items: center;
}
.checkbox-symbol {
font-family: "Segoe UI Symbol", Arial, sans-serif;
font-size: 12pt;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="page-container">
<!-- Linke Hälfte (Inhalt) -->
<div class="left-side">
<div style="margin-bottom: 40px;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAAAbCAYAAAANFzB+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAdXSURBVGhD7VtrjFxVFJ5ZkCIIVrA0VBEoRBDFFwS1UVCiEokPFFT8Y3zFj9T4CCRoUBNfEImCIf5RIf7wF1Ej8REsEFRsEa1iY4zIokbXjSvdXWDb3Zndmdn1+86du/fevTP37nQ7u7Pdz0m+e+fOvedeZ849557z3eOaN41Wq9X4H5XgT61hH1T2sA8qe9gHlT3sg8oexjUobT96Z0lK4XfTz1uN74r4q5aGf0f8s39nO/9E7SNNz2tK/pGmtEejXw+TlvW4/Y6n602H/x0n/EfaL4T1d7yNnz8c8V/Q2u/0M9+w7sU+y29r/Wp1R8h76/0P9sY1KA2Xh4R7y6Z1o8y5/A/mXN2/t5+bH4y5Dk9o+k5tL+lM+7+i6dOaXh2fT5P2fE3Xazq/rT162Zk21b4aP+zY+zSd21T/2+Pz6f9f0/bB8fkLNO+rK+H0vU5Efy+m/7uS19+5/P4X+6B2BqAARJv2mqaXN/XvHk1vj8/7a9onNK2Kz59m2r99tD2g6fKa9m1Nf9S0m2k3a3p604/Vv6V+T9O7m/bfpumxTeN9X5i239N0ZtOP1r+t/o91+2VNr2oav3+0X/e/T+89XdP/4vP+mvZX2h2Ztn84bR9m2nc3vX2036P3f0DTW5r6D9P0sKYvbNq/uGnv0LRn2n6npu0fN+2nZ//48T72Qe0k+mraP5gAok0HhY9R/2lNP9b05k21v6D9rS3m8b9f1x/RtBqfj9K0a1PtF2v/aE1nNw0A2hQ6yTQa85iT6/3h+Hya3ruZ0E+6/XJNezeN/+3f/jVNf2iKf1z2R0z7L02f1fR8Tc/W9A9ND2r6pKa1+DzOtD+k6SNM2zOanq/9V2q6QtOOTds5mjaQf9Dte2vaP23aT9N+d29y8Qn6Bv2B0v6rN1M9918aR/O4Pih121G0f27r2LgGBSL9xH2R8qJj2bYVf/a25i8Q5u/a3802x/T8jQ7u2/Yd07Z12rZ3c1XhW/G5j2lf1PRa2/qJ2p7WtLqVf5NptzVtoN/V7f/SNBqN9zTtc829+iM1Xb5p30PTt5l2q7bXN/fv0XSzpj2aBkD3abpy07al2X9u2vaO/pZ2Q+0D4V1Mu0m7D2/av6hpv8n6h2kX2X5N45Xn35/T9J+mvQfTbk+T+sE2x9r3btr2n8hM9f7vafugB12520SjH5S/0/4vR3wR+yvCunYp/Kz4Y9qHl1Qz/sK18kP39N84h3w16ZfQe7y1H7k0xL/S7mPaP1B3bCq6T9PezXW60fTbtBui922j7UFNLzPtlk3bhzTtG039vpo+wrRLbV/QdFPT/uFN2xs0XbHp+2m/T2+/qGmf0/QOpl2u6b4t/M8x7Tfb9l2a/u1pf0vTfpNtX9P0V03jdfHfpvE/X1d/wLQz20/a181T771a062axuvT21q2s2X/iM2yv4P941/aB9304pP2gR7r8+y1S//5H19/4s8c8z+bLvwD9vK0P7eA5q906E/d58vI/2yWf1A1+d4Lg0yQGzRdzbRbNu3x792bvn+g6ZJM2xs0nblp/2nT3t2036P3f0TfT0iAAABJRU5ErkJggg==" style="max-height: 60px;" alt="Logo" />
</div>
<div class="title">Windows- & Office-Anmeldung</div>
<div class="title">Intranet- & Helpdesk-Anmeldung</div>
<div class="credentials-section">
<div class="cred-row">
<span class="cred-label">Benutzername:</span>
<span class="cred-value">{{BENUTZERNAME}}</span>
</div>
<div class="cred-row">
<span class="cred-label">Kennwort:</span>
<span class="cred-value">{{PASSWORT}}</span>
</div>
<div class="cred-row">
<span class="cred-label">E-Mail-Adresse:</span>
<span class="cred-value">{{BENUTZERNAME}}@azintec.com</span>
</div>
</div>
<div class="sage-section">
<div class="sage-title">SAGE</div>
<div class="sage-checkbox">
<span class="checkbox-symbol">☑</span> Windows NT-Anmeldedaten verwenden
</div>
</div>
</div>
<!-- Rechte Hälfte (Leer für Falt-Zwecke) -->
<div class="right-side"></div>
</div>
</body>
</html>
templates/index.html
+416
View File
@@ -0,0 +1,416 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AZess - Benutzerantrag</title>
<!-- Use Google Fonts for premium typography -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #f3f4f6;
--surface-color: #ffffff;
--primary-color: #2563eb;
--primary-hover: #1d4ed8;
--text-main: #1f2937;
--text-muted: #6b7280;
--border-color: #e5e7eb;
--success-color: #10b981;
--radius: 12px;
--shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-main);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 600px;
padding: 2rem;
margin: 1rem;
}
.card {
background-color: var(--surface-color);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 2.5rem;
border: 1px solid rgba(255, 255, 255, 0.5);
}
h1 {
margin-top: 0;
font-size: 1.75rem;
font-weight: 700;
color: var(--text-main);
margin-bottom: 0.5rem;
text-align: center;
}
.subtitle {
text-align: center;
color: var(--text-muted);
margin-bottom: 2rem;
font-size: 0.95rem;
}
.form-group {
margin-bottom: 1.25rem;
}
.form-row {
display: flex;
gap: 1rem;
margin-bottom: 1.25rem;
}
.form-row .form-group {
flex: 1;
margin-bottom: 0;
}
label {
display: block;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--text-main);
}
input[type="text"] {
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
font-family: inherit;
border: 1px solid var(--border-color);
border-radius: 8px;
box-sizing: border-box;
transition: var(--transition);
background-color: #f9fafb;
color: var(--text-main);
}
input[type="text"]:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
background-color: var(--surface-color);
}
input[readonly] {
background-color: #f3f4f6;
cursor: default;
color: var(--text-muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.9rem;
}
.result-group {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-color);
display: none;
animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.result-group.active {
display: block;
}
.input-with-button {
display: flex;
gap: 0.5rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.25rem;
font-size: 0.95rem;
font-weight: 600;
font-family: inherit;
border: none;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
}
.btn-primary {
background-color: var(--primary-color);
color: white;
width: 100%;
}
.btn-primary:hover {
background-color: var(--primary-hover);
transform: translateY(-1px);
}
.btn-secondary {
background-color: #e5e7eb;
color: var(--text-main);
}
.btn-secondary:hover {
background-color: #d1d5db;
}
.btn-icon {
padding: 0.75rem;
background-color: #e5e7eb;
color: var(--text-main);
border-radius: 8px;
}
.btn-icon:hover {
background-color: #d1d5db;
}
.btn-icon.success {
background-color: var(--success-color);
color: white;
}
.actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.actions .btn {
flex: 1;
}
/* Icons */
svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h1>AZess</h1>
<div class="subtitle">IT Admin Benutzer-Einrichtung</div>
<div class="form-row">
<div class="form-group">
<label for="vorname">Vorname</label>
<input type="text" id="vorname" placeholder="Max" autocomplete="off">
</div>
<div class="form-group">
<label for="nachname">Nachname</label>
<input type="text" id="nachname" placeholder="Mustermann" autocomplete="off">
</div>
</div>
<button type="button" id="btn-generate" class="btn btn-primary">
Benutzer & Passwort generieren
</button>
<div class="result-group" id="result-group">
<div class="form-group">
<label>Generierter Benutzername</label>
<div class="input-with-button">
<input type="text" id="benutzername" readonly>
<button type="button" class="btn btn-icon" id="btn-copy-user" title="Kopieren">
<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
</button>
</div>
</div>
<div class="form-group">
<label>Generiertes Passwort</label>
<div class="input-with-button">
<input type="text" id="passwort" readonly>
<button type="button" class="btn btn-icon" id="btn-copy-pass" title="Kopieren">
<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
</button>
</div>
</div>
<div class="actions">
<button type="button" id="btn-regen-pass" class="btn btn-secondary">
Passwort neu generieren
</button>
<button type="button" id="btn-download" class="btn btn-primary" style="background-color: var(--success-color);">
PDF herunterladen
</button>
</div>
<div class="actions" style="margin-top: 1rem;">
<button type="button" id="btn-reset" class="btn btn-secondary" style="width: 100%; color: #ef4444;">
Neuen Benutzer
</button>
</div>
</div>
</div>
</div>
<!-- Hidden form for PDF download -->
<form id="pdf-form" action="/download_pdf" method="POST" style="display: none;">
<input type="hidden" name="vorname" id="pdf-vorname">
<input type="hidden" name="nachname" id="pdf-nachname">
<input type="hidden" name="benutzername" id="pdf-benutzername">
<input type="hidden" name="passwort" id="pdf-passwort">
</form>
<script>
document.addEventListener('DOMContentLoaded', () => {
const vornameInput = document.getElementById('vorname');
const nachnameInput = document.getElementById('nachname');
const btnGenerate = document.getElementById('btn-generate');
const resultGroup = document.getElementById('result-group');
const benutzernameInput = document.getElementById('benutzername');
const passwortInput = document.getElementById('passwort');
const btnCopyUser = document.getElementById('btn-copy-user');
const btnCopyPass = document.getElementById('btn-copy-pass');
const btnRegenPass = document.getElementById('btn-regen-pass');
const btnDownload = document.getElementById('btn-download');
const btnReset = document.getElementById('btn-reset');
const pdfForm = document.getElementById('pdf-form');
const pdfVorname = document.getElementById('pdf-vorname');
const pdfNachname = document.getElementById('pdf-nachname');
const pdfBenutzername = document.getElementById('pdf-benutzername');
const pdfPasswort = document.getElementById('pdf-passwort');
// German specific characters replacement
function sanitizeName(name) {
return name.trim().toLowerCase()
.replace(/ä/g, 'ae')
.replace(/ö/g, 'oe')
.replace(/ü/g, 'ue')
.replace(/ß/g, 'ss')
.replace(/[^a-z0-9]/g, '');
}
async function fetchPassword() {
try {
const response = await fetch('/api/generate_password');
const data = await response.json();
return data.password;
} catch (error) {
console.error('Error fetching password:', error);
return 'Fehler bei der Generierung';
}
}
async function generateAll() {
const vorname = vornameInput.value;
const nachname = nachnameInput.value;
if (!vorname || !nachname) {
alert('Bitte Vorname und Nachname eingeben.');
return;
}
const sVorname = sanitizeName(vorname);
const sNachname = sanitizeName(nachname);
benutzernameInput.value = `${sVorname}.${sNachname}`;
const password = await fetchPassword();
passwortInput.value = password;
btnGenerate.style.display = 'none';
vornameInput.readOnly = true;
nachnameInput.readOnly = true;
resultGroup.classList.add('active');
}
btnGenerate.addEventListener('click', generateAll);
// Also trigger on enter key
[vornameInput, nachnameInput].forEach(input => {
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') generateAll();
});
});
btnRegenPass.addEventListener('click', async () => {
// Add a small animation to show it's updating
passwortInput.style.opacity = '0.5';
const password = await fetchPassword();
passwortInput.value = password;
passwortInput.style.opacity = '1';
// Reset copy button if it was clicked
btnCopyPass.classList.remove('success');
btnCopyPass.innerHTML = '<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
});
btnReset.addEventListener('click', () => {
vornameInput.value = '';
nachnameInput.value = '';
vornameInput.readOnly = false;
nachnameInput.readOnly = false;
benutzernameInput.value = '';
passwortInput.value = '';
resultGroup.classList.remove('active');
btnGenerate.style.display = 'inline-flex';
// Reset copy buttons
[btnCopyUser, btnCopyPass].forEach(btn => {
btn.classList.remove('success');
btn.innerHTML = '<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
});
vornameInput.focus();
});
function copyToClipboard(inputEl, btnEl) {
inputEl.select();
inputEl.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(inputEl.value).then(() => {
btnEl.classList.add('success');
btnEl.innerHTML = '<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>';
setTimeout(() => {
btnEl.classList.remove('success');
btnEl.innerHTML = '<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
}, 2000);
});
}
btnCopyUser.addEventListener('click', () => copyToClipboard(benutzernameInput, btnCopyUser));
btnCopyPass.addEventListener('click', () => copyToClipboard(passwortInput, btnCopyPass));
btnDownload.addEventListener('click', () => {
pdfVorname.value = vornameInput.value;
pdfNachname.value = nachnameInput.value;
pdfBenutzername.value = benutzernameInput.value;
pdfPasswort.value = passwortInput.value;
pdfForm.submit();
});
});
</script>
</body>
</html>