"use client"

import * as React from "react"
import { Eye, EyeOff, LoaderCircle } from "lucide-react"

import { cn } from "@/lib/utils"

export type SignInValues = { email: string; password: string; remember: boolean }
export type SignInProvider = { id: string; label: string; icon: React.ComponentType<{ className?: string }> }

export interface SignInFormProps extends Omit<React.ComponentProps<"div">, "onSubmit" | "title"> {
  /** Resolve on success; throw an Error to show its message above the form */
  onSubmit?: (values: SignInValues) => Promise<void> | void
  onProvider?: (id: string) => void
  providers?: SignInProvider[]
  title?: React.ReactNode
  description?: React.ReactNode
  submitLabel?: string
  forgotHref?: string
  signUpHref?: string
  /** Show the "Remember me" checkbox */
  showRemember?: boolean
}

type Errors = Partial<Record<"email" | "password" | "form", string>>

function validate({ email, password }: SignInValues): Errors {
  const errors: Errors = {}
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errors.email = "Enter a valid email address."
  if (password.length < 8) errors.password = "Password must be at least 8 characters."
  return errors
}

const fieldClass =
  "h-10 w-full rounded-lg border bg-background px-3 text-sm shadow-xs transition-[border-color,box-shadow] outline-none placeholder:text-muted-foreground focus:border-ring focus:ring-3 focus:ring-ring/20 aria-invalid:border-destructive aria-invalid:focus:ring-destructive/20"

export function SignInForm({
  onSubmit,
  onProvider,
  providers = [],
  title = "Welcome back",
  description = "Sign in to your account to continue.",
  submitLabel = "Sign in",
  forgotHref = "#",
  signUpHref = "#",
  showRemember = true,
  className,
  ...props
}: SignInFormProps) {
  const id = React.useId()
  const [values, setValues] = React.useState<SignInValues>({ email: "", password: "", remember: true })
  const [errors, setErrors] = React.useState<Errors>({})
  const [touched, setTouched] = React.useState(false)
  const [pending, setPending] = React.useState(false)
  const [visible, setVisible] = React.useState(false)

  const change = (patch: Partial<SignInValues>) => {
    const next = { ...values, ...patch }
    setValues(next)
    // Re-validate as you type once the form has been submitted
    if (touched) setErrors(validate(next))
  }

  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    setTouched(true)
    const found = validate(values)
    setErrors(found)
    if (found.email || found.password) {
      event.currentTarget.querySelector<HTMLInputElement>("[aria-invalid=true]")?.focus()
      return
    }
    setPending(true)
    try {
      await onSubmit?.(values)
    } catch (error) {
      setErrors({ form: error instanceof Error ? error.message : "Sign in failed." })
    } finally {
      setPending(false)
    }
  }

  return (
    <div className={cn("w-full max-w-sm rounded-2xl border bg-card p-6 text-card-foreground shadow-sm sm:p-8", className)} {...props}>
      <div className="mb-6 text-center">
        <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
        {description && <p className="mt-1.5 text-sm text-muted-foreground">{description}</p>}
      </div>

      {providers.length > 0 && (
        <>
          <div className={cn("grid gap-2", providers.length > 1 && "grid-cols-2")}>
            {providers.map(({ id: providerId, label, icon: Icon }) => (
              <button
                key={providerId}
                type="button"
                onClick={() => onProvider?.(providerId)}
                className="inline-flex h-10 items-center justify-center gap-2 rounded-lg border bg-background text-sm font-medium shadow-xs transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
              >
                <Icon className="size-4" />
                {label}
              </button>
            ))}
          </div>
          <div className="my-5 flex items-center gap-3 text-xs text-muted-foreground">
            <span className="h-px flex-1 bg-border" />
            or continue with email
            <span className="h-px flex-1 bg-border" />
          </div>
        </>
      )}

      <form noValidate onSubmit={submit} className="flex flex-col gap-4">
        {errors.form && (
          <p role="alert" className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
            {errors.form}
          </p>
        )}
        <div className="flex flex-col gap-1.5">
          <label htmlFor={`${id}-email`} className="text-sm font-medium">
            Email
          </label>
          <input
            id={`${id}-email`}
            type="email"
            autoComplete="email"
            placeholder="you@company.com"
            value={values.email}
            onChange={(event) => change({ email: event.target.value })}
            aria-invalid={!!errors.email}
            aria-describedby={errors.email ? `${id}-email-error` : undefined}
            className={fieldClass}
          />
          {errors.email && (
            <p id={`${id}-email-error`} className="text-xs text-destructive">
              {errors.email}
            </p>
          )}
        </div>
        <div className="flex flex-col gap-1.5">
          <div className="flex items-center justify-between">
            <label htmlFor={`${id}-password`} className="text-sm font-medium">
              Password
            </label>
            <a href={forgotHref} className="text-xs text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
              Forgot password?
            </a>
          </div>
          <div className="relative">
            <input
              id={`${id}-password`}
              type={visible ? "text" : "password"}
              autoComplete="current-password"
              value={values.password}
              onChange={(event) => change({ password: event.target.value })}
              aria-invalid={!!errors.password}
              aria-describedby={errors.password ? `${id}-password-error` : undefined}
              className={cn(fieldClass, "pr-10")}
            />
            <button
              type="button"
              onClick={() => setVisible((v) => !v)}
              aria-label={visible ? "Hide password" : "Show password"}
              className="absolute top-1 right-1 flex size-8 items-center justify-center rounded-md text-muted-foreground hover:text-foreground"
            >
              {visible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
            </button>
          </div>
          {errors.password && (
            <p id={`${id}-password-error`} className="text-xs text-destructive">
              {errors.password}
            </p>
          )}
        </div>
        {showRemember && (
          <label className="flex items-center gap-2 text-sm text-muted-foreground">
            <input
              type="checkbox"
              checked={values.remember}
              onChange={(event) => change({ remember: event.target.checked })}
              className="size-4 rounded accent-primary"
            />
            Remember me for 30 days
          </label>
        )}
        <button
          type="submit"
          disabled={pending}
          className="mt-1 inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-primary text-sm font-medium text-primary-foreground shadow-xs transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:opacity-70"
        >
          {pending && <LoaderCircle className="size-4 animate-spin" />}
          {submitLabel}
        </button>
      </form>
      <p className="mt-6 text-center text-sm text-muted-foreground">
        Don&apos;t have an account?{" "}
        <a href={signUpHref} className="font-medium text-foreground underline-offset-4 hover:underline">
          Sign up
        </a>
      </p>
    </div>
  )
}
Install

More like this

Currency Input

Inline Edit

Slider
