llmapi-v2 2.1.0

package/views/pages/register.ejs

@@ -0,0 +1,397 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<main class="min-h-[calc(100vh-4rem)] flex items-center justify-center px-4 py-12">
+  <div class="w-full max-w-md">
+    <div class="bg-white rounded-2xl shadow-sm border border-claude-dark/5 p-8">
+      <!-- Header -->
+      <div class="text-center mb-8">
+        <h1 class="text-2xl font-bold text-claude-dark">创建账户</h1>
+        <p class="mt-2 text-sm text-claude-dark/60">注册 LLM API，开始使用 Claude Code</p>
+      </div>
+
+      <!-- Google Sign-In -->
+      <script src="https://accounts.google.com/gsi/client" async></script>
+      <div id="g_id_onload"
+        data-client_id="128504392054-4rfrtk05umm9fvfpd83l9qn9r4qnaa98.apps.googleusercontent.com"
+        data-callback="handleGoogleCallback"
+        data-auto_prompt="false">
+      </div>
+      <div class="flex justify-center mb-6">
+        <div class="g_id_signin"
+          data-type="standard"
+          data-shape="rectangular"
+          data-theme="outline"
+          data-text="signup_with"
+          data-size="large"
+          data-width="400">
+        </div>
+      </div>
+
+      <div class="relative mb-6">
+        <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-claude-dark/10"></div></div>
+        <div class="relative flex justify-center text-xs"><span class="bg-white px-3 text-claude-dark/40">or register with email</span></div>
+      </div>
+
+      <!-- Step Indicator -->
+      <div class="flex items-center justify-center mb-8">
+        <div class="flex items-center space-x-3">
+          <div id="step1Indicator" class="flex items-center justify-center w-8 h-8 rounded-full bg-claude-orange text-white text-sm font-semibold">1</div>
+          <div id="stepLine" class="w-12 h-0.5 bg-claude-dark/10"></div>
+          <div id="step2Indicator" class="flex items-center justify-center w-8 h-8 rounded-full bg-claude-dark/10 text-claude-dark/40 text-sm font-semibold">2</div>
+        </div>
+      </div>
+
+      <!-- Error / Success Display -->
+      <div id="regError" class="hidden mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"></div>
+      <div id="regSuccess" class="hidden mb-4 p-3 rounded-lg bg-green-50 border border-green-200 text-sm text-green-700"></div>
+
+      <!-- Step 1: Registration Form -->
+      <form id="step1Form" class="space-y-4" onsubmit="handleStep1(event)">
+        <div>
+          <label for="name" class="block text-sm font-medium text-claude-dark/80 mb-1.5">用户名</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            required
+            minlength="2"
+            placeholder="您的名字"
+            class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark placeholder-claude-dark/30 focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-colors"
+          >
+        </div>
+
+        <div>
+          <label for="email" class="block text-sm font-medium text-claude-dark/80 mb-1.5">邮箱地址</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            required
+            autocomplete="email"
+            placeholder="you@example.com"
+            class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark placeholder-claude-dark/30 focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-colors"
+          >
+        </div>
+
+        <div>
+          <label for="password" class="block text-sm font-medium text-claude-dark/80 mb-1.5">密码</label>
+          <div class="relative">
+            <input
+              type="password"
+              id="password"
+              name="password"
+              required
+              minlength="8"
+              placeholder="至少 8 个字符"
+              class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark placeholder-claude-dark/30 focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-colors"
+            >
+            <button type="button" onclick="togglePassword('password')" class="absolute right-3 top-1/2 -translate-y-1/2 text-claude-dark/40 hover:text-claude-dark/70">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <div>
+          <label for="confirmPassword" class="block text-sm font-medium text-claude-dark/80 mb-1.5">确认密码</label>
+          <input
+            type="password"
+            id="confirmPassword"
+            name="confirmPassword"
+            required
+            minlength="8"
+            placeholder="再次输入密码"
+            class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark placeholder-claude-dark/30 focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-colors"
+          >
+        </div>
+
+        <button
+          type="submit"
+          id="step1Btn"
+          class="w-full py-2.5 px-4 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors focus:outline-none focus:ring-2 focus:ring-claude-orange/30 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          发送验证码
+        </button>
+      </form>
+
+      <!-- Step 2: Verification Code -->
+      <form id="step2Form" class="hidden space-y-5" onsubmit="handleStep2(event)">
+        <div class="text-center mb-2">
+          <p class="text-sm text-claude-dark/60">验证码已发送至 <span id="sentEmail" class="font-medium text-claude-dark"></span></p>
+        </div>
+
+        <div>
+          <label for="code" class="block text-sm font-medium text-claude-dark/80 mb-1.5 text-center">输入 6 位验证码</label>
+          <input
+            type="text"
+            id="code"
+            name="code"
+            required
+            maxlength="6"
+            pattern="[0-9]{6}"
+            inputmode="numeric"
+            autocomplete="one-time-code"
+            placeholder="000000"
+            class="w-full px-4 py-4 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark text-center text-2xl font-mono tracking-[0.5em] placeholder-claude-dark/20 focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-colors"
+          >
+        </div>
+
+        <button
+          type="submit"
+          id="step2Btn"
+          class="w-full py-2.5 px-4 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors focus:outline-none focus:ring-2 focus:ring-claude-orange/30 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          验证并注册
+        </button>
+
+        <div class="text-center">
+          <button
+            type="button"
+            id="resendBtn"
+            onclick="handleResend()"
+            disabled
+            class="text-sm text-claude-orange hover:text-claude-orange/80 font-medium transition-colors disabled:text-claude-dark/30 disabled:cursor-not-allowed"
+          >
+            重新发送验证码 (<span id="countdown">60</span>s)
+          </button>
+        </div>
+
+        <button
+          type="button"
+          onclick="backToStep1()"
+          class="w-full py-2 text-sm text-claude-dark/50 hover:text-claude-dark/70 transition-colors"
+        >
+          返回上一步
+        </button>
+      </form>
+
+      <!-- Footer Links -->
+      <div class="mt-6 text-center">
+        <p class="text-sm text-claude-dark/60">
+          已有账户？
+          <a href="/login" class="text-claude-orange hover:text-claude-orange/80 font-medium transition-colors">立即登录</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</main>
+
+<script>
+  function handleGoogleCallback(response) {
+    fetch('/api/auth/google/token', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ idToken: response.credential }),
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.success) window.location.href = '/dashboard';
+      else showError(data.error || 'Google sign-up failed');
+    })
+    .catch(function() { showError('Google sign-up failed'); });
+  }
+
+  let regEmail = '';
+  let regPassword = '';
+  let regName = '';
+  let countdownTimer = null;
+
+  function togglePassword(fieldId) {
+    const input = document.getElementById(fieldId);
+    input.type = input.type === 'password' ? 'text' : 'password';
+  }
+
+  function showError(msg) {
+    const el = document.getElementById('regError');
+    el.textContent = msg;
+    el.classList.remove('hidden');
+    document.getElementById('regSuccess').classList.add('hidden');
+  }
+
+  function showSuccess(msg) {
+    const el = document.getElementById('regSuccess');
+    el.textContent = msg;
+    el.classList.remove('hidden');
+    document.getElementById('regError').classList.add('hidden');
+  }
+
+  function hideMessages() {
+    document.getElementById('regError').classList.add('hidden');
+    document.getElementById('regSuccess').classList.add('hidden');
+  }
+
+  function goToStep2() {
+    document.getElementById('step1Form').classList.add('hidden');
+    document.getElementById('step2Form').classList.remove('hidden');
+    document.getElementById('step2Indicator').classList.remove('bg-claude-dark/10', 'text-claude-dark/40');
+    document.getElementById('step2Indicator').classList.add('bg-claude-orange', 'text-white');
+    document.getElementById('stepLine').classList.remove('bg-claude-dark/10');
+    document.getElementById('stepLine').classList.add('bg-claude-orange');
+    document.getElementById('sentEmail').textContent = regEmail;
+    startCountdown();
+  }
+
+  function backToStep1() {
+    document.getElementById('step2Form').classList.add('hidden');
+    document.getElementById('step1Form').classList.remove('hidden');
+    document.getElementById('step2Indicator').classList.add('bg-claude-dark/10', 'text-claude-dark/40');
+    document.getElementById('step2Indicator').classList.remove('bg-claude-orange', 'text-white');
+    document.getElementById('stepLine').classList.add('bg-claude-dark/10');
+    document.getElementById('stepLine').classList.remove('bg-claude-orange');
+    hideMessages();
+    if (countdownTimer) clearInterval(countdownTimer);
+  }
+
+  function startCountdown() {
+    let seconds = 60;
+    const btn = document.getElementById('resendBtn');
+    const countdownEl = document.getElementById('countdown');
+    btn.disabled = true;
+    btn.innerHTML = '重新发送验证码 (<span id="countdown">60</span>s)';
+
+    if (countdownTimer) clearInterval(countdownTimer);
+
+    countdownTimer = setInterval(function() {
+      seconds--;
+      document.getElementById('countdown').textContent = seconds;
+      if (seconds <= 0) {
+        clearInterval(countdownTimer);
+        btn.disabled = false;
+        btn.textContent = '重新发送验证码';
+      }
+    }, 1000);
+  }
+
+  async function handleStep1(e) {
+    e.preventDefault();
+    hideMessages();
+
+    var name = document.getElementById('name').value.trim();
+    var email = document.getElementById('email').value.trim();
+    var password = document.getElementById('password').value;
+    var confirmPassword = document.getElementById('confirmPassword').value;
+
+    if (!name || name.length < 2) {
+      showError('用户名至少需要 2 个字符');
+      return;
+    }
+    if (!email) {
+      showError('请输入邮箱地址');
+      return;
+    }
+    if (password.length < 8) {
+      showError('密码至少需要 8 个字符');
+      return;
+    }
+    if (password !== confirmPassword) {
+      showError('两次输入的密码不一致');
+      return;
+    }
+
+    var btn = document.getElementById('step1Btn');
+    btn.disabled = true;
+    btn.textContent = '发送中...';
+
+    try {
+      var res = await fetch('/api/auth/send-code', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ name: name, email: email, password: password }),
+      });
+
+      var data = await res.json();
+
+      if (data.success) {
+        regEmail = email;
+        regPassword = password;
+        regName = name;
+        showSuccess('验证码已发送至您的邮箱');
+        setTimeout(function() {
+          hideMessages();
+          goToStep2();
+        }, 800);
+      } else {
+        showError(data.error || '发送验证码失败，请重试');
+      }
+    } catch (err) {
+      showError('网络错误，请检查连接后重试');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = '发送验证码';
+    }
+  }
+
+  async function handleStep2(e) {
+    e.preventDefault();
+    hideMessages();
+
+    var code = document.getElementById('code').value.trim();
+
+    if (!code || code.length !== 6 || !/^\d{6}$/.test(code)) {
+      showError('请输入 6 位数字验证码');
+      return;
+    }
+
+    var btn = document.getElementById('step2Btn');
+    btn.disabled = true;
+    btn.textContent = '注册中...';
+
+    try {
+      var res = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ email: regEmail, code: code }),
+      });
+
+      var data = await res.json();
+
+      if (data.success) {
+        showSuccess('注册成功！正在跳转...');
+        setTimeout(function() {
+          window.location.href = '/dashboard';
+        }, 1000);
+      } else {
+        showError(data.error || '验证失败，请重试');
+      }
+    } catch (err) {
+      showError('网络错误，请检查连接后重试');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = '验证并注册';
+    }
+  }
+
+  async function handleResend() {
+    hideMessages();
+
+    var btn = document.getElementById('resendBtn');
+    btn.disabled = true;
+
+    try {
+      var res = await fetch('/api/auth/send-code', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ name: regName, email: regEmail, password: regPassword }),
+      });
+
+      var data = await res.json();
+
+      if (data.success) {
+        showSuccess('验证码已重新发送');
+        startCountdown();
+      } else {
+        showError(data.error || '发送失败，请重试');
+        btn.disabled = false;
+      }
+    } catch (err) {
+      showError('网络错误，请重试');
+      btn.disabled = false;
+    }
+  }
+</script>
+
+</body>
+</html>