@extends('layouts.app')
@section('title', 'JWT Decoder – JSON Web Token analysieren | kotsch.tech')
@section('meta_description', 'JWT Token online dekodieren: Header, Payload und Claims übersichtlich anzeigen. Ablaufdatum-Prüfung, Algorithmus-Info und Base64-Dekodierung – 100% lokal.')
@section('meta_extra')
<meta name="keywords" content="JWT Decoder, JWT Token, JSON Web Token, JWT analysieren, JWT Header Payload, JWT online, Token dekodieren">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.jwt-input { width:100%; min-height:100px; font-family:'JetBrains Mono',monospace; font-size:0.82rem; resize:vertical; padding:14px; border:2px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--ink); outline:none; box-sizing:border-box; word-break:break-all; line-height:1.6; }
.jwt-input:focus { border-color:var(--accent); }
.jwt-parts { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:0.78rem; word-break:break-all; }
.jwt-part { padding:3px 8px; border-radius:4px; font-weight:700; cursor:pointer; }
.jwt-part.header  { background:#dbeafe; color:#1d4ed8; }
.jwt-part.payload { background:#dcfce7; color:#15803d; }
.jwt-part.sig     { background:#fce7f3; color:#9d174d; }
.jwt-dot { color:var(--muted); align-self:center; font-weight:900; }
.section-block { border-radius:var(--radius-sm); border:1px solid var(--line); overflow:hidden; margin-bottom:12px; }
.section-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; font-size:0.78rem; font-weight:900; letter-spacing:0.5px; text-transform:uppercase; }
.section-head.header  { background:#dbeafe; color:#1d4ed8; }
.section-head.payload { background:#dcfce7; color:#15803d; }
.section-head.sig     { background:#fce7f3; color:#9d174d; }
.section-body { padding:14px; background:var(--bg); font-family:'JetBrains Mono',monospace; font-size:0.82rem; line-height:1.7; }
.claim-row { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.claim-row:last-child { border-bottom:none; }
.claim-key { color:#1d4ed8; font-weight:700; flex-shrink:0; min-width:80px; }
.claim-val { color:var(--ink); word-break:break-all; flex:1; }
.claim-val.str { color:#15803d; }
.claim-val.num { color:#7c3aed; }
.claim-val.bool { color:#dc2626; }
.claim-hint { font-size:0.72rem; color:var(--muted); margin-top:2px; }
.exp-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:0.75rem; font-weight:700; }
.exp-badge.valid   { background:#dcfce7; color:#15803d; }
.exp-badge.expired { background:#fee2e2; color:#dc2626; }
.algo-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-size:0.75rem; font-weight:700; color:var(--muted); }
.t-error { color:#dc2626; background:#fee2e2; border:1px solid #fecaca; border-radius:var(--radius-sm); padding:10px 14px; font-size:0.82rem; font-weight:700; display:none; margin-top:10px; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-shield-alt"></i> Security</span>
        <h1 class="tool-h1">JWT<span> Decoder.</span></h1>
        <p class="tool-sub">JSON Web Token dekodieren, Claims prüfen und Ablaufdatum erkennen – 100% lokal, kein Server.</p>
    </div>

    <div class="t-panel">
        <div class="t-field">
            <label class="t-label">JWT Token einfügen</label>
            <textarea class="jwt-input" id="jwt-inp" placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkphbmUgRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c" oninput="decode()"></textarea>
        </div>

        <div id="jwt-visual" style="display:none">
            <label class="t-label">Token-Aufbau</label>
            <div class="jwt-parts" id="jwt-parts"></div>
        </div>

        <div class="t-error" id="jwt-err"></div>

        <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px">
            <button class="t-btn ghost" onclick="loadExample()"><i class="fas fa-file-alt"></i> Beispiel laden</button>
            <button class="t-btn ghost" onclick="clearAll()"><i class="fas fa-trash"></i> Leeren</button>
        </div>
    </div>

    <div id="result-area" style="display:none">
        <div class="t-panel" style="padding:0">
            <div class="section-head header">
                <span><i class="fas fa-key"></i> Header</span>
                <div style="display:flex;gap:8px;align-items:center">
                    <span class="algo-badge" id="algo-badge"></span>
                    <button class="t-btn ghost sm" onclick="copySection('header')"><i class="fas fa-copy"></i></button>
                </div>
            </div>
            <div class="section-body" id="header-body"></div>
        </div>

        <div class="t-panel" style="padding:0">
            <div class="section-head payload">
                <span><i class="fas fa-database"></i> Payload / Claims</span>
                <div style="display:flex;gap:8px;align-items:center">
                    <span id="exp-badge-wrap"></span>
                    <button class="t-btn ghost sm" onclick="copySection('payload')"><i class="fas fa-copy"></i></button>
                </div>
            </div>
            <div class="section-body" id="payload-body"></div>
        </div>

        <div class="t-panel" style="padding:0">
            <div class="section-head sig">
                <span><i class="fas fa-fingerprint"></i> Signatur</span>
                <button class="t-btn ghost sm" onclick="copySection('sig')"><i class="fas fa-copy"></i></button>
            </div>
            <div class="section-body" id="sig-body"></div>
        </div>

        <div class="t-panel">
            <div class="t-grid-3" style="gap:12px">
                <div class="t-stat-card">
                    <div class="t-stat-val" id="stat-alg">–</div>
                    <div class="t-stat-label">Algorithmus</div>
                </div>
                <div class="t-stat-card">
                    <div class="t-stat-val" id="stat-claims">–</div>
                    <div class="t-stat-label">Claims</div>
                </div>
                <div class="t-stat-card">
                    <div class="t-stat-val" id="stat-size">–</div>
                    <div class="t-stat-label">Token-Länge</div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let decoded = { header: null, payload: null, sig: '' };

const CLAIM_HINTS = {
    iss: 'Aussteller (Issuer)',
    sub: 'Subjekt (Subject)',
    aud: 'Zielgruppe (Audience)',
    exp: 'Ablaufzeit (Expiration)',
    nbf: 'Nicht vor (Not Before)',
    iat: 'Ausgestellt am (Issued At)',
    jti: 'JWT-ID (JWTID)',
    name: 'Vollständiger Name',
    email: 'E-Mail-Adresse',
    roles: 'Rollen',
    scope: 'Berechtigungsumfang',
};

function b64decode(str) {
    if (!str || /[^A-Za-z0-9_-]/.test(str)) throw new Error('Ungueltiger Base64URL-Abschnitt.');
    str = str.replace(/-/g, '+').replace(/_/g, '/');
    while (str.length % 4) str += '=';
    const raw = atob(str);
    const text = decodeURIComponent(Array.from(raw, c => '%' + c.charCodeAt(0).toString(16).padStart(2, '0')).join(''));
    return JSON.parse(text);
}

function decode() {
    const raw = document.getElementById('jwt-inp').value.trim();
    const errEl = document.getElementById('jwt-err');
    errEl.style.display = 'none';
    document.getElementById('result-area').style.display = 'none';
    document.getElementById('jwt-visual').style.display = 'none';

    if (!raw) return;

    const parts = raw.split('.');
    if (parts.length !== 3) {
        errEl.textContent = 'Ungültiges JWT-Format. Ein JWT besteht aus 3 Teilen: header.payload.signature';
        errEl.style.display = 'block';
        return;
    }

    try {
        decoded.header  = b64decode(parts[0]);
        decoded.payload = b64decode(parts[1]);
        decoded.sig     = parts[2];
    } catch(e) {
        errEl.textContent = 'Fehler beim Dekodieren: ' + e.message;
        errEl.style.display = 'block';
        return;
    }

    // Visual parts
    const partsEl = document.getElementById('jwt-parts');
    partsEl.innerHTML =
        `<span class="jwt-part header" title="Header">${escT(parts[0])}</span>` +
        `<span class="jwt-dot">.</span>` +
        `<span class="jwt-part payload" title="Payload">${escT(parts[1])}</span>` +
        `<span class="jwt-dot">.</span>` +
        `<span class="jwt-part sig" title="Signature">${escT(parts[2])}</span>`;
    document.getElementById('jwt-visual').style.display = '';

    // Header section
    document.getElementById('algo-badge').textContent = decoded.header.alg || 'unbekannt';
    document.getElementById('header-body').innerHTML = renderClaims(decoded.header, true);

    // Payload section
    document.getElementById('payload-body').innerHTML = renderClaims(decoded.payload, false);

    // Expiry badge
    const expWrap = document.getElementById('exp-badge-wrap');
    if (decoded.payload.exp) {
        const expDate = new Date(decoded.payload.exp * 1000);
        const expired = expDate < new Date();
        expWrap.innerHTML = `<span class="exp-badge ${expired ? 'expired' : 'valid'}">` +
            `<i class="fas fa-${expired ? 'times' : 'check'}-circle"></i> ` +
            `${expired ? 'Abgelaufen' : 'Gültig'} bis ${expDate.toLocaleString('de-DE')}</span>`;
    } else {
        expWrap.innerHTML = '<span class="exp-badge" style="background:var(--bg);border:1px solid var(--line);color:var(--muted)"><i class="fas fa-infinity"></i> Kein Ablaufdatum</span>';
    }

    // Signature section
    document.getElementById('sig-body').innerHTML =
        `<div style="word-break:break-all;color:var(--muted);margin-bottom:8px">${escT(decoded.sig)}</div>` +
        `<div style="font-size:0.78rem;color:var(--muted)"><i class="fas fa-info-circle"></i> Signatur kann nur serverseitig mit dem Secret/Public Key verifiziert werden.</div>`;

    // Stats
    document.getElementById('stat-alg').textContent = decoded.header.alg || '?';
    document.getElementById('stat-claims').textContent = Object.keys(decoded.payload).length;
    document.getElementById('stat-size').textContent = raw.length + ' B';

    document.getElementById('result-area').style.display = '';
}

function renderClaims(obj, isHeader) {
    return Object.entries(obj).map(([k, v]) => {
        const hint = CLAIM_HINTS[k];
        let display, cls;
        if (typeof v === 'string') {
            display = `"${escT(v)}"`;
            cls = 'str';
        } else if (typeof v === 'number') {
            let extra = '';
            if ((k === 'exp' || k === 'iat' || k === 'nbf') && v > 1e9) {
                extra = ` <span style="color:var(--muted)">(${new Date(v*1000).toLocaleString('de-DE')})</span>`;
            }
            display = v + extra;
            cls = 'num';
        } else if (typeof v === 'boolean') {
            display = String(v);
            cls = 'bool';
        } else {
            display = escT(JSON.stringify(v));
            cls = '';
        }
        return `<div class="claim-row">
            <div class="claim-key">"${escT(k)}"</div>
            <div>
                <div class="claim-val ${cls}">${display}</div>
                ${hint ? `<div class="claim-hint">${hint}</div>` : ''}
            </div>
        </div>`;
    }).join('');
}

function copySection(sec) {
    const data = sec === 'sig' ? decoded.sig : JSON.stringify(decoded[sec], null, 2);
    if (!data) return;
    navigator.clipboard.writeText(data);
}

function escT(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

function clearAll() {
    document.getElementById('jwt-inp').value = '';
    document.getElementById('result-area').style.display = 'none';
    document.getElementById('jwt-visual').style.display = 'none';
    document.getElementById('jwt-err').style.display = 'none';
}

function loadExample() {
    document.getElementById('jwt-inp').value = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyXzEyMyIsIm5hbWUiOiJNYXggTXVzdGVybWFubiIsImVtYWlsIjoibWF4QGV4YW1wbGUuY29tIiwicm9sZXMiOlsiYWRtaW4iLCJ1c2VyIl0sImlhdCI6MTcxNjIzOTAyMiwiZXhwIjoxNzE2MzI1NDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
    decode();
}

loadExample();
</script>

@include('tools._seo_content', ['toolSlug' => 'jwt-decoder', 'toolName' => 'JWT Decoder'])

@endsection