@djangocfg/layouts 2.1.448 → 2.1.449

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.448",
+  "version": "2.1.449",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.448",
-    "@djangocfg/centrifugo": "^2.1.448",
-    "@djangocfg/debuger": "^2.1.448",
-    "@djangocfg/i18n": "^2.1.448",
-    "@djangocfg/monitor": "^2.1.448",
-    "@djangocfg/ui-core": "^2.1.448",
+    "@djangocfg/api": "^2.1.449",
+    "@djangocfg/centrifugo": "^2.1.449",
+    "@djangocfg/debuger": "^2.1.449",
+    "@djangocfg/i18n": "^2.1.449",
+    "@djangocfg/monitor": "^2.1.449",
+    "@djangocfg/ui-core": "^2.1.449",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -125,14 +125,14 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.448",
-    "@djangocfg/centrifugo": "^2.1.448",
-    "@djangocfg/debuger": "^2.1.448",
-    "@djangocfg/i18n": "^2.1.448",
-    "@djangocfg/monitor": "^2.1.448",
-    "@djangocfg/typescript-config": "^2.1.448",
-    "@djangocfg/ui-core": "^2.1.448",
-    "@djangocfg/ui-tools": "^2.1.448",
+    "@djangocfg/api": "^2.1.449",
+    "@djangocfg/centrifugo": "^2.1.449",
+    "@djangocfg/debuger": "^2.1.449",
+    "@djangocfg/i18n": "^2.1.449",
+    "@djangocfg/monitor": "^2.1.449",
+    "@djangocfg/typescript-config": "^2.1.449",
+    "@djangocfg/ui-core": "^2.1.449",
+    "@djangocfg/ui-tools": "^2.1.449",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

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

@@ -0,0 +1,84 @@
+'use client';
+
+import React, { memo } from 'react';
+import { Mail } from 'lucide-react';
+
+/**
+ * WebmailIcon — brand glyph for a webmail provider.
+ *
+ * lucide-react dropped brand icons, so the recognisable providers get a small
+ * inline SVG (brand-coloured, currentColor-agnostic). Everything else falls
+ * back to a generic `Mail` glyph that inherits `currentColor`.
+ *
+ * `provider` is the slug from the backend WebmailLink (gmail, outlook, …).
+ */
+export interface WebmailIconProps {
+  provider: string;
+  className?: string;
+  size?: number;
+}
+
+const SIZE = 20;
+
+function GmailGlyph({ size }: { size: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
+      <path fill="#4285F4" d="M2 6.5A1.5 1.5 0 0 1 3.5 5H4l8 6 8-6h.5A1.5 1.5 0 0 1 22 6.5V18a1 1 0 0 1-1 1h-2V9.2l-7 5.2-7-5.2V19H3a1 1 0 0 1-1-1V6.5Z" />
+      <path fill="#EA4335" d="M2 6.5A1.5 1.5 0 0 1 3.5 5H4l8 6-2 1.5L2 6.5Z" />
+      <path fill="#FBBC04" d="M22 6.5A1.5 1.5 0 0 0 20.5 5H20l-8 6 2 1.5 8-6Z" />
+      <path fill="#34A853" d="M3 19h2V9.2L3 7.7V19Zm18 0h-2V9.2l2-1.5V19Z" />
+    </svg>
+  );
+}
+
+function OutlookGlyph({ size }: { size: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
+      <rect x="10" y="5" width="12" height="14" rx="1" fill="#0A2767" />
+      <rect x="10" y="5" width="12" height="7" fill="#0364B8" />
+      <path fill="#28A8EA" d="M22 8.5 13 13l9 4.5V8.5Z" />
+      <rect x="2" y="6" width="11" height="12" rx="2" fill="#0078D4" />
+      <path fill="#fff" d="M7.5 8.6c-2 0-3.2 1.5-3.2 3.5s1.2 3.4 3.1 3.4 3.2-1.4 3.2-3.5-1.2-3.4-3.1-3.4Zm0 1.5c1 0 1.5.9 1.5 1.9s-.5 2-1.5 2-1.5-1-1.5-2 .5-1.9 1.5-1.9Z" />
+    </svg>
+  );
+}
+
+function YandexGlyph({ size }: { size: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" fill="#FC3F1D" />
+      <path fill="#fff" d="M13 6h-1.8c-2 0-3.3 1.3-3.3 3.2 0 1.5.7 2.4 2 3.3L7.6 18h1.9l2.2-4.9h.6V18H14V6Zm-.7 5.7c-1.1 0-1.6-.6-1.6-2 0-1.5.6-2.1 1.6-2.1h.7v4.1h-.7Z" />
+    </svg>
+  );
+}
+
+function MailRuGlyph({ size }: { size: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" fill="#005FF9" />
+      <path fill="#fff" d="M12 7.2a4.8 4.8 0 1 0 3 8.6l-1-1.2a3.2 3.2 0 1 1 1.1-2.6h1.6a4.8 4.8 0 0 0-4.7-4.8Zm0 3.2a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Z" />
+      <path fill="#FFA930" d="M16.8 12v.9a1.4 1.4 0 0 0 2.6.7A5 5 0 1 0 12 17v-1.6a3.4 3.4 0 1 1 3.2-4.6h1.6Z" />
+    </svg>
+  );
+}
+
+const GLYPHS: Record<string, React.FC<{ size: number }>> = {
+  gmail: GmailGlyph,
+  outlook: OutlookGlyph,
+  yandex: YandexGlyph,
+  mail_ru: MailRuGlyph,
+};
+
+function WebmailIconRaw({ provider, className, size = SIZE }: WebmailIconProps) {
+  const Glyph = GLYPHS[provider];
+  if (Glyph) {
+    return (
+      <span className={className} style={{ display: 'inline-flex', lineHeight: 0 }}>
+        <Glyph size={size} />
+      </span>
+    );
+  }
+  return <Mail className={className} width={size} height={size} aria-hidden="true" />;
+}
+
+export const WebmailIcon = memo(WebmailIconRaw);

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

