k8s-secrets/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secrets</title>
    <style>
        :root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #17233b; background: #f4f6fa; }
        * { box-sizing: border-box; }
        body { min-width: 320px; margin: 0; }
        button { font: inherit; }
        .page { width: min(100% - 32px, 1160px); margin: 0 auto; padding: 28px 0 48px; }
        .page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
        h1 { margin: 0; font-size: 24px; font-weight: 720; letter-spacing: -.035em; line-height: 1.2; }
        .count { flex: none; padding: 6px 10px; border: 1px solid #dce3ed; border-radius: 999px; background: #fff; color: #52617c; font-size: 11px; font-weight: 650; white-space: nowrap; }
        .secrets-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
        .secret-card { flex: 0 1 340px; min-width: min(100%, 290px); overflow: hidden; border: 1px solid #dfe5ef; border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(31, 48, 82, .04); }
        .secret-card.expired { border-color: #efc8c3; }
        .card-header { padding: 14px 14px 12px; border-bottom: 1px solid #edf0f5; }
        .card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
        .secret-name { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
        .source-badge, .expired-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
        .source-badge { flex: none; padding: 5px 7px; }
        .source-badge.k8s { background: #eaf0ff; color: #315cb3; }
        .source-badge.webhook { background: #f0ebff; color: #6c47b6; }
        .expired-badge { margin-top: 8px; padding: 5px 7px; background: #fff0ed; color: #ad453b; }
        .fields { display: grid; gap: 7px; padding: 10px; }
        .field { min-width: 0; padding: 9px 10px; border: 1px solid #edf0f5; border-radius: 8px; background: #f8fafd; }
        .field-key { display: block; margin-bottom: 5px; color: #62718b; font-size: 10px; font-weight: 700; letter-spacing: .025em; overflow-wrap: anywhere; }
        .field-content { display: flex; align-items: center; gap: 7px; min-width: 0; }
        .field-value { display: block; flex: 1; min-width: 0; overflow-wrap: anywhere; color: #263751; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.45; white-space: pre-wrap; }
        .totp-code { color: #325dc0; font-size: 21px; font-weight: 750; letter-spacing: .06em; line-height: 1.1; white-space: nowrap; }
        .totp-timer { flex: none; min-width: 24px; color: #6a7890; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
        .copy-button { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 5px; min-height: 27px; padding: 0 7px; border: 1px solid #d8e0ec; border-radius: 6px; background: #fff; color: #445674; cursor: pointer; font-size: 10px; font-weight: 700; transition: background .15s, border-color .15s, color .15s; }
        .copy-button:hover { border-color: #a9bce2; background: #eef3ff; color: #315cb3; }
        .copy-button:focus-visible { outline: 3px solid #a9bce2; outline-offset: 2px; }
        .copy-button.copied { border-color: #b9ddcc; background: #eaf7ef; color: #237a4c; }
        .copy-button.failed { border-color: #efc8c3; background: #fff0ed; color: #ad453b; }
        .copy-button svg { width: 12px; height: 12px; }
        .card-footer { display: grid; gap: 3px; padding: 0 14px 12px; color: #73819a; font-size: 10px; line-height: 1.35; }
        .card-footer strong { color: #596b86; font-weight: 600; }
        .notice { padding: 18px; border: 1px solid #dfe5ef; border-radius: 12px; background: #fff; color: #60708b; font-size: 13px; }
        .notice.error { border-color: #efc8c3; background: #fff7f5; color: #a43c34; }
        @media (max-width: 560px) { .page { width: min(100% - 24px, 1160px); padding-top: 20px; } }
        @media (max-width: 390px) {
            .page-header { flex-wrap: wrap; }
            .field-content { flex-wrap: wrap; }
            .copy-button { margin-left: auto; }
        }
    </style>
</head>
<body>
    <main class="page">
        <header class="page-header">
            <div>
                <h1>Secrets</h1>
            </div>
            <span class="count">{{ secrets.len() }} total</span>
        </header>

        {% if let Some(err) = error %}
        <div class="notice error" role="alert">Failed to load secrets: {{ err }}</div>
        {% else %}
        {% if secrets.len() == 0 %}
        <div class="notice">No secrets to display.</div>
        {% else %}
        <div class="secrets-grid">
            {% for secret in secrets %}
            <article class="secret-card{% if secret.expired %} expired{% endif %}">
                <header class="card-header">
                    <div class="card-heading">
                        <h2 class="secret-name">{{ secret.name }}</h2>
                        {% match secret.source %}
                        {% when SecretSource::Kubernetes %}<span class="source-badge k8s">☸ Kubernetes</span>
                        {% when SecretSource::Webhook %}<span class="source-badge webhook">↗ Webhook</span>
                        {% endmatch %}
                    </div>
                    {% if secret.expired %}
                    {% if let Some(expires) = secret.expires_at %}<span class="expired-badge">Expired: {{ expires }}</span>{% endif %}
                    {% endif %}
                </header>

                <div class="fields">
                    {% for (key, value) in secret.data %}
                    <div class="field">
                        <span class="field-key">{{ key }}</span>
                        <div class="field-content">
                            {% if value.starts_with("otpauth://totp/") %}
                            <span class="field-value totp-code" data-totp-url="{{ value }}" aria-label="One-time code">••• •••</span>
                            <span class="totp-timer" aria-label="Seconds remaining"></span>
                            {% else %}
                            <code class="field-value">{{ value }}</code>
                            {% endif %}
                            <button class="copy-button" type="button" aria-label="Copy {{ key }}" title="Copy {{ key }}">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg>
                                <span>Copy</span>
                            </button>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                {% if let Some(received) = secret.received_at %}
                <footer class="card-footer">
                    <span>Received: <strong>{{ received }}</strong></span>
                    {% if let Some(expires) = secret.expires_at %}
                    {% if !secret.expired %}<span>Expires: <strong>{{ expires }}</strong></span>{% endif %}
                    {% endif %}
                </footer>
                {% endif %}
            </article>
            {% endfor %}
        </div>
        {% endif %}
        {% endif %}
    </main>

    <script src="https://unpkg.com/otpauth@9/dist/otpauth.umd.min.js"></script>
    <script>
        const totpFields = [...document.querySelectorAll('[data-totp-url]')];

        function updateTOTP() {
            const now = Math.floor(Date.now() / 1000);
            for (const codeElement of totpFields) {
                const timerElement = codeElement.nextElementSibling;
                try {
                    const totp = OTPAuth.URI.parse(codeElement.dataset.totpUrl);
                    const code = totp.generate();
                    codeElement.dataset.copyValue = code;
                    codeElement.textContent = code.replace(/(.{3})(?=.)/, '$1 ');
                    timerElement.textContent = (totp.period - (now % totp.period)) + 's';
                } catch (error) {
                    codeElement.textContent = 'Code error';
                    timerElement.textContent = '';
                    console.error('Failed to generate TOTP:', error);
                }
            }
        }

        async function writeClipboard(value) {
            if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(value);
                return;
            }
            const input = document.createElement('textarea');
            input.value = value;
            input.style.position = 'fixed';
            input.style.opacity = '0';
            document.body.appendChild(input);
            input.select();
            try {
                if (!document.execCommand('copy')) throw new Error('Clipboard unavailable');
            } finally {
                input.remove();
            }
        }

        document.addEventListener('click', async (event) => {
            const button = event.target.closest('.copy-button');
            if (!button) return;
            const valueElement = button.closest('.field').querySelector('.field-value');
            const value = valueElement.dataset.totpUrl ? valueElement.dataset.copyValue : valueElement.textContent;
            if (!value) return;
            const label = button.querySelector('span');
            clearTimeout(button.resetTimeout);
            button.classList.remove('copied', 'failed');
            try {
                await writeClipboard(value);
                button.classList.add('copied');
                label.textContent = 'Copied';
            } catch (error) {
                button.classList.add('failed');
                label.textContent = 'Error';
                console.error('Failed to copy value:', error);
            }
            button.resetTimeout = setTimeout(() => {
                button.classList.remove('copied', 'failed');
                label.textContent = 'Copy';
            }, 2000);
        });

        if (totpFields.length > 0) {
            updateTOTP();
            setInterval(updateTOTP, 1000);
        }
    </script>
</body>
</html>