@flamingo-stack/openframe-frontend-core 0.0.585 → 0.0.586-1986.5486.1

package/src/components/features/auth/login-form.tsx

@@ -1,9 +1,12 @@
 'use client';
 
-import type { KeyboardEvent } from 'react';
+import type { KeyboardEvent, ReactNode } from 'react';
 import { useDeferredError } from '../../../hooks/ui/use-deferred-error';
 import { cn } from '../../../utils/cn';
+import { AlertTriangleIcon } from '../../icons-v2-generated/interface/alert-triangle-icon';
+import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
+import { LabeledDivider } from './labeled-divider';
 import type { AuthSsoProvider } from './sso-providers';
 import { SsoProviderButtons } from './sso-providers';
 
@@ -11,8 +14,6 @@ export interface LoginFormProps {
   /** Controlled email value */
   email: string;
   onEmailChange: (value: string) => void;
-  /** Enter-key handler on the email field (optional). */
-  onSubmit?: () => void;
   emailPlaceholder?: string;
   loading?: boolean;
   disabled?: boolean;
@@ -22,8 +23,8 @@ export interface LoginFormProps {
   /** Informational status under the email field (e.g. live tenant discovery). `errors.email` wins. */
   emailStatus?: { message: string; variant: 'error' | 'warning' | 'success' | 'muted' };
   /**
-   * SSO providers rendered below the email field. Always visible; gate
-   * clickability with `ssoDisabled` / `ssoEnabledProviders`.
+   * SSO providers, rendered ABOVE the email field with a divider between the two. Always visible;
+   * gate clickability with `ssoDisabled` / `ssoEnabledProviders`.
    */
   ssoProviders: AuthSsoProvider[];
   onSsoClick?: (provider: AuthSsoProvider) => void;
@@ -31,21 +32,44 @@ export interface LoginFormProps {
   ssoDisabled?: boolean;
   /** When set, only these providers are clickable; the rest stay disabled. */
   ssoEnabledProviders?: AuthSsoProvider[];
-  /** Verb prefix for provider buttons, e.g. "Continue with". Ignored for "openframe". */
+  /** Verb prefix for provider buttons, e.g. "Continue with". */
   ssoActionLabel?: string;
+  /** Label on the divider between the provider buttons and the email field. */
+  dividerLabel?: string;
+  /**
+   * The discovered tenant's own SSO options, rendered UNDER the email field — unlike `ssoProviders`
+   * above, these depend on knowing the tenant, so they cannot be offered before an address is
+   * typed. Shares `onSsoClick`.
+   *
+   * Three states, and the empty array is not the same as nothing: `undefined` means discovery has
+   * not resolved a tenant yet and the slot stays empty, while `[]` means it resolved and the tenant
+   * has none — which is an answer worth showing rather than silence.
+   */
+  customSsoProviders?: AuthSsoProvider[];
+  /** Shown in place of the custom SSO buttons when the resolved tenant has none configured. */
+  noCustomSsoLabel?: string;
+  /** Primary submit under the email field. Omit the handler to hide the button. */
+  onSubmitClick?: () => void;
+  submitLabel?: string;
+  /** Disables just the primary submit (fields stay editable). */
+  submitDisabled?: boolean;
+  /** Overrides the default heading. */
+  title?: string;
+  /** Overrides the default sub-heading. */
+  subtitle?: ReactNode;
   className?: string;
 }
 
 /**
  * Login form (Login tab). Presentational + controlled — the consumer owns
- * state, validation and discovery. Single-screen design: the email field and
- * the SSO provider buttons are always visible; the buttons unlock once the
- * consumer validates the email (real-time tenant discovery).
+ * state, validation and discovery. Single-screen design: the provider buttons come first and need
+ * nothing typed, then the email field below them. Whether the providers are gated is the
+ * consumer's call via `ssoDisabled`; the identity-first flows leave them open, because the server
+ * resolves the tenant from the identity the provider asserts.
  */
 export function LoginForm({
   email,
   onEmailChange,
-  onSubmit,
   emailPlaceholder = 'username@mail.com',
   loading = false,
   disabled = false,
@@ -56,6 +80,14 @@ export function LoginForm({
   ssoDisabled = false,
   ssoEnabledProviders,
   ssoActionLabel = 'Continue with',
+  dividerLabel = 'or continue with OpenFrame SSO',
+  customSsoProviders,
+  noCustomSsoLabel = 'No additional SSO configurations for this domain',
+  onSubmitClick,
+  submitLabel = 'Continue',
+  submitDisabled = false,
+  title = 'Login to OpenFrame',
+  subtitle = 'Enter your email to access your organization.',
   className,
 }: LoginFormProps) {
   const fieldDisabled = disabled || loading;
@@ -63,10 +95,11 @@ export function LoginForm({
   // Validation messages are deferred while the user is typing (shown on blur or after a pause).
   const emailErr = useDeferredError(errors?.email, email);
 
+  // Enter drives the same action as the visible button, under the same gate. A form with no
+  // submit (the Login tab, where the providers are the only way on) simply does nothing.
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && !fieldDisabled) {
-      onSubmit?.();
-    }
+    if (event.key !== 'Enter' || fieldDisabled || submitDisabled) return;
+    onSubmitClick?.();
   };
 
   return (
@@ -78,10 +111,25 @@ export function LoginForm({
     >
       {/* Header */}
       <div className="flex flex-col">
-        <h1 className="tracking-[-0.64px] text-ods-text-primary text-h2">Login to OpenFrame</h1>
-        <p className="text-ods-text-secondary text-h4">Enter your email to access your organization.</p>
+        <h1 className="tracking-[-0.64px] text-ods-text-primary text-h2">{title}</h1>
+        <p className="text-ods-text-secondary text-h4">{subtitle}</p>
       </div>
 
+      {/* Providers come FIRST. They need nothing typed, and putting the email above them taught
+          people to fill it in before tapping one — the behaviour that made a provider button look
+          broken while it waited on a field it never needed. */}
+      {ssoProviders.length > 0 && (
+        <SsoProviderButtons
+          providers={ssoProviders}
+          onSsoClick={onSsoClick}
+          actionLabel={ssoActionLabel}
+          disabled={disabled || loading || ssoDisabled}
+          enabledProviders={ssoEnabledProviders}
+        />
+      )}
+
+      {ssoProviders.length > 0 && <LabeledDivider label={dividerLabel} />}
+
       {/* Email */}
       <Input
         type="email"
@@ -96,14 +144,45 @@ export function LoginForm({
         onKeyDown={handleKeyDown}
       />
 
-      {/* SSO providers — always visible, unlocked by the consumer */}
-      <SsoProviderButtons
-        providers={ssoProviders}
-        onSsoClick={onSsoClick}
-        actionLabel={ssoActionLabel}
-        disabled={disabled || loading || ssoDisabled}
-        enabledProviders={ssoEnabledProviders}
-      />
+      {customSsoProviders &&
+        (customSsoProviders.length > 0 ? (
+          <SsoProviderButtons
+            providers={customSsoProviders}
+            onSsoClick={onSsoClick}
+            actionLabel={ssoActionLabel}
+            disabled={disabled || loading}
+          />
+        ) : (
+          // Same footprint as the button it stands in for, so nothing shifts when a tenant does
+          // have options. Tokens are the design's: soft-grey surface, grey text and icon, the
+          // bold-body step, a 24px icon, and 12/16 for the inset and the gap.
+          <div
+            role="status"
+            className="flex h-11 w-full items-center gap-[var(--spacing-system-m)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-s)] text-ods-text-secondary text-h3 md:h-12"
+          >
+            <AlertTriangleIcon className="h-6 w-6 shrink-0" />
+            {noCustomSsoLabel}
+          </div>
+        ))}
+
+      {onSubmitClick && (
+        // Full width on a phone, half the row and right-aligned from `md` up, matching the design.
+        // The spacer, rather than a width on the button, keeps it flush with the fields' right edge.
+        <div className="flex items-center gap-[var(--spacing-system-l)]">
+          <div className="hidden flex-1 md:block" />
+          <Button
+            type="button"
+            variant="accent"
+            fullWidth
+            className="md:flex-1"
+            loading={loading}
+            disabled={submitDisabled || fieldDisabled}
+            onClick={onSubmitClick}
+          >
+            {submitLabel}
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

package/src/components/features/auth/openframe-sso-signup-form.tsx

@@ -5,7 +5,7 @@ import { useDeferredError } from '../../../hooks/ui/use-deferred-error';
 import { cn } from '../../../utils/cn';
 import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
-import { PasswordInput } from '../../ui/password-input';
+import { AccountDetailsFields } from './account-details-fields';
 
 export interface OpenFrameSsoSignUpFormProps {
   /** Controlled field values */
@@ -75,10 +75,6 @@ export function OpenFrameSsoSignUpForm({
 
   // Validation messages are deferred while the user is typing (shown on blur or after a pause).
   const emailErr = useDeferredError(errors?.email, email);
-  const firstNameErr = useDeferredError(errors?.firstName, firstName);
-  const lastNameErr = useDeferredError(errors?.lastName, lastName);
-  const passwordErr = useDeferredError(errors?.password, password);
-  const confirmErr = useDeferredError(errors?.confirmPassword, confirmPassword);
 
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
@@ -111,45 +107,17 @@ export function OpenFrameSsoSignUpForm({
         onKeyDown={handleKeyDown}
       />
 
-      {/* Name + password fields — single column on every breakpoint */}
-      <Input
-        label="First Name"
-        placeholder="Enter First Name"
-        value={firstName}
-        error={firstNameErr.error}
-        disabled={fieldsDisabled}
-        onBlur={firstNameErr.onBlur}
-        onChange={event => onFirstNameChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <Input
-        label="Last Name"
-        placeholder="Enter Last Name"
-        value={lastName}
-        error={lastNameErr.error}
-        disabled={fieldsDisabled}
-        onBlur={lastNameErr.onBlur}
-        onChange={event => onLastNameChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <PasswordInput
-        label="Password"
-        placeholder="Enter Password"
-        value={password}
-        error={passwordErr.error}
-        disabled={fieldsDisabled}
-        onBlur={passwordErr.onBlur}
-        onChange={event => onPasswordChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <PasswordInput
-        label="Confirm Password"
-        placeholder="Confirm Password"
-        value={confirmPassword}
-        error={confirmErr.error}
+      <AccountDetailsFields
+        firstName={firstName}
+        lastName={lastName}
+        password={password}
+        confirmPassword={confirmPassword}
+        onFirstNameChange={onFirstNameChange}
+        onLastNameChange={onLastNameChange}
+        onPasswordChange={onPasswordChange}
+        onConfirmPasswordChange={onConfirmPasswordChange}
+        errors={errors}
         disabled={fieldsDisabled}
-        onBlur={confirmErr.onBlur}
-        onChange={event => onConfirmPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
 

package/src/components/features/auth/sso-providers.tsx

@@ -12,7 +12,7 @@ export type AuthSsoProvider = 'openframe' | 'google' | 'microsoft' | 'apple';
 
 export const PROVIDER_META: Record<AuthSsoProvider, { name: string; Icon: ComponentType<{ className?: string }> }> = {
   openframe: {
-    name: 'OpenFrame SSO',
+    name: 'OpenFrame',
     Icon: ({ className }) => (
       <OpenFrameLogo
         className={className}
@@ -29,7 +29,7 @@ export const PROVIDER_META: Record<AuthSsoProvider, { name: string; Icon: Compon
 export interface SsoProviderButtonsProps {
   providers: AuthSsoProvider[];
   onSsoClick?: (provider: AuthSsoProvider) => void;
-  /** Verb prefix for provider buttons, e.g. "Continue with". Ignored for "openframe". */
+  /** Verb prefix for provider buttons, e.g. "Continue with". */
   actionLabel?: string;
   disabled?: boolean;
   /**
@@ -65,7 +65,7 @@ export function SsoProviderButtons({
             leftIcon={<Icon className="h-5 w-5" />}
             onClick={() => onSsoClick?.(provider)}
           >
-            {provider === 'openframe' ? meta.name : `${actionLabel} ${meta.name}`}
+            {`${actionLabel} ${meta.name}`}
           </Button>
         );
       })}

package/src/stories/auth/Login.stories.tsx

@@ -48,8 +48,7 @@ function LoginPage(initial: Partial<LoginFormProps>) {
           email={email}
           onEmailChange={setEmail}
           submitDisabled={!isValid}
-          onSubmit={() => {}}
-          onForgotPassword={() => {}}
+          onSubmitClick={() => {}}
         />
       ) : (
         <div className="flex min-h-[240px] items-center justify-center rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xl)] text-ods-text-secondary text-h4">
@@ -70,9 +69,20 @@ export const Filled: Story = {
   render: () => <LoginPage email="roman@mail.com" />,
 };
 
-const SSO_PROVIDERS: AuthSsoProvider[] = ['openframe', 'google', 'microsoft', 'apple'];
+/** The generic providers, which need nothing typed and render above the email field. */
+const SSO_PROVIDERS: AuthSsoProvider[] = ['google', 'microsoft', 'apple'];
 
-/** SSO configured: email filled, submit replaced by provider buttons. */
+/** Providers above the email field, before anything is typed. */
 export const SSO: Story = {
-  render: () => <LoginPage email="roman@mail.com" ssoProviders={SSO_PROVIDERS} />,
+  render: () => <LoginPage ssoProviders={SSO_PROVIDERS} />,
+};
+
+/** Discovery resolved a tenant that has its own SSO: its options appear under the email. */
+export const CustomSso: Story = {
+  render: () => <LoginPage email="roman@mail.com" ssoProviders={SSO_PROVIDERS} customSsoProviders={['openframe']} />,
+};
+
+/** Discovery resolved a tenant with none configured — the empty array is the answer, not silence. */
+export const NoCustomSso: Story = {
+  render: () => <LoginPage email="roman@mail.com" ssoProviders={SSO_PROVIDERS} customSsoProviders={[]} />,
 };