129 lines
4.3 KiB
TypeScript
129 lines
4.3 KiB
TypeScript
"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>
|
||
)}
|
||
|
||
<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>
|
||
)
|
||
}
|