@mevdragon/vidfarm-devcli 0.17.0 → 0.18.1

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

@@ -1,23 +1,115 @@
-// /reskin/login — the auth screen ported into the farmville design system.
+// /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.
 //
-// Faithfully mirrors src/account-pages-legacy.ts → renderLoginPage. The legacy
-// page is OTP-first with a password alternative; the design brief here favors a
-// classic email + password form with a (visual) Log in / Sign up pill toggle, so
-// the primary form posts to the REAL password endpoint /login/password (mode=
-// password) and the ghost secondary button links to the REAL passwordless OTP
-// flow at /login?mode=otp — both endpoints are honest.
-import { reskinDocument } from "./document.js";
-// Real login endpoints from the live app (src/app.ts).
-const PASSWORD_ACTION = "/login/password?mode=password";
-const OTP_HREF = "/login?mode=otp";
+// 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>`;
-export function renderReskinLogin() {
+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">
@@ -26,10 +118,9 @@ export function renderReskinLogin() {
     <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
+        <span class="rk-brand-mark">V</span>VidFarm
       </a>
       <div class="rk-login-art-copy">
-        <span class="rk-badge rk-login-eyebrow">Welcome back to the farm</span>
         <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">
@@ -51,57 +142,30 @@ export function renderReskinLogin() {
   <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
+        <span class="rk-brand-mark">V</span>VidFarm
       </a>
 
       <div class="rk-login-head">
-        <h2 class="rk-login-title" data-rk-title>Welcome back</h2>
-        <p class="rk-muted" data-rk-subtitle>Log in to pick up where you left off.</p>
-      </div>
-
-      <div class="rk-login-seg" role="tablist" aria-label="Log in or sign up">
-        <span class="rk-login-seg-thumb" data-rk-thumb></span>
-        <button type="button" class="rk-login-seg-btn is-active" data-rk-seg="login" aria-selected="true">Log in</button>
-        <button type="button" class="rk-login-seg-btn" data-rk-seg="signup" aria-selected="false">Sign up</button>
+        <h2 class="rk-login-title">${rkEscape(head.title)}</h2>
+        <p class="rk-muted">${head.sub}</p>
       </div>
 
-      <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" placeholder="you@studio.co" autocomplete="email" required />
-        </div>
-        <div class="rk-field">
-          <div class="rk-login-label-row">
-            <label class="rk-label" for="rk-login-pass">Password</label>
-            <a class="rk-login-forgot" href="${OTP_HREF}" data-rk-forgot>Forgot password?</a>
-          </div>
-          <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" data-rk-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>
-
-      <p class="rk-login-foot" data-rk-foot>
-        New to vidfarm? <a href="#" data-rk-foot-link>Start a free trial</a>
-      </p>
+      ${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:100vh;display:grid;grid-template-columns:1.05fr .95fr;
+.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){.rk-login{grid-template-columns:1fr}}
+@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){.rk-login-art{display:none}}
+@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%),
@@ -139,12 +203,13 @@ export function renderReskinLogin() {
 .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){.rk-login-card-brand{display:inline-flex;justify-self:center}}
+@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 pill toggle (visual) — gold is reserved for submit, so the active
-   thumb is a plain white pill with an ink label */
+/* 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);
@@ -153,15 +218,15 @@ export function renderReskinLogin() {
 .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;
-  color:var(--rk-n-500);transition:color var(--rk-dur) var(--rk-ease)}
+  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-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
-.rk-login-forgot{font-size:12px;font-weight:600;color:var(--rk-gold-700)}
-.rk-login-forgot:hover{text-decoration:underline}
 .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}
@@ -176,35 +241,7 @@ export function renderReskinLogin() {
     const script = `
 (function(){
   var root=document;
-  // segmented Log in / Sign up toggle — visual only; both keep the real password
-  // form, we just relabel copy so the two states read honestly.
-  var thumb=root.querySelector('[data-rk-thumb]');
-  var title=root.querySelector('[data-rk-title]');
-  var subtitle=root.querySelector('[data-rk-subtitle]');
-  var submit=root.querySelector('[data-rk-submit]');
-  var foot=root.querySelector('[data-rk-foot]');
-  var forgot=root.querySelector('[data-rk-forgot]');
-  var arrow='<span class="rk-arrow">\\u2192</span>';
-  var copy={
-    login:{title:'Welcome back',sub:'Log in to pick up where you left off.',btn:'Log in '+arrow,foot:'New to vidfarm? <a href="#" data-rk-foot-link>Start a free trial</a>',forgot:true},
-    signup:{title:'Create your studio',sub:'Start making short-form ads in minutes.',btn:'Create account '+arrow,foot:'Already have an account? <a href="#" data-rk-foot-link>Log in</a>',forgot:false}
-  };
-  root.querySelectorAll('[data-rk-seg]').forEach(function(btn){
-    btn.addEventListener('click',function(){
-      var mode=btn.getAttribute('data-rk-seg');
-      root.querySelectorAll('[data-rk-seg]').forEach(function(b){
-        var on=b===btn; b.classList.toggle('is-active',on); b.setAttribute('aria-selected',on?'true':'false');
-      });
-      if(thumb)thumb.classList.toggle('is-right',mode==='signup');
-      var c=copy[mode];
-      if(title)title.textContent=c.title;
-      if(subtitle)subtitle.textContent=c.sub;
-      if(submit)submit.innerHTML=c.btn;
-      if(foot)foot.innerHTML=c.foot;
-      if(forgot)forgot.style.visibility=c.forgot?'visible':'hidden';
-    });
-  });
-  // password reveal eye
+  // 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'));