thomasandClaude
2566dcc98d
Der Assistent deckt nun alle Bereiche aus /einstellungen ab. Neue Schritte fuer E-Mail (SMTP/IMAP) & CalDAV sowie REST-API; Indikator auf 7 Schritte. Secrets (Passwort, Token) werden nie vorausgefuellt und beim Speeren leerer Felder nicht ueberschrieben. Neuer Endpunkt /api/einrichtung/config mit SSRF-Guard (Mail-Host, CalDAV-URL, Ollama-Host) und API-Token-Kollisionspruefung. Abschluss-Checkliste trennt Pflicht- von optionalen Verbindungen. Co-Authored-By: Claude <noreply@anthropic.com>
646 lines
45 KiB
Plaintext
646 lines
45 KiB
Plaintext
<%
|
|
// Einrichtungsassistent für Nutzer, die noch keine Bewerbung angelegt haben.
|
|
// Server liefert `setupWizard` mit: aktiv, persoenlich (row),
|
|
// anschreiben/lebenslauf ({id,inhalt}), hasApiKey, ollamaModel, ollamaHost,
|
|
// cfg (nicht-geheime Mail-/CalDAV-Werte + hasMailPassword + hasApiToken).
|
|
// Das Partial rendert nur den Wizard; das umgebende index.ejs blendet
|
|
// gleichzeitig das Dashboard aus (Markup bleibt im DOM für main.js).
|
|
var p = setupWizard.persoenlich || {};
|
|
var anschreibenInhalt = setupWizard.anschreiben ? setupWizard.anschreiben.inhalt : '';
|
|
var lebenslaufInhalt = setupWizard.lebenslauf ? setupWizard.lebenslauf.inhalt : '';
|
|
var c = setupWizard.cfg || {};
|
|
%>
|
|
<style>
|
|
/* Fortschrittsanzeige: Verbindungslinie zwischen den Schritt-Punkten. */
|
|
.einr-steps { position: relative; }
|
|
.einr-steps::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 14px; /* Mitte der 28px-Punkte */
|
|
left: 6%;
|
|
right: 6%;
|
|
height: 2px;
|
|
background-color: rgba(255, 255, 255, 0.25);
|
|
}
|
|
.einr-step-dot {
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: background-color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
.einr-step.is-active .einr-step-dot { transform: scale(1.12); }
|
|
/* Sanftes Einblenden der Schrittinhalte. */
|
|
.einr-panel { animation: einrFade 0.28s ease; }
|
|
@keyframes einrFade {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { .einr-panel { animation: none; } }
|
|
</style>
|
|
|
|
<section id="einrichtung" class="mb-10">
|
|
<div class="mx-auto max-w-3xl overflow-hidden rounded-2xl border border-gray-200/80 bg-white shadow-xl shadow-gray-900/5 dark:border-white/10 dark:bg-gray-800">
|
|
|
|
<!-- Kopfbereich mit Verlaufsanzeige -->
|
|
<div class="relative bg-gradient-to-br from-sky-500 via-blue-600 to-indigo-600 px-5 py-7 text-white sm:px-8">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="flex items-start gap-3">
|
|
<span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-white/15 ring-1 ring-white/25 backdrop-blur">
|
|
<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496 3.06c.318.392.74.665 1.215.82a3.51 3.51 0 003.99-1.51l1.75-2.93a1.5 1.5 0 00-2.57-1.55l-1.75 2.93a.75.75 0 01-1.05.23l-.4-.27m-3.24-2.29l-2.83-3.5m0 0A3.291 3.291 0 001.87 7.28l.8 1.2m4.4 3.69l-3.6-5.4m1.55 6.6L4 7.6"/>
|
|
</svg>
|
|
</span>
|
|
<div>
|
|
<h1 class="text-xl font-semibold leading-tight sm:text-2xl">NextJobs einrichten</h1>
|
|
<p class="mt-1 max-w-md text-sm text-white/80">
|
|
In wenigen Schritten bist du startklar für deine erste Bewerbung.
|
|
Jeder Schritt lässt sich überspringen und später nachholen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button type="button" id="einrAusblenden"
|
|
class="shrink-0 rounded-lg px-3 py-1.5 text-xs font-medium text-white/80 ring-1 ring-white/25 transition hover:bg-white/10 hover:text-white">
|
|
Ausblenden
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Schrittanzeige (7 Schritte; Labels nur auf >= sm) -->
|
|
<ol id="einrSteps" class="einr-steps mt-7 flex items-start justify-between gap-1">
|
|
<% var stepLabels = ['Willkommen','Profil','Vorlagen','KI','E-Mail','API','Abschluss']; %>
|
|
<% for (var si = 1; si <= 7; si++) { %>
|
|
<li class="einr-step flex flex-1 flex-col items-center gap-1.5 text-center" data-step="<%= si %>">
|
|
<span class="einr-step-dot grid h-7 w-7 place-items-center rounded-full bg-white/20 text-xs font-semibold ring-1 ring-white/30"><%= si %></span>
|
|
<span class="hidden text-[11px] font-medium text-white/80 sm:block"><%= stepLabels[si-1] %></span>
|
|
</li>
|
|
<% } %>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- Formular / Schrittinhalte -->
|
|
<form id="einrForm" class="px-5 py-6 sm:px-8" autocomplete="off" novalidate>
|
|
|
|
<!-- Schritt 1: Willkommen -->
|
|
<div class="einr-panel" data-panel="1">
|
|
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Herzlich willkommen!</h2>
|
|
<p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-300">
|
|
NextJobs begleitet dich vom Stellenimport bis zur fertigen Bewerbung — mit
|
|
automatisch zugeschnittenen Anschreiben und Lebenslauf, E-Mail-Posteingang
|
|
und Bewerbungskalender. Damit das klappt, hinterlegen wir zuerst die nötigen
|
|
Daten. Das dauert etwa fünf Minuten.
|
|
</p>
|
|
<ul class="mt-5 space-y-2.5 text-sm text-gray-600 dark:text-gray-300">
|
|
<li class="flex items-start gap-2.5"><svg class="mt-0.5 h-5 w-5 shrink-0 text-blue-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span><strong class="font-medium text-gray-800 dark:text-white">Persönliche Angaben</strong> — fließen in jede Bewerbung ein.</span></li>
|
|
<li class="flex items-start gap-2.5"><svg class="mt-0.5 h-5 w-5 shrink-0 text-blue-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span><strong class="font-medium text-gray-800 dark:text-white">Basis-Unterlagen</strong> — dein Standard-Anschreiben & Lebenslauf als Text.</span></li>
|
|
<li class="flex items-start gap-2.5"><svg class="mt-0.5 h-5 w-5 shrink-0 text-blue-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span><strong class="font-medium text-gray-800 dark:text-white">Ollama-KI</strong> — erzeugt daraus die passenden Unterlagen.</span></li>
|
|
<li class="flex items-start gap-2.5"><svg class="mt-0.5 h-5 w-5 shrink-0 text-blue-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span><strong class="font-medium text-gray-800 dark:text-white">E-Mail & Kalender</strong> — Posteingang versenden und Termine synchronisieren.</span></li>
|
|
<li class="flex items-start gap-2.5"><svg class="mt-0.5 h-5 w-5 shrink-0 text-blue-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span><strong class="font-medium text-gray-800 dark:text-white">REST-API</strong> — optional, für Drittanbietersoftware.</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Schritt 2: Persönliche Angaben -->
|
|
<div class="einr-panel hidden" data-panel="2">
|
|
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Persönliche Angaben</h2>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
Diese Daten stehen oben in jedem Anschreiben und Lebenslauf. Pflichtfeld ist nur der Name.
|
|
</p>
|
|
<div class="mt-5 space-y-4">
|
|
<div>
|
|
<label for="einr-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Vollständiger Name <span class="text-red-500">*</span></label>
|
|
<input type="text" id="einr-name" name="name" required
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Max Mustermann" value="<%= p.name || '' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-adresse" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Adresse</label>
|
|
<textarea id="einr-adresse" name="adresse" rows="2"
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Musterstraße 1, 12345 Musterstadt"><%= p.adresse || '' %></textarea>
|
|
</div>
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label for="einr-email" class="block text-xs font-medium text-gray-500 dark:text-gray-400">E-Mail</label>
|
|
<input type="email" id="einr-email" name="email"
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="name@example.com" value="<%= p.email || '' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-telefon" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Telefon</label>
|
|
<input type="text" id="einr-telefon" name="telefon"
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="z. B. 030 12345678" value="<%= p.telefon || '' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-ort" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Wohnort</label>
|
|
<input type="text" id="einr-ort" name="ort"
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="z. B. Berlin" value="<%= p.ort || '' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-kundennummer" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Jobcenter-Kundennummer</label>
|
|
<input type="text" id="einr-kundennummer" name="kundennummer"
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="z. B. 123456789" value="<%= p.kundennummer || '' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-webseite" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Webseite</label>
|
|
<input type="text" id="einr-webseite" name="webseite"
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="z. B. nextjobs.cc" value="<%= p.webseite || '' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-geburtsdatum" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Geburtsdatum</label>
|
|
<input type="text" id="einr-geburtsdatum" name="geburtsdatum"
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="TT.MM.JJJJ" value="<%= p.geburtsdatum || '' %>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schritt 3: Basis-Unterlagen -->
|
|
<div class="einr-panel hidden" data-panel="3">
|
|
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Basis-Unterlagen</h2>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
Füge dein Standard-Anschreiben und deinen Lebenslauf als Text ein. Die KI
|
|
nutzt sie als Faktengrundlage und erfindet nichts hinzu.
|
|
</p>
|
|
<div class="mt-5 space-y-5">
|
|
<div>
|
|
<label for="einr-anschreiben" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Standard-Anschreiben</label>
|
|
<textarea id="einr-anschreiben" rows="6"
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm leading-relaxed text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Sehr geehrte Damen und Herren, …"><%= anschreibenInhalt %></textarea>
|
|
</div>
|
|
<div>
|
|
<label for="einr-lebenslauf" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Lebenslauf</label>
|
|
<textarea id="einr-lebenslauf" rows="8"
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm leading-relaxed text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Persönliche Daten, Berufserfahrung, Ausbildung, Kenntnisse …"><%= lebenslaufInhalt %></textarea>
|
|
</div>
|
|
<p class="text-xs text-gray-400 dark:text-gray-500">
|
|
Tipp: Ausführliche Vorlagen lassen sich später unter „Vorlagen“ verfeinern — inkl. Design und Foto.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schritt 4: Ollama-KI -->
|
|
<div class="einr-panel hidden" data-panel="4">
|
|
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Ollama-KI einrichten</h2>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
Über die Ollama Cloud erzeugt NextJobs automatisch zugeschnittene
|
|
Bewerbungsunterlagen. Ohne API-Schlüssel bleibt die KI deaktiviert —
|
|
später unter „Einstellungen“ nachholbar.
|
|
</p>
|
|
<div class="mt-5 space-y-4">
|
|
<div>
|
|
<label for="einr-apikey" class="block text-sm font-medium text-gray-700 dark:text-gray-300">API-Schlüssel</label>
|
|
<div class="relative mt-1">
|
|
<input type="password" id="einr-apikey" name="OLLAMA_API_KEY"
|
|
class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 pr-10 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="ol-…" autocomplete="off">
|
|
<button type="button" class="einr-reveal absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" data-target="einr-apikey" title="Wert anzeigen/verbergen" tabindex="-1">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
|
</button>
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
|
|
Schlüssel holen unter
|
|
<a href="https://ollama.com/settings/keys" target="_blank" rel="noopener" class="text-blue-600 hover:underline dark:text-sky-400">ollama.com/settings/keys</a>.
|
|
<% if (setupWizard.hasApiKey) { %><span class="ml-1 text-green-600 dark:text-green-400">· bereits hinterlegt</span><% } %>
|
|
</p>
|
|
</div>
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label for="einr-model" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Modell</label>
|
|
<input type="text" id="einr-model" name="OLLAMA_MODEL"
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
value="<%= setupWizard.ollamaModel || 'gpt-oss:120b' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-host" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Host</label>
|
|
<input type="text" id="einr-host" name="OLLAMA_HOST"
|
|
class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
value="<%= setupWizard.ollamaHost || 'https://ollama.com' %>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schritt 5: E-Mail & Kalender -->
|
|
<div class="einr-panel hidden" data-panel="5">
|
|
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">E-Mail & Kalender</h2>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
E-Mail-Empfang (IMAP) und -Versand (SMTP) laufen über dein eigenes Postfach.
|
|
Der Bewerbungskalender nutzt CalDAV und teilt sich Login & Passwort mit
|
|
der E-Mail. Beides ist optional — ohne Angabe bleiben Postfach und
|
|
Kalender-Sync deaktiviert.
|
|
</p>
|
|
|
|
<!-- E-Mail -->
|
|
<div class="mt-5">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">E-Mail (SMTP / IMAP)</h3>
|
|
<div class="mt-3 grid gap-4 sm:grid-cols-2">
|
|
<div class="sm:col-span-2">
|
|
<label for="einr-mail-host" class="block text-xs font-medium text-gray-500 dark:text-gray-400">SMTP/IMAP Host</label>
|
|
<input type="text" id="einr-mail-host" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="mail.example.com" value="<%= c.MAIL_HOST || '' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-mail-smtp-port" class="block text-xs font-medium text-gray-500 dark:text-gray-400">SMTP-Port</label>
|
|
<input type="text" id="einr-mail-smtp-port" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
value="<%= c.MAIL_SMTP_PORT || '587' %>">
|
|
<p class="mt-1 text-[11px] text-gray-400 dark:text-gray-500">587 = STARTTLS, 465 = implicit TLS</p>
|
|
</div>
|
|
<div>
|
|
<label for="einr-mail-imap-port" class="block text-xs font-medium text-gray-500 dark:text-gray-400">IMAP-Port</label>
|
|
<input type="text" id="einr-mail-imap-port" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
value="<%= c.MAIL_IMAP_PORT || '993' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-mail-user" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Benutzername (Login)</label>
|
|
<input type="text" id="einr-mail-user" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="name@example.com" value="<%= c.MAIL_USER || '' %>">
|
|
<p class="mt-1 text-[11px] text-gray-400 dark:text-gray-500">Auch CalDAV-Login</p>
|
|
</div>
|
|
<div>
|
|
<label for="einr-mail-password" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Passwort</label>
|
|
<div class="relative mt-1">
|
|
<input type="password" id="einr-mail-password"
|
|
class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 pr-10 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="<%= c.hasMailPassword ? 'vorhanden — leer lassen, um nichts zu ändern' : 'Passwort' %>" autocomplete="off">
|
|
<button type="button" class="einr-reveal absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" data-target="einr-mail-password" title="Wert anzeigen/verbergen" tabindex="-1">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="einr-mail-fromname" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Absendername</label>
|
|
<input type="text" id="einr-mail-fromname" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Max Mustermann" value="<%= c.MAIL_FROM_NAME || '' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-mail-from" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Absenderadresse</label>
|
|
<input type="text" id="einr-mail-from" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="leer = Benutzername" value="<%= c.MAIL_FROM || '' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-mail-mailbox" class="block text-xs font-medium text-gray-500 dark:text-gray-400">IMAP-Postfach</label>
|
|
<input type="text" id="einr-mail-mailbox" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
value="<%= c.MAIL_IMAP_MAILBOX || 'INBOX' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-mail-poll" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Abrufintervall (ms)</label>
|
|
<input type="text" id="einr-mail-poll" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
value="<%= c.MAIL_POLL_MS || '180000' %>">
|
|
<p class="mt-1 text-[11px] text-gray-400 dark:text-gray-500">greift nach Neustart</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CalDAV -->
|
|
<div class="mt-7">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Bewerbungskalender (CalDAV)</h3>
|
|
<div class="mt-3 grid gap-4 sm:grid-cols-2">
|
|
<div class="sm:col-span-2">
|
|
<label for="einr-caldav-url" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Kalender-URL</label>
|
|
<input type="text" id="einr-caldav-url" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="https://mail.example.com/SOGo/dav/name@…/Calendar/XXXX/" value="<%= c.CALDAV_URL || '' %>">
|
|
<p class="mt-1 text-[11px] text-gray-400 dark:text-gray-500">Voll-URL der Sammlung, mit abschließendem /. Anmeldung über Benutzername/Passwort oben.</p>
|
|
</div>
|
|
<div>
|
|
<label for="einr-caldav-alarm" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Erinnerung (Min. vor Termin)</label>
|
|
<input type="text" id="einr-caldav-alarm" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
value="<%= c.CALDAV_ALARM_MIN || '60' %>">
|
|
</div>
|
|
<div>
|
|
<label for="einr-caldav-poll" class="block text-xs font-medium text-gray-500 dark:text-gray-400">Sync-Intervall (ms)</label>
|
|
<input type="text" id="einr-caldav-poll" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
value="<%= c.CALDAV_POLL_MS || '300000' %>">
|
|
<p class="mt-1 text-[11px] text-gray-400 dark:text-gray-500">greift nach Neustart</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schritt 6: REST-API -->
|
|
<div class="einr-panel hidden" data-panel="6">
|
|
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">REST-API (optional)</h2>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
Ist ein Token gesetzt, ist <code class="rounded bg-gray-100 px-1 dark:bg-gray-700">/api/v1</code>
|
|
für dich aktiv und erwartet den Wert im Header
|
|
<code class="rounded bg-gray-100 px-1 dark:bg-gray-700">X-API-Key</code>.
|
|
Der Token identifiziert dein Konto — Anfragen sehen und ändern nur deine
|
|
eigenen Daten. Swagger unter <a href="/swagger" class="text-blue-600 hover:underline dark:text-sky-400">/swagger</a>.
|
|
</p>
|
|
<div class="mt-5">
|
|
<label for="einr-api-token" class="block text-sm font-medium text-gray-700 dark:text-gray-300">API-Token</label>
|
|
<div class="relative mt-1">
|
|
<input type="password" id="einr-api-token"
|
|
class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 pr-10 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="<%= c.hasApiToken ? 'vorhanden — leer lassen, um nichts zu ändern' : 'Token erzeugen oder eintragen' %>" autocomplete="off">
|
|
<button type="button" class="einr-reveal absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" data-target="einr-api-token" title="Wert anzeigen/verbergen" tabindex="-1">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="mt-2 flex flex-wrap items-center gap-2">
|
|
<button type="button" id="einr-token-gen"
|
|
class="inline-flex items-center gap-1.5 rounded-md border border-gray-300 px-3 py-1.5 text-xs text-gray-700 transition hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700">
|
|
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
|
Neu generieren
|
|
</button>
|
|
<button type="button" id="einr-token-copy"
|
|
class="inline-flex items-center gap-1.5 rounded-md border border-gray-300 px-3 py-1.5 text-xs text-gray-700 transition hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700">
|
|
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
|
Kopieren
|
|
</button>
|
|
<span id="einr-token-hint" class="hidden text-xs text-amber-600 dark:text-amber-400"></span>
|
|
<% if (c.hasApiToken) { %><span class="text-xs text-green-600 dark:text-green-400">· bereits hinterlegt</span><% } %>
|
|
</div>
|
|
<p class="mt-2 text-[11px] text-gray-400 dark:text-gray-500">Leer lassen = vorhandenen Token nicht anfassen. Ein neuer Token macht den alten sofort ungültig.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schritt 7: Abschluss -->
|
|
<div class="einr-panel hidden" data-panel="7">
|
|
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Fast geschafft!</h2>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
Hier ist dein Stand. Fehlende Punkte lassen sich jederzeit unter
|
|
„Vorlagen“ oder „Einstellungen“ nachholen.
|
|
</p>
|
|
<ul class="mt-5 divide-y divide-gray-100 dark:divide-gray-700/60 overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<li class="flex items-center gap-3 px-4 py-3" data-check="profil"><span class="einr-ico grid h-6 w-6 place-items-center rounded-full"></span><span class="text-sm text-gray-700 dark:text-gray-200">Persönliche Angaben</span></li>
|
|
<li class="flex items-center gap-3 px-4 py-3" data-check="anschreiben"><span class="einr-ico grid h-6 w-6 place-items-center rounded-full"></span><span class="text-sm text-gray-700 dark:text-gray-200">Standard-Anschreiben hinterlegt</span></li>
|
|
<li class="flex items-center gap-3 px-4 py-3" data-check="lebenslauf"><span class="einr-ico grid h-6 w-6 place-items-center rounded-full"></span><span class="text-sm text-gray-700 dark:text-gray-200">Lebenslauf hinterlegt</span></li>
|
|
<li class="flex items-center gap-3 px-4 py-3" data-check="ki"><span class="einr-ico grid h-6 w-6 place-items-center rounded-full"></span><span class="text-sm text-gray-700 dark:text-gray-200">Ollama-KI aktiv</span></li>
|
|
</ul>
|
|
|
|
<p class="mt-5 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">Weitere Verbindungen (optional)</p>
|
|
<ul class="mt-2 divide-y divide-gray-100 dark:divide-gray-700/60 overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<li class="flex items-center gap-3 px-4 py-3" data-opt="mail"><span class="einr-ico grid h-6 w-6 place-items-center rounded-full"></span><span class="text-sm text-gray-700 dark:text-gray-200">E-Mail (SMTP/IMAP)</span></li>
|
|
<li class="flex items-center gap-3 px-4 py-3" data-opt="kalender"><span class="einr-ico grid h-6 w-6 place-items-center rounded-full"></span><span class="text-sm text-gray-700 dark:text-gray-200">Bewerbungskalender (CalDAV)</span></li>
|
|
<li class="flex items-center gap-3 px-4 py-3" data-opt="api"><span class="einr-ico grid h-6 w-6 place-items-center rounded-full"></span><span class="text-sm text-gray-700 dark:text-gray-200">REST-API-Token</span></li>
|
|
</ul>
|
|
|
|
<div class="mt-5 rounded-lg bg-blue-50 p-4 text-sm text-blue-800 dark:bg-blue-500/10 dark:text-blue-200">
|
|
<p class="font-medium">Empfehlung: automatische Stellensuche einrichten</p>
|
|
<p class="mt-1 text-blue-700/90 dark:text-blue-200/80">
|
|
Lege unter „Stellensuche → Suchprofil & Läufe“ fest, wo und wonach
|
|
automatisch gesucht wird. So landen passende Stellenangebote direkt hier.
|
|
</p>
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
<a href="/jobsuche" class="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition hover:bg-blue-700">Suchprofil öffnen</a>
|
|
<a href="/vorlagen" class="inline-flex items-center gap-1.5 rounded-md bg-white px-3 py-1.5 text-xs font-medium text-blue-600 ring-1 ring-blue-200 transition hover:bg-blue-50 dark:bg-transparent dark:text-blue-200 dark:ring-blue-400/40 dark:hover:bg-white/5">Vorlagen verfeinern</a>
|
|
<a href="/einstellungen" class="inline-flex items-center gap-1.5 rounded-md bg-white px-3 py-1.5 text-xs font-medium text-blue-600 ring-1 ring-blue-200 transition hover:bg-blue-50 dark:bg-transparent dark:text-blue-200 dark:ring-blue-400/40 dark:hover:bg-white/5">Alle Einstellungen</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fuß-Navigation -->
|
|
<div class="mt-8 flex flex-wrap items-center justify-between gap-3 border-t border-gray-200 pt-5 dark:border-gray-700">
|
|
<button type="button" id="einrZurueck"
|
|
class="inline-flex items-center gap-1.5 rounded-md px-3.5 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
|
|
Zurück
|
|
</button>
|
|
<div class="flex items-center gap-2">
|
|
<button type="button" id="einrDirekt"
|
|
class="hidden text-sm font-medium text-blue-600 hover:underline dark:text-sky-400">
|
|
Bewerbung manuell anlegen
|
|
</button>
|
|
<button type="button" id="einrUeberspringen"
|
|
class="rounded-md px-3.5 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
|
|
Überspringen
|
|
</button>
|
|
<button type="button" id="einrWeiter"
|
|
class="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60">
|
|
<span id="einrWeiterLabel">Los geht's</span>
|
|
<svg id="einrWeiterIcon" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
|
<svg id="einrSpinner" class="hidden h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p id="einrFehler" class="mt-3 hidden text-sm text-red-600 dark:text-red-400"></p>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
(function () {
|
|
var form = document.getElementById('einrForm');
|
|
if (!form) return;
|
|
|
|
var MAX = 7;
|
|
var step = 1;
|
|
var panels = {};
|
|
Array.prototype.slice.call(form.querySelectorAll('.einr-panel')).forEach(function (el) {
|
|
panels[el.getAttribute('data-panel')] = el;
|
|
});
|
|
var stepEls = Array.prototype.slice.call(document.querySelectorAll('#einrSteps .einr-step'));
|
|
|
|
// Vorhandene Secrets kennen wir nur als Flag — der Wert steht nie im Formular.
|
|
var VORHANDEN = {
|
|
apiKey: <%= setupWizard.hasApiKey ? 'true' : 'false' %>,
|
|
mailPassword: <%= (c.hasMailPassword) ? 'true' : 'false' %>,
|
|
apiToken: <%= (c.hasApiToken) ? 'true' : 'false' %>
|
|
};
|
|
|
|
var btnZurueck = document.getElementById('einrZurueck');
|
|
var btnUeberspringen = document.getElementById('einrUeberspringen');
|
|
var btnWeiter = document.getElementById('einrWeiter');
|
|
var lblWeiter = document.getElementById('einrWeiterLabel');
|
|
var iconWeiter = document.getElementById('einrWeiterIcon');
|
|
var spinner = document.getElementById('einrSpinner');
|
|
var btnDirekt = document.getElementById('einrDirekt');
|
|
var btnAusblenden = document.getElementById('einrAusblenden');
|
|
var fehler = document.getElementById('einrFehler');
|
|
|
|
var labels = { 1: 'Los geht\'s', 2: 'Weiter', 3: 'Weiter', 4: 'Weiter', 5: 'Weiter', 6: 'Weiter', 7: 'Abschließen' };
|
|
|
|
function v(sel) { var el = form.querySelector(sel); return el ? el.value : ''; }
|
|
function showFehler(msg) { fehler.textContent = msg || ''; fehler.classList.toggle('hidden', !msg); }
|
|
function setBusy(busy) {
|
|
btnWeiter.disabled = busy;
|
|
spinner.classList.toggle('hidden', !busy);
|
|
iconWeiter.classList.toggle('hidden', busy);
|
|
}
|
|
function check(r) { if (!r.ok || !r.json.success) throw new Error(r.json.error || 'Speichern fehlgeschlagen'); }
|
|
|
|
function render() {
|
|
Object.keys(panels).forEach(function (n) { panels[n].classList.toggle('hidden', String(n) !== String(step)); });
|
|
stepEls.forEach(function (el) {
|
|
var n = Number(el.getAttribute('data-step'));
|
|
var dot = el.querySelector('.einr-step-dot');
|
|
el.classList.toggle('is-active', n === step);
|
|
if (n < step) {
|
|
dot.style.backgroundColor = 'rgba(255,255,255,0.92)';
|
|
dot.style.color = '#1d4ed8';
|
|
dot.innerHTML = '<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>';
|
|
} else if (n === step) {
|
|
dot.style.backgroundColor = '#ffffff';
|
|
dot.style.color = '#1d4ed8';
|
|
dot.textContent = String(n);
|
|
} else {
|
|
dot.style.backgroundColor = '';
|
|
dot.style.color = '';
|
|
dot.textContent = String(n);
|
|
}
|
|
});
|
|
btnZurueck.classList.toggle('hidden', step === 1);
|
|
btnUeberspringen.classList.toggle('hidden', step === 1 || step === MAX);
|
|
btnDirekt.classList.toggle('hidden', step !== 1 && step !== MAX);
|
|
lblWeiter.textContent = labels[step] || 'Weiter';
|
|
}
|
|
|
|
function gehZu(n) {
|
|
step = Math.max(1, Math.min(MAX, n));
|
|
if (step === MAX) { aktualiereStatus(); }
|
|
render();
|
|
var sec = document.getElementById('einrichtung');
|
|
if (sec) sec.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
// ico für Pflicht-Checkliste: grün = erledigt, orange = offen.
|
|
function setzeCheck(name, ok) {
|
|
var li = form.querySelector('[data-check="' + name + '"]');
|
|
if (!li) return;
|
|
var ico = li.querySelector('.einr-ico');
|
|
ico.style.backgroundColor = ok ? 'rgba(16,185,129,0.12)' : 'rgba(245,158,11,0.12)';
|
|
ico.style.color = ok ? '#059669' : '#d97706';
|
|
ico.innerHTML = ok
|
|
? '<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>'
|
|
: '<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01"/></svg>';
|
|
}
|
|
// ico für optionale Verbindungen: grün = eingerichtet, neutral = optional/offen.
|
|
function setzeOpt(name, ok) {
|
|
var li = form.querySelector('[data-opt="' + name + '"]');
|
|
if (!li) return;
|
|
var ico = li.querySelector('.einr-ico');
|
|
ico.style.backgroundColor = ok ? 'rgba(16,185,129,0.12)' : 'rgba(148,163,184,0.15)';
|
|
ico.style.color = ok ? '#059669' : '#94a3b8';
|
|
ico.innerHTML = ok
|
|
? '<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>'
|
|
: '<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"/></svg>';
|
|
}
|
|
|
|
function aktualiereStatus() {
|
|
setzeCheck('profil', !!v('#einr-name').trim());
|
|
setzeCheck('anschreiben', !!v('#einr-anschreiben').trim());
|
|
setzeCheck('lebenslauf', !!v('#einr-lebenslauf').trim());
|
|
setzeCheck('ki', !!v('#einr-apikey').trim() || VORHANDEN.apiKey);
|
|
setzeOpt('mail', !!v('#einr-mail-host').trim());
|
|
setzeOpt('kalender', !!v('#einr-caldav-url').trim());
|
|
setzeOpt('api', !!v('#einr-api-token').trim() || VORHANDEN.apiToken);
|
|
}
|
|
|
|
function post(url, data) {
|
|
var body = new URLSearchParams();
|
|
Object.keys(data).forEach(function (k) { body.append(k, data[k]); });
|
|
return fetch(url, { method: 'POST', body: body, headers: { 'X-Requested-With': 'fetch' } })
|
|
.then(function (r) { return r.json().then(function (j) { return { ok: r.ok, json: j }; }); });
|
|
}
|
|
|
|
// Speichert den Inhalt des aktuellen Schritts vor dem Weiterspringen.
|
|
function speichern(stepNr) {
|
|
if (stepNr === 2) {
|
|
if (!v('#einr-name').trim()) {
|
|
showFehler('Bitte gib mindestens deinen Namen ein — das ist das einzige Pflichtfeld.');
|
|
return Promise.reject();
|
|
}
|
|
return post('/api/einrichtung/persoenlich', {
|
|
name: v('#einr-name'), adresse: v('#einr-adresse'), kundennummer: v('#einr-kundennummer'),
|
|
email: v('#einr-email'), telefon: v('#einr-telefon'), ort: v('#einr-ort'),
|
|
webseite: v('#einr-webseite'), geburtsdatum: v('#einr-geburtsdatum')
|
|
}).then(check);
|
|
}
|
|
if (stepNr === 3) {
|
|
return post('/api/einrichtung/basis', { typ: 'Anschreiben', inhalt: v('#einr-anschreiben') })
|
|
.then(function () { return post('/api/einrichtung/basis', { typ: 'Lebenslauf', inhalt: v('#einr-lebenslauf') }); })
|
|
.then(check);
|
|
}
|
|
if (stepNr === 4) {
|
|
return post('/api/einrichtung/ollama', {
|
|
OLLAMA_API_KEY: v('#einr-apikey'), OLLAMA_MODEL: v('#einr-model'), OLLAMA_HOST: v('#einr-host')
|
|
}).then(check);
|
|
}
|
|
if (stepNr === 5) {
|
|
var data = {
|
|
MAIL_HOST: v('#einr-mail-host'), MAIL_SMTP_PORT: v('#einr-mail-smtp-port'),
|
|
MAIL_IMAP_PORT: v('#einr-mail-imap-port'), MAIL_USER: v('#einr-mail-user'),
|
|
MAIL_FROM_NAME: v('#einr-mail-fromname'), MAIL_FROM: v('#einr-mail-from'),
|
|
MAIL_IMAP_MAILBOX: v('#einr-mail-mailbox'), MAIL_POLL_MS: v('#einr-mail-poll'),
|
|
CALDAV_URL: v('#einr-caldav-url'), CALDAV_ALARM_MIN: v('#einr-caldav-alarm'),
|
|
CALDAV_POLL_MS: v('#einr-caldav-poll')
|
|
};
|
|
var pw = v('#einr-mail-password');
|
|
if (pw) data.MAIL_PASSWORD = pw; // leer = vorhandenes Passwort nicht überschreiben
|
|
return post('/api/einrichtung/config', data).then(check);
|
|
}
|
|
if (stepNr === 6) {
|
|
var token = v('#einr-api-token');
|
|
var data = {};
|
|
if (token) data.API_TOKEN = token; // leer = vorhandenen Token nicht anfassen
|
|
return post('/api/einrichtung/config', data).then(check);
|
|
}
|
|
return Promise.resolve();
|
|
}
|
|
|
|
btnWeiter.addEventListener('click', function () {
|
|
showFehler('');
|
|
if (step === MAX) {
|
|
post('/api/einrichtung/verstecken', {}).then(function () { window.location.href = '/'; });
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
speichern(step).then(function () {
|
|
// Nach dem Speichern ggf. „vorhanden"-Flags aktualisieren, damit die
|
|
// Abschluss-Checkliste korrekt steht (z. B. neu erzeugter API-Token).
|
|
if (step === 4 && v('#einr-apikey')) VORHANDEN.apiKey = VORHANDEN.apiKey || !!v('#einr-apikey').trim();
|
|
if (step === 5 && v('#einr-mail-password')) VORHANDEN.mailPassword = VORHANDEN.mailPassword || !!v('#einr-mail-password').trim();
|
|
if (step === 6 && v('#einr-api-token')) VORHANDEN.apiToken = VORHANDEN.apiToken || !!v('#einr-api-token').trim();
|
|
setBusy(false);
|
|
gehZu(step + 1);
|
|
}).catch(function (e) {
|
|
setBusy(false);
|
|
if (e && e.message) showFehler(e.message);
|
|
});
|
|
});
|
|
|
|
btnZurueck.addEventListener('click', function () { showFehler(''); gehZu(step - 1); });
|
|
btnUeberspringen.addEventListener('click', function () { showFehler(''); gehZu(step + 1); });
|
|
btnDirekt.addEventListener('click', function () { if (typeof window.openAddApplicationModal === 'function') window.openAddApplicationModal(); });
|
|
btnAusblenden.addEventListener('click', function () { post('/api/einrichtung/verstecken', {}).then(function () { window.location.href = '/'; }); });
|
|
|
|
// Reveal-Toggle für alle Passwort-/Secret-Felder (ein shared Handler).
|
|
Array.prototype.slice.call(form.querySelectorAll('.einr-reveal')).forEach(function (btn) {
|
|
btn.addEventListener('click', function () {
|
|
var inp = document.getElementById(btn.getAttribute('data-target'));
|
|
if (inp) inp.type = inp.type === 'password' ? 'text' : 'password';
|
|
});
|
|
});
|
|
|
|
// API-Token neu generieren (32 Byte hex, clientseitig CSPRNG).
|
|
var gen = document.getElementById('einr-token-gen');
|
|
var copy = document.getElementById('einr-token-copy');
|
|
var hinweis = document.getElementById('einr-token-hint');
|
|
function tokenHint(text, ok) {
|
|
hinweis.textContent = text;
|
|
hinweis.classList.remove('hidden');
|
|
hinweis.classList.toggle('text-amber-600', !ok); hinweis.classList.toggle('dark:text-amber-400', !ok);
|
|
hinweis.classList.toggle('text-green-600', ok); hinweis.classList.toggle('dark:text-green-400', ok);
|
|
}
|
|
if (gen) gen.addEventListener('click', function () {
|
|
var inp = document.getElementById('einr-api-token');
|
|
if (!inp) return;
|
|
var bytes = new Uint8Array(32); crypto.getRandomValues(bytes);
|
|
inp.value = Array.from(bytes).map(function (b) { return b.toString(16).padStart(2, '0'); }).join('');
|
|
inp.type = 'text';
|
|
tokenHint('Neuer Token erzeugt — zum Aktivieren „Weiter". Der alte wird damit ungültig.', false);
|
|
});
|
|
if (copy) copy.addEventListener('click', async function () {
|
|
var inp = document.getElementById('einr-api-token');
|
|
if (!inp || !inp.value) return;
|
|
try { await navigator.clipboard.writeText(inp.value); tokenHint('In die Zwischenablage kopiert.', true); }
|
|
catch (e) { inp.type = 'text'; inp.select(); tokenHint('Kopieren nicht möglich — Wert ist markiert.', false); }
|
|
});
|
|
|
|
render();
|
|
})();
|
|
</script> |