建立檔案

app/register/page.tsx

@@ -0,0 +1,408 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { useAuth } from "@/contexts/auth-context"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Badge } from "@/components/ui/badge"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Separator } from "@/components/ui/separator"
+import { Brain, User, Mail, Building, Lock, Loader2, CheckCircle, AlertTriangle, Shield, Code } from "lucide-react"
+
+export default function RegisterPage() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { register, isLoading } = useAuth()
+
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+    department: "",
+  })
+  const [error, setError] = useState("")
+  const [success, setSuccess] = useState("")
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  // 從 URL 參數獲取邀請資訊
+  const invitationToken = searchParams.get("token")
+  const invitedEmail = searchParams.get("email")
+  const invitedRole = searchParams.get("role") || "user"
+  const isInvitedUser = !!(invitationToken && invitedEmail)
+
+  useEffect(() => {
+    if (isInvitedUser) {
+      setFormData((prev) => ({
+        ...prev,
+        email: decodeURIComponent(invitedEmail),
+      }))
+    }
+  }, [isInvitedUser, invitedEmail])
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+    setError("")
+  }
+
+  const getRoleText = (role: string) => {
+    switch (role) {
+      case "admin":
+        return "管理員"
+      case "developer":
+        return "開發者"
+      case "user":
+        return "一般用戶"
+      default:
+        return role
+    }
+  }
+
+  const getRoleIcon = (role: string) => {
+    switch (role) {
+      case "admin":
+        return <Shield className="w-4 h-4 text-purple-600" />
+      case "developer":
+        return <Code className="w-4 h-4 text-green-600" />
+      case "user":
+        return <User className="w-4 h-4 text-blue-600" />
+      default:
+        return <User className="w-4 h-4 text-blue-600" />
+    }
+  }
+
+  const getRoleColor = (role: string) => {
+    switch (role) {
+      case "admin":
+        return "bg-purple-100 text-purple-800 border-purple-200"
+      case "developer":
+        return "bg-green-100 text-green-800 border-green-200"
+      case "user":
+        return "bg-blue-100 text-blue-800 border-blue-200"
+      default:
+        return "bg-gray-100 text-gray-800 border-gray-200"
+    }
+  }
+
+  const getRoleDescription = (role: string) => {
+    switch (role) {
+      case "admin":
+        return "可以訪問管理後台，管理用戶和審核應用"
+      case "developer":
+        return "可以提交 AI 應用申請，參與平台建設"
+      case "user":
+        return "可以瀏覽和收藏應用，參與評價互動"
+      default:
+        return ""
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError("")
+    setIsSubmitting(true)
+
+    // 表單驗證
+    if (!formData.name || !formData.email || !formData.password || !formData.department) {
+      setError("請填寫所有必填欄位")
+      setIsSubmitting(false)
+      return
+    }
+
+    if (formData.password !== formData.confirmPassword) {
+      setError("密碼確認不一致")
+      setIsSubmitting(false)
+      return
+    }
+
+    if (formData.password.length < 6) {
+      setError("密碼長度至少需要 6 個字符")
+      setIsSubmitting(false)
+      return
+    }
+
+    try {
+      const success = await register({
+        name: formData.name,
+        email: formData.email,
+        password: formData.password,
+        department: formData.department,
+      })
+
+      if (success) {
+        setSuccess("註冊成功！正在跳轉...")
+        setTimeout(() => {
+          router.push("/")
+        }, 2000)
+      } else {
+        setError("註冊失敗，請檢查資料或聯繫管理員")
+      }
+    } catch (err) {
+      setError("註冊過程中發生錯誤，請稍後再試")
+    }
+
+    setIsSubmitting(false)
+  }
+
+  if (success) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50 flex items-center justify-center p-4">
+        <Card className="w-full max-w-md">
+          <CardContent className="text-center py-8">
+            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <CheckCircle className="w-8 h-8 text-green-600" />
+            </div>
+            <h3 className="text-xl font-semibold text-gray-900 mb-2">註冊成功！</h3>
+            <p className="text-gray-600 mb-4">歡迎加入強茂集團 AI 展示平台</p>
+            <p className="text-sm text-gray-500">正在跳轉到首頁...</p>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="flex items-center justify-center space-x-2 mb-4">
+            <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
+              <Brain className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">強茂集團 AI 展示平台</h1>
+            </div>
+          </div>
+          {isInvitedUser ? (
+            <div>
+              <h2 className="text-xl font-semibold text-gray-900 mb-2">完成註冊</h2>
+              <p className="text-gray-600">您已受邀加入平台，請完成以下資訊</p>
+            </div>
+          ) : (
+            <div>
+              <h2 className="text-xl font-semibold text-gray-900 mb-2">建立帳戶</h2>
+              <p className="text-gray-600">加入強茂集團 AI 展示平台</p>
+            </div>
+          )}
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>註冊資訊</CardTitle>
+            <CardDescription>
+              {isInvitedUser ? "請填寫您的個人資訊完成註冊" : "請填寫以下資訊建立您的帳戶"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {/* Invitation Info */}
+            {isInvitedUser && (
+              <div className="mb-6">
+                <div className="bg-blue-50 rounded-lg p-4">
+                  <div className="flex items-start space-x-3">
+                    <CheckCircle className="w-5 h-5 text-blue-600 mt-0.5" />
+                    <div className="flex-1">
+                      <h4 className="font-medium text-blue-900 mb-2">邀請資訊</h4>
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <span className="text-sm text-blue-700">電子郵件：</span>
+                          <span className="text-sm font-medium text-blue-900">{invitedEmail}</span>
+                        </div>
+                        <div className="flex items-center justify-between">
+                          <span className="text-sm text-blue-700">預設角色：</span>
+                          <Badge variant="outline" className={getRoleColor(invitedRole)}>
+                            <div className="flex items-center space-x-1">
+                              {getRoleIcon(invitedRole)}
+                              <span>{getRoleText(invitedRole)}</span>
+                            </div>
+                          </Badge>
+                        </div>
+                        <div className="mt-3 pt-3 border-t border-blue-200">
+                          <p className="text-xs text-blue-600">{getRoleDescription(invitedRole)}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Error/Success Messages */}
+            {error && (
+              <Alert variant="destructive" className="mb-4">
+                <AlertTriangle className="h-4 w-4" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="name">姓名 *</Label>
+                <div className="relative">
+                  <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                  <Input
+                    id="name"
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) => handleInputChange("name", e.target.value)}
+                    placeholder="請輸入您的姓名"
+                    className="pl-10"
+                    disabled={isSubmitting}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="email">電子郵件 *</Label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                  <Input
+                    id="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => handleInputChange("email", e.target.value)}
+                    placeholder="請輸入電子郵件"
+                    className="pl-10"
+                    disabled={isSubmitting || isInvitedUser}
+                    readOnly={isInvitedUser}
+                  />
+                </div>
+                {isInvitedUser && <p className="text-xs text-gray-500">此電子郵件由邀請連結自動填入</p>}
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="department">部門 *</Label>
+                <div className="relative">
+                  <Building className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4 z-10" />
+                  <Select
+                    value={formData.department}
+                    onValueChange={(value) => handleInputChange("department", value)}
+                    disabled={isSubmitting}
+                  >
+                    <SelectTrigger className="pl-10">
+                      <SelectValue placeholder="請選擇您的部門" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="HQBU">HQBU</SelectItem>
+                      <SelectItem value="ITBU">ITBU</SelectItem>
+                      <SelectItem value="MBU1">MBU1</SelectItem>
+                      <SelectItem value="SBU">SBU</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-2">
+                <Label htmlFor="password">密碼 *</Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                  <Input
+                    id="password"
+                    type="password"
+                    value={formData.password}
+                    onChange={(e) => handleInputChange("password", e.target.value)}
+                    placeholder="請輸入密碼（至少 6 個字符）"
+                    className="pl-10"
+                    disabled={isSubmitting}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">確認密碼 *</Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                  <Input
+                    id="confirmPassword"
+                    type="password"
+                    value={formData.confirmPassword}
+                    onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
+                    placeholder="請再次輸入密碼"
+                    className="pl-10"
+                    disabled={isSubmitting}
+                  />
+                </div>
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
+                disabled={isSubmitting || isLoading}
+              >
+                {isSubmitting || isLoading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    註冊中...
+                  </>
+                ) : (
+                  "完成註冊"
+                )}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-sm text-gray-600">
+                已有帳戶？{" "}
+                <Button
+                  variant="link"
+                  className="p-0 h-auto font-normal text-blue-600 hover:text-blue-700"
+                  onClick={() => router.push("/")}
+                >
+                  返回首頁登入
+                </Button>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Role Information */}
+        {!isInvitedUser && (
+          <Card className="mt-6">
+            <CardHeader>
+              <CardTitle className="text-lg">角色說明</CardTitle>
+              <CardDescription>了解不同角色的權限和功能</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid gap-3">
+                <div className="flex items-start space-x-3 p-3 bg-blue-50 rounded-lg">
+                  <User className="w-5 h-5 text-blue-600 mt-0.5" />
+                  <div>
+                    <h4 className="font-medium text-blue-900">一般用戶</h4>
+                    <p className="text-sm text-blue-700">可以瀏覽和收藏應用，參與評價互動</p>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-3 p-3 bg-green-50 rounded-lg">
+                  <Code className="w-5 h-5 text-green-600 mt-0.5" />
+                  <div>
+                    <h4 className="font-medium text-green-900">開發者</h4>
+                    <p className="text-sm text-green-700">可以提交 AI 應用申請，參與平台建設</p>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-3 p-3 bg-purple-50 rounded-lg">
+                  <Shield className="w-5 h-5 text-purple-600 mt-0.5" />
+                  <div>
+                    <h4 className="font-medium text-purple-900">管理員</h4>
+                    <p className="text-sm text-purple-700">可以訪問管理後台，管理用戶和審核應用</p>
+                  </div>
+                </div>
+              </div>
+              <div className="bg-gray-50 p-3 rounded-lg">
+                <p className="text-xs text-gray-600">
+                  <strong>注意：</strong>新註冊用戶預設為一般用戶角色。如需其他角色權限，請聯繫管理員進行調整。
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  )
+}