themes-kindergarten/templates/overrides/kindergarten/auth-form.ninjatpl

{# auth-form kindergarten 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="kg-mono text-sm text-muted-foreground">Session active as <strong class="text-primary">{{ context.publicUsername }}</strong></p>
  <a href="/account" class="kg-mono mt-3 inline-flex items-center rounded-2xl bg-primary px-4 py-2 text-sm font-medium 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 kg-mono text-sm font-medium 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="kg-mono absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-3 text-xs text-muted-foreground">or</span></div>
  {% if context.site.google_oauth_client_id %}<a href="/api/auth/google/start" class="kg-mono mb-2 flex w-full items-center justify-center gap-3 rounded-2xl border border-border px-4 py-2.5 transition-colors hover:bg-accent/10"><svg 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="kg-mono flex w-full items-center justify-center gap-3 rounded-2xl border border-border px-4 py-2.5 transition-colors hover:bg-accent/10"><svg 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 mx-auto max-w-md rounded-2xl border border-primary/40 bg-card p-6 text-card-foreground kg-crayon-shadow">
  <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="kg-mono mb-1 block text-xs font-medium text-accent">Email</label><input type="email" name="email" required class="w-full rounded-2xl 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="kg-mono mb-1 block text-xs font-medium text-accent">Password</label><input type="password" name="password" required class="w-full rounded-2xl 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="kg-mono kg-pop w-full rounded-2xl bg-primary px-4 py-2.5 font-semibold 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="kg-mono 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="kg-mono mb-1 block text-xs font-medium text-accent">Username</label><input type="text" name="username" required pattern="[a-zA-Z0-9_-]{3,30}" class="w-full rounded-2xl 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="kg-mono mb-1 block text-xs font-medium text-accent">Email</label><input type="email" name="email" required class="w-full rounded-2xl 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="kg-mono mb-1 block text-xs font-medium text-accent">Password</label><input type="password" name="password" required minlength="8" class="w-full rounded-2xl 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="kg-mono kg-pop w-full rounded-2xl bg-primary px-4 py-2.5 font-semibold 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 %}