API Key Copy Field — Free HTML CSS JS Snippet

<div class="ak-wrap">
  <div class="ak-row">
    <div class="ak-label-block">
      <span class="ak-label">Secret API Key</span>
      <span class="ak-key" id="akKey">sk_live_\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u20223f2a</span>
    </div>
    <div class="ak-actions">
      <button class="ak-icon-btn" id="akToggle" aria-label="Show key" title="Show key">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>
      </button>
      <button class="ak-copy-btn" id="akCopy">Copy</button>
    </div>
  </div>
  <div class="ak-regen-block">
    <button class="ak-regen-btn" id="akRegenBtn">Regenerate key</button>
    <div class="ak-confirm" id="akConfirm" hidden>
      <span>Are you sure? This will invalidate the current key.</span>
      <div class="ak-confirm-actions">
        <button class="ak-confirm-btn" id="akConfirmYes">Confirm</button>
        <button class="ak-confirm-btn ak-confirm-cancel" id="akConfirmNo">Cancel</button>
      </div>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

.ak-wrap { width: 100%; max-width: 420px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 20px; box-shadow: 0 4px 16px rgba(15,23,42,0.05); }

.ak-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ak-label-block { min-width: 0; }
.ak-label { display: block; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.ak-key { font-family: ui-monospace, "SF Mono", monospace; font-size: 13.5px; color: #1e293b; word-break: break-all; }

.ak-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ak-icon-btn {
  background: #f1f5f9; border: none; border-radius: 8px; width: 32px; height: 32px; display: flex;
  align-items: center; justify-content: center; color: #64748b; cursor: pointer;
}
.ak-icon-btn:hover { background: #e2e8f0; color: #1e293b; }
.ak-copy-btn {
  background: #6366f1; color: #fff; border: none; border-radius: 8px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; min-width: 66px; transition: background 0.15s;
}
.ak-copy-btn:hover { background: #4f46e5; }
.ak-copy-btn.ak-copied { background: #16a34a; }

.ak-regen-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.ak-regen-btn { background: none; border: none; color: #ef4444; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; }
.ak-regen-btn:hover { text-decoration: underline; }

.ak-confirm {
  margin-top: 10px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
  padding: 10px 12px; font-size: 12px; color: #7f1d1d; display: flex; flex-direction: column; gap: 8px;
}
.ak-confirm-actions { display: flex; gap: 8px; }
.ak-confirm-btn {
  border: none; border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
#akConfirmYes { background: #ef4444; color: #fff; }
#akConfirmYes:hover { background: #dc2626; }
.ak-confirm-cancel { background: #fff; color: #64748b; border: 1px solid #e2e8f0; }
.ak-confirm-cancel:hover { background: #f8fafc; }

const keyEl = document.getElementById('akKey');
const toggleBtn = document.getElementById('akToggle');
const copyBtn = document.getElementById('akCopy');
const regenBtn = document.getElementById('akRegenBtn');
const confirmBlock = document.getElementById('akConfirm');
const confirmYes = document.getElementById('akConfirmYes');
const confirmNo = document.getElementById('akConfirmNo');

let fullKey = 'sk_live_49af82d10c7be3f2a';
let revealed = false;
let copyResetTimer = null;

function maskKey(key) {
  const last4 = key.slice(-4);
  return 'sk_live_' + '\u2022'.repeat(12) + last4;
}

function renderKey() {
  keyEl.textContent = revealed ? fullKey : maskKey(fullKey);
}

toggleBtn.addEventListener('click', () => {
  revealed = !revealed;
  toggleBtn.setAttribute('title', revealed ? 'Hide key' : 'Show key');
  toggleBtn.setAttribute('aria-label', revealed ? 'Hide key' : 'Show key');
  renderKey();
});

copyBtn.addEventListener('click', () => {
  navigator.clipboard.writeText(fullKey).then(() => {
    copyBtn.textContent = 'Copied!';
    copyBtn.classList.add('ak-copied');
    clearTimeout(copyResetTimer);
    copyResetTimer = setTimeout(() => {
      copyBtn.textContent = 'Copy';
      copyBtn.classList.remove('ak-copied');
    }, 1500);
  });
});

regenBtn.addEventListener('click', () => {
  confirmBlock.hidden = false;
});

confirmNo.addEventListener('click', () => {
  confirmBlock.hidden = true;
});

confirmYes.addEventListener('click', () => {
  const randomPart = Array.from({ length: 18 }, () =>
    'abcdefghijklmnopqrstuvwxyz0123456789'[Math.floor(Math.random() * 36)]
  ).join('');
  fullKey = 'sk_live_' + randomPart;
  revealed = false;
  renderKey();
  confirmBlock.hidden = true;
});

renderKey();