@djangocfg/layouts 1.0.1

package/src/layouts/AppLayout/layouts/AuthLayout/IdentifierForm.tsx

@@ -0,0 +1,330 @@
+import React, { useState, useEffect } from 'react';
+import { Mail, Phone, User } from 'lucide-react';
+
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Input,
+  Label,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  PhoneInput,
+} from '@djangocfg/ui/components';
+
+import { useAuthContext } from './AuthContext';
+import { AuthHelp } from './AuthHelp';
+
+export const IdentifierForm: React.FC = () => {
+  const {
+    identifier,
+    channel,
+    isLoading,
+    acceptedTerms,
+    termsUrl,
+    privacyUrl,
+    enablePhoneAuth,
+    setIdentifier,
+    setChannel,
+    setAcceptedTerms,
+    handleIdentifierSubmit,
+    detectChannelFromIdentifier,
+    validateIdentifier,
+    error,
+  } = useAuthContext();
+
+  const [localChannel, setLocalChannel] = useState<'email' | 'phone'>(channel);
+
+  // Sync localChannel with channel from context (for localStorage updates)
+  useEffect(() => {
+    setLocalChannel(channel);
+  }, [channel]);
+
+  // Force email channel if phone auth is disabled
+  useEffect(() => {
+    if (!enablePhoneAuth && localChannel === 'phone') {
+      setLocalChannel('email');
+      setChannel('email');
+      // Clear identifier if it's a phone number
+      if (identifier && detectChannelFromIdentifier(identifier) === 'phone') {
+        setIdentifier('');
+      }
+    }
+  }, [
+    enablePhoneAuth,
+    localChannel,
+    identifier,
+    setChannel,
+    setIdentifier,
+    detectChannelFromIdentifier,
+  ]);
+
+  // Handle identifier change with auto-detection
+  const handleIdentifierChange = (value: string) => {
+    setIdentifier(value);
+
+    // Auto-detect channel if user is typing (only if phone auth is enabled)
+    const detectedChannel = detectChannelFromIdentifier(value);
+    if (detectedChannel && detectedChannel !== localChannel) {
+      // Only switch to phone if phone auth is enabled
+      if (detectedChannel === 'phone' && !enablePhoneAuth) {
+        return; // Don't switch to phone channel if disabled
+      }
+      setLocalChannel(detectedChannel);
+      setChannel(detectedChannel);
+    }
+  };
+
+  // Handle manual channel switch
+  const handleChannelChange = (newChannel: 'email' | 'phone') => {
+    // Prevent switching to phone if phone auth is disabled
+    if (newChannel === 'phone' && !enablePhoneAuth) {
+      return;
+    }
+
+    setLocalChannel(newChannel);
+    setChannel(newChannel);
+    // Clear identifier when switching channels
+    if (identifier && !validateIdentifier(identifier, newChannel)) {
+      setIdentifier('');
+    }
+  };
+
+  const getChannelDescription = () => {
+    return localChannel === 'phone'
+      ? 'Enter your phone number to receive a verification code via SMS'
+      : 'Enter your email address to receive a verification code';
+  };
+
+  const getChannelIcon = () => {
+    return localChannel === 'phone' ? (
+      <Phone className="w-5 h-5" />
+    ) : (
+      <Mail className="w-5 h-5" />
+    );
+  };
+
+  return (
+    <Card className="w-full max-w-md mx-auto shadow-lg border border-border bg-card/50 backdrop-blur-sm">
+      <CardHeader className="text-center pb-6">
+        <div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
+          <User className="w-6 h-6 text-primary" />
+        </div>
+        <CardTitle className="text-xl font-semibold">Sign In</CardTitle>
+        <CardDescription className="text-muted-foreground">
+          {getChannelDescription()}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {enablePhoneAuth ? (
+          <Tabs
+            value={localChannel}
+            onValueChange={(value) => handleChannelChange(value as 'email' | 'phone')}
+          >
+            {/* Channel Selection Tabs */}
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="email" className="flex items-center gap-2">
+                <Mail className="w-4 h-4" />
+                Email
+              </TabsTrigger>
+              <TabsTrigger value="phone" className="flex items-center gap-2">
+                <Phone className="w-4 h-4" />
+                Phone
+              </TabsTrigger>
+            </TabsList>
+
+            <form onSubmit={handleIdentifierSubmit} className="space-y-6 mt-6">
+              <TabsContent value="email" className="space-y-3 mt-0">
+                <Label
+                  htmlFor="identifier"
+                  className="text-sm font-medium text-foreground flex items-center gap-2"
+                >
+                  <Mail className="w-4 h-4" />
+                  Email Address
+                </Label>
+                <Input
+                  id="identifier"
+                  type="email"
+                  placeholder="Enter your email address"
+                  value={identifier}
+                  onChange={(e) => handleIdentifierChange(e.target.value)}
+                  disabled={isLoading}
+                  required
+                  className="h-11 text-base"
+                />
+              </TabsContent>
+
+              <TabsContent value="phone" className="space-y-3 mt-0">
+                <Label
+                  htmlFor="phone-identifier"
+                  className="text-sm font-medium text-foreground flex items-center gap-2"
+                >
+                  <Phone className="w-4 h-4" />
+                  Phone Number
+                </Label>
+                <PhoneInput
+                  value={identifier}
+                  onChange={(value) => handleIdentifierChange(value || '')}
+                  disabled={isLoading}
+                  placeholder="Enter your phone number"
+                  defaultCountry="US"
+                  className="h-11 text-base"
+                />
+              </TabsContent>
+
+              {/* Terms and Conditions */}
+              <div className="flex items-start space-x-3">
+                <Checkbox
+                  id="terms"
+                  checked={acceptedTerms}
+                  onCheckedChange={setAcceptedTerms}
+                  disabled={isLoading}
+                  className="mt-1"
+                />
+                <div className="text-sm text-muted-foreground leading-5">
+                  <Label htmlFor="terms" className="cursor-pointer">
+                    I agree to the{' '}
+                    <a
+                      href={termsUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:underline font-medium"
+                    >
+                      Terms of Service
+                    </a>{' '}
+                    and{' '}
+                    <a
+                      href={privacyUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:underline font-medium"
+                    >
+                      Privacy Policy
+                    </a>
+                  </Label>
+                </div>
+              </div>
+
+              {/* Error Message */}
+              {error && (
+                <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20">
+                  {error}
+                </div>
+              )}
+
+              {/* Submit Button */}
+              <Button
+                type="submit"
+                className="w-full h-11 text-base font-medium"
+                disabled={isLoading || !identifier || !acceptedTerms}
+              >
+                {isLoading ? (
+                  <div className="flex items-center gap-2">
+                    <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                    Sending code...
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    {getChannelIcon()}
+                    Send verification code
+                  </div>
+                )}
+              </Button>
+            </form>
+          </Tabs>
+        ) : (
+          <form onSubmit={handleIdentifierSubmit} className="space-y-6 mt-6">
+            {/* Email-only input when phone auth is disabled */}
+            <div className="space-y-3">
+              <Label
+                htmlFor="email-only"
+                className="text-sm font-medium text-foreground flex items-center gap-2"
+              >
+                <Mail className="w-4 h-4" />
+                Email Address
+              </Label>
+              <Input
+                id="email-only"
+                type="email"
+                placeholder="Enter your email address"
+                value={identifier}
+                onChange={(e) => handleIdentifierChange(e.target.value)}
+                disabled={isLoading}
+                required
+                className="h-11 text-base"
+              />
+            </div>
+
+            {/* Terms and Conditions */}
+            <div className="flex items-start space-x-3">
+              <Checkbox
+                id="terms-email"
+                checked={acceptedTerms}
+                onCheckedChange={setAcceptedTerms}
+                disabled={isLoading}
+                className="mt-1"
+              />
+              <div className="text-sm text-muted-foreground leading-5">
+                <Label htmlFor="terms-email" className="cursor-pointer">
+                  I agree to the{' '}
+                  <a
+                    href={termsUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline font-medium"
+                  >
+                    Terms of Service
+                  </a>{' '}
+                  and{' '}
+                  <a
+                    href={privacyUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline font-medium"
+                  >
+                    Privacy Policy
+                  </a>
+                </Label>
+              </div>
+            </div>
+
+            {/* Error Message */}
+            {error && (
+              <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20">
+                {error}
+              </div>
+            )}
+
+            {/* Submit Button */}
+            <Button
+              type="submit"
+              className="w-full h-11 text-base font-medium"
+              disabled={isLoading || !identifier || !acceptedTerms}
+            >
+              {isLoading ? (
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                  Sending code...
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  {getChannelIcon()}
+                  Send verification code
+                </div>
+              )}
+            </Button>
+          </form>
+        )}
+
+        {/* Help Section */}
+        <AuthHelp />
+      </CardContent>
+    </Card>
+  );
+};

package/src/layouts/AppLayout/layouts/AuthLayout/OTPForm.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { Mail, MessageCircle } from 'lucide-react';
+
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from '@djangocfg/ui/components';
+
+import { useAuthContext } from './AuthContext';
+import { AuthHelp } from './AuthHelp';
+
+export const OTPForm: React.FC = () => {
+  const {
+    identifier,
+    channel,
+    otp,
+    isLoading,
+    error,
+    supportUrl,
+    setOtp,
+    handleOTPSubmit,
+    handleResendOTP,
+    handleBackToIdentifier,
+  } = useAuthContext();
+
+  const getChannelIcon = () => {
+    return channel === 'phone' ? (
+      <div className="flex items-center justify-center">
+        <MessageCircle className="w-5 h-5 text-primary" />
+      </div>
+    ) : (
+      <Mail className="w-5 h-5 text-primary" />
+    );
+  };
+
+  const getChannelTitle = () => {
+    return channel === 'phone' ? 'Verify Your Phone' : 'Verify Your Email';
+  };
+
+  const getChannelDescription = () => {
+    const channelName = channel === 'phone' ? 'phone number' : 'email address';
+    const method = channel === 'phone' ? 'WhatsApp/SMS' : 'email';
+    return `We've sent a 6-digit verification code to your ${channelName} via ${method}`;
+  };
+
+  return (
+    <Card className="w-full max-w-md mx-auto shadow-lg border border-border bg-card/50 backdrop-blur-sm">
+      <CardHeader className="text-center pb-6">
+        <div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
+          {getChannelIcon()}
+        </div>
+        <CardTitle className="text-xl font-semibold">{getChannelTitle()}</CardTitle>
+        <CardDescription className="text-muted-foreground">
+          {getChannelDescription()}
+          <br />
+          <span className="font-medium text-foreground">{identifier}</span>
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <form onSubmit={handleOTPSubmit} className="space-y-6">
+          <div className="space-y-3">
+            <label className="text-sm font-medium text-foreground text-center block">
+              Enter verification code
+            </label>
+            <div className="flex justify-center">
+              <InputOTP
+                value={otp}
+                onChange={setOtp}
+                maxLength={6}
+                disabled={isLoading}
+                containerClassName="gap-3"
+              >
+                <InputOTPGroup className="gap-2">
+                  <InputOTPSlot
+                    index={0}
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                  />
+                  <InputOTPSlot
+                    index={1}
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                  />
+                  <InputOTPSlot
+                    index={2}
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                  />
+                  <InputOTPSlot
+                    index={3}
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                  />
+                  <InputOTPSlot
+                    index={4}
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                  />
+                  <InputOTPSlot
+                    index={5}
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                  />
+                </InputOTPGroup>
+              </InputOTP>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <Button
+              type="submit"
+              className="w-full h-11 text-base font-medium"
+              disabled={isLoading || otp.length < 6}
+            >
+              {isLoading ? 'Verifying...' : 'Verify Code'}
+            </Button>
+
+            <div className="flex gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleBackToIdentifier}
+                disabled={isLoading}
+                className="flex-1 h-10"
+              >
+                ← Back
+              </Button>
+
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleResendOTP}
+                disabled={isLoading}
+                className="flex-1 h-10"
+              >
+                ↻ Resend
+              </Button>
+            </div>
+          </div>
+        </form>
+
+        {/* Error Message */}
+        {error && (
+          <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20">
+            {error}
+          </div>
+        )}
+
+        {supportUrl && (
+          <div className="mt-4">
+            <AuthHelp />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/layouts/AppLayout/layouts/AuthLayout/index.ts

@@ -0,0 +1,13 @@
+export { AuthLayout } from './AuthLayout';
+export { 
+  AuthProvider as AuthLayoutProvider, 
+  useAuthContext as useAuthLayoutContext 
+} from './AuthContext';
+export { IdentifierForm } from './IdentifierForm';
+export { OTPForm } from './OTPForm';
+export { AuthHelp } from './AuthHelp';
+export type { 
+  AuthProps, 
+  AuthContextType as AuthLayoutContextType, 
+  AuthHelpProps 
+} from './types';

package/src/layouts/AppLayout/layouts/AuthLayout/types.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+
+// Auth Context Types - Multi-channel support
+export interface AuthContextType {
+  // Form state
+  identifier: string; // Email or phone number
+  channel: 'email' | 'phone';
+  otp: string;
+  isLoading: boolean;
+  acceptedTerms: boolean;
+
+  // Auth state
+  step: 'identifier' | 'otp';
+  error: string;
+
+  // Support configuration
+  supportUrl?: string;
+  termsUrl?: string;
+  privacyUrl?: string;
+  sourceUrl: string;
+  enablePhoneAuth?: boolean;
+
+  // Form handlers
+  setIdentifier: (identifier: string) => void;
+  setChannel: (channel: 'email' | 'phone') => void;
+  setOtp: (otp: string) => void;
+  setAcceptedTerms: (accepted: boolean) => void;
+  setError: (error: string) => void;
+  clearError: () => void;
+
+  // Auth handlers
+  handleIdentifierSubmit: (e: React.FormEvent) => Promise<void>;
+  handleOTPSubmit: (e: React.FormEvent) => Promise<void>;
+  handleResendOTP: () => Promise<void>;
+  handleBackToIdentifier: () => void;
+  forceOTPStep: () => void;
+
+  // Utility methods
+  detectChannelFromIdentifier: (identifier: string) => 'email' | 'phone' | null;
+  validateIdentifier: (identifier: string, channel?: 'email' | 'phone') => boolean;
+}
+
+// Unified Auth Props - used by both AuthProvider and AuthLayout
+export interface AuthProps {
+  children?: React.ReactNode;
+  sourceUrl?: string;
+  supportUrl?: string;
+  termsUrl?: string;
+  privacyUrl?: string;
+  className?: string;
+  enablePhoneAuth?: boolean; // Controls whether phone authentication is available
+  onIdentifierSuccess?: (identifier: string, channel: 'email' | 'phone') => void;
+  onOTPSuccess?: () => void;
+  onError?: (message: string) => void;
+}
+
+// Auth Help Types
+export interface AuthHelpProps {
+  className?: string;
+  variant?: 'default' | 'compact';
+}

package/src/layouts/AppLayout/layouts/PrivateLayout/PrivateLayout.tsx

@@ -0,0 +1,92 @@
+/**
+ * Private Layout
+ *
+ * Dashboard layout for authenticated pages
+ * Refactored from _old/DashboardLayout - uses context only!
+ */
+
+'use client';
+
+import React, { ReactNode, useEffect } from 'react';
+import { SidebarInset, SidebarProvider } from '@djangocfg/ui/components';
+import { useAuth } from '../../../../auth';
+import { KnowledgeChat } from '../../../../snippets/Chat';
+import { useAppContext } from '../../context';
+import { DashboardContent, DashboardHeader, DashboardSidebar } from './components';
+
+export interface PrivateLayoutProps {
+  children: ReactNode;
+}
+
+/**
+ * Private Layout Component
+ *
+ * Features:
+ * - SidebarProvider for collapsible sidebar
+ * - DashboardSidebar with navigation
+ * - DashboardHeader with user menu, notifications, theme toggle
+ * - DashboardContent with configurable padding
+ * - KnowledgeChat (optional)
+ * - Auth loading state
+ * - Auth redirect for unauthenticated users
+ *
+ * All data from useAppContext() - no props!
+ */
+export function PrivateLayout({ children }: PrivateLayoutProps) {
+  const { config } = useAppContext();
+  const { isLoading, isAuthenticated } = useAuth();
+
+  const { privateLayout, routes } = config;
+
+  // Redirect unauthenticated users
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      const redirect = routes.detectors.getUnauthenticatedRedirect(
+        window.location.pathname
+      );
+      if (redirect) {
+        window.location.href = redirect;
+      }
+    }
+  }, [isLoading, isAuthenticated, routes]);
+
+  // Show loading state while checking auth
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin" />
+          <p className="text-sm text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Don't render content if user is not authenticated
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <>
+      <SidebarProvider defaultOpen={true}>
+        {/* Sidebar */}
+        <DashboardSidebar />
+
+        {/* Main content area */}
+        <SidebarInset className="flex flex-col">
+          {/* Header */}
+          <DashboardHeader />
+
+          {/* Page content */}
+          <div className="flex-1 overflow-y-auto">
+            <DashboardContent>{children}</DashboardContent>
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+
+      {/* Chat positioned outside main layout for proper fixed positioning */}
+      {privateLayout.showChat && <KnowledgeChat />}
+    </>
+  );
+}