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

components/auth/forgot-password-dialog.tsx

@@ -21,6 +21,8 @@ export function ForgotPasswordDialog({ open, onOpenChange, onBackToLogin }: Forg
   const [isLoading, setIsLoading] = useState(false)
   const [isSuccess, setIsSuccess] = useState(false)
   const [error, setError] = useState("")
+  const [resetUrl, setResetUrl] = useState("")
+  const [expiresAt, setExpiresAt] = useState("")
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -38,59 +40,101 @@ export function ForgotPasswordDialog({ open, onOpenChange, onBackToLogin }: Forg
 
     setIsLoading(true)
 
-    // Simulate API call
-    await new Promise((resolve) => setTimeout(resolve, 2000))
+    try {
+      const response = await fetch('/api/auth/forgot-password', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email }),
+      })
 
-    setIsLoading(false)
-    setIsSuccess(true)
+      const data = await response.json()
+
+      if (data.success) {
+        setResetUrl(data.resetUrl)
+        setExpiresAt(data.expiresAt)
+        setIsSuccess(true)
+      } else {
+        setError(data.error || "生成重設連結失敗")
+      }
+    } catch (err) {
+      setError("生成重設連結時發生錯誤")
+    } finally {
+      setIsLoading(false)
+    }
   }
 
   const handleClose = () => {
     setEmail("")
     setError("")
     setIsSuccess(false)
+    setResetUrl("")
+    setExpiresAt("")
     onOpenChange(false)
   }
 
-  const handleResend = async () => {
-    setIsLoading(true)
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-    setIsLoading(false)
-  }
-
   if (isSuccess) {
     return (
       <Dialog open={open} onOpenChange={handleClose}>
-        <DialogContent className="sm:max-w-md">
+        <DialogContent className="sm:max-w-lg">
           <DialogHeader>
             <div className="flex flex-col items-center space-y-4">
               <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
                 <CheckCircle className="w-8 h-8 text-green-600" />
               </div>
-              <DialogTitle className="text-2xl font-bold text-center">重設密碼郵件已發送</DialogTitle>
-              <DialogDescription className="text-center">我們已將重設密碼的連結發送到您的電子郵件</DialogDescription>
+              <DialogTitle className="text-2xl font-bold text-center">密碼重設連結已生成</DialogTitle>
+              <DialogDescription className="text-center">請複製以下連結並在新視窗中開啟以重設密碼</DialogDescription>
             </div>
           </DialogHeader>
 
           <div className="space-y-4">
             <div className="bg-blue-50 p-4 rounded-lg">
-              <p className="text-sm text-blue-800 mb-2">請檢查您的電子郵件：</p>
+              <p className="text-sm text-blue-800 mb-2">重設連結已為以下電子郵件生成：</p>
               <p className="text-sm text-blue-700 font-medium">{email}</p>
             </div>
 
-            <div className="text-sm text-gray-600 space-y-2">
-              <p>• 請檢查您的收件匣和垃圾郵件資料夾</p>
-              <p>• 重設連結將在 24 小時後過期</p>
-              <p>• 如果您沒有收到郵件，請點擊下方重新發送</p>
+            <div className="space-y-2">
+              <Label htmlFor="reset-link">重設連結</Label>
+              <div className="flex space-x-2">
+                <Input
+                  id="reset-link"
+                  value={resetUrl}
+                  readOnly
+                  className="font-mono text-sm"
+                />
+                <Button
+                  onClick={() => {
+                    navigator.clipboard.writeText(resetUrl)
+                    // 可以添加 toast 提示
+                  }}
+                  variant="outline"
+                  size="sm"
+                >
+                  複製
+                </Button>
+              </div>
+              <p className="text-xs text-gray-500">
+                此連結將在 {new Date(expiresAt).toLocaleString('zh-TW')} 過期
+              </p>
+            </div>
+
+            <div className="text-center">
+              <Button
+                onClick={() => window.open(resetUrl, '_blank')}
+                className="w-full"
+              >
+                在新視窗中開啟重設頁面
+              </Button>
             </div>
 
             <div className="flex space-x-3">
-              <Button onClick={onBackToLogin} variant="outline" className="flex-1 bg-transparent">
+              <Button onClick={onBackToLogin} variant="outline" className="flex-1">
                 <ArrowLeft className="w-4 h-4 mr-2" />
                 返回登入
               </Button>
-              <Button onClick={handleResend} disabled={isLoading} className="flex-1">
-                {isLoading ? "發送中..." : "重新發送"}
+              <Button onClick={handleClose} className="flex-1">
+                關閉
               </Button>
             </div>
           </div>
@@ -105,7 +149,7 @@ export function ForgotPasswordDialog({ open, onOpenChange, onBackToLogin }: Forg
         <DialogHeader>
           <DialogTitle className="text-2xl font-bold text-center">忘記密碼</DialogTitle>
           <DialogDescription className="text-center">
-            請輸入您的電子郵件地址，我們將發送重設密碼的連結給您
+            請輸入您的電子郵件地址，我們將生成密碼重設連結
           </DialogDescription>
         </DialogHeader>
 
@@ -138,11 +182,11 @@ export function ForgotPasswordDialog({ open, onOpenChange, onBackToLogin }: Forg
               返回登入
             </Button>
             <Button type="submit" disabled={isLoading} className="flex-1">
-              {isLoading ? "發送中..." : "發送重設連結"}
+              {isLoading ? "生成中..." : "生成重設連結"}
             </Button>
           </div>
         </form>
       </DialogContent>
     </Dialog>
   )
-}
+}