fix: kein iframe, neuer Tab + Checkbox-Bestätigung vor PDF

frontend/src/tools/paywallkiller.jsx

@@ -1,5 +1,5 @@
-import { useState, useRef, useEffect } from 'react';
-import { S, api } from '../lib.js';
+import { useState, useRef } from 'react';
+import { S } from '../lib.js';
 
 const C = {
   accent:  '#f59e0b',
@@ -9,14 +9,13 @@ const C = {
 };
 
 export default function PaywallKiller() {
-  const [inputUrl,    setInputUrl]    = useState('');
-  const [status,      setStatus]      = useState('idle');
-  const [archiveUrl,  setArchiveUrl]  = useState('');
-  const [showCaptcha, setShowCaptcha] = useState(false);
-  const [errMsg,      setErrMsg]      = useState('');
-  const [pdfLoading,  setPdfLoading]  = useState(false);
-  const inputRef  = useRef(null);
-  const iframeRef = useRef(null);
+  const [inputUrl,      setInputUrl]      = useState('');
+  const [status,        setStatus]        = useState('idle');
+  const [archiveUrl,    setArchiveUrl]    = useState('');
+  const [captchaDone,   setCaptchaDone]   = useState(false);
+  const [errMsg,        setErrMsg]        = useState('');
+  const [pdfLoading,    setPdfLoading]    = useState(false);
+  const inputRef = useRef(null);
 
   function getTargetUrl() {
     const url = inputUrl.trim();
@@ -27,26 +26,19 @@ export default function PaywallKiller() {
     if (!inputUrl.trim()) return;
     const aUrl = `https://archive.ph/newest/${getTargetUrl()}`;
     setArchiveUrl(aUrl);
-    setStatus('captcha');
-    setShowCaptcha(true);
+    setStatus('open_archive');
+    setCaptchaDone(false);
     setErrMsg('');
   }
 
-  function handleCaptchaDone() {
-    setShowCaptcha(false);
-    setStatus('ready');
+  function handleOpenArchive() {
+    window.open(archiveUrl, '_blank');
   }
 
   async function handlePdf() {
     setPdfLoading(true);
     setErrMsg('');
     try {
-      // Cookies für archive.ph aus dem Browser lesen
-      // document.cookie liefert nur same-site cookies – archive.ph cookies
-      // sind third-party und nicht lesbar. Wir übergeben stattdessen
-      // die URL und lassen Puppeteer direkt die Session simulieren:
-      // Puppeteer öffnet zuerst archive.ph root um Cookies zu setzen,
-      // dann direkt die Snapshot-URL.
       const token = localStorage.getItem('sk_token');
       const res = await fetch('/api/tools/paywallkiller/pdf', {
         method: 'POST',
@@ -80,7 +72,7 @@ export default function PaywallKiller() {
     setInputUrl('');
     setStatus('idle');
     setArchiveUrl('');
-    setShowCaptcha(false);
+    setCaptchaDone(false);
     setErrMsg('');
     setPdfLoading(false);
     setTimeout(() => inputRef.current?.focus(), 50);
@@ -110,13 +102,12 @@ export default function PaywallKiller() {
           style={{ ...S.inp, width: '100%', boxSizing: 'border-box', marginBottom: 10 }}
         />
         <div style={{ display: 'flex', gap: 8 }}>
-          {status === 'idle' && (
+          {status === 'idle' ? (
             <button onClick={handleSearch} disabled={!inputUrl.trim()}
               style={{ ...S.btn(C.accent), flex: 1, opacity: !inputUrl.trim() ? 0.45 : 1, cursor: !inputUrl.trim() ? 'default' : 'pointer' }}>
-              🔍 Archiv öffnen
+              🔍 Archiv suchen
             </button>
-          )}
-          {status !== 'idle' && (
+          ) : (
             <button onClick={handleReset}
               style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 6, padding: '8px 14px', color: 'rgba(255,255,255,0.6)', cursor: 'pointer', fontFamily: 'monospace', fontSize: 12 }}>
               ✕ Reset
@@ -125,82 +116,84 @@ export default function PaywallKiller() {
         </div>
       </div>
 
-      {/* CAPTCHA-Schritt */}
-      {status === 'captcha' && (
+      {/* Schritt 1: archive.ph öffnen + CAPTCHA */}
+      {status === 'open_archive' && (
         <div style={{ ...S.card, borderColor: `${C.accent}55`, marginBottom: 16 }}>
-          <div style={{ ...S.head, marginBottom: 8 }}>SCHRITT 1 – CAPTCHA BESTÄTIGEN</div>
-          <div style={{ color: C.muted, fontSize: 11, fontFamily: 'monospace', marginBottom: 12, lineHeight: 1.6 }}>
-            archive.ph wird unten geladen. Falls ein CAPTCHA erscheint: abhaken, warten bis der Artikel sichtbar ist, dann auf "Artikel bereit → PDF erstellen" klicken.
+          <div style={{ ...S.head, marginBottom: 8 }}>
+            <span style={{ background: `${C.accent}20`, border: `1px solid ${C.accent}44`, borderRadius: '50%', width: 18, height: 18, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, marginRight: 8 }}>1</span>
+            ARCHIVE.PH ÖFFNEN
           </div>
 
-          {/* archive.ph iframe */}
-          <div style={{ borderRadius: 8, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.1)', marginBottom: 12, background: '#fff' }}>
-            <iframe
-              ref={iframeRef}
-              src={archiveUrl}
-              style={{ width: '100%', height: 400, border: 'none', display: 'block' }}
-              title="archive.ph"
-            />
+          <div style={{ color: C.muted, fontSize: 11, fontFamily: 'monospace', marginBottom: 14, lineHeight: 1.7 }}>
+            Öffne archive.ph im Browser. Falls ein CAPTCHA erscheint: abhaken und warten bis der Artikel vollständig sichtbar ist. Dann zurückkommen und Schritt 2 ausführen.
           </div>
 
-          <div style={{ display: 'flex', gap: 8 }}>
-            <a href={archiveUrl} target="_blank" rel="noreferrer"
-              style={{ ...S.btn(C.muted), textDecoration: 'none', fontSize: 12 }}>
-              🌐 Im Browser öffnen
-            </a>
-            <button onClick={handleCaptchaDone}
-              style={{ ...S.btn(C.success), flex: 1, fontSize: 12 }}>
-              ✅ Artikel bereit → PDF erstellen
-            </button>
+          <button onClick={handleOpenArchive}
+            style={{ ...S.btn(C.accent), width: '100%', marginBottom: 14, fontSize: 13 }}>
+            🌐 archive.ph öffnen
+          </button>
+
+          {/* Checkbox-Bestätigung */}
+          <div
+            onClick={() => setCaptchaDone(v => !v)}
+            style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', padding: '10px 12px', background: captchaDone ? `${C.success}15` : 'rgba(255,255,255,0.03)', border: `1px solid ${captchaDone ? C.success + '55' : 'rgba(255,255,255,0.1)'}`, borderRadius: 8 }}>
+            <div style={{
+              width: 22, height: 22, borderRadius: 5, flexShrink: 0,
+              background: captchaDone ? C.success : 'transparent',
+              border: `2px solid ${captchaDone ? C.success : 'rgba(255,255,255,0.3)'}`,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              transition: 'all 0.15s',
+            }}>
+              {captchaDone && <span style={{ color: '#000', fontSize: 14, fontWeight: 'bold', lineHeight: 1 }}>✓</span>}
+            </div>
+            <span style={{ color: captchaDone ? C.success : 'rgba(255,255,255,0.6)', fontFamily: 'monospace', fontSize: 12 }}>
+              Artikel ist sichtbar – CAPTCHA gelöst
+            </span>
           </div>
         </div>
       )}
 
-      {/* PDF-Schritt */}
-      {status === 'ready' && (
+      {/* Schritt 2: PDF erstellen */}
+      {status === 'open_archive' && captchaDone && (
         <div style={{ ...S.card, borderColor: `${C.success}55`, marginBottom: 16 }}>
-          <div style={{ ...S.head, marginBottom: 8 }}>SCHRITT 2 – PDF ERSTELLEN</div>
+          <div style={{ ...S.head, marginBottom: 8 }}>
+            <span style={{ background: `${C.success}20`, border: `1px solid ${C.success}44`, borderRadius: '50%', width: 18, height: 18, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, marginRight: 8 }}>2</span>
+            PDF ERSTELLEN
+          </div>
           <div style={{ color: C.muted, fontSize: 11, fontFamily: 'monospace', marginBottom: 12, lineHeight: 1.6 }}>
-            Der Server lädt den Artikel jetzt über archive.ph und erstellt ein PDF. Das dauert 15–30 Sekunden.
-          </div>
-          <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 6, padding: '7px 10px', marginBottom: 12, wordBreak: 'break-all' }}>
-            <span style={{ color: C.muted, fontSize: 10, fontFamily: 'monospace' }}>{archiveUrl}</span>
-          </div>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <a href={archiveUrl} target="_blank" rel="noreferrer"
-              style={{ ...S.btn(C.success), textDecoration: 'none', fontSize: 12 }}>
-              🌐 Öffnen
-            </a>
-            <button onClick={handlePdf} disabled={pdfLoading}
-              style={{ ...S.btn(C.accent), flex: 1, opacity: pdfLoading ? 0.5 : 1, cursor: pdfLoading ? 'default' : 'pointer', fontSize: 12 }}>
-              {pdfLoading ? '⏳ Erstelle PDF...' : '⬇ Als PDF speichern'}
-            </button>
+            Der Server lädt den Artikel über archive.ph und erstellt ein PDF (15–30 Sekunden).
           </div>
+          <button onClick={handlePdf} disabled={pdfLoading}
+            style={{ ...S.btn(C.success), width: '100%', fontSize: 13, opacity: pdfLoading ? 0.6 : 1, cursor: pdfLoading ? 'default' : 'pointer' }}>
+            {pdfLoading ? '⏳ PDF wird erstellt...' : '⬇ Als PDF speichern'}
+          </button>
           {pdfLoading && (
-            <div style={{ color: C.muted, fontSize: 11, fontFamily: 'monospace', marginTop: 8 }}>
-              Seite wird serverseitig gerendert (15–30s)...
+            <div style={{ color: C.muted, fontSize: 11, fontFamily: 'monospace', marginTop: 8, textAlign: 'center' }}>
+              Seite wird gerendert, bitte warten...
             </div>
           )}
         </div>
       )}
 
+      {/* Fehler */}
       {errMsg && (
-        <div style={{ ...S.card, borderColor: `${C.error}44`, marginTop: 8 }}>
-          <div style={{ display: 'flex', gap: 8 }}>
+        <div style={{ ...S.card, borderColor: `${C.error}44`, marginBottom: 12 }}>
+          <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
             <span>⚠️</span>
             <span style={{ color: C.error, fontFamily: 'monospace', fontSize: 12 }}>{errMsg}</span>
           </div>
         </div>
       )}
 
+      {/* Idle-Info */}
       {status === 'idle' && (
         <div style={{ ...S.card }}>
           <div style={{ ...S.head, marginBottom: 10 }}>SO FUNKTIONIERT ES</div>
           {[
-            ['1', 'URL des Artikels einfügen'],
-            ['2', 'archive.ph wird geladen – CAPTCHA einmalig bestätigen'],
-            ['3', 'Wenn der Artikel sichtbar ist: "PDF erstellen" klicken'],
-            ['4', 'PDF wird automatisch heruntergeladen'],
+            ['1', 'URL des gesperrten Artikels einfügen'],
+            ['2', 'archive.ph im Browser öffnen, CAPTCHA einmalig lösen'],
+            ['3', 'Bestätigen dass der Artikel sichtbar ist'],
+            ['4', 'PDF automatisch herunterladen'],
           ].map(([num, text]) => (
             <div key={num} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginBottom: 8 }}>
               <span style={{ background: `${C.accent}20`, border: `1px solid ${C.accent}44`, borderRadius: '50%', width: 20, height: 20, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: C.accent, fontFamily: 'monospace', marginTop: 2 }}>{num}</span>