feat: 添加认证页面和路由守卫

2026-03-30 21:27:26 +08:00
parent df485b54c9
commit 58b70dd1e8
3 changed files with 273 additions and 0 deletions
@@ -0,0 +1,17 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { getSession } from '@/server/auth/functions'
+
+export const Route = createFileRoute('/_protected' as never)({
+  beforeLoad: async () => {
+    const session = await getSession()
+    if (!session) {
+      throw redirect({ to: '/login' as never })
+    }
+    return { user: session.user, session: session.session }
+  },
+  component: ProtectedLayout,
+})
+
+function ProtectedLayout() {
+  return <Outlet />
+}
@@ -0,0 +1,105 @@
+import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
+import { useState } from 'react'
+import { authClient } from '@/server/auth/client'
+import { getSession } from '@/server/auth/functions'
+
+export const Route = createFileRoute('/login' as never)({
+  beforeLoad: async () => {
+    const session = await getSession()
+    if (session) {
+      throw redirect({ to: '/' as never })
+    }
+  },
+  component: LoginPage,
+})
+
+function LoginPage() {
+  const router = useRouter()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    const { error: signInError } = await authClient.signIn.email({
+      email,
+      password,
+    })
+
+    if (signInError) {
+      setError(signInError.message ?? '登录失败，请重试')
+      setLoading(false)
+      return
+    }
+
+    router.navigate({ to: '/' as never })
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50 flex items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold text-slate-900 tracking-tight">Kairos</h1>
+          <p className="text-slate-500 mt-2">登录你的人生操作系统</p>
+        </div>
+
+        <div className="bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] ring-1 ring-slate-100 p-8">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1.5">
+                邮箱
+              </label>
+              <input
+                id="email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-4 py-3 rounded-xl bg-slate-50 border-0 ring-1 ring-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-slate-700 placeholder:text-slate-400"
+                placeholder="your@email.com"
+                disabled={loading}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-1.5">
+                密码
+              </label>
+              <input
+                id="password"
+                type="password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-4 py-3 rounded-xl bg-slate-50 border-0 ring-1 ring-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-slate-700 placeholder:text-slate-400"
+                placeholder="••••••••"
+                disabled={loading}
+              />
+            </div>
+
+            {error && <p className="text-sm text-red-600">{error}</p>}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-all shadow-md shadow-indigo-200 disabled:opacity-50 disabled:shadow-none hover:shadow-lg hover:shadow-indigo-300 active:scale-[0.98]"
+            >
+              {loading ? '登录中...' : '登录'}
+            </button>
+          </form>
+
+          <p className="text-center text-sm text-slate-500 mt-6">
+            还没有账号？{' '}
+            <Link to={'/signup' as never} className="text-indigo-600 hover:text-indigo-700 font-medium">
+              注册
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,151 @@
+import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
+import { useState } from 'react'
+import { authClient } from '@/server/auth/client'
+import { getSession } from '@/server/auth/functions'
+
+export const Route = createFileRoute('/signup' as never)({
+  beforeLoad: async () => {
+    const session = await getSession()
+    if (session) {
+      throw redirect({ to: '/' as never })
+    }
+  },
+  component: SignupPage,
+})
+
+function SignupPage() {
+  const router = useRouter()
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setError('')
+
+    if (password !== confirmPassword) {
+      setError('两次输入的密码不一致')
+      return
+    }
+
+    if (password.length < 8) {
+      setError('密码至少需要 8 个字符')
+      return
+    }
+
+    setLoading(true)
+
+    const { error: signUpError } = await authClient.signUp.email({
+      name,
+      email,
+      password,
+    })
+
+    if (signUpError) {
+      setError(signUpError.message ?? '注册失败，请重试')
+      setLoading(false)
+      return
+    }
+
+    router.navigate({ to: '/' as never })
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50 flex items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold text-slate-900 tracking-tight">Kairos</h1>
+          <p className="text-slate-500 mt-2">创建你的账号</p>
+        </div>
+
+        <div className="bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] ring-1 ring-slate-100 p-8">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-slate-700 mb-1.5">
+                用户名
+              </label>
+              <input
+                id="name"
+                type="text"
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full px-4 py-3 rounded-xl bg-slate-50 border-0 ring-1 ring-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-slate-700 placeholder:text-slate-400"
+                placeholder="你的名字"
+                disabled={loading}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1.5">
+                邮箱
+              </label>
+              <input
+                id="email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-4 py-3 rounded-xl bg-slate-50 border-0 ring-1 ring-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-slate-700 placeholder:text-slate-400"
+                placeholder="your@email.com"
+                disabled={loading}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-1.5">
+                密码
+              </label>
+              <input
+                id="password"
+                type="password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-4 py-3 rounded-xl bg-slate-50 border-0 ring-1 ring-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-slate-700 placeholder:text-slate-400"
+                placeholder="至少 8 个字符"
+                disabled={loading}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-slate-700 mb-1.5">
+                确认密码
+              </label>
+              <input
+                id="confirmPassword"
+                type="password"
+                required
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="w-full px-4 py-3 rounded-xl bg-slate-50 border-0 ring-1 ring-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none transition-all text-slate-700 placeholder:text-slate-400"
+                placeholder="再次输入密码"
+                disabled={loading}
+              />
+            </div>
+
+            {error && <p className="text-sm text-red-600">{error}</p>}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-all shadow-md shadow-indigo-200 disabled:opacity-50 disabled:shadow-none hover:shadow-lg hover:shadow-indigo-300 active:scale-[0.98]"
+            >
+              {loading ? '注册中...' : '注册'}
+            </button>
+          </form>
+
+          <p className="text-center text-sm text-slate-500 mt-6">
+            已有账号？{' '}
+            <Link to={'/login' as never} className="text-indigo-600 hover:text-indigo-700 font-medium">
+              登录
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}