Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-17 23:12:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(credentials-sign-up-form): add user registration with transition and toast notifications

Browse Source
This commit is contained in:
cfngc4594 2025-03-18 22:52:00 +08:00
parent 7ecef7679f
commit 0e16b9ff6c
1 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/credentials-sign-up-form.tsx
View File

@ -9,11 +9,13 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { useState } from "react";
import { toast } from "sonner";
import { authSchema } from "@/lib/zod";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useState, useTransition } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { signUpWithCredentials } from "@/app/actions/auth";
import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
@ -21,6 +23,10 @@ import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
export type CredentialsSignUpFormValues = z.infer<typeof authSchema>;
export function CredentialsSignUpForm() {
const router = useRouter();
const [isPending, startTransition] = useTransition();
const [isVisible, setIsVisible] = useState(false);
const form = useForm<CredentialsSignUpFormValues>({
resolver: zodResolver(authSchema),
defaultValues: {
@ -29,11 +35,26 @@ export function CredentialsSignUpForm() {
},
});
const [isVisible, setIsVisible] = useState<boolean>(false);
const toggleVisibility = () => setIsVisible((prevState) => !prevState);
const toggleVisibility = () => setIsVisible((prev) => !prev);
const onSubmit = async (data: CredentialsSignUpFormValues) => {
await signUpWithCredentials(data);
const onSubmit = (data: CredentialsSignUpFormValues) => {
startTransition(async () => {
const result = await signUpWithCredentials(data);
if (result?.error) {
toast.error("Registration Failed", {
description: result.error,
});
} else {
toast.success("Account Created", {
description: "You can now sign in with your credentials",
action: {
label: "Go to Sign In",
onClick: () => router.push("/sign-in"),
},
});
}
});
};
return (
@ -92,8 +113,8 @@ export function CredentialsSignUpForm() {
)}
/>
<Button type="submit" className="w-full">
Sign Up
<Button type="submit" disabled={isPending} className="w-full">
{isPending ? "Creating Account..." : "Sign Up"}
</Button>
</form>
</Form>