mirror of
https://github.com/massbug/judge4c.git
synced 2025-05-18 07:16:34 +00:00
feat(auth): refactor sign up and sign in forms with react-hook-form and zod validation
This commit is contained in:
parent
468e72e9a8
commit
116519a70b
@ -1,28 +1,99 @@
|
|||||||
import { signIn } from "@/lib/auth";
|
"use client";
|
||||||
|
|
||||||
|
import { z } from "zod";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormControl,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { authSchema } from "@/lib/zod";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { signInWithCredentials } from "@/app/actions/auth";
|
||||||
|
import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
|
||||||
|
|
||||||
export function CredentialsSignIn() {
|
export function CredentialsSignIn() {
|
||||||
|
const form = useForm<z.infer<typeof authSchema>>({
|
||||||
|
resolver: zodResolver(authSchema),
|
||||||
|
defaultValues: {
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [isVisible, setIsVisible] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const toggleVisibility = () => setIsVisible((prevState) => !prevState);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form
|
<Form {...form}>
|
||||||
className="grid gap-6"
|
<form
|
||||||
action={async (formData) => {
|
onSubmit={form.handleSubmit((data) => signInWithCredentials(data))}
|
||||||
"use server";
|
className="grid gap-6"
|
||||||
await signIn("credentials", formData);
|
>
|
||||||
}}
|
<FormField
|
||||||
>
|
control={form.control}
|
||||||
<div className="grid gap-2">
|
name="email"
|
||||||
<Label htmlFor="email">Email</Label>
|
render={({ field }) => (
|
||||||
<Input id="email" name="email" type="email" placeholder="m@example.com" required />
|
<FormItem>
|
||||||
</div>
|
<FormLabel>Email</FormLabel>
|
||||||
<div className="grid gap-2">
|
<FormControl>
|
||||||
<Label htmlFor="password">Password</Label>
|
<div className="relative">
|
||||||
<Input id="password" name="password" type="password" required />
|
<Input className="peer pe-9" {...field} />
|
||||||
</div>
|
<div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 peer-disabled:opacity-50">
|
||||||
<Button type="submit" className="w-full">
|
<MailIcon size={16} aria-hidden="true" />
|
||||||
Sign In
|
</div>
|
||||||
</Button>
|
</div>
|
||||||
</form>
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Password</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
className="pe-9"
|
||||||
|
type={isVisible ? "text" : "password"}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
type="button"
|
||||||
|
onClick={toggleVisibility}
|
||||||
|
aria-label={isVisible ? "Hide password" : "Show password"}
|
||||||
|
aria-pressed={isVisible}
|
||||||
|
aria-controls="password"
|
||||||
|
>
|
||||||
|
{isVisible ? (
|
||||||
|
<EyeOffIcon size={16} aria-hidden="true" />
|
||||||
|
) : (
|
||||||
|
<EyeIcon size={16} aria-hidden="true" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button type="submit" className="w-full">
|
||||||
|
Sign In
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,45 +1,99 @@
|
|||||||
import bcrypt from "bcrypt";
|
"use client";
|
||||||
import prisma from "@/lib/prisma";
|
|
||||||
|
import { z } from "zod";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { useState } from "react";
|
||||||
import { authSchema } from "@/lib/zod";
|
import { authSchema } from "@/lib/zod";
|
||||||
import { redirect } from "next/navigation";
|
import { useForm } from "react-hook-form";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { signUpWithCredentials } from "@/app/actions/auth";
|
||||||
|
import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
|
||||||
|
|
||||||
export function CredentialsSignUp() {
|
export function CredentialsSignUp() {
|
||||||
|
const form = useForm<z.infer<typeof authSchema>>({
|
||||||
|
resolver: zodResolver(authSchema),
|
||||||
|
defaultValues: {
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [isVisible, setIsVisible] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const toggleVisibility = () => setIsVisible((prevState) => !prevState);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form
|
<Form {...form}>
|
||||||
className="grid gap-6"
|
<form
|
||||||
action={async (formData) => {
|
onSubmit={form.handleSubmit((data) => signUpWithCredentials(data))}
|
||||||
"use server";
|
className="grid gap-6"
|
||||||
const email = formData.get("email");
|
>
|
||||||
const password = formData.get("password");
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Email</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="relative">
|
||||||
|
<Input className="peer pe-9" {...field} />
|
||||||
|
<div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 peer-disabled:opacity-50">
|
||||||
|
<MailIcon size={16} aria-hidden="true" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
const validatedData = await authSchema.parseAsync({ email, password });
|
<FormField
|
||||||
const saltRounds = 10;
|
control={form.control}
|
||||||
const pwHash = await bcrypt.hash(validatedData.password, saltRounds);
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Password</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
className="pe-9"
|
||||||
|
type={isVisible ? "text" : "password"}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
type="button"
|
||||||
|
onClick={toggleVisibility}
|
||||||
|
aria-label={isVisible ? "Hide password" : "Show password"}
|
||||||
|
aria-pressed={isVisible}
|
||||||
|
aria-controls="password"
|
||||||
|
>
|
||||||
|
{isVisible ? (
|
||||||
|
<EyeOffIcon size={16} aria-hidden="true" />
|
||||||
|
) : (
|
||||||
|
<EyeIcon size={16} aria-hidden="true" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
await prisma.user.create({
|
<Button type="submit" className="w-full">
|
||||||
data: {
|
Sign Up
|
||||||
email: validatedData.email,
|
</Button>
|
||||||
password: pwHash,
|
</form>
|
||||||
},
|
</Form>
|
||||||
});
|
|
||||||
|
|
||||||
redirect("/sign-in");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="email">Email</Label>
|
|
||||||
<Input id="email" name="email" type="email" placeholder="m@example.com" required />
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="password">Password</Label>
|
|
||||||
<Input id="password" name="password" type="password" required />
|
|
||||||
</div>
|
|
||||||
<Button type="submit" className="w-full">
|
|
||||||
Sign Up
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user