A shadcn login page with a shy mascot

app/login/shy-login.tsx

"use client";
import { useRouter } from "next/navigation";
import ShyEyesLogin from "@/components/ShyEyesLogin";
import { signIn } from "./actions";

export function ShyLogin() {
  const router = useRouter();

  return (
    <ShyEyesLogin
      forgotHref="/forgot-password"
      resetAfter={null}
      signInError={(e) => (e instanceof Error ? e.message : "Sign-in failed. Try again.")}
      onSubmit={async (email, password) => {
        const res = await signIn(email, password);
        if (!res.ok) throw new Error(res.error); // head shake + message above the button
        setTimeout(() => router.push("/dashboard"), 1200); // let the wave play first
      }}
    />
  );
}

components/login-form.tsx

"use client";
import { useActionState } from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { loginAction, type LoginState } from "@/app/login/actions";

export function LoginForm({ className, ...props }: React.ComponentProps<"div">) {
  const [state, formAction, pending] = useActionState<LoginState, FormData>(loginAction, null);

  return (
    <div className={cn("flex flex-col gap-6", className)} {...props}>
      <Card>
        <CardHeader>
          <CardTitle>Login to your account</CardTitle>
          <CardDescription>Enter your email below to login to your account</CardDescription>
        </CardHeader>
        <CardContent>
          <form action={formAction}>
            <FieldGroup>
              <Field data-invalid={!!state?.error}>
                <FieldLabel htmlFor="email">Email</FieldLabel>
                <Input id="email" name="email" type="email" autoComplete="email" placeholder="[email protected]" defaultValue={state?.email} required aria-invalid={!!state?.error} />
              </Field>
              <Field data-invalid={!!state?.error}>
                <div className="flex items-center">
                  <FieldLabel htmlFor="password">Password</FieldLabel>
                  <a href="/forgot-password" className="ml-auto inline-block text-sm underline-offset-4 hover:underline">
                    Forgot your password?
                  </a>
                </div>
                <Input id="password" name="password" type="password" autoComplete="current-password" required aria-invalid={!!state?.error} />
                <FieldError>{state?.error}</FieldError>
              </Field>
              <Field>
                <Button type="submit" disabled={pending}>
                  {pending ? "Logging in..." : "Login"}
                </Button>
                <FieldDescription className="text-center">
                  Don&apos;t have an account? <a href="/sign-up">Sign up</a>
                </FieldDescription>
              </Field>
            </FieldGroup>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}

app/login/actions.ts

"use server";
import { redirect } from "next/navigation";
import { verifyCredentials } from "@/lib/auth";

export type SignInResult = { ok: true } | { ok: false; error: string };

export async function signIn(email: string, password: string): Promise<SignInResult> {
  if (!/.+@.+\..+/.test(email) || !password) return { ok: false, error: "Enter your email and password." };

  // Your auth layer: checks the password and sets the session cookie.
  const ok = await verifyCredentials(email, password);
  return ok ? { ok: true } : { ok: false, error: "That email and password don't match." };
}

// The same check for the login-01 form, shaped for useActionState.
// The email goes back so the field keeps it: React 19 resets a form after its action runs.
export type LoginState = { error: string; email: string } | null;

export async function loginAction(_prev: LoginState, formData: FormData): Promise<LoginState> {
  const email = String(formData.get("email") ?? "");
  const res = await signIn(email, String(formData.get("password") ?? ""));
  if (!res.ok) return { error: res.error, email };
  redirect("/dashboard");
}

app/globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
/* ...the rest of the globals.css shadcn wrote for you stays as it is... */

/* Shy Eyes Login's two inputs carry font-sans. In a shadcn app font-sans is
   your app font, so pin the piece's font inside the scene only. */
.qse-root .font-sans {
  font-family: "Space Grotesk", system-ui, sans-serif;
}