@djangocfg/layouts 2.1.109 → 2.1.111

package/src/snippets/PushNotifications/components/PushPrompt.tsx

@@ -8,9 +8,10 @@
  */
 
 import { Bell, X } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Button } from '@djangocfg/ui-core';
 
 import { usePushNotifications } from '../hooks/usePushNotifications';
@@ -66,10 +67,19 @@ export function PushPrompt({
     vapidPublicKey,
     subscribeEndpoint,
   });
+  const t = useTypedT<I18nTranslations>();
 
   const [show, setShow] = useState(false);
   const [enabling, setEnabling] = useState(false);
 
+  const labels = useMemo(() => ({
+    enableNotifications: t('layouts.push.enableNotifications'),
+    stayUpdated: t('layouts.push.stayUpdated'),
+    enable: t('layouts.push.enable'),
+    notNow: t('layouts.push.notNow'),
+    dismiss: t('layouts.push.dismiss'),
+  }), [t]);
+
   // Check if should show
   useEffect(() => {
     // Wait for auth to complete, don't show for unauthenticated users
@@ -132,9 +142,9 @@ export function PushPrompt({
 
           {/* Content */}
           <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium text-white mb-1">Enable notifications</p>
+            <p className="text-sm font-medium text-white mb-1">{labels.enableNotifications}</p>
             <p className="text-xs text-zinc-400 mb-3">
-              Stay updated with important updates and alerts
+              {labels.stayUpdated}
             </p>
 
             {/* Actions */}
@@ -145,14 +155,14 @@ export function PushPrompt({
                 size="sm"
                 variant="default"
               >
-                Enable
+                {labels.enable}
               </Button>
               <Button
                 onClick={handleDismiss}
                 size="sm"
                 variant="ghost"
               >
-                Not now
+                {labels.notNow}
               </Button>
             </div>
           </div>
@@ -163,7 +173,7 @@ export function PushPrompt({
             size="sm"
             variant="ghost"
             className="flex-shrink-0 p-1"
-            aria-label="Dismiss"
+            aria-label={labels.dismiss}
           >
             <X className="w-4 h-4" />
           </Button>

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

@@ -1,114 +0,0 @@
-import { HelpCircle, Mail, MessageCircle } from 'lucide-react';
-import React from 'react';
-
-import { Button } from '@djangocfg/ui-core/components';
-
-import { useAuthFormContext } from '../context';
-
-import type { AuthHelpProps } from '../types';
-
-export const AuthHelp: React.FC<AuthHelpProps> = ({
-  className = '',
-  variant = 'default',
-}) => {
-  const { supportUrl, channel } = useAuthFormContext();
-
-  const getChannelIcon = () => {
-    return channel === 'phone' ? (
-      <MessageCircle className="w-4 h-4 text-muted-foreground" />
-    ) : (
-      <Mail className="w-4 h-4 text-muted-foreground" />
-    );
-  };
-
-  const getHelpText = () => {
-    return channel === 'phone' ? 'Check WhatsApp/SMS' : 'Check spam folder';
-  };
-
-  const getDetailedHelp = () => {
-    if (channel === 'phone') {
-      return {
-        title: "Didn't receive the code?",
-        tips: [
-          '• Check your WhatsApp messages',
-          '• Look for SMS messages',
-          '• Ensure you have signal/internet',
-          '• Wait a few minutes for delivery',
-        ],
-      };
-    } else {
-      return {
-        title: "Didn't receive the email?",
-        tips: [
-          '• Check your spam or junk folder',
-          '• Make sure you entered the correct email address',
-          '• Wait a few minutes for the email to arrive',
-        ],
-      };
-    }
-  };
-
-  if (variant === 'compact') {
-    return (
-      <div
-        className={`flex items-center justify-between p-3 bg-muted/30 rounded-sm border border-border ${className}`}
-      >
-        <div className="flex items-center gap-2">
-          {getChannelIcon()}
-          <span className="text-sm text-muted-foreground">{getHelpText()}</span>
-        </div>
-        {supportUrl && (
-          <Button
-            asChild
-            variant="ghost"
-            size="sm"
-            className="text-xs"
-          >
-            <a href={supportUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1">
-              <HelpCircle className="w-3 h-3" />
-              Need help?
-            </a>
-          </Button>
-        )}
-      </div>
-    );
-  }
-
-  const helpData = getDetailedHelp();
-
-  return (
-    <div
-      className={`flex flex-col gap-3 p-3 bg-muted/30 rounded-sm border border-border ${className}`}
-    >
-      <div className="flex items-start gap-3">
-        {getChannelIcon()}
-        <div className="flex flex-col gap-1">
-          <h4 className="text-sm font-medium text-foreground">{helpData.title}</h4>
-          <div className="flex flex-col gap-0.5 text-xs text-muted-foreground">
-            {helpData.tips.map((tip, index) => (
-              <p key={index}>{tip}</p>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {supportUrl && (
-        <div className="flex items-center justify-between pt-2 border-t border-border">
-          <span className="text-xs text-muted-foreground">Still having trouble?</span>
-          <Button
-            asChild
-            variant="ghost"
-            size="sm"
-            className="text-xs h-7 px-2"
-          >
-            <a href={supportUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1">
-              <HelpCircle className="w-3 h-3" />
-              Get Help
-            </a>
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};
-

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