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 | 1x 1x 12x 12x | "use client";
import Link from "next/link";
import { useActionState } from "react";
import { loginUserAction } 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 = {
zodErrors: null,
strapiErrors: null,
data: null,
message: null,
};
export function SigninForm() {
const [formState, formAction] = useActionState(loginUserAction, INITIAL_STATE);
return (
<div className="w-full max-w-md">
<form action={formAction}>
<Card className="border-none">
<CardHeader className="space-y-1">
<CardTitle className="text-3xl font-bold font-heading">Sign In</CardTitle>
<CardDescription className="font-sans">
Enter your details to sign in to your account
</CardDescription>
</CardHeader>
<CardContent className="space-y-4 font-sans">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input
id="identifier"
name="identifier"
type="text"
placeholder="username or email"
/>
<ZodErrors error={formState?.zodErrors?.identifier} />
</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>
</CardContent>
<CardFooter className="flex flex-col">
<SubmitButton className="w-full" text="Sign In" 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">
Don't have an account?
<Link className="underline ml-2" href="signup">
Sign Up
</Link>
</div>
</form>
</div>
);
}
|