Login 04

v0.3.3

Card-style credential form with Microsoft SSO, structured error/warning states, and a brand slot.

Preview

Install & usage

npx shadcn@latest add @signalos/login-04

Pulls the page source plus its widget dependencies (@signalos/tokens, @signalos/utils, @signalos/button, @signalos/card, @signalos/text-field) into your app - you own the copy. Requires access.

usage

// after: npx shadcn@latest add @signalos/login-04
// mount the pulled page in a route, e.g. src/app/login/page.tsx
import { Login04 } from "@/components/blocks/login-04/Login04"

export default function Page() {
  return <Login04 />
}

Props

LoginCredentials

Prop	Type	Default	Description
email*	`string`	-
password*	`string`	-

LoginError

Prop	Type	Default	Description
message*	`string`	-	Human-readable message shown inside the alert.
severity*	`ErrorSeverity`	-	Controls the alert's color palette.
icon*	`LucideIcon`	-	Icon component rendered beside the message.

Login04Props

Prop	Type	Default	Description
brand	`ReactNode`	-	Brand image / logo rendered above the login card.
onSubmit*	`(credentials: LoginCredentials) => void`	-	Called with the entered credentials when the form is submitted.
isLoading	`boolean \| undefined`	false	When true, disables all controls and shows a spinner on the submit button.
isAzureLoading	`boolean \| undefined`	false	When true, disables all controls and shows a spinner on the Azure button.
loginError	`LoginError \| null \| undefined`	-	Structured error or warning displayed above the form fields. Pass `null` to clear.
fieldErrors	`Partial<Record<"email" \| "password", string>> \| null \| undefined`	-	Per-field validation errors keyed by field name. Pass `null` or omit to clear.
onFieldChange	`((field: "email" \| "password") => void) \| undefined`	-	Called when a field's value changes, with the field name. Use to clear per-field errors.
onAzureSignIn	`(() => void) \| undefined`	-	Called when the user clicks the Microsoft sign-in button. Omit to hide the button.
className	`string \| undefined`	-	Extra classes merged onto the root element via `cn()`.
submitLabel	`string \| undefined`	"LOGIN"	Label for the primary submit button.
azureLabel	`string \| undefined`	"Sign in with Microsoft"	Label for the Microsoft sign-in button.
data-testid	`string \| undefined`	-	Test identifier rendered as `data-testid` on the root element.

Supporting types

export type ErrorSeverity = "error" | "warning"

More Login variants

Changelog

login-04

0.3.3

Added fieldErrors and onFieldChange props to support per-field validation messages and error clearing from the parent.
Display validation errors for the email and password fields using the TextField component.

0.3.0

Add "data-testid" prop to Login04Props (forwarded to root element); the root testid is now overridable instead of hardcoded.
Fix isAzureLoading JSDoc (previously described the credential loading state by mistake).
Add JSDoc to all previously undocumented props.

0.2.0

Full rewrite: all state, callbacks, and error handling moved to the parent via props (onSubmit, onAzureSignIn, isLoading, isAzureLoading, loginError).
Replaced native <input>/<label> with the TextField widget.
Added brand slot and conditional Azure button (rendered only when onAzureSignIn is provided).
Removed all forbidden imports (next/*, next-auth, internal schemas/services).
Responsive layout across mobile, tablet, and desktop.

0.1.0

Initial release: credential form with Microsoft SSO (tightly coupled to app internals).