Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 1x 1x 16x 16x 9x 1x 1x 16x | "use client";
import Link from "next/link";
import { useEffect } from "react";
import { useActionState } from "react";
import { registerUserAction } from "@/data/actions";
import {
CardTitle,
CardDescription,
CardHeader,
CardContent,
CardFooter,
Card,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { ZodErrors } from "@/components/custom/zod-errors";
import { StrapiErrors } from "@/components/custom/strapi-errors";
import { SubmitButton } from "@/components/custom/submit-button";
import { ProviderAuthLink } from "@/components/custom/provider-auth-button";
const INITIAL_STATE = {
data: null,
zodErrors: null,
strapiErrors: null,
message: null,
success: false, // Add success flag
};
export function SignupForm() {
const [formState, formAction] = useActionState(registerUserAction, INITIAL_STATE);
useEffect(() => {
if (formState?.success) {
setTimeout(() => {
window.location.href = "/signin"; // Redirect to login after 5 seconds
}, 5000);
}
}, [formState]);
return (
<div className="w-full max-w-md">
<form action={formAction}>
<Card className="border-none">
<CardHeader className="space-y-1">
<CardTitle className="font-heading text-3xl font-bold">Sign Up</CardTitle>
<CardDescription className="font-sans">
Enter your details to create a new account
</CardDescription>
</CardHeader>
<CardContent className="space-y-4 font-sans">
<div className="space-y-2">
<Label htmlFor="username">Username</Label>
<Input id="username" name="username" type="text" placeholder="username" />
<ZodErrors error={formState?.zodErrors?.username} />
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" name="email" type="email" placeholder="name@example.com" />
<ZodErrors error={formState?.zodErrors?.email} />
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input id="password" name="password" type="password" placeholder="password" />
<ZodErrors error={formState?.zodErrors?.password} />
</div>
{/* Show success message */}
{formState.success && (
<p className="text-green-600 text-sm font-medium">
{formState.message} Redirecting to login in 5 seconds...
</p>
)}
</CardContent>
<CardFooter className="flex flex-col">
<SubmitButton className="w-full" text="Sign Up" loadingText="Loading" />
<StrapiErrors error={formState?.strapiErrors} />
<p className="text-center p-2">or</p>
<ProviderAuthLink providerName="github" buttonText="GitHub">
<svg className="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
clipRule="evenodd"
/>
</svg>
</ProviderAuthLink>
</CardFooter>
</Card>
<div className="mt-4 text-center text-sm">
Have an account?
<Link className="underline ml-2" href="signin">
Sign In
</Link>
</div>
</form>
</div>
);
} |