Clave de API enmascarada
Una clave de API oculta que se descifra carácter a carácter al mostrarla, con botón de copiar y otro para regenerarla.
Ajustes
Código
<div class="uvq06-ak"><div class="hd"><label for="uvq06-ak-in">Clave secreta</label><span class="tg"><i></i>Producción</span></div><div class="fd"><input id="uvq06-ak-in" readonly spellcheck="false"><button type="button" class="ey" aria-pressed="false" aria-label="Mostrar clave"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="3"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3l18 18M10.6 5.6A9.6 9.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-2.8 3.6M6.6 6.6C3.9 8.3 2.5 12 2.5 12S6 18.5 12 18.5c1.8 0 3.3-.5 4.6-1.3M9.9 9.9a3 3 0 0 0 4.2 4.2"/></svg></button><button type="button" class="cp" aria-label="Copiar clave"><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.5" y="8.5" width="11" height="11" rx="2.5"/><path d="M15.5 8.5V6.5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span class="tt" aria-hidden="true">Copiada</span></button></div><div class="ft"><span>Creada hace 3 días · último uso hoy</span><button type="button" class="rg"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.3 5.7M20 4.5V11h-6.5"/></svg><span>Regenerar</span></button></div><p class="sr" aria-live="polite"></p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Inputs
Ver todos: InputsDónde usarlo
Un campo de solo lectura para claves secretas, como los de los paneles para desarrolladores. La clave muestra solo su prefijo y los cuatro últimos caracteres; el botón del ojo descifra el resto con un baile de símbolos que se asienta de izquierda a derecha. Copiar cambia el icono por un check con aviso, y Regenerar gira su flecha y descifra una clave nueva.
El color principal tiñe la etiqueta de entorno, el ojo activo y el enlace de regenerar. Úsalo en páginas de ajustes, configuración de webhooks y pantallas de integraciones, y conecta copiar y regenerar con tu propia API cuando lo lleves a producción.