整合資料庫、完成登入註冊忘記密碼功能

app/register/page.tsx

@@ -13,7 +13,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 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"
+import { Brain, User, Mail, Building, Lock, Loader2, CheckCircle, AlertTriangle, Shield, Code, Eye, EyeOff } from "lucide-react"
 
 export default function RegisterPage() {
   const router = useRouter()
@@ -30,66 +30,38 @@ export default function RegisterPage() {
   const [error, setError] = useState("")
   const [success, setSuccess] = useState("")
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
 
   // 從 URL 參數獲取邀請資訊
   const invitationToken = searchParams.get("token")
   const invitedEmail = searchParams.get("email")
   const invitedRole = searchParams.get("role") || "user"
+  const mode = searchParams.get("mode") // "reset" 表示密碼重設模式
+  const invitedName = searchParams.get("name")
+  const invitedDepartment = searchParams.get("department")
   const isInvitedUser = !!(invitationToken && invitedEmail)
+  const isResetMode = mode === "reset"
+  
+  // 在重設模式下，使用從資料庫獲取的正確角色
+  const displayRole = isResetMode ? invitedRole : invitedRole
 
   useEffect(() => {
     if (isInvitedUser) {
       setFormData((prev) => ({
         ...prev,
         email: decodeURIComponent(invitedEmail),
+        name: isResetMode && invitedName ? decodeURIComponent(invitedName) : prev.name,
+        department: isResetMode && invitedDepartment ? decodeURIComponent(invitedDepartment) : prev.department,
       }))
     }
-  }, [isInvitedUser, invitedEmail])
+  }, [isInvitedUser, invitedEmail, isResetMode, invitedName, invitedDepartment])
 
   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":
@@ -128,23 +100,49 @@ export default function RegisterPage() {
     }
 
     try {
-      const success = await register({
-        name: formData.name,
-        email: formData.email,
-        password: formData.password,
-        department: formData.department,
-      })
+      if (isResetMode) {
+        // 密碼重設模式
+        const response = await fetch('/api/auth/reset-password', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            token: invitationToken,
+            password: formData.password
+          }),
+        })
 
-      if (success) {
-        setSuccess("註冊成功！正在跳轉...")
-        setTimeout(() => {
-          router.push("/")
-        }, 2000)
+        const data = await response.json()
+
+        if (data.success) {
+          setSuccess("密碼重設成功！正在跳轉...")
+          setTimeout(() => {
+            router.push("/")
+          }, 2000)
+        } else {
+          setError(data.error || "密碼重設失敗")
+        }
       } else {
-        setError("註冊失敗，請檢查資料或聯繫管理員")
+        // 正常註冊模式
+        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("註冊過程中發生錯誤，請稍後再試")
+      setError(isResetMode ? "密碼重設過程中發生錯誤，請稍後再試" : "註冊過程中發生錯誤，請稍後再試")
     }
 
     setIsSubmitting(false)
