@mevdragon/vidfarm-devcli 0.20.5 → 0.20.8

package/dist/src/reskin/login-page.js

@@ -1,262 +0,0 @@
-// /reskin/login — the auth screen ported into the farmville design system,
-// now MIGRATED to the REAL production auth (no more fake password-only form).
-//
-// Bare chrome (no shared top nav / footer): an auth screen owns its whole
-// canvas, so we render just the body over a warm sunny background. A two-column
-// composition — a sunlit brand/marketing panel on the left, a floating white
-// auth card on the right — collapses to a single centered card on small screens.
-//
-// This accepts the SAME input object the live /login route already builds (via
-// `Parameters<typeof renderLoginPage>[0]`), so the route wiring is just "call
-// this instead of the legacy renderer". Every form posts to the REAL login
-// endpoints with the exact field names the live login uses:
-//   • password:      POST ${routePrefix}/password?mode=password   {email,password}
-//   • OTP request:   POST ${routePrefix}/otp/request?mode=otp     {email}
-//   • OTP verify:    POST ${routePrefix}/otp/verify?mode=otp      {email(hidden),code,name?}
-// routePrefix defaults to "/login" but is honored from the input (e.g. the
-// agency-client login uses "/agency-client-login"). On success the real
-// endpoints own the redirect (post-login return path) — we never fake it.
-//
-// The segmented control at the top switches between the two REAL modes
-// (Email code = otp, Password) via honest ?mode= links, so it mirrors the
-// live login's mode handling exactly. Design stays farmville; NO emoji.
-import { reskinDocument, rkEscape } from "./document.js";
-const EYE = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>`;
-const MAIL = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="3"/><path d="m3.5 7 8.5 6 8.5-6"/></svg>`;
-const LOCK = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="10" width="16" height="10" rx="2.5"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>`;
-export function renderReskinLogin(input = {}) {
-    // Mirror the live renderer's normalization exactly.
-    const mode = input.mode === "password" ? "password" : "otp";
-    const routePrefix = input.routePrefix || "/login";
-    const rp = rkEscape(routePrefix);
-    const email = rkEscape(input.email ?? "");
-    const otpSent = Boolean(input.otpSent);
-    // REAL endpoints (same as src/account-pages-legacy.ts → renderLoginPage).
-    const PASSWORD_ACTION = `${rp}/password?mode=password`;
-    const OTP_REQUEST_ACTION = `${rp}/otp/request?mode=otp`;
-    const OTP_VERIFY_ACTION = `${rp}/otp/verify?mode=otp`;
-    const OTP_HREF = `${rp}?mode=otp`;
-    const PASSWORD_HREF = `${rp}?mode=password`;
-    const message = input.message
-        ? `<div class="rk-notice rk-notice-ok rk-login-flash">${rkEscape(input.message)}</div>`
-        : "";
-    const error = input.error
-        ? `<div class="rk-notice rk-notice-err rk-login-flash">${rkEscape(input.error)}</div>`
-        : "";
-    // ── segmented mode control (real ?mode= links) ──────────────────────────
-    // Hidden while verifying a code (mid-flow) — there we show "Change email".
-    const seg = otpSent
-        ? ""
-        : `<div class="rk-login-seg" role="tablist" aria-label="Choose a sign-in method">
-        <span class="rk-login-seg-thumb${mode === "password" ? " is-right" : ""}"></span>
-        <a class="rk-login-seg-btn${mode === "otp" ? " is-active" : ""}" href="${OTP_HREF}" role="tab" aria-selected="${mode === "otp" ? "true" : "false"}">Email code</a>
-        <a class="rk-login-seg-btn${mode === "password" ? " is-active" : ""}" href="${PASSWORD_HREF}" role="tab" aria-selected="${mode === "password" ? "true" : "false"}">Password</a>
-      </div>`;
-    // ── header copy per state ───────────────────────────────────────────────
-    const head = mode === "password"
-        ? { title: "Welcome back", sub: "Log in with your email and password." }
-        : otpSent
-            ? { title: "Check your email", sub: `Enter the 6-digit code we sent${input.email ? ` to ${email}` : ""}.` }
-            : { title: "Sign in with a code", sub: "We'll email you a 6-digit code — no password to remember." };
-    // ── the auth form (three honest states) ─────────────────────────────────
-    let authPane;
-    if (mode === "password") {
-        authPane = `
-      <form class="rk-stack rk-login-form" method="post" action="${PASSWORD_ACTION}">
-        <div class="rk-field">
-          <label class="rk-label" for="rk-login-email">Email</label>
-          <input class="rk-input" id="rk-login-email" type="email" name="email" value="${email}" placeholder="you@studio.co" autocomplete="email" required autofocus />
-        </div>
-        <div class="rk-field">
-          <label class="rk-label" for="rk-login-pass">Password</label>
-          <div class="rk-input-group">
-            <input class="rk-input" id="rk-login-pass" type="password" name="password" placeholder="••••••••" autocomplete="current-password" required />
-            <button class="rk-btn rk-btn-ghost rk-btn-sm rk-login-eye" type="button" data-rk-reveal="rk-login-pass" aria-label="Show password">${EYE}</button>
-          </div>
-        </div>
-        <button class="rk-btn rk-btn-gold rk-btn-lg rk-btn-block rk-login-submit" type="submit">Log in <span class="rk-arrow">→</span></button>
-      </form>
-
-      <div class="rk-login-divider"><span>or</span></div>
-      <a class="rk-btn rk-btn-ghost rk-btn-lg rk-btn-block rk-login-alt" href="${OTP_HREF}">${MAIL} Email me a login code</a>`;
-    }
-    else if (otpSent) {
-        authPane = `
-      <form class="rk-stack rk-login-form" method="post" action="${OTP_VERIFY_ACTION}">
-        <input type="hidden" name="email" value="${email}" />
-        <div class="rk-field">
-          <label class="rk-label" for="rk-login-code">6-digit code</label>
-          <input class="rk-input rk-login-code" id="rk-login-code" name="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*" placeholder="000000" autofocus required />
-        </div>
-        <div class="rk-field">
-          <label class="rk-label" for="rk-login-name">Your name <span class="rk-login-optional">(optional — for new accounts)</span></label>
-          <input class="rk-input" id="rk-login-name" name="name" type="text" placeholder="Dylan Vane" autocomplete="name" />
-        </div>
-        <button class="rk-btn rk-btn-gold rk-btn-lg rk-btn-block rk-login-submit" type="submit">Verify &amp; continue <span class="rk-arrow">→</span></button>
-      </form>
-
-      <p class="rk-login-foot"><a href="${OTP_HREF}">Use a different email</a></p>`;
-    }
-    else {
-        authPane = `
-      <form class="rk-stack rk-login-form" method="post" action="${OTP_REQUEST_ACTION}">
-        <div class="rk-field">
-          <label class="rk-label" for="rk-login-email">Email</label>
-          <input class="rk-input" id="rk-login-email" type="email" name="email" value="${email}" placeholder="you@studio.co" autocomplete="email" required autofocus />
-        </div>
-        <button class="rk-btn rk-btn-gold rk-btn-lg rk-btn-block rk-login-submit" type="submit">${MAIL} Email me a login code</button>
-      </form>
-
-      <div class="rk-login-divider"><span>or</span></div>
-      <a class="rk-btn rk-btn-ghost rk-btn-lg rk-btn-block rk-login-alt" href="${PASSWORD_HREF}">${LOCK} Use a password instead</a>`;
-    }
-    const body = `
-<main class="rk-login">
-  <div class="rk-login-art">
-    <div class="rk-login-art-sky"></div>
-    <span class="rk-login-blob rk-login-blob-a"></span>
-    <span class="rk-login-blob rk-login-blob-b"></span>
-    <div class="rk-login-art-inner">
-      <a class="rk-brand rk-login-brand" href="/">
-        <span class="rk-brand-mark">V</span>VidFarm
-      </a>
-      <div class="rk-login-art-copy">
-        <h1 class="rk-login-hed">A week of content, made in an afternoon.</h1>
-        <p class="rk-login-lede">Sign in to spin up short-form ads from your own clips — punchy hooks, UGC energy, captions that pop.</p>
-        <ul class="rk-login-feats">
-          <li><span class="rk-login-feat-mark" aria-hidden="true"></span> Mine &amp; tag clips automatically</li>
-          <li><span class="rk-login-feat-mark" aria-hidden="true"></span> Swipe templates into finished ads</li>
-          <li><span class="rk-login-feat-mark" aria-hidden="true"></span> Publish straight to your channels</li>
-        </ul>
-      </div>
-      <figure class="rk-login-quote rk-glass">
-        <div class="rk-login-quote-avatar">DV</div>
-        <blockquote>
-          <p>"We ship a full week of ads before lunch now. It feels like cheating."</p>
-          <figcaption>Dylan Vane · Founder, Studio Co</figcaption>
-        </blockquote>
-      </figure>
-    </div>
-  </div>
-
-  <div class="rk-login-pane">
-    <div class="rk-login-card">
-      <a class="rk-brand rk-login-card-brand" href="/">
-        <span class="rk-brand-mark">V</span>VidFarm
-      </a>
-
-      <div class="rk-login-head">
-        <h2 class="rk-login-title">${rkEscape(head.title)}</h2>
-        <p class="rk-muted">${head.sub}</p>
-      </div>
-
-      ${seg}
-      ${message}
-      ${error}
-      ${authPane}
-    </div>
-    <p class="rk-login-legal">By continuing you agree to our <a href="#">Terms</a> &amp; <a href="#">Privacy Policy</a>.</p>
-  </div>
-</main>`;
-    const pageCss = `
-.rk-login{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;
-  background:radial-gradient(120% 90% at 100% 0%,var(--rk-gold-tint) 0%,transparent 55%),var(--rk-bg)}
-@media(max-width:920px),(max-height:600px){.rk-login{grid-template-columns:1fr}}
-
-/* ── left: sunlit brand / marketing panel ── */
-.rk-login-art{position:relative;overflow:hidden;display:flex;padding:56px clamp(2rem,4vw,4rem)}
-@media(max-width:920px),(max-height:600px){.rk-login-art{display:none}}
-.rk-login-art-sky{position:absolute;inset:0;z-index:0;background:
-  radial-gradient(72% 55% at 22% 12%,rgba(255,244,214,.96),transparent 62%),
-  radial-gradient(60% 55% at 92% 96%,rgba(255,199,56,.42),transparent 60%),
-  linear-gradient(158deg,#89ccf3 0%,#b7e0fa 42%,#ffe7c9 100%)}
-.rk-login-blob{position:absolute;z-index:0;border-radius:var(--rk-r-full);filter:blur(2px);
-  background:rgba(255,255,255,.55)}
-.rk-login-blob-a{width:220px;height:120px;top:16%;right:12%;box-shadow:60px 20px 0 -18px rgba(255,255,255,.5)}
-.rk-login-blob-b{width:150px;height:84px;bottom:24%;left:-30px;background:rgba(255,255,255,.4)}
-.rk-login-art-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:32px;
-  justify-content:space-between;width:100%;max-width:440px;margin:auto}
-.rk-login-brand{font-size:22px;color:var(--rk-ink)}
-.rk-login-brand .rk-brand-mark{width:30px;height:30px;font-size:17px}
-.rk-login-art-copy{display:grid;gap:18px}
-.rk-login-eyebrow{justify-self:start;background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.9);
-  backdrop-filter:blur(6px);color:var(--rk-n-700)}
-.rk-login-hed{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.035em;color:var(--rk-ink);
-  max-width:12ch;text-wrap:balance}
-.rk-login-lede{font-size:var(--rk-text-lg);line-height:1.5;color:var(--rk-n-700);max-width:34ch}
-.rk-login-feats{list-style:none;margin:0;padding:0;display:grid;gap:12px}
-.rk-login-feats li{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;color:var(--rk-n-800)}
-.rk-login-feat-mark{width:7px;height:7px;border-radius:var(--rk-r-full);background:var(--rk-gold-500);
-  box-shadow:0 0 0 4px var(--rk-gold-tint2);flex:none;margin:0 3px}
-.rk-login-quote{border-radius:var(--rk-r-3xl);padding:18px 20px;display:flex;gap:14px;align-items:flex-start;
-  box-shadow:var(--rk-shadow-lg)}
-.rk-login-quote-avatar{width:42px;height:42px;border-radius:var(--rk-r-full);flex:none;display:grid;place-items:center;
-  font-family:var(--rk-font-display);font-weight:800;font-size:15px;color:var(--rk-ink);
-  background:var(--rk-gold-500);box-shadow:var(--rk-shadow-xs)}
-.rk-login-quote blockquote{margin:0;display:grid;gap:6px}
-.rk-login-quote p{font-size:14px;font-weight:600;color:var(--rk-ink);line-height:1.45}
-.rk-login-quote figcaption{font-size:12px;font-weight:600;color:var(--rk-n-600)}
-
-/* ── right: floating auth card ── */
-.rk-login-pane{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
-  padding:48px clamp(1.25rem,4vw,3rem)}
-.rk-login-card{width:100%;max-width:412px;background:var(--rk-surface);border:1px solid var(--rk-border);
-  border-radius:var(--rk-r-3xl);padding:clamp(28px,3vw,40px);box-shadow:var(--rk-shadow-xl);display:grid;gap:22px}
-.rk-login-card-brand{display:none;font-size:20px}
-@media(max-width:920px),(max-height:600px){.rk-login-card-brand{display:inline-flex;justify-self:center}}
-.rk-login-head{display:grid;gap:6px;text-align:center}
-.rk-login-title{font-size:var(--rk-text-3xl);letter-spacing:-.03em}
-.rk-login-flash{font-size:13px;padding:11px 14px}
-
-/* segmented mode control — real ?mode= links. gold is reserved for submit, so
-   the active thumb is a plain white pill with an ink label */
-.rk-login-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:4px;
-  background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:var(--rk-r-full)}
-.rk-login-seg-thumb{position:absolute;z-index:0;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);
-  background:#fff;border-radius:var(--rk-r-full);box-shadow:var(--rk-shadow-sm);
-  transition:transform var(--rk-dur) var(--rk-ease)}
-.rk-login-seg-thumb.is-right{transform:translateX(100%)}
-.rk-login-seg-btn{position:relative;z-index:1;appearance:none;border:0;background:transparent;cursor:pointer;
-  padding:9px 12px;border-radius:var(--rk-r-full);font-family:var(--rk-font-body);font-size:14px;font-weight:600;
-  text-align:center;color:var(--rk-n-500);transition:color var(--rk-dur) var(--rk-ease)}
-.rk-login-seg-btn.is-active{color:var(--rk-ink)}
-
-.rk-login-form{gap:16px}
-.rk-login-eye{padding:0 12px;color:var(--rk-n-500)}
-.rk-login-submit{margin-top:4px}
-.rk-login-code{font-family:var(--rk-font-mono);font-size:20px;letter-spacing:.42em;text-align:center;padding-right:0}
-.rk-login-code::placeholder{letter-spacing:.42em}
-.rk-login-optional{font-weight:500;color:var(--rk-text-faint)}
-
-.rk-login-divider{display:flex;align-items:center;gap:14px;color:var(--rk-text-faint);
-  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
-.rk-login-divider::before,.rk-login-divider::after{content:"";height:1px;flex:1;background:var(--rk-border)}
-.rk-login-alt{color:var(--rk-ink)}
-.rk-login-foot{text-align:center;font-size:14px;color:var(--rk-text-muted)}
-.rk-login-foot a{font-weight:700;color:var(--rk-ink)}
-.rk-login-foot a:hover{color:var(--rk-gold-700)}
-.rk-login-legal{font-size:12px;color:var(--rk-text-faint);text-align:center;max-width:412px}
-.rk-login-legal a{color:var(--rk-text-muted);text-decoration:underline}
-`;
-    const script = `
-(function(){
-  var root=document;
-  // password reveal eye (only present in password mode)
-  root.querySelectorAll('[data-rk-reveal]').forEach(function(btn){
-    btn.addEventListener('click',function(){
-      var el=root.getElementById(btn.getAttribute('data-rk-reveal'));
-      if(!el)return; el.type=el.type==='password'?'text':'password';
-    });
-  });
-})();`;
-    return reskinDocument({
-        title: "vidfarm reskin — Login",
-        description: "Reskinned vidfarm login / sign up screen.",
-        activeSlug: "login",
-        chrome: "bare",
-        pageCss,
-        body,
-        script
-    });
-}
-//# sourceMappingURL=login-page.js.map