@djangocfg/layouts 2.1.108 → 2.1.110

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>
-  );
-};
-

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

@@ -1,140 +0,0 @@
-'use client';
-
-import { KeyRound, Loader2, ShieldCheck } from 'lucide-react';
-import React from 'react';
-
-import {
-  Alert,
-  AlertDescription,
-  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  OTPInput,
-  Input,
-} from '@djangocfg/ui-core/components';
-
-import { useAuthFormContext } from '../context';
-
-/**
- * Two-Factor Authentication Form
- *
- * Displays TOTP code input or backup code input based on user selection.
- * Used after OTP/OAuth verification when user has 2FA enabled.
- */
-export const TwoFactorForm: React.FC = () => {
-  const {
-    twoFactorCode,
-    useBackupCode,
-    error,
-    is2FALoading,
-    twoFactorWarning,
-    setTwoFactorCode,
-    handle2FASubmit,
-    handleUseBackupCode,
-    handleUseTOTP,
-  } = useAuthFormContext();
-
-  return (
-    <Card className="w-full">
-      <CardHeader className="space-y-1 text-center">
-        <div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
-          <ShieldCheck className="w-6 h-6 text-primary" />
-        </div>
-        <CardTitle className="text-2xl">Two-Factor Authentication</CardTitle>
-        <CardDescription>
-          {useBackupCode
-            ? 'Enter one of your backup recovery codes'
-            : 'Enter the 6-digit code from your authenticator app'}
-        </CardDescription>
-      </CardHeader>
-
-      <form onSubmit={handle2FASubmit}>
-        <CardContent className="space-y-4">
-          {/* Error Alert */}
-          {error && (
-            <Alert variant="destructive">
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-
-          {/* Warning Alert (e.g., low backup codes) */}
-          {twoFactorWarning && (
-            <Alert>
-              <AlertDescription>{twoFactorWarning}</AlertDescription>
-            </Alert>
-          )}
-
-          {/* TOTP Code Input */}
-          {!useBackupCode && (
-            <div className="flex justify-center">
-              <OTPInput
-                length={6}
-                validationMode="numeric"
-                pasteBehavior="clean"
-                value={twoFactorCode}
-                onChange={setTwoFactorCode}
-                disabled={is2FALoading}
-                autoFocus={true}
-                size="lg"
-              />
-            </div>
-          )}
-
-          {/* Backup Code Input */}
-          {useBackupCode && (
-            <div className="space-y-2">
-              <Input
-                type="text"
-                placeholder="Enter backup code"
-                value={twoFactorCode}
-                onChange={(e) => setTwoFactorCode(e.target.value.toUpperCase())}
-                disabled={is2FALoading}
-                className="text-center font-mono text-lg tracking-widest"
-                maxLength={12}
-                autoComplete="off"
-              />
-              <p className="text-xs text-muted-foreground text-center">
-                Backup codes are 8 characters, letters and numbers
-              </p>
-            </div>
-          )}
-        </CardContent>
-
-        <CardFooter className="flex flex-col space-y-3">
-          <Button
-            type="submit"
-            className="w-full"
-            disabled={is2FALoading || (!useBackupCode && twoFactorCode.length !== 6)}
-          >
-            {is2FALoading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Verifying...
-              </>
-            ) : (
-              'Verify'
-            )}
-          </Button>
-
-          {/* Toggle between TOTP and Backup Code */}
-          <Button
-            type="button"
-            variant="ghost"
-            className="w-full text-sm"
-            onClick={useBackupCode ? handleUseTOTP : handleUseBackupCode}
-            disabled={is2FALoading}
-          >
-            <KeyRound className="mr-2 h-4 w-4" />
-            {useBackupCode
-              ? 'Use authenticator app instead'
-              : "Can't access your authenticator? Use a backup code"}
-          </Button>
-        </CardFooter>
-      </form>
-    </Card>
-  );
-};