@@ -6,6 +6,7 @@ export { AuthError } from './AuthError';
 export { AuthButton } from './AuthButton';
 export { AuthLink } from './AuthLink';
 export { AuthOTPInput } from './AuthOTPInput';
+export { WebmailIcon } from './WebmailIcon';
 export { AuthConsent } from './AuthConsent';
 
 export type { AuthContainerProps } from './AuthContainer';

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

@@ -14,6 +14,7 @@ import {
   AuthHeader,
   AuthLink,
   AuthOTPInput,
+  WebmailIcon,
 } from '../shared';
 
 type SubmitState = 'idle' | 'submitting';
@@ -38,6 +39,7 @@ function OTPStepRaw() {
     error,
     isRateLimited,
     rateLimitLabel,
+    webmail,
     setOtp,
     handleOTPSubmit,
     handleResendOTP,
@@ -58,6 +60,17 @@ function OTPStepRaw() {
     devMode: t('layouts.auth.dev.anyCodeWorks'),
   }), [t]);
 
+  // "Open Gmail / Outlook / …" — jumps straight to a search for our email.
+  const openMailboxLabel = useMemo(
+    () => (webmail ? t('layouts.auth.otp.openMailbox', { provider: webmail.provider_name }) : ''),
+    [t, webmail]
+  );
+
+  const handleOpenMailbox = useCallback(() => {
+    if (!webmail) return;
+    window.open(webmail.url, '_blank', 'noopener,noreferrer');
+  }, [webmail]);
+
   // Mask identifier for privacy
   const maskedIdentifier = useMemo(() => {
     const [local, domain] = identifier.split('@');
@@ -107,6 +120,18 @@ function OTPStepRaw() {
           <div className="auth-dev-notice">{content.devMode}</div>
         )}
 
+        {webmail && (
+          <AuthButton
+            type="button"
+            variant="secondary"
+            onClick={handleOpenMailbox}
+            className="auth-webmail-button"
+          >
+            <WebmailIcon provider={webmail.provider} />
+            {openMailboxLabel}
+          </AuthButton>
+        )}
+
         <AuthError message={error} />
 
         <AuthButton loading={isLoading} disabled={otp.length < AUTH.EMAIL_OTP_LENGTH}>

package/src/testing/MockAuthFormProvider.tsx

@@ -5,6 +5,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import type {
   AuthFormReturn,
   AuthStep,
+  WebmailLink,
 } from '@djangocfg/api/auth';
 
 import { AuthFormContext } from '../layouts/AuthLayout/context';
@@ -29,6 +30,7 @@ export interface MockAuthFormProviderProps extends Partial<AuthLayoutConfig> {
   twoFactorCode?: string;
   useBackupCode?: boolean;
   rateLimitSeconds?: number;
+  webmail?: WebmailLink | null;
   is2FALoading?: boolean;
   twoFactorWarning?: string | null;
   twoFactorAttemptsRemaining?: number | null;
@@ -68,6 +70,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
   twoFactorCode: initialTwoFactorCode = '',
   useBackupCode: initialUseBackupCode = false,
   rateLimitSeconds: initialRateLimitSeconds = 0,
+  webmail: initialWebmail = null,
   is2FALoading = false,
   twoFactorWarning = null,
   twoFactorAttemptsRemaining = null,
@@ -83,6 +86,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
   const [twoFactorCode, setTwoFactorCode] = useState(initialTwoFactorCode);
   const [useBackupCode, setUseBackupCode] = useState(initialUseBackupCode);
   const [rateLimitSeconds, setRateLimitSeconds] = useState(initialRateLimitSeconds);
+  const [webmail, setWebmail] = useState<WebmailLink | null>(initialWebmail);
 
   const isAutoSubmittingFromUrl = useRef(false);
 
@@ -106,6 +110,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
       rateLimitSeconds,
       isRateLimited: rateLimitSeconds > 0,
       rateLimitLabel: formatRateLimit(rateLimitSeconds),
+      webmail,
 
       // State handlers
       setIdentifier,
@@ -120,6 +125,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
       setTwoFactorCode,
       setUseBackupCode,
       startRateLimitCountdown: (seconds: number) => setRateLimitSeconds(seconds),
+      setWebmail,
 
       // Submit handlers — all no-op (preventDefault only) so the visible
       // step never changes from under the storyteller. To preview a
@@ -166,6 +172,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
     twoFactorCode,
     useBackupCode,
     rateLimitSeconds,
+    webmail,
     is2FALoading,
     twoFactorWarning,
     twoFactorAttemptsRemaining,