@djangocfg/layouts 2.1.109 → 2.1.110

package/src/layouts/AuthLayout/components/AuthSuccess.tsx

@@ -1,101 +0,0 @@
-/**
- * Auth Success Component
- *
- * Full-screen success layout shown after successful authentication.
- * Displays a centered logo with a subtle animation, then redirects.
- */
-
-'use client';
-
-import React, { useEffect, useState } from 'react';
-
-import { useCfgRouter } from '@djangocfg/api/auth';
-
-import { useAuthFormContext } from '../context';
-
-export interface AuthSuccessProps {
-  className?: string;
-  /** Delay before redirect in ms (default: 1500) */
-  redirectDelay?: number;
-}
-
-export const AuthSuccess: React.FC<AuthSuccessProps> = ({ className, redirectDelay = 1500 }) => {
-  const { logoUrl, redirectUrl } = useAuthFormContext();
-  const router = useCfgRouter();
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    // Trigger animation after mount
-    const animTimer = setTimeout(() => setIsVisible(true), 50);
-
-    // Redirect after delay
-    const redirectTimer = setTimeout(() => {
-      const finalUrl = redirectUrl || '/dashboard';
-      router.hardPush(finalUrl);
-    }, redirectDelay);
-
-    return () => {
-      clearTimeout(animTimer);
-      clearTimeout(redirectTimer);
-    };
-  }, [redirectUrl, redirectDelay, router]);
-
-  if (!logoUrl) {
-    // Fallback: simple checkmark if no logo provided
-    return (
-      <div className={`fixed inset-0 flex items-center justify-center bg-background z-50 ${className || ''}`}>
-        <div
-          className={`transition-all duration-700 ease-out ${
-            isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
-          }`}
-        >
-          <div className="w-24 h-24 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
-            <svg
-              className="w-12 h-12 text-green-600 dark:text-green-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`fixed inset-0 flex items-center justify-center bg-background z-50 ${className || ''}`}>
-      <div
-        className={`transition-all duration-700 ease-out ${
-          isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-90'
-        }`}
-      >
-        {/* Logo container with max size and animation */}
-        <div className="relative">
-          {/* Subtle glow effect */}
-          <div
-            className={`absolute inset-0 blur-3xl transition-opacity duration-1000 ${
-              isVisible ? 'opacity-20' : 'opacity-0'
-            }`}
-            style={{
-              background: 'radial-gradient(circle, currentColor 0%, transparent 70%)',
-            }}
-          />
-
-          {/* Logo image */}
-          <img
-            src={logoUrl}
-            alt="Success"
-            className="relative w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 object-contain"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,322 +0,0 @@
-'use client';
-
-import { Mail, Phone, Send, User } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
-
-import {
-    Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Input, Label,
-    PhoneInput, Tabs, TabsContent, TabsList, TabsTrigger
-} from '@djangocfg/ui-core/components';
-
-import { useAuthFormContext } from '../context';
-import { AuthHelp } from './AuthHelp';
-import { OAuthProviders } from './oauth';
-
-export const IdentifierForm: React.FC = () => {
-  const {
-    identifier,
-    channel,
-    isLoading,
-    acceptedTerms,
-    termsUrl,
-    privacyUrl,
-    enablePhoneAuth,
-    setIdentifier,
-    setChannel,
-    setAcceptedTerms,
-    handleIdentifierSubmit,
-    detectChannelFromIdentifier,
-    validateIdentifier,
-    error,
-  } = useAuthFormContext();
-
-  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';
-  };
-
-  // Check if we have any links for terms/privacy - if not, we don't show the checkbox
-  const hasAnyLinks = Boolean(termsUrl || privacyUrl);
-
-  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 - only show if we have links */}
-              {hasAnyLinks && (
-                <div className="flex items-start gap-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{' '}
-                      {termsUrl && (
-                        <>
-                          <a
-                            href={termsUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-primary hover:underline font-medium"
-                          >
-                            Terms of Service
-                          </a>
-                          {privacyUrl && <>{' '}and{' '}</>}
-                        </>
-                      )}
-                      {privacyUrl && (
-                        <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"
-                size="lg"
-                className="w-full"
-                disabled={!identifier || (hasAnyLinks && !acceptedTerms)}
-                loading={isLoading}
-              >
-                <Send className="w-4 h-4" />
-                Send verification code
-              </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 - only show if we have links */}
-            {hasAnyLinks && (
-              <div className="flex items-start gap-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{' '}
-                    {termsUrl && (
-                      <>
-                        <a
-                          href={termsUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-primary hover:underline font-medium"
-                        >
-                          Terms of Service
-                        </a>
-                        {privacyUrl && <>{' '}and{' '}</>}
-                      </>
-                    )}
-                    {privacyUrl && (
-                      <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"
-              size="lg"
-              className="w-full"
-              disabled={!identifier || (hasAnyLinks && !acceptedTerms)}
-              loading={isLoading}
-            >
-              <Send className="w-4 h-4" />
-              Send verification code
-            </Button>
-          </form>
-        )}
-
-        {/* OAuth Providers (GitHub, etc.) */}
-        <OAuthProviders />
-
-        {/* Help Section */}
-        <AuthHelp />
-      </CardContent>
-    </Card>
-  );
-};
-

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

@@ -1,174 +0,0 @@
-'use client';
-
-import { ArrowLeft, Mail, MessageCircle, RotateCw, ShieldCheck } from 'lucide-react';
-import React, { useCallback, useRef } from 'react';
-
-import {
-    Button, Card, CardContent, CardDescription, CardHeader, CardTitle, OTPInput
-} from '@djangocfg/ui-core/components';
-
-import { config } from '../../../utils';
-import { useAuthFormContext } from '../context';
-import { AuthHelp } from './AuthHelp';
-
-export const OTPForm: React.FC = () => {
-  const {
-    identifier,
-    channel,
-    otp,
-    isLoading,
-    error,
-    supportUrl,
-    setOtp,
-    handleOTPSubmit,
-    handleResendOTP,
-    handleBackToIdentifier,
-    isAutoSubmittingFromUrl,
-  } = useAuthFormContext();
-
-  // Ref to track if auto-submit is in progress to prevent duplicate submissions
-  const isAutoSubmittingRef = useRef(false);
-
-  // Handle auto-submit when OTP is complete (after paste or last digit entry)
-  // Note: useAutoAuth already handles auto-submit from URL, this handles manual input/paste
-  const handleOTPComplete = useCallback((completedValue: string) => {
-    // Prevent duplicate submissions - check local ref, isLoading, and URL auto-submit ref
-    if (isAutoSubmittingRef.current || isLoading || isAutoSubmittingFromUrl.current) return;
-
-    if (completedValue.length === 6) {
-      isAutoSubmittingRef.current = true;
-
-      // Create a fake form event for handleOTPSubmit
-      const fakeEvent = {
-        preventDefault: () => {},
-      } as React.FormEvent;
-
-      // Small delay to ensure state is updated, then submit
-      // Reset ref after submit completes (isLoading will handle preventing re-submits)
-      setTimeout(async () => {
-        try {
-          await handleOTPSubmit(fakeEvent);
-        } finally {
-          isAutoSubmittingRef.current = false;
-        }
-      }, 100);
-    }
-  }, [handleOTPSubmit, isLoading, isAutoSubmittingFromUrl]);
-
-  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">
-              <OTPInput
-                length={6}
-                validationMode="numeric"
-                pasteBehavior="clean"
-                value={otp}
-                onChange={setOtp}
-                onComplete={handleOTPComplete}
-                disabled={isLoading}
-                autoFocus={true}
-                autoSubmit={false}
-                size="lg"
-              />
-            </div>
-
-            {/* Development Mode Notice */}
-            {config.isDevelopment && (
-              <div className="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30 p-2 rounded-md border border-amber-200 dark:border-amber-800 text-center">
-                🔧 Dev Mode: Any OTP code works
-              </div>
-            )}
-          </div>
-
-          <div className="space-y-4">
-            <Button
-              type="submit"
-              size="lg"
-              className="w-full"
-              disabled={otp.length < 6}
-              loading={isLoading}
-            >
-              <ShieldCheck className="w-5 h-5" />
-              Verify Code
-            </Button>
-
-            <div className="flex gap-3">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleBackToIdentifier}
-                disabled={isLoading}
-                className="flex-1"
-              >
-                <ArrowLeft className="w-4 h-4" />
-                Back
-              </Button>
-
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleResendOTP}
-                disabled={isLoading}
-                className="flex-1"
-              >
-                <RotateCw className="w-4 h-4" />
-                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>
-  );
-};
-