644a8083f7
- hero rain canvas: seed drops across full height so the digital-rain reads dense from the first painted frame (was starting all drops above the viewport -> near-blank within a short capture settle). - seed: expand the About story + give the pull-quote a real attribution (was the two-word 'The studio' stub); expand all three devlog articles, making-it-rain to ~10 paragraphs, so no article strands a void above the footer. - manifest CSS: inset the HUD corner brackets 5px so they clear rounded / overflow-hidden panels (fixes the clipped cyan tick on the code_neon block). - SVG geometry guard: explicit width/height on all 37 icon <use>/inline SVGs (px = tailwind unit x4) so a purged utility can't balloon them. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
78 lines
7.2 KiB
Plaintext
78 lines
7.2 KiB
Plaintext
{# auth-form cyberpunk override — reproduces the builtin's security-critical wiring: hardcoded HTMX endpoints /api/auth/login + /api/auth/register (target #auth-message), /forgot-password link, OAuth start URLs gated on context.site.*, and the exact Cap widget markup when captchaEnabled. Only the chrome is themed. #}
|
|
{% if context.isPublicLoggedIn %}
|
|
<div class="auth-form-logged-in mx-auto max-w-md text-center py-6">
|
|
<p class="cyberpunk-mono text-sm uppercase tracking-wide text-muted-foreground">Session active as <strong class="text-primary">{{ context.publicUsername }}</strong></p>
|
|
<a href="/account" class="cyberpunk-mono clip-cut mt-3 inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium uppercase tracking-wide text-primary-foreground hover:bg-primary/90">My Account</a>
|
|
</div>
|
|
{% else %}
|
|
{% set loginActive = "border-primary text-primary" %}
|
|
{% set registerActive = "border-transparent text-muted-foreground" %}
|
|
{% set loginHidden = "" %}
|
|
{% set registerHidden = "hidden" %}
|
|
{% if default_tab == "register" %}{% set loginActive = "border-transparent text-muted-foreground" %}{% set registerActive = "border-primary text-primary" %}{% set loginHidden = "hidden" %}{% set registerHidden = "" %}{% endif %}
|
|
{% set tabbase = "flex-1 py-2 text-center cyberpunk-mono text-sm font-medium uppercase tracking-wider border-b-2 transition-colors" %}
|
|
{% macro captcha() %}<script>
|
|
window.CAP_CUSTOM_WASM_URL = "/assets/captcha/cap_wasm_bg.wasm";
|
|
window.CAP_PAKO_URL = "/assets/captcha/pako_inflate.min.js";
|
|
</script>
|
|
<cap-widget data-cap-api-endpoint="/api/captcha/" data-cap-worker-count="2"></cap-widget>
|
|
<script src="/assets/captcha/cap.min.js" defer></script>
|
|
<script>
|
|
(function(){
|
|
var s = document.currentScript;
|
|
var form = s && s.closest ? s.closest('form') : null;
|
|
if (!form) return;
|
|
form.addEventListener('htmx:afterRequest', function(){
|
|
var w = form.querySelector('cap-widget');
|
|
if (w && typeof w.reset === 'function') w.reset();
|
|
});
|
|
})();
|
|
</script>{% endmacro %}
|
|
{% macro social() %}{% if show_social != false and (context.site.google_oauth_client_id or context.site.facebook_app_id) %}<div class="auth-social my-4">
|
|
<div class="relative my-4"><hr class="border-border"/><span class="cyberpunk-mono absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-3 text-xs uppercase tracking-widest text-muted-foreground">or</span></div>
|
|
{% if context.site.google_oauth_client_id %}<a href="/api/auth/google/start" class="cyberpunk-mono mb-2 flex w-full items-center justify-center gap-3 rounded-md border border-border px-4 py-2.5 uppercase tracking-wide transition-colors hover:bg-accent/10"><svg width="20" height="20" class="h-5 w-5" aria-hidden="true"><use href="/icons/simple-icons.svg#google"></use></svg><span class="text-sm font-medium text-foreground/80">Continue with Google</span></a>{% endif %}
|
|
{% if context.site.facebook_app_id %}<a href="/api/auth/facebook/start" class="cyberpunk-mono flex w-full items-center justify-center gap-3 rounded-md border border-border px-4 py-2.5 uppercase tracking-wide transition-colors hover:bg-accent/10"><svg width="20" height="20" class="h-5 w-5" aria-hidden="true"><use href="/icons/simple-icons.svg#facebook"></use></svg><span class="text-sm font-medium text-foreground/80">Continue with Facebook</span></a>{% endif %}
|
|
</div>{% endif %}{% endmacro %}
|
|
<div class="auth-form hud-frame mx-auto max-w-md rounded-md border border-primary/40 bg-card p-6 text-card-foreground neon-edge-magenta">
|
|
<div id="auth-message"></div>
|
|
<div class="mb-5 flex border-b border-border">
|
|
<button type="button" data-auth-tab="login" data-tabbase="{{ tabbase }}" class="{{ tabbase }} {{ loginActive }}">Login</button>
|
|
<button type="button" data-auth-tab="register" data-tabbase="{{ tabbase }}" class="{{ tabbase }} {{ registerActive }}">Register</button>
|
|
</div>
|
|
<div id="login-panel" class="{{ loginHidden }}">
|
|
<form hx-post="/api/auth/login" hx-target="#auth-message" hx-swap="innerHTML">
|
|
<div class="mb-3"><label class="cyberpunk-mono mb-1 block text-xs font-medium uppercase tracking-wide text-accent">Email</label><input type="email" name="email" required class="w-full rounded-md border border-primary/40 bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"/></div>
|
|
<div class="mb-4"><label class="cyberpunk-mono mb-1 block text-xs font-medium uppercase tracking-wide text-accent">Password</label><input type="password" name="password" required class="w-full rounded-md border border-primary/40 bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"/></div>
|
|
{% if captchaEnabled %}{{ captcha() }}{% endif %}
|
|
<button type="submit" class="cyberpunk-mono clip-cut rgb-split w-full rounded-md bg-primary px-4 py-2.5 font-semibold uppercase tracking-wider text-primary-foreground hover:bg-primary/90" hx-disabled-elt="this">Login</button>
|
|
<p class="mt-3 text-center text-sm"><a href="/forgot-password" class="cyberpunk-mono uppercase tracking-wide text-primary hover:underline">Forgot password?</a></p>
|
|
</form>
|
|
{{ social() }}
|
|
</div>
|
|
<div id="register-panel" class="{{ registerHidden }}">
|
|
<form hx-post="/api/auth/register" hx-target="#auth-message" hx-swap="innerHTML">
|
|
<div class="mb-3"><label class="cyberpunk-mono mb-1 block text-xs font-medium uppercase tracking-wide text-accent">Username</label><input type="text" name="username" required pattern="[a-zA-Z0-9_-]{3,30}" class="w-full rounded-md border border-primary/40 bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"/></div>
|
|
<div class="mb-3"><label class="cyberpunk-mono mb-1 block text-xs font-medium uppercase tracking-wide text-accent">Email</label><input type="email" name="email" required class="w-full rounded-md border border-primary/40 bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"/></div>
|
|
<div class="mb-4"><label class="cyberpunk-mono mb-1 block text-xs font-medium uppercase tracking-wide text-accent">Password</label><input type="password" name="password" required minlength="8" class="w-full rounded-md border border-primary/40 bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"/></div>
|
|
{% if captchaEnabled %}{{ captcha() }}{% endif %}
|
|
<button type="submit" class="cyberpunk-mono clip-cut rgb-split w-full rounded-md bg-primary px-4 py-2.5 font-semibold uppercase tracking-wider text-primary-foreground hover:bg-primary/90" hx-disabled-elt="this">Create Account</button>
|
|
</form>
|
|
{{ social() }}
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
var f=document.currentScript.closest('.auth-form')||document.querySelector('.auth-form');
|
|
if(!f)return;
|
|
var tabs=f.querySelectorAll('[data-auth-tab]');
|
|
tabs.forEach(function(btn){btn.addEventListener('click',function(){
|
|
var t=btn.getAttribute('data-auth-tab');
|
|
var lp=f.querySelector('#login-panel'),rp=f.querySelector('#register-panel');
|
|
if(lp)lp.classList.toggle('hidden',t!=='login');
|
|
if(rp)rp.classList.toggle('hidden',t!=='register');
|
|
tabs.forEach(function(b){var on=b===btn;b.className=b.getAttribute('data-tabbase')+(on?' border-primary text-primary':' border-transparent text-muted-foreground');});
|
|
});});
|
|
})();
|
|
</script>
|
|
{% endif %}
|