elpatron/cat-sitting-planner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement i18n with German and English support (default DE)

Browse Source
This commit is contained in:
elpatron
2026-01-12 21:38:05 +01:00
parent a60d456b3b
commit 62e1f5f1b4
14 changed files with 471 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
components/create-plan-form.tsx
View File

@@ -2,6 +2,7 @@
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { de, enUS } from "date-fns/locale"
import { CalendarIcon } from "lucide-react"
import { useForm } from "react-hook-form"
import { z } from "zod"
@@ -23,19 +24,25 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
import { toast } from "sonner"
import { useRouter } from "next/navigation"
const formSchema = z.object({
dateRange: z.object({
from: z.date(),
to: z.date(),
}),
password: z.string().min(4, {
message: "Password must be at least 4 characters.",
}),
instructions: z.string().optional(),
})
interface CreatePlanFormProps {
dict: any;
lang: string;
}
export function CreatePlanForm() {
export function CreatePlanForm({ dict, lang }: CreatePlanFormProps) {
const router = useRouter()
const formSchema = z.object({
dateRange: z.object({
from: z.date(),
to: z.date(),
}),
password: z.string().min(4, {
message: dict.passwordError,
}),
instructions: z.string().optional(),
})
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
@@ -44,6 +51,8 @@ export function CreatePlanForm() {
},
})
const dateLocale = lang === "de" ? de : enUS
async function onSubmit(values: z.infer<typeof formSchema>) {
try {
const response = await fetch("/api/plan", {
@@ -62,10 +71,10 @@ export function CreatePlanForm() {
}
const data = await response.json()
toast.success("Plan created successfully!")
router.push(`/dashboard/${data.planId}`)
toast.success(dict.success)
router.push(`/${lang}/dashboard/${data.planId}`)
} catch (error) {
toast.error("Something went wrong. Please try again.")
toast.error(dict.error)
console.error(error)
}
}
@@ -78,7 +87,7 @@ export function CreatePlanForm() {
name="dateRange"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Travel Dates</FormLabel>
<FormLabel>{dict.travelDates}</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
@@ -92,14 +101,14 @@ export function CreatePlanForm() {
{field.value?.from ? (
field.value.to ? (
<>
{format(field.value.from, "LLL dd, y")} -{" "}
{format(field.value.to, "LLL dd, y")}
{format(field.value.from, "PPP", { locale: dateLocale })} -{" "}
{format(field.value.to, "PPP", { locale: dateLocale })}
</>
) : (
format(field.value.from, "LLL dd, y")
format(field.value.from, "PPP", { locale: dateLocale })
)
) : (
<span>Pick a date range</span>
<span>{dict.pickDateRange}</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
@@ -114,11 +123,12 @@ export function CreatePlanForm() {
date < new Date(new Date().setHours(0, 0, 0, 0))
}
initialFocus
locale={dateLocale}
/>
</PopoverContent>
</Popover>
<FormDescription>
Select the days you will be away.
{dict.dateRangeDesc}
</FormDescription>
<FormMessage />
</FormItem>
@@ -129,18 +139,18 @@ export function CreatePlanForm() {
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Group Password</FormLabel>
<FormLabel>{dict.groupPassword}</FormLabel>
<FormControl>
<Input placeholder="secret-meow" {...field} />
<Input placeholder={dict.passwordPlaceholder} {...field} />
</FormControl>
<FormDescription>
Share this password with your cat sitters.
{dict.passwordDesc}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Create Plan</Button>
<Button type="submit">{dict.submit}</Button>
</form>
</Form>
)

98
components/plan-login-form.tsx
View File

@@ -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>
)
}

122
components/plan-settings.tsx
View File

@@ -1,12 +1,11 @@
"use client"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { toast } from "sonner"
import { Settings } from "lucide-react"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Settings } from "lucide-react"
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
import {
@@ -32,46 +31,53 @@ import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { updatePlan } from "@/app/actions/plan"
const formSchema = z.object({
webhookUrl: z.string().optional().or(z.literal("")),
instructions: z.string().optional().or(z.literal("")),
notifyAll: z.boolean(),
})
type FormValues = z.infer<typeof formSchema>
type PlanSettingsProps = {
interface PlanSettingsProps {
planId: string
initialWebhookUrl?: string | null
initialInstructions?: string | null
initialNotifyAll?: boolean
initialInstructions: string | null
initialWebhookUrl: string | null
initialNotifyAll: boolean
dict: any
lang: string
}
export function PlanSettings({ planId, initialWebhookUrl, initialInstructions, initialNotifyAll = true }: PlanSettingsProps) {
export function PlanSettings({
planId,
initialInstructions,
initialWebhookUrl,
initialNotifyAll,
dict,
lang
}: PlanSettingsProps) {
const [open, setOpen] = useState(false)
const router = useRouter()
const [isPending, setIsPending] = useState(false)
const formSchema = z.object({
instructions: z.string().optional(),
webhookUrl: z.string().url().optional().or(z.literal("")),
notifyAll: z.boolean(),
})
type FormValues = z.infer<typeof formSchema>
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
webhookUrl: initialWebhookUrl || "",
instructions: initialInstructions || "",
webhookUrl: initialWebhookUrl || "",
notifyAll: initialNotifyAll,
},
})
async function onSubmit(values: FormValues) {
async function onSubmit(data: FormValues) {
setIsPending(true)
try {
await updatePlan(planId, {
webhookUrl: values.webhookUrl || "",
instructions: values.instructions || "",
notifyAll: values.notifyAll,
})
toast.success("Settings updated")
await updatePlan(planId, data, lang)
toast.success(dict.success)
setOpen(false)
router.refresh()
} catch {
toast.error("Failed to update settings")
} catch (error) {
toast.error(dict.error)
} finally {
setIsPending(false)
}
}
@@ -80,49 +86,32 @@ export function PlanSettings({ planId, initialWebhookUrl, initialInstructions, i
<DialogTrigger asChild>
<Button variant="outline" size="sm">
<Settings className="w-4 h-4 mr-2" />
Settings
{dict.title.split(" ")[1] || "Settings"}
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Plan Settings</DialogTitle>
<DialogTitle>{dict.title}</DialogTitle>
<DialogDescription>
Configure notification webhooks and cat care instructions.
{dict.description}
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="instructions"
name="webhookUrl"
render={({ field }) => (
<FormItem>
<FormLabel>Cat Instructions</FormLabel>
<FormLabel>{dict.webhookLabel}</FormLabel>
<FormControl>
<Textarea
placeholder="Feeding times, vet contact, special needs..."
className="min-h-[100px]"
<Input
placeholder={dict.webhookPlaceholder}
{...field}
/>
</FormControl>
<FormDescription>
Visible to all sitters.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="webhookUrl"
render={({ field }) => (
<FormItem>
<FormLabel>Notification Webhook</FormLabel>
<FormControl>
<Input placeholder="https://discord.com/api/webhooks/..." {...field} />
</FormControl>
<FormDescription>
Telegram or Discord webhook URL.
{dict.webhookDesc}
</FormDescription>
<FormMessage />
</FormItem>
@@ -141,17 +130,36 @@ export function PlanSettings({ planId, initialWebhookUrl, initialInstructions, i
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel>
Notify for all events
{dict.notifyAllLabel}
</FormLabel>
<FormDescription>
If disabled, only cancellations will be notified.
{dict.notifyAllDesc}
</FormDescription>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="instructions"
render={({ field }) => (
<FormItem>
<FormLabel>{dict.instructionsLabel}</FormLabel>
<FormControl>
<Textarea
placeholder={dict.instructionsPlaceholder}
className="h-32"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter>
<Button type="submit">Save changes</Button>
<Button type="submit" disabled={isPending}>
{isPending ? dict.saving : dict.save}
</Button>
</DialogFooter>
</form>
</Form>