建立檔案

2025-08-05 08:22:44 +08:00
commit 042d03aff7
122 changed files with 34763 additions and 0 deletions
--- a/components/auth/forgot-password-dialog.tsx
+++ b/components/auth/forgot-password-dialog.tsx
@@ -0,0 +1,148 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Mail, ArrowLeft, CheckCircle } from "lucide-react"
+
+interface ForgotPasswordDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onBackToLogin: () => void
+}
+
+export function ForgotPasswordDialog({ open, onOpenChange, onBackToLogin }: ForgotPasswordDialogProps) {
+  const [email, setEmail] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSuccess, setIsSuccess] = useState(false)
+  const [error, setError] = useState("")
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError("")
+
+    if (!email) {
+      setError("請輸入電子郵件地址")
+      return
+    }
+
+    if (!email.includes("@")) {
+      setError("請輸入有效的電子郵件地址")
+      return
+    }
+
+    setIsLoading(true)
+
+    // Simulate API call
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+
+    setIsLoading(false)
+    setIsSuccess(true)
+  }
+
+  const handleClose = () => {
+    setEmail("")
+    setError("")
+    setIsSuccess(false)
+    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">
+          <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>
+            </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-700 font-medium">{email}</p>
+            </div>
+
+            <div className="text-sm text-gray-600 space-y-2">
+              <p>• 請檢查您的收件匣和垃圾郵件資料夾</p>
+              <p>• 重設連結將在 24 小時後過期</p>
+              <p>• 如果您沒有收到郵件，請點擊下方重新發送</p>
+            </div>
+
+            <div className="flex space-x-3">
+              <Button onClick={onBackToLogin} variant="outline" className="flex-1 bg-transparent">
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                返回登入
+              </Button>
+              <Button onClick={handleResend} disabled={isLoading} className="flex-1">
+                {isLoading ? "發送中..." : "重新發送"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-bold text-center">忘記密碼</DialogTitle>
+          <DialogDescription className="text-center">
+            請輸入您的電子郵件地址，我們將發送重設密碼的連結給您
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="reset-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="reset-email"
+                type="email"
+                placeholder="請輸入您的電子郵件"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="pl-10"
+                required
+              />
+            </div>
+          </div>
+
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <div className="flex space-x-3">
+            <Button type="button" onClick={onBackToLogin} variant="outline" className="flex-1 bg-transparent">
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              返回登入
+            </Button>
+            <Button type="submit" disabled={isLoading} className="flex-1">
+              {isLoading ? "發送中..." : "發送重設連結"}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}