@djangocfg/layouts 2.1.109 → 2.1.111

package/src/layouts/AuthLayout/components/shared/AuthFooter.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+
+export interface AuthFooterProps {
+  termsUrl?: string;
+  privacyUrl?: string;
+  supportUrl?: string;
+  className?: string;
+}
+
+/**
+ * AuthFooter - Minimal link row for terms, privacy, and support
+ */
+export const AuthFooter: React.FC<AuthFooterProps> = ({
+  termsUrl,
+  privacyUrl,
+  supportUrl,
+  className = '',
+}) => {
+  const links = [
+    termsUrl && { href: termsUrl, label: 'Terms' },
+    privacyUrl && { href: privacyUrl, label: 'Privacy' },
+    supportUrl && { href: supportUrl, label: 'Help' },
+  ].filter(Boolean) as { href: string; label: string }[];
+
+  if (links.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`auth-footer ${className}`}>
+      {links.map((link, index) => (
+        <React.Fragment key={link.href}>
+          {index > 0 && <span className="auth-footer-dot">&middot;</span>}
+          <a
+            href={link.href}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {link.label}
+          </a>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};

package/src/layouts/AuthLayout/components/shared/AuthHeader.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+
+export interface AuthHeaderProps {
+  logo?: string;
+  title: string;
+  subtitle?: string;
+  identifier?: string;
+  className?: string;
+}
+
+/**
+ * AuthHeader - Apple-style header with logo, title, and subtitle
+ *
+ * Features:
+ * - Optional logo with scale animation
+ * - Large, bold title
+ * - Muted subtitle
+ * - Optional highlighted identifier
+ */
+export const AuthHeader: React.FC<AuthHeaderProps> = ({
+  logo,
+  title,
+  subtitle,
+  identifier,
+  className = '',
+}) => {
+  return (
+    <div className={`auth-header ${className}`}>
+      {logo && (
+        <img
+          src={logo}
+          alt=""
+          className="auth-logo"
+          aria-hidden="true"
+        />
+      )}
+      <h1 className="auth-title">{title}</h1>
+      {subtitle && (
+        <p className="auth-subtitle">
+          {subtitle}
+          {identifier && (
+            <>
+              <br />
+              <span className="auth-identifier">{identifier}</span>
+            </>
+          )}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/layouts/AuthLayout/components/shared/AuthLink.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import React from 'react';
+
+export interface AuthLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  href?: string;
+}
+
+/**
+ * AuthLink - Text link styled button/anchor
+ */
+export const AuthLink: React.FC<AuthLinkProps> = ({
+  children,
+  href,
+  className = '',
+  ...props
+}) => {
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={`auth-link ${className}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={`auth-link ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

package/src/layouts/AuthLayout/components/shared/AuthOTPInput.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+
+import { OTPInput } from '@djangocfg/ui-core/components';
+
+import { AUTH } from '../../constants';
+
+export interface AuthOTPInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onComplete?: (value: string) => void;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}
+
+/**
+ * AuthOTPInput - Reusable OTP input with consistent styling
+ *
+ * Used in: OTPStep, TwoFactorStep, SetupStep
+ */
+export const AuthOTPInput: React.FC<AuthOTPInputProps> = ({
+  value,
+  onChange,
+  onComplete,
+  disabled = false,
+  autoFocus = true,
+}) => (
+  <div className="auth-otp-container auth-otp-wrapper">
+    <OTPInput
+      length={AUTH.OTP_LENGTH}
+      validationMode="numeric"
+      pasteBehavior="clean"
+      value={value}
+      onChange={onChange}
+      onComplete={onComplete}
+      disabled={disabled}
+      autoFocus={autoFocus}
+      size="lg"
+    />
+  </div>
+);

package/src/layouts/AuthLayout/components/shared/ChannelToggle.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { Mail, Phone } from 'lucide-react';
+import React from 'react';
+
+import type { AuthChannel } from '../../types';
+
+export interface ChannelToggleProps {
+  channel: AuthChannel;
+  onChange: (channel: AuthChannel) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * ChannelToggle - Apple-style segmented control for email/phone
+ */
+export const ChannelToggle: React.FC<ChannelToggleProps> = ({
+  channel,
+  onChange,
+  disabled = false,
+  className = '',
+}) => {
+  return (
+    <div className={`auth-channel-toggle ${className}`}>
+      <button
+        type="button"
+        className="auth-channel-option"
+        data-active={channel === 'email'}
+        onClick={() => onChange('email')}
+        disabled={disabled}
+      >
+        <Mail />
+        Email
+      </button>
+      <button
+        type="button"
+        className="auth-channel-option"
+        data-active={channel === 'phone'}
+        onClick={() => onChange('phone')}
+        disabled={disabled}
+      >
+        <Phone />
+        Phone
+      </button>
+    </div>
+  );
+};

package/src/layouts/AuthLayout/components/shared/TermsCheckbox.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+
+import { Checkbox } from '@djangocfg/ui-core/components';
+
+export interface TermsCheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  termsUrl?: string;
+  privacyUrl?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * TermsCheckbox - Compact terms acceptance checkbox
+ */
+export const TermsCheckbox: React.FC<TermsCheckboxProps> = ({
+  checked,
+  onChange,
+  termsUrl,
+  privacyUrl,
+  disabled = false,
+  className = '',
+}) => {
+  // Don't render if no links provided
+  if (!termsUrl && !privacyUrl) {
+    return null;
+  }
+
+  return (
+    <div className={`auth-terms ${className}`}>
+      <Checkbox
+        id="auth-terms"
+        checked={checked}
+        onCheckedChange={onChange}
+        disabled={disabled}
+        className="auth-terms-checkbox"
+      />
+      <label htmlFor="auth-terms">
+        I agree to the{' '}
+        {termsUrl && (
+          <a href={termsUrl} target="_blank" rel="noopener noreferrer">
+            Terms
+          </a>
+        )}
+        {termsUrl && privacyUrl && ' and '}
+        {privacyUrl && (
+          <a href={privacyUrl} target="_blank" rel="noopener noreferrer">
+            Privacy Policy
+          </a>
+        )}
+      </label>
+    </div>
+  );
+};

package/src/layouts/AuthLayout/components/shared/index.ts

@@ -0,0 +1,21 @@
+export { AuthContainer } from './AuthContainer';
+export { AuthHeader } from './AuthHeader';
+export { AuthFooter } from './AuthFooter';
+export { AuthDivider } from './AuthDivider';
+export { AuthError } from './AuthError';
+export { AuthButton } from './AuthButton';
+export { AuthLink } from './AuthLink';
+export { AuthOTPInput } from './AuthOTPInput';
+export { ChannelToggle } from './ChannelToggle';
+export { TermsCheckbox } from './TermsCheckbox';
+
+export type { AuthContainerProps } from './AuthContainer';
+export type { AuthHeaderProps } from './AuthHeader';
+export type { AuthFooterProps } from './AuthFooter';
+export type { AuthDividerProps } from './AuthDivider';
+export type { AuthErrorProps } from './AuthError';
+export type { AuthButtonProps } from './AuthButton';
+export type { AuthLinkProps } from './AuthLink';
+export type { AuthOTPInputProps } from './AuthOTPInput';
+export type { ChannelToggleProps } from './ChannelToggle';
+export type { TermsCheckboxProps } from './TermsCheckbox';

package/src/layouts/AuthLayout/components/steps/IdentifierStep.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { Github } from 'lucide-react';
+import React, { useEffect } from 'react';
+
+import { useGithubAuth } from '@djangocfg/api/auth';
+import { Input, PhoneInput } from '@djangocfg/ui-core/components';
+
+import { AUTH_CONTENT } from '../../content';
+import { useAuthFormContext } from '../../context';
+import {
+  AuthButton,
+  AuthContainer,
+  AuthDivider,
+  AuthError,
+  AuthFooter,
+  AuthHeader,
+  ChannelToggle,
+  TermsCheckbox,
+} from '../shared';
+
+/**
+ * IdentifierStep - Apple-style email/phone input step
+ *
+ * Clean, minimal design with:
+ * - Optional logo
+ * - Channel toggle (email/phone)
+ * - Single input field
+ * - Terms checkbox
+ * - OAuth options
+ */
+export const IdentifierStep: React.FC = () => {
+  const {
+    identifier,
+    channel,
+    isLoading,
+    acceptedTerms,
+    error,
+    logoUrl,
+    termsUrl,
+    privacyUrl,
+    supportUrl,
+    enablePhoneAuth,
+    enableGithubAuth,
+    sourceUrl,
+    setIdentifier,
+    setChannel,
+    setAcceptedTerms,
+    setError,
+    handleIdentifierSubmit,
+    detectChannelFromIdentifier,
+    validateIdentifier,
+  } = useAuthFormContext();
+
+  // GitHub OAuth
+  const { isLoading: isGithubLoading, startGithubAuth } = useGithubAuth({
+    sourceUrl,
+    onError: setError,
+  });
+
+  // Force email if phone disabled
+  useEffect(() => {
+    if (!enablePhoneAuth && channel === 'phone') {
+      setChannel('email');
+      if (identifier && detectChannelFromIdentifier(identifier) === 'phone') {
+        setIdentifier('');
+      }
+    }
+  }, [enablePhoneAuth, channel, identifier, setChannel, setIdentifier, detectChannelFromIdentifier]);
+
+  // Handle identifier change with auto-detection
+  const handleChange = (value: string) => {
+    setIdentifier(value);
+    const detected = detectChannelFromIdentifier(value);
+    if (detected && detected !== channel) {
+      if (detected === 'phone' && !enablePhoneAuth) return;
+      setChannel(detected);
+    }
+  };
+
+  // Handle channel switch
+  const handleChannelChange = (newChannel: 'email' | 'phone') => {
+    if (newChannel === 'phone' && !enablePhoneAuth) return;
+    setChannel(newChannel);
+    if (identifier && !validateIdentifier(identifier, newChannel)) {
+      setIdentifier('');
+    }
+  };
+
+  const content = AUTH_CONTENT.identifier;
+  const subtitle = channel === 'phone' ? content.subtitle.phone : content.subtitle.email;
+  const hasTerms = Boolean(termsUrl || privacyUrl);
+
+  return (
+    <AuthContainer step="identifier">
+      <AuthHeader logo={logoUrl} title={content.title} subtitle={subtitle} />
+
+      <form onSubmit={handleIdentifierSubmit} className="auth-form-group">
+        {enablePhoneAuth && (
+          <ChannelToggle
+            channel={channel}
+            onChange={handleChannelChange}
+            disabled={isLoading}
+          />
+        )}
+
+        {channel === 'phone' ? (
+          <div className="auth-phone-input">
+            <PhoneInput
+              value={identifier}
+              onChange={(value) => handleChange(value || '')}
+              disabled={isLoading}
+              placeholder={content.placeholder.phone}
+              defaultCountry="US"
+              className="auth-input"
+            />
+          </div>
+        ) : (
+          <Input
+            type="email"
+            value={identifier}
+            onChange={(e) => handleChange(e.target.value)}
+            placeholder={content.placeholder.email}
+            disabled={isLoading}
+            required
+            autoFocus
+            className="auth-input"
+          />
+        )}
+
+        <TermsCheckbox
+          checked={acceptedTerms}
+          onChange={setAcceptedTerms}
+          termsUrl={termsUrl}
+          privacyUrl={privacyUrl}
+          disabled={isLoading}
+        />
+
+        <AuthError message={error} />
+
+        <AuthButton
+          loading={isLoading}
+          disabled={!identifier || (hasTerms && !acceptedTerms)}
+        >
+          {content.button}
+        </AuthButton>
+      </form>
+
+      {enableGithubAuth && (
+        <>
+          <AuthDivider />
+          <AuthButton
+            type="button"
+            variant="secondary"
+            loading={isGithubLoading}
+            onClick={startGithubAuth}
+          >
+            <Github className="w-5 h-5" />
+            {content.oauth.github}
+          </AuthButton>
+        </>
+      )}
+
+      <AuthFooter
+        termsUrl={termsUrl}
+        privacyUrl={privacyUrl}
+        supportUrl={supportUrl}
+      />
+    </AuthContainer>
+  );
+};

package/src/layouts/AuthLayout/components/steps/OTPStep.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import React, { useCallback, useState } from 'react';
+
+import { config } from '../../../../utils';
+import { AUTH } from '../../constants';
+import { AUTH_CONTENT } from '../../content';
+import { useAuthFormContext } from '../../context';
+import {
+  AuthButton,
+  AuthContainer,
+  AuthError,
+  AuthHeader,
+  AuthLink,
+  AuthOTPInput,
+} from '../shared';
+
+type SubmitState = 'idle' | 'submitting';
+
+/**
+ * OTPStep - Apple-style OTP verification
+ *
+ * Minimal design focused on the OTP input:
+ * - Clear title
+ * - Masked identifier for privacy
+ * - Large OTP input
+ * - Text links for actions
+ */
+export const OTPStep: React.FC = () => {
+  const {
+    identifier,
+    channel,
+    otp,
+    isLoading,
+    error,
+    setOtp,
+    handleOTPSubmit,
+    handleResendOTP,
+    handleBackToIdentifier,
+    isAutoSubmittingFromUrl,
+  } = useAuthFormContext();
+
+  const [submitState, setSubmitState] = useState<SubmitState>('idle');
+
+  // Mask identifier for privacy
+  const maskedIdentifier = React.useMemo(() => {
+    if (channel === 'phone') {
+      return identifier.slice(-4).padStart(identifier.length, '*');
+    }
+    const [local, domain] = identifier.split('@');
+    if (!local || !domain) return identifier;
+    return `${local[0]}${'*'.repeat(Math.min(local.length - 1, 5))}@${domain}`;
+  }, [identifier, channel]);
+
+  // Auto-submit on complete (state machine approach)
+  const handleOTPComplete = useCallback(
+    async (completedValue: string) => {
+      if (submitState !== 'idle' || isLoading || isAutoSubmittingFromUrl.current) return;
+      if (completedValue.length !== AUTH.OTP_LENGTH) return;
+
+      setSubmitState('submitting');
+      const fakeEvent = { preventDefault: () => {} } as React.FormEvent;
+
+      setTimeout(async () => {
+        try {
+          await handleOTPSubmit(fakeEvent);
+        } finally {
+          setSubmitState('idle');
+        }
+      }, AUTH.AUTO_SUBMIT_DELAY);
+    },
+    [handleOTPSubmit, isLoading, isAutoSubmittingFromUrl, submitState]
+  );
+
+  const content = AUTH_CONTENT.otp;
+
+  return (
+    <AuthContainer step="otp">
+      <AuthHeader
+        title={content.title}
+        subtitle={content.subtitle}
+        identifier={maskedIdentifier}
+      />
+
+      <form onSubmit={handleOTPSubmit} className="auth-form-group">
+        <AuthOTPInput
+          value={otp}
+          onChange={setOtp}
+          onComplete={handleOTPComplete}
+          disabled={isLoading}
+        />
+
+        {config.isDevelopment && (
+          <div className="auth-dev-notice">{AUTH_CONTENT.dev.anyCodeWorks}</div>
+        )}
+
+        <AuthError message={error} />
+
+        <AuthButton loading={isLoading} disabled={otp.length < AUTH.OTP_LENGTH}>
+          {content.button}
+        </AuthButton>
+
+        <div className="auth-actions">
+          <AuthLink onClick={handleResendOTP} disabled={isLoading}>
+            {content.resend}
+          </AuthLink>
+          <AuthLink onClick={handleBackToIdentifier} disabled={isLoading}>
+            {content.changeIdentifier(channel)}
+          </AuthLink>
+        </div>
+      </form>
+    </AuthContainer>
+  );
+};

package/src/layouts/AuthLayout/components/steps/SetupStep/SetupComplete.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { Check, Copy } from 'lucide-react';
+import React from 'react';
+
+import { AUTH_CONTENT } from '../../../content';
+import { useCopyToClipboard } from '../../../hooks';
+import { AuthButton, AuthContainer, AuthHeader } from '../../shared';
+
+interface SetupCompleteProps {
+  backupCodes: string[];
+  backupCodesWarning?: string;
+  onDone: () => void;
+}
+
+/**
+ * SetupComplete - Backup codes display after 2FA setup
+ */
+export const SetupComplete: React.FC<SetupCompleteProps> = ({
+  backupCodes,
+  backupCodesWarning,
+  onDone,
+}) => {
+  const { copied, copy } = useCopyToClipboard();
+  const content = AUTH_CONTENT.setup.complete;
+
+  const handleCopyAll = () => {
+    copy(backupCodes.join('\n'));
+  };
+
+  return (
+    <AuthContainer step="2fa-setup">
+      <AuthHeader title={content.title} subtitle={content.subtitle} />
+
+      <div className="auth-form-group">
+        {backupCodesWarning && (
+          <div className="auth-dev-notice">{backupCodesWarning}</div>
+        )}
+
+        <div className="auth-backup-codes">
+          {backupCodes.map((code, index) => (
+            <div key={index} className="auth-backup-code">
+              {code}
+            </div>
+          ))}
+        </div>
+
+        <p className="auth-instruction">{content.instruction}</p>
+
+        <AuthButton type="button" variant="secondary" onClick={handleCopyAll}>
+          {copied ? (
+            <>
+              <Check className="w-4 h-4" />
+              {content.copied}
+            </>
+          ) : (
+            <>
+              <Copy className="w-4 h-4" />
+              {content.copyAll}
+            </>
+          )}
+        </AuthButton>
+
+        <AuthButton type="button" onClick={onDone}>
+          {content.done}
+        </AuthButton>
+      </div>
+    </AuthContainer>
+  );
+};

package/src/layouts/AuthLayout/components/steps/SetupStep/SetupLoading.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+
+import { AUTH_CONTENT } from '../../../content';
+import { AuthButton, AuthContainer, AuthHeader } from '../../shared';
+
+/**
+ * SetupLoading - Loading state for 2FA setup
+ */
+export const SetupLoading: React.FC = () => {
+  const content = AUTH_CONTENT.setup.loading;
+
+  return (
+    <AuthContainer step="2fa-setup">
+      <AuthHeader title={content.title} />
+      <div className="auth-form-group">
+        <AuthButton loading disabled>
+          {content.button}
+        </AuthButton>
+      </div>
+    </AuthContainer>
+  );
+};