From 6291dc40d05b55480dd07223804f71f87078bbe8 Mon Sep 17 00:00:00 2001 From: mini Date: Sun, 19 Apr 2026 22:22:25 +0800 Subject: [PATCH 1/4] fix(auth): restore dark split-layout visuals on /login /register Three regressions from Task 7-9 caused /login /register to render broken: - bg-glow not rendering: puro.css scopes .bg-glow to .puro-page, AuthLayout isn't inside one. Fix: duplicate bg-glow rules into AuthLayout scoped CSS keyed on .auth-shell-split. - .auth-main had no background: right side showed naked body bg. Fix: .auth-shell-split now sets var(--bg-0) for whole shell. - Heading/label colors used text-gray-900 light-mode classes, invisible on dark bg. Fix: switch to explicit text-slate-50/400, and :deep() override for form inputs via AuthLayout split scope. Legacy (non-split) mode unaffected. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/src/components/layout/AuthLayout.vue | 61 +++++++++++++++++++ frontend/src/views/auth/LoginView.vue | 4 +- frontend/src/views/auth/RegisterView.vue | 4 +- 3 files changed, 65 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/layout/AuthLayout.vue b/frontend/src/components/layout/AuthLayout.vue index 3b02a926..4da00aa4 100644 --- a/frontend/src/components/layout/AuthLayout.vue +++ b/frontend/src/components/layout/AuthLayout.vue @@ -73,6 +73,10 @@ onMounted(() => { .auth-shell-split { display: grid; grid-template-columns: 1fr 1fr; + background: var(--bg-0); + color: var(--text-0); + font-family: var(--font-sans); + min-height: 100vh; } @media (max-width: 900px) { .auth-shell-split { @@ -106,6 +110,63 @@ onMounted(() => { max-width: 420px; } +/* bg-glow primitives for split mode (not in .puro-page ancestor, so puro.css rules don't apply) */ +.auth-shell-split .bg-glow { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; + overflow: hidden; +} +.auth-shell-split .bg-glow::before, +.auth-shell-split .bg-glow::after { + content: ""; + position: absolute; + width: 900px; + height: 900px; + border-radius: 50%; + filter: blur(120px); + opacity: 0.15; +} +.auth-shell-split .bg-glow::before { + background: radial-gradient(circle, #22d3ee 0%, transparent 60%); + top: -300px; + left: -200px; +} +.auth-shell-split .bg-glow::after { + background: radial-gradient(circle, #a855f7 0%, transparent 60%); + top: 200px; + right: -300px; +} + +/* Right-side form area (split mode) inherits --text-0 for headings */ +.auth-shell-split .auth-main { + position: relative; + z-index: 2; +} + +/* In split mode, force Tailwind's light-mode text grays to light colors for dark shell readability. + * Uses :deep() to reach slotted LoginView/RegisterView content. */ +.auth-shell-split :deep(.input-label), +.auth-shell-split :deep(label) { + color: var(--text-1) !important; +} +.auth-shell-split :deep(.input) { + background: var(--bg-1) !important; + border-color: var(--border) !important; + color: var(--text-0) !important; +} +.auth-shell-split :deep(.input::placeholder) { + color: var(--text-3) !important; +} +.auth-shell-split :deep(.btn-primary) { + /* keep existing — should still look good */ +} +.auth-shell-split :deep(.text-gray-500), +.auth-shell-split :deep(.text-gray-400) { + color: var(--text-2) !important; +} + /* Legacy-mode (no narrative slot) background — keep existing gradient decorative look */ .auth-shell:not(.auth-shell-split) { display: flex; diff --git a/frontend/src/views/auth/LoginView.vue b/frontend/src/views/auth/LoginView.vue index 99260615..d57c80fb 100644 --- a/frontend/src/views/auth/LoginView.vue +++ b/frontend/src/views/auth/LoginView.vue @@ -21,8 +21,8 @@
-

{{ t('auth.puroLoginTitle') }}

-

{{ t('auth.puroLoginSub') }}

+

{{ t('auth.puroLoginTitle') }}

+

{{ t('auth.puroLoginSub') }}

diff --git a/frontend/src/views/auth/RegisterView.vue b/frontend/src/views/auth/RegisterView.vue index 11ed0f11..de780ea8 100644 --- a/frontend/src/views/auth/RegisterView.vue +++ b/frontend/src/views/auth/RegisterView.vue @@ -21,8 +21,8 @@
-

{{ t('auth.puroRegisterTitle') }}

-

{{ t('auth.puroRegisterSub') }}

+

{{ t('auth.puroRegisterTitle') }}

+

{{ t('auth.puroRegisterSub') }}

From 046765632d1a13a173742bc0fd044fdc25286b7a Mon Sep 17 00:00:00 2001 From: mini Date: Sun, 19 Apr 2026 22:45:54 +0800 Subject: [PATCH 2/4] fix(auth): LoginView fidelity port from design zip MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Narrative: N (not 5) 个订阅, matching design intent - Add '// 你的订阅,已经付过钱了' n-kicker above headline - Port route-demo panel (POST /v1/chat/completions → pool → 200 OK) - Port n-bottom live status bar (green dot + ai.puro.im operational) - Replace ⬢ emoji with inline SVG hexagon (crisp at all sizes) All Vue auth logic preserved: OAuth sections, Turnstile, 2FA modal, forgot-password, form validation, v-model bindings. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/src/views/auth/LoginView.vue | 118 +++++++++++++++++++++++--- 1 file changed, 107 insertions(+), 11 deletions(-) diff --git a/frontend/src/views/auth/LoginView.vue b/frontend/src/views/auth/LoginView.vue index d57c80fb..4f876e03 100644 --- a/frontend/src/views/auth/LoginView.vue +++ b/frontend/src/views/auth/LoginView.vue @@ -2,10 +2,18 @@ @@ -464,15 +487,26 @@ function handle2FACancel(): void { color: var(--text-0); } .brand { - display: flex; + display: inline-flex; align-items: center; - gap: 8px; + gap: 10px; font-weight: 700; - font-size: 18px; + font-size: 15px; + letter-spacing: -0.01em; + color: var(--text-0); + text-decoration: none; } -.brand .hex { +.brand svg { color: var(--cyan); - font-size: 24px; + flex-shrink: 0; +} + +.n-kicker { + font-family: var(--font-mono); + font-size: 12px; + letter-spacing: 0.1em; + color: var(--cyan); + margin-bottom: 0; } .auth-narrative-headline { @@ -482,7 +516,7 @@ function handle2FACancel(): void { letter-spacing: -0.03em; margin-bottom: 24px; } -.auth-narrative-headline .num-5 { color: var(--amber); } +.auth-narrative-headline .num-n { color: var(--amber); } .auth-narrative-headline .num-1 { color: var(--cyan); } .auth-narrative-sub { font-size: 15px; @@ -495,9 +529,71 @@ function handle2FACancel(): void { font-size: 12px; color: var(--text-3); } + +/* Route demo panel */ +.route-demo { + font-family: var(--font-mono); + font-size: 12px; + background: rgba(2, 6, 23, 0.6); + border: 1px solid var(--border); + border-radius: var(--r-md, 8px); + padding: 18px 22px; + max-width: 440px; +} +.route-demo .row { + display: flex; + gap: 20px; + padding: 4px 0; + align-items: center; +} +.route-demo .k { color: var(--text-3); min-width: 70px; } +.route-demo .v { color: var(--text-0); } +.route-demo .pill-inline { + padding: 2px 8px; + border-radius: 4px; + background: rgba(34, 211, 238, 0.08); + border: 1px solid rgba(34, 211, 238, 0.25); + color: var(--cyan); +} +.route-demo .pill-inline.amber { + background: rgba(251, 191, 36, 0.08); + border-color: rgba(251, 191, 36, 0.25); + color: var(--amber); +} +.route-demo .dot-g { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--green); + display: inline-block; + margin-right: 6px; + box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); +} + +/* Bottom status bar */ .auth-narrative-foot { font-size: 12px; color: var(--text-3); font-family: var(--font-mono); } +.n-bottom { + display: flex; + gap: 14px; + align-items: center; + flex-wrap: wrap; +} +.n-bottom .sep { color: var(--border-2, rgba(255,255,255,0.12)); } +.n-bottom .live { + color: var(--green, #34d399); + display: inline-flex; + align-items: center; + gap: 6px; +} +.n-bottom .live .dot { + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--green, #34d399); + box-shadow: 0 0 6px var(--green, #34d399); +} From 9f78b70a87996ac27146b115b569ea001ed4c879 Mon Sep 17 00:00:00 2001 From: mini Date: Sun, 19 Apr 2026 22:53:40 +0800 Subject: [PATCH 3/4] fix(auth): RegisterView fidelity port from design zip MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Port A-group deltas from design zip (excluding bonus/pricing which are explicitly out of scope): - Narrative: N (not 5) 个订阅; add '// 5 分钟开始用' n-kicker; SVG hexagon logo (was emoji); n-bottom live status bar - Add 3-step onboarding panel (创建账户 → 绑定订阅 → 生成 key) in narrative, active-step highlighted - Add password strength meter (4 bars + text label 弱/中/强/极强) - Add confirm-password field with live // matched/mismatch hint - Add Terms & Privacy consent checkbox (submit gated) - New i18n keys: confirmPasswordLabel/Placeholder, passwordsDoNotMatch All existing Vue logic preserved (OAuth/Turnstile/verify code/ invitation+promo codes). Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/src/i18n/locales/zh.ts | 1 + frontend/src/views/auth/RegisterView.vue | 299 ++++++++++++++++++++++- 2 files changed, 287 insertions(+), 13 deletions(-) diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts index 93a319b7..ca242070 100644 --- a/frontend/src/i18n/locales/zh.ts +++ b/frontend/src/i18n/locales/zh.ts @@ -504,6 +504,7 @@ export default { puroLoginSub: '用你的 PURO AI 账户继续', puroRegisterTitle: '创建账户', puroRegisterSub: '5 分钟开始用 PURO AI', + confirmPasswordLabel: '确认密码', }, // Dashboard diff --git a/frontend/src/views/auth/RegisterView.vue b/frontend/src/views/auth/RegisterView.vue index de780ea8..da1e1bab 100644 --- a/frontend/src/views/auth/RegisterView.vue +++ b/frontend/src/views/auth/RegisterView.vue @@ -2,10 +2,18 @@ @@ -125,6 +157,38 @@

{{ t('auth.passwordHint') }}

+ +
+ + + + +
+
+ // strength · + {{ pwScoreLabel }} +
+
+ + +
+ +
+
+ +
+ +
+
+ // {{ pwMatchLabel }} +
@@ -231,6 +295,14 @@
+ +
+ +
+