60 lines
2.9 KiB
JavaScript
60 lines
2.9 KiB
JavaScript
export function AuthModal(onSuccess) {
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm px-6';
|
|
|
|
const modal = document.createElement('div');
|
|
modal.className = 'w-full max-w-md bg-panel-bg border border-white/10 rounded-3xl p-8 shadow-3xl animate-fade-in-up';
|
|
|
|
modal.innerHTML = `
|
|
<div class="flex flex-col items-center text-center mb-8">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center border border-primary/20 shadow-glow mb-6">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#d9ff00" stroke-width="2">
|
|
<path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3m-3-3l-2.25-2.25"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-2xl font-black text-white uppercase tracking-wider mb-2">Muapi API Key Required</h2>
|
|
<p class="text-secondary text-sm">Please provide your Muapi.ai API key to start creating high-aesthetic images.</p>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-bold text-muted uppercase tracking-widest ml-1">Your API Key</label>
|
|
<input
|
|
type="password"
|
|
id="muapi-key-input"
|
|
placeholder="Enter your Muapi API key..."
|
|
class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-4 text-white placeholder:text-muted focus:outline-none focus:border-primary/50 transition-colors shadow-inner"
|
|
>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<button id="save-key-btn" class="w-full bg-primary text-black font-black py-4 rounded-2xl hover:shadow-glow hover:scale-[1.02] active:scale-[0.98] transition-all">
|
|
Initialize Studio
|
|
</button>
|
|
<a href="https://muapi.ai" target="_blank" class="text-center text-[11px] font-bold text-muted hover:text-white transition-colors py-2 uppercase tracking-tighter">
|
|
Get an API Key at Muapi.ai →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
overlay.appendChild(modal);
|
|
document.body.appendChild(overlay);
|
|
|
|
const input = modal.querySelector('#muapi-key-input');
|
|
const btn = modal.querySelector('#save-key-btn');
|
|
|
|
btn.onclick = () => {
|
|
const key = input.value.trim();
|
|
if (key) {
|
|
localStorage.setItem('muapi_key', key);
|
|
document.body.removeChild(overlay);
|
|
if (onSuccess) onSuccess();
|
|
} else {
|
|
input.classList.add('border-red-500/50');
|
|
setTimeout(() => input.classList.remove('border-red-500/50'), 2000);
|
|
}
|
|
};
|
|
|
|
return overlay;
|
|
}
|