@@ -158,8 +156,12 @@ export default function RegisterPage() {
             <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>
+            <h3 className="text-xl font-semibold text-gray-900 mb-2">
+              {isResetMode ? "密碼重設成功！" : "註冊成功！"}
+            </h3>
+            <p className="text-gray-600 mb-4">
+              {isResetMode ? "您的密碼已成功重設" : "歡迎加入強茂集團 AI 展示平台"}
+            </p>
             <p className="text-sm text-gray-500">正在跳轉到首頁...</p>
           </CardContent>
         </Card>
@@ -180,7 +182,12 @@ export default function RegisterPage() {
               <h1 className="text-2xl font-bold text-gray-900">強茂集團 AI 展示平台</h1>
             </div>
           </div>
-          {isInvitedUser ? (
+          {isResetMode ? (
+            <div>
+              <h2 className="text-xl font-semibold text-gray-900 mb-2">重設密碼</h2>
+              <p className="text-gray-600">請設定您的新密碼</p>
+            </div>
+          ) : isInvitedUser ? (
             <div>
               <h2 className="text-xl font-semibold text-gray-900 mb-2">完成註冊</h2>
               <p className="text-gray-600">您已受邀加入平台，請完成以下資訊</p>
@@ -195,9 +202,14 @@ export default function RegisterPage() {
 
         <Card>
           <CardHeader>
-            <CardTitle>註冊資訊</CardTitle>
+            <CardTitle>{isResetMode ? "密碼重設" : "註冊資訊"}</CardTitle>
             <CardDescription>
-              {isInvitedUser ? "請填寫您的個人資訊完成註冊" : "請填寫以下資訊建立您的帳戶"}
+              {isResetMode 
+                ? "請設定您的新密碼" 
+                : isInvitedUser 
+                  ? "請填寫您的個人資訊完成註冊" 
+                  : "請填寫以下資訊建立您的帳戶"
+              }
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -215,16 +227,21 @@ export default function RegisterPage() {
                           <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>
+                          <span className="text-sm text-blue-700">角色：</span>
+                          <Badge variant="secondary" className="text-xs">
+                            {displayRole === "admin" && (
+                              <><Shield className="w-3 h-3 mr-1" />管理員</>
+                            )}
+                            {displayRole === "developer" && (
+                              <><Code className="w-3 h-3 mr-1" />開發者</>
+                            )}
+                            {displayRole === "user" && (
+                              <><User className="w-3 h-3 mr-1" />一般用戶</>
+                            )}
                           </Badge>
                         </div>
-                        <div className="mt-3 pt-3 border-t border-blue-200">
-                          <p className="text-xs text-blue-600">{getRoleDescription(invitedRole)}</p>
+                        <div className="text-xs text-blue-600 mt-2">
+                          {getRoleDescription(displayRole)}
                         </div>
                       </div>
                     </div>
@@ -233,7 +250,6 @@ export default function RegisterPage() {
               </div>
             )}
 
-            {/* Error/Success Messages */}
             {error && (
               <Alert variant="destructive" className="mb-4">
                 <AlertTriangle className="h-4 w-4" />
@@ -242,21 +258,23 @@ export default function RegisterPage() {
             )}
 
             <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}
-                  />
+              {!isResetMode && (
+                <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>
+              )}
 
               <div className="space-y-2">
                 <Label htmlFor="email">電子郵件 *</Label>
@@ -269,36 +287,41 @@ export default function RegisterPage() {
                     onChange={(e) => handleInputChange("email", e.target.value)}
                     placeholder="請輸入電子郵件"
                     className="pl-10"
-                    disabled={isSubmitting || isInvitedUser}
-                    readOnly={isInvitedUser}
+                    disabled={isSubmitting || isInvitedUser || isResetMode}
+                    readOnly={isInvitedUser || isResetMode}
                   />
                 </div>
-                {isInvitedUser && <p className="text-xs text-gray-500">此電子郵件由邀請連結自動填入</p>}
+                {(isInvitedUser || isResetMode) && <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>
+              {!isResetMode && (
+                <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="RDBU">RDBU</SelectItem>
+                        <SelectItem value="MDBU">MDBU</SelectItem>
+                        <SelectItem value="PGBU">PGBU</SelectItem>
+                        <SelectItem value="SGBU">SGBU</SelectItem>
+                        <SelectItem value="TGBU">TGBU</SelectItem>
+                        <SelectItem value="WGBU">WGBU</SelectItem>
+                        <SelectItem value="Other">其他</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
-              </div>
-
-              <Separator />
+              )}
 
               <div className="space-y-2">
                 <Label htmlFor="password">密碼 *</Label>
@@ -306,14 +329,27 @@ export default function RegisterPage() {
                   <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"
+                    type={showPassword ? "text" : "password"}
                     value={formData.password}
                     onChange={(e) => handleInputChange("password", e.target.value)}
-                    placeholder="請輸入密碼（至少 6 個字符）"
-                    className="pl-10"
+                    placeholder={isResetMode ? "請輸入新密碼" : "請輸入密碼"}
+                    className="pl-10 pr-10"
                     disabled={isSubmitting}
                   />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                    disabled={isSubmitting}
+                  >
+                    {showPassword ? (
+                      <EyeOff className="w-4 h-4" />
+                    ) : (
+                      <Eye className="w-4 h-4" />
+                    )}
+                  </button>
                 </div>
+                <p className="text-xs text-gray-500">密碼長度至少需要 6 個字符</p>
               </div>
 
               <div className="space-y-2">
@@ -322,13 +358,25 @@ export default function RegisterPage() {
                   <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"
+                    type={showConfirmPassword ? "text" : "password"}
                     value={formData.confirmPassword}
                     onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
                     placeholder="請再次輸入密碼"
-                    className="pl-10"
+                    className="pl-10 pr-10"
                     disabled={isSubmitting}
                   />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                    disabled={isSubmitting}
+                  >
+                    {showConfirmPassword ? (
+                      <EyeOff className="w-4 h-4" />
+                    ) : (
+                      <Eye className="w-4 h-4" />
+                    )}
+                  </button>
                 </div>
               </div>
 
@@ -340,10 +388,10 @@ export default function RegisterPage() {
                 {isSubmitting || isLoading ? (
                   <>
                     <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                    註冊中...
+                    {isResetMode ? "重設中..." : "註冊中..."}
                   </>
                 ) : (
-                  "完成註冊"
+                  isResetMode ? "重設密碼" : "完成註冊"
                 )}
               </Button>
             </form>
@@ -364,7 +412,7 @@ export default function RegisterPage() {
         </Card>
 
         {/* Role Information */}
-        {!isInvitedUser && (
+        {!isInvitedUser && !isResetMode && (
           <Card className="mt-6">
             <CardHeader>
               <CardTitle className="text-lg">角色說明</CardTitle>
@@ -394,15 +442,10 @@ export default function RegisterPage() {
                   </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>
   )
-}
+}