建立檔案

2025-08-05 08:22:44 +08:00
commit 042d03aff7
122 changed files with 34763 additions and 0 deletions
--- a/components/auth/login-dialog.tsx
+++ b/components/auth/login-dialog.tsx
@@ -0,0 +1,134 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+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 { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Eye, EyeOff, Mail, Lock } from "lucide-react"
+
+interface LoginDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSwitchToRegister: () => void
+  onSwitchToForgotPassword: () => void
+}
+
+export function LoginDialog({ open, onOpenChange, onSwitchToRegister, onSwitchToForgotPassword }: LoginDialogProps) {
+  const { login, isLoading } = useAuth()
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [showPassword, setShowPassword] = useState(false)
+  const [error, setError] = useState("")
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError("")
+
+    if (!email || !password) {
+      setError("請填寫所有欄位")
+      return
+    }
+
+    const success = await login(email, password)
+    if (success) {
+      onOpenChange(false)
+      setEmail("")
+      setPassword("")
+    } else {
+      setError("登入失敗，請檢查您的電子郵件和密碼")
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-bold text-center">登入帳號</DialogTitle>
+          <DialogDescription className="text-center">歡迎回到強茂集團 AI 展示平台</DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <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"
+                placeholder="請輸入您的電子郵件"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="pl-10"
+                required
+              />
+            </div>
+          </div>
+
+          <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={showPassword ? "text" : "password"}
+                placeholder="請輸入您的密碼"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="pl-10 pr-10"
+                required
+              />
+              <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"
+              >
+                {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+              </button>
+            </div>
+            <div className="flex justify-end">
+              <button
+                type="button"
+                onClick={onSwitchToForgotPassword}
+                className="text-sm text-blue-600 hover:text-blue-800"
+              >
+                忘記密碼？
+              </button>
+            </div>
+          </div>
+
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <p className="text-sm text-gray-600 mb-2">測試帳號：</p>
+            <p className="text-sm">Email: zhang@panjit.com</p>
+            <p className="text-sm">Password: password123</p>
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? "登入中..." : "登入"}
+          </Button>
+
+          <div className="text-center">
+            <span className="text-sm text-gray-600">還沒有帳號？</span>
+            <button
+              type="button"
+              onClick={onSwitchToRegister}
+              className="text-sm text-blue-600 hover:text-blue-800 ml-1"
+            >
+              立即註冊
+            </button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}