{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "login-2", "title": "Login 2: split screen with testimonial", "author": "Ballmac ", "description": "A split-screen sign-in: SSO and passkey buttons, validated email and password with show/hide, remember me and error state on one side, a soft colour mesh with a customer quote on the other.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/field.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/password-input.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/login-2/login-2.tsx", "content": "// Ballmac UI: Login 2. https://ui.ballmac.com/blocks/login-2\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, Fingerprint, KeyRound, Quote } from \"lucide-react\"\n\nimport { Button } from \"@/components/ballmac/button\"\nimport { Checkbox } from \"@/components/ballmac/checkbox\"\nimport { Field, FieldError, FieldGroup, FieldLabel, useFieldControl } from \"@/components/ballmac/field\"\nimport { Input } from \"@/components/ballmac/input\"\nimport { PasswordInput } from \"@/components/ballmac/password-input\"\nimport { cn } from \"@/lib/utils\"\nimport { Media, type MediaSource } from \"@/components/ballmac/media\"\n\ntype Login2Values = { email: string; password: string; remember: boolean }\n\ntype Login2Props = Omit, \"title\" | \"onSubmit\"> & {\n /** Brand name beside the logo mark. */\n brand?: string\n /** Your logo mark instead of the brand's first letter: an image URL, an object with alt text and a dark-mode file, or your own element. A plain URL is described by the brand name. */\n logo?: MediaSource\n /** Heading. */\n title?: string\n /** One sentence under the heading. */\n description?: string\n /** Called with the values once they are valid. Throw to show `errorMessage`; resolve to finish. */\n onSubmit?: (values: Login2Values) => void | Promise\n /** Called by \"Continue with SSO\". Pass null to hide the button. */\n onSso?: (() => void) | null\n /** Called by \"Use a passkey\". Pass null to hide the button. */\n onPasskey?: (() => void) | null\n /** Shown above the form when onSubmit throws. */\n errorMessage?: string\n /** Where \"Forgot password?\" goes. */\n forgotHref?: string\n /** Where \"Create an account\" goes. */\n signupHref?: string\n /** Quote on the picture side. */\n quote?: string\n /** Who said it. */\n author?: { name: string; role: string }\n /** Replaces the picture side with your own element. Hidden below the lg breakpoint. */\n visual?: React.ReactNode\n /** A photo or illustration for the picture side: an image URL (give it imageAlt), an object with alt text and a dark-mode file, or your own element. */\n image?: MediaSource\n /** Describes `image` when it is a plain URL. */\n imageAlt?: string\n}\n\nfunction FieldInput(props: React.ComponentProps) {\n return \n}\nfunction FieldPassword(props: React.ComponentProps) {\n return \n}\n\nconst emailPattern = /^\\S+@\\S+\\.\\S+$/\n\nfunction Login2({\n brand = \"Acme\",\n logo,\n title = \"Welcome back\",\n description = \"Sign in to pick up where you left off.\",\n onSubmit,\n onSso = () => {},\n onPasskey = () => {},\n errorMessage = \"That email and password don’t match. Try again, or reset your password.\",\n forgotHref = \"#\",\n signupHref = \"#\",\n quote = \"We moved our entire finance team over in an afternoon. The calm, fast interface is the reason people actually use it.\",\n author = { name: \"Priya Raman\", role: \"VP Finance, Northwind\" },\n visual,\n image,\n imageAlt,\n className,\n ...props\n}: Login2Props) {\n const [email, setEmail] = React.useState(\"\")\n const [password, setPassword] = React.useState(\"\")\n const [remember, setRemember] = React.useState(true)\n const [touched, setTouched] = React.useState({ email: false, password: false })\n const [state, setState] = React.useState<\"idle\" | \"sending\" | \"error\">(\"idle\")\n const emailError = touched.email && !emailPattern.test(email) ? \"Enter a full email address, like name@company.com.\" : undefined\n const passwordError = touched.password && !password ? \"Enter your password.\" : undefined\n\n async function submit(e: React.FormEvent) {\n e.preventDefault()\n setTouched({ email: true, password: true })\n if (!emailPattern.test(email) || !password) return\n setState(\"sending\")\n try {\n if (onSubmit) await onSubmit({ email, password, remember })\n else await new Promise((r) => setTimeout(r, 800))\n setState(\"idle\")\n } catch {\n setState(\"error\")\n }\n }\n\n return (\n
\n
\n
\n \n {logo ? : {brand[0]}}\n {brand}\n \n

{title}

\n

{description}

\n\n {(onSso || onPasskey) && (\n
\n {onSso && }\n {onPasskey && }\n
\n )}\n
\n \n or continue with email\n \n
\n\n
\n \n {state === \"error\" &&

{errorMessage}

}\n \n Email\n setEmail(e.target.value)} onBlur={() => setTouched((t) => ({ ...t, email: true }))} />\n \n \n \n
\n Password\n Forgot password?\n
\n setTouched((t) => ({ ...t, password: true }))} />\n \n \n \n setRemember(c === true)} />\n Keep me signed in\n \n \n \n
\n\n

\n New to {brand}?{\" \"}\n Create an account\n

\n
\n
\n\n
\n )\n}\n\nexport { Login2, type Login2Props, type Login2Values }\n", "type": "registry:component", "target": "@components/ballmac/blocks/login-2/login-2.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "login", "sign in", "auth", "split screen", "passkey", "sso" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A full-width sign-in page. Pass onSubmit(values) (throw to show errorMessage), onSso / onPasskey (null hides), quote and author, or visual to replace the right side.", "whenToUse": [ "Product sign-in pages with room for a brand moment", "Apps with SSO and passkeys" ], "whenNotToUse": [ "Small centered dialogs (use login-1)" ], "composesWith": [ "signup-1", "forgot-password-1", "verify-1" ], "a11y": [ { "keys": "Submit with errors", "action": "Each error is announced and linked to its field; a failed sign-in is announced as an alert" }, { "keys": "Show / hide button", "action": "Toggles the password with aria-pressed" } ], "customization": [ "onSubmit(values) async; throw for the error state", "quote, author or visual (any node)", "onSso / onPasskey: null hides" ] }, "examples": [ "login-2-demo", "login-2-error" ], "url": "https://ui.ballmac.com/components/login-2" }, "categories": [ "blocks", "auth" ], "type": "registry:block" }