pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-08 05:56:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

organize componenst a lib

Browse Source
This commit is contained in:
Milo Schwartz
2024-10-13 14:50:07 -04:00
parent f7a1d20ec2
commit bdc52dcc48
9 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/components/SignupForm.tsx
View File

@@ -1,167 +0,0 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { SignUpResponse } from "@server/routers/auth";
import { api } from "@app/api";
import { useRouter } from "next/navigation";
import { passwordSchema } from "@server/auth/passwordSchema";
import { AxiosResponse } from "axios";
type SignupFormProps = {
redirect?: string;
};
const formSchema = z
.object({
email: z.string().email({ message: "Invalid email address" }),
password: passwordSchema,
confirmPassword: passwordSchema,
})
.refine((data) => data.password === data.confirmPassword, {
path: ["confirmPassword"],
message: "Passwords do not match",
});
export default function SignupForm({ redirect }: SignupFormProps) {
const router = useRouter();
const [error, setError] = useState<string | null>(null);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
email: "",
password: "",
confirmPassword: "",
},
});
async function onSubmit(values: z.infer<typeof formSchema>) {
const { email, password } = values;
const res = await api
.put<AxiosResponse<SignUpResponse>>("/auth/signup", {
email,
password,
})
.catch((e) => {
console.error(e);
setError(
e.response?.data?.message ||
"An error occurred while signing up",
);
});
if (res && res.status === 200) {
setError(null);
if (res.data.data.emailVerificationRequired) {
router.push("/auth/verify-email");
return;
}
if (redirect && typeof redirect === "string") {
window.location.href = redirect;
}
router.push("/");
}
}
return (
<Card className="w-full max-w-md mx-auto">
<CardHeader>
<CardTitle>Create Account</CardTitle>
<CardDescription>
Enter your details to create an account
</CardDescription>
</CardHeader>
<CardContent>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4"
>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="Email" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="Password"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="confirmPassword"
render={({ field }) => (
<FormItem>
<FormLabel>Confirm Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="Confirm Password"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{error && (
<Alert>
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<Button type="submit" className="w-full">
Create Account
</Button>
</form>
</Form>
</CardContent>
</Card>
);
}