From 9f78b70a87996ac27146b115b569ea001ed4c879 Mon Sep 17 00:00:00 2001
From: mini <afanamigo@gmail.com>
Date: Sun, 19 Apr 2026 22:53:40 +0800
Subject: [PATCH] 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) <noreply@anthropic.com>
---
 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 @@
   <AuthLayout>
     <template #narrative>
       <div class="auth-narrative-inner">
-        <div class="brand"><span class="hex">⬢</span><span>PURO AI</span></div>
-        <div class="auth-narrative-hero">
-          <div class="auth-narrative-headline">
-            <span class="num-5">5</span> 个订阅<br>
+        <router-link to="/" class="brand">
+          <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
+            <path d="M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke="currentColor" stroke-width="1.8" fill="rgba(34, 211, 238, 0.08)"/>
+            <path d="M12 7L17 9.5V14.5L12 17L7 14.5V9.5L12 7Z" fill="currentColor"/>
+          </svg>
+          <span>PURO AI</span>
+        </router-link>
+
+        <div>
+          <div class="n-kicker">// 5 分钟开始用</div>
+          <div class="auth-narrative-headline" style="margin-top: 12px;">
+            <span class="num-n">N</span> 个订阅<br>
             → <span class="num-1">1</span> 个 key
           </div>
           <p class="auth-narrative-sub">
@@ -14,7 +22,31 @@
             <span class="auth-narrative-tagline">PURO（纯粹）—— 让 AI 调用回归本质。</span>
           </p>
         </div>
-        <div class="auth-narrative-foot">Claude · ChatGPT · Codex · Gemini</div>
+
+        <div class="steps">
+          <div class="steps-title">// 下一步</div>
+          <div class="step active">
+            <div class="step-num">1</div>
+            <div class="step-text"><b>创建账户</b> · 邮箱 + 密码，或用 LinuxDO OAuth</div>
+          </div>
+          <div class="step">
+            <div class="step-num">2</div>
+            <div class="step-text"><b>绑定订阅</b> · OAuth 接入你现有的 Claude Pro / ChatGPT Plus</div>
+          </div>
+          <div class="step">
+            <div class="step-num">3</div>
+            <div class="step-text"><b>生成 key</b> · 拿到 <span class="k">sk-puro-…</span>，换掉 SDK 的 <span class="k">base_url</span></div>
+          </div>
+        </div>
+
+        <div class="auth-narrative-foot n-bottom">
+          <span>Claude</span><span class="sep">·</span>
+          <span>ChatGPT</span><span class="sep">·</span>
+          <span>Codex</span><span class="sep">·</span>
+          <span>Gemini</span>
+          <span class="sep">|</span>
+          <span class="live"><span class="dot"></span>ai.puro.im · operational</span>
+        </div>
       </div>
     </template>
 
@@ -125,6 +157,38 @@
           <p v-else class="input-hint">
             {{ t('auth.passwordHint') }}
           </p>
+          <!-- Password strength meter -->
+          <div class="pw-strength" :data-score="pwScore">
+            <span class="bar"></span>
+            <span class="bar"></span>
+            <span class="bar"></span>
+            <span class="bar"></span>
+          </div>
+          <div class="pw-hint" :data-score="pwScore">
+            <span class="k">// strength · </span>
+            <span class="val">{{ pwScoreLabel }}</span>
+          </div>
+        </div>
+
+        <!-- Confirm Password Input -->
+        <div class="form-field">
+          <label class="input-label">{{ t('auth.confirmPasswordLabel') }}</label>
+          <div class="relative">
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
+              <Icon name="lock" size="md" class="text-gray-400 dark:text-dark-500" />
+            </div>
+            <input
+              v-model="formData.confirmPassword"
+              type="password"
+              class="input pl-11"
+              :placeholder="t('auth.confirmPasswordPlaceholder')"
+              required
+              autocomplete="new-password"
+            />
+          </div>
+          <div class="match-hint" v-if="formData.confirmPassword" :class="pwMatchClass">
+            <span class="k">// </span><span class="val">{{ pwMatchLabel }}</span>
+          </div>
         </div>
 
         <!-- Invitation Code Input (Required when enabled) -->
@@ -231,6 +295,14 @@
           </transition>
         </div>
 
+        <!-- Terms Checkbox -->
+        <div class="terms-check">
+          <label>
+            <input type="checkbox" v-model="termsAccepted" class="check" />
+            <span>我已阅读并同意 <a href="#" class="underline">服务条款</a> 与 <a href="#" class="underline">隐私政策</a></span>
+          </label>
+        </div>
+
         <!-- Turnstile Widget -->
         <div v-if="turnstileEnabled && turnstileSiteKey">
           <TurnstileWidget
@@ -265,7 +337,7 @@
         <!-- Submit Button -->
         <button
           type="submit"
-          :disabled="isLoading || (turnstileEnabled && !turnstileToken)"
+          :disabled="isLoading || (turnstileEnabled && !turnstileToken) || !termsAccepted"
           class="btn btn-primary w-full"
         >
           <svg
@@ -316,7 +388,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { AuthLayout } from '@/components/layout'
@@ -347,6 +419,7 @@ const isLoading = ref<boolean>(false)
 const settingsLoaded = ref<boolean>(false)
 const errorMessage = ref<string>('')
 const showPassword = ref<boolean>(false)
+const termsAccepted = ref<boolean>(false)
 
 // Public settings
 const registrationEnabled = ref<boolean>(true)
@@ -387,6 +460,7 @@ let invitationValidateTimeout: ReturnType<typeof setTimeout> | null = null
 const formData = reactive({
   email: '',
   password: '',
+  confirmPassword: '',
   promo_code: '',
   invitation_code: ''
 })
