Implement i18n with German and English support (default DE)

components/plan-login-form.tsx

@@ -1,77 +1,63 @@
 "use client"
 
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
+import { useState } from "react"
 import { useRouter } from "next/navigation"
-import { toast } from "sonner"
-import { Lock } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-    Form,
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
 import { verifyPlanPassword } from "@/app/actions/auth"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { toast } from "sonner"
 
-const formSchema = z.object({
-    password: z.string().min(1, "Password is required"),
-})
+interface PlanLoginFormProps {
+    planId: string;
+    dict: any;
+}
 
-export function PlanLoginForm({ planId }: { planId: string }) {
+export function PlanLoginForm({ planId, dict }: PlanLoginFormProps) {
+    const [password, setPassword] = useState("")
+    const [isPending, setIsPending] = useState(false)
     const router = useRouter()
-    const form = useForm<z.infer<typeof formSchema>>({
-        resolver: zodResolver(formSchema),
-        defaultValues: {
-            password: "",
-        },
-    })
 
-    async function onSubmit(values: z.infer<typeof formSchema>) {
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault()
+        setIsPending(true)
+
         try {
-            const success = await verifyPlanPassword(planId, values.password)
+            const success = await verifyPlanPassword(planId, password)
             if (success) {
-                toast.success("Access granted!")
-                router.refresh() // Refresh to trigger server re-render with cookie
+                router.refresh()
             } else {
-                toast.error("Invalid password")
+                toast.error(dict.error)
             }
-        } catch {
-            toast.error("Something went wrong")
+        } catch (error) {
+            toast.error("An error occurred")
+        } finally {
+            setIsPending(false)
         }
     }
 
     return (
-        <div className="flex flex-col items-center justify-center min-h-[50vh] space-y-4">
-            <div className="p-4 bg-muted rounded-full">
-                <Lock className="w-8 h-8 opacity-50" />
-            </div>
-            <h2 className="text-xl font-semibold">Enter Plan Password</h2>
-            <Form {...form}>
-                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 w-full max-w-xs">
-                    <FormField
-                        control={form.control}
-                        name="password"
-                        render={({ field }) => (
-                            <FormItem>
-                                <FormLabel className="sr-only">Password</FormLabel>
-                                <FormControl>
-                                    <Input type="password" placeholder="Password" {...field} />
-                                </FormControl>
-                                <FormMessage />
-                            </FormItem>
-                        )}
+        <Card className="w-full max-w-sm">
+            <CardHeader>
+                <CardTitle>{dict.title}</CardTitle>
+                <CardDescription>
+                    {dict.description}
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <form onSubmit={handleSubmit} className="space-y-4">
+                    <Input
+                        type="password"
+                        placeholder="••••••••"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required
                     />
-                    <Button type="submit" className="w-full">
-                        Unlock Plan
+                    <Button type="submit" className="w-full" disabled={isPending}>
+                        {isPending ? "..." : dict.submit}
                     </Button>
                 </form>
-            </Form>
-        </div>
+            </CardContent>
+        </Card>
     )
 }