Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-18 07:16:34 +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, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { useState } from "react"; import { toast } from "sonner";
import { authSchema } from "@/lib/zod"; import { authSchema } from "@/lib/zod";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useState, useTransition } from "react";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { signUpWithCredentials } from "@/app/actions/auth"; import { signUpWithCredentials } from "@/app/actions/auth";
import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react"; 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 type CredentialsSignUpFormValues = z.infer<typeof authSchema>;
export function CredentialsSignUpForm() { export function CredentialsSignUpForm() {
const router = useRouter();
const [isPending, startTransition] = useTransition();
const [isVisible, setIsVisible] = useState(false);
const form = useForm<CredentialsSignUpFormValues>({ const form = useForm<CredentialsSignUpFormValues>({
resolver: zodResolver(authSchema), resolver: zodResolver(authSchema),
defaultValues: { defaultValues: {
@ -29,11 +35,26 @@ export function CredentialsSignUpForm() {
}, },
}); });
const [isVisible, setIsVisible] = useState<boolean>(false); const toggleVisibility = () => setIsVisible((prev) => !prev);
const toggleVisibility = () => setIsVisible((prevState) => !prevState);
const onSubmit = async (data: CredentialsSignUpFormValues) => { const onSubmit = (data: CredentialsSignUpFormValues) => {
await signUpWithCredentials(data); 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 ( return (
@ -92,8 +113,8 @@ export function CredentialsSignUpForm() {
)} )}
/> />
<Button type="submit" className="w-full"> <Button type="submit" disabled={isPending} className="w-full">
Sign Up {isPending ? "Creating Account..." : "Sign Up"}
</Button> </Button>
</form> </form>
</Form> </Form>