@@ -398,6 +472,28 @@ const errors = reactive({
   invitation_code: ''
 })
 
+// ==================== Password Strength ====================
+
+const pwScore = computed(() => {
+  const p = formData.password
+  if (!p) return 0
+  let s = 0
+  if (p.length >= 8) s++
+  if (/[A-Z]/.test(p) && /[a-z]/.test(p)) s++
+  if (/[0-9]/.test(p)) s++
+  if (/[^A-Za-z0-9]/.test(p) || p.length >= 12) s++
+  return Math.min(s, 4)
+})
+const pwScoreLabel = computed(() => ['—', '弱', '中', '强', '极强'][pwScore.value])
+
+// ==================== Confirm Password Match ====================
+
+const pwMatch = computed(() =>
+  !formData.confirmPassword ? null : formData.password === formData.confirmPassword
+)
+const pwMatchClass = computed(() => pwMatch.value === true ? 'ok' : pwMatch.value === false ? 'mismatch' : '')
+const pwMatchLabel = computed(() => pwMatch.value === true ? 'matched' : pwMatch.value === false ? 'passwords do not match' : '')
+
 // ==================== Lifecycle ====================
 
 onMounted(async () => {
@@ -648,6 +744,12 @@ function validateForm(): boolean {
     isValid = false
   }
 
+  // Confirm password validation
+  if (formData.password && formData.confirmPassword && formData.password !== formData.confirmPassword) {
+    errorMessage.value = t('auth.passwordsDoNotMatch')
+    isValid = false
+  }
+
   // Invitation code validation (required when enabled)
   if (invitationCodeEnabled.value) {
     if (!formData.invitation_code.trim()) {
@@ -676,6 +778,12 @@ async function handleRegister(): Promise<void> {
     return
   }
 
+  // Check passwords match
+  if (formData.confirmPassword && formData.password !== formData.confirmPassword) {
+    errorMessage.value = t('auth.passwordsDoNotMatch')
+    return
+  }
+
   // Check promo code validation status
   if (formData.promo_code.trim()) {
     // If promo code is being validated, wait
@@ -791,16 +899,28 @@ async function handleRegister(): Promise<void> {
   justify-content: space-between;
   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 {
@@ -810,7 +930,7 @@ async function handleRegister(): Promise<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;
@@ -823,9 +943,162 @@ async function handleRegister(): Promise<void> {
   font-size: 12px;
   color: var(--text-3);
 }
+
+/* 3-step onboarding panel */
+.steps {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px 22px;
+  background: rgba(2, 6, 23, 0.5);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md, 8px);
+  max-width: 440px;
+}
+.steps-title {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-3);
+  letter-spacing: 0.14em;
+}
+.step {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  font-size: 13px;
+}
+.step-num {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: rgba(34, 211, 238, 0.1);
+  border: 1px solid rgba(34, 211, 238, 0.3);
+  color: var(--cyan);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.step.active .step-num {
+  background: var(--cyan);
+  color: #042f2e;
+  border-color: var(--cyan);
+}
+.step-text {
+  color: var(--text-1);
+  line-height: 1.5;
+  padding-top: 2px;
+}
+.step-text b {
+  color: var(--text-0);
+  font-weight: 600;
+}
+.step-text .k {
+  font-family: var(--font-mono);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-2);
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 11.5px;
+  color: var(--cyan);
+}
+
+/* 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);
+}
+
+/* Password strength meter */
+.pw-strength {
+  display: flex;
+  gap: 4px;
+  margin-top: 8px;
+}
+.pw-strength .bar {
+  flex: 1;
+  height: 3px;
+  background: var(--border);
+  border-radius: 2px;
+  transition: background 0.2s;
+}
+.pw-strength[data-score="1"] .bar:nth-child(-n+1),
+.pw-strength[data-score="2"] .bar:nth-child(-n+2),
+.pw-strength[data-score="3"] .bar:nth-child(-n+3),
+.pw-strength[data-score="4"] .bar:nth-child(-n+4) {
+  background: var(--strength-color, #f87171);
+}
+.pw-strength[data-score="1"] { --strength-color: #f87171; }
+.pw-strength[data-score="2"] { --strength-color: #fbbf24; }
+.pw-strength[data-score="3"] { --strength-color: #22d3ee; }
+.pw-strength[data-score="4"] { --strength-color: #34d399; }
+
+.pw-hint {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  margin-top: 6px;
+}
+.pw-hint .k { color: var(--text-3); }
+.pw-hint .val { color: var(--strength-color, var(--text-2)); }
+.pw-hint[data-score="1"] { --strength-color: #f87171; }
+.pw-hint[data-score="2"] { --strength-color: #fbbf24; }
+.pw-hint[data-score="3"] { --strength-color: #22d3ee; }
+.pw-hint[data-score="4"] { --strength-color: #34d399; }
+
+/* Confirm password match hint */
+.match-hint {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  margin-top: 6px;
+}
+.match-hint.ok { color: #34d399; }
+.match-hint.mismatch { color: #f87171; }
+.match-hint .k { color: var(--text-3); }
+
+/* Terms checkbox */
+.terms-check {
+  margin-top: 16px;
+  font-size: 13px;
+  color: var(--text-2);
+}
+.terms-check label {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  cursor: pointer;
+}
+.terms-check a {
+  color: var(--cyan, #22d3ee);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.terms-check input[type="checkbox"] {
+  accent-color: var(--cyan, #22d3ee);
+  margin-top: 3px;
+  flex-shrink: 0;
+}
 </style>