Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
2.3 kB · 88 lines
TSX
at incident-api
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889"use client";
import { zodResolver } from "@hookform/resolvers/zod";import { Form, FormMessage } from "@openstatus/ui/components/ui/form";import { FormControl, FormField, FormItem, FormLabel,} from "@openstatus/ui/components/ui/form";import { Input } from "@openstatus/ui/components/ui/input";import { isTRPCClientError } from "@trpc/client";import { useExtracted } from "next-intl";import { useTransition } from "react";import { useForm } from "react-hook-form";import { toast } from "sonner";import { z } from "zod";
const schema = z.object({ email: z.string().email(),});
export type FormValues = z.infer<typeof schema>;
export function FormEmail({ onSubmit, ...props}: Omit<React.ComponentProps<"form">, "onSubmit"> & { onSubmit: (values: FormValues) => Promise<void>;}) { const t = useExtracted(); const form = useForm<FormValues>({ resolver: zodResolver(schema), defaultValues: { email: "", }, }); const [isPending, startTransition] = useTransition();
function submitAction(values: FormValues) { if (isPending) return;
startTransition(async () => { try { const promise = onSubmit(values); toast.promise(promise, { loading: t("Confirming..."), success: t("Confirmed"), error: (error) => { console.error(error); if (isTRPCClientError(error)) { form.setError("email", { message: error.message }); return error.message; } if (error instanceof Error) { form.setError("email", { message: error.message }); return error.message; } return t("Failed to confirm"); }, }); await promise; } catch (error) { console.error(error); } }); }
return ( <Form {...form}> <form onSubmit={form.handleSubmit(submitAction)} {...props}> <FormField control={form.control} name="email" render={({ field }) => ( <FormItem> <FormLabel>{t("Email")}</FormLabel> <FormControl> <Input type="email" {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> </form> </Form> );}