@djangocfg/layouts 2.1.109 → 2.1.110

package/src/layouts/AuthLayout/styles/auth.css

@@ -0,0 +1,578 @@
+/**
+ * Auth Layout Styles
+ *
+ * Minimal auth-specific styles.
+ * Uses design system variables from @djangocfg/ui-core.
+ */
+
+/* ===== SPRING EASINGS ===== */
+
+:root {
+  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
+  --spring-snappy: cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* ===== LAYOUT ===== */
+
+.auth-layout {
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: hsl(var(--background));
+}
+
+/* ===== CONTAINER ===== */
+
+.auth-container {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 2rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 1rem;
+}
+
+.auth-container[data-entering="true"] {
+  animation: authFadeIn 0.4s var(--spring-smooth) forwards;
+}
+
+@keyframes authFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ===== HEADER ===== */
+
+.auth-header {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.auth-logo {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 0.5rem;
+  object-fit: contain;
+}
+
+.auth-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: hsl(var(--foreground));
+  margin: 0;
+}
+
+.auth-subtitle {
+  font-size: 0.9375rem;
+  color: hsl(var(--muted-foreground));
+  margin: 0;
+}
+
+.auth-identifier {
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+/* ===== FORM ===== */
+
+.auth-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.auth-input {
+  width: 100%;
+  height: 3rem;
+  padding: 0 1rem;
+  font-size: 0.9375rem;
+  background: hsl(var(--input));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  color: hsl(var(--foreground));
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.auth-input:focus {
+  outline: none;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
+}
+
+.auth-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.auth-input::placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Phone input */
+.auth-phone-input .PhoneInputInput {
+  height: 3rem;
+  padding: 0 1rem;
+  font-size: 0.9375rem;
+  background: hsl(var(--input));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  color: hsl(var(--foreground));
+}
+
+.auth-phone-input .PhoneInputInput:focus {
+  outline: none;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
+}
+
+/* ===== BUTTONS ===== */
+
+.auth-button {
+  width: 100%;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.15s;
+}
+
+.auth-button:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.auth-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.auth-button-primary {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+
+.auth-button-primary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.auth-button-secondary {
+  background: hsl(var(--secondary));
+  color: hsl(var(--secondary-foreground));
+}
+
+.auth-button-secondary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+/* Loading state */
+.auth-button-loading {
+  color: transparent !important;
+  position: relative;
+}
+
+.auth-button-loading::before {
+  content: "";
+  position: absolute;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: authSpin 0.6s linear infinite;
+}
+
+.auth-button-primary.auth-button-loading::before {
+  border-color: hsl(var(--primary-foreground));
+  border-right-color: transparent;
+}
+
+@keyframes authSpin {
+  to { transform: rotate(360deg); }
+}
+
+/* ===== DIVIDER ===== */
+
+.auth-divider {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.8125rem;
+}
+
+.auth-divider::before,
+.auth-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: hsl(var(--border));
+}
+
+/* ===== LINKS ===== */
+
+.auth-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: hsl(var(--primary));
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.auth-link:hover {
+  opacity: 0.8;
+}
+
+.auth-link:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.auth-actions {
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+/* ===== ERROR ===== */
+
+.auth-error {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: hsl(var(--destructive));
+  background: hsl(var(--destructive) / 0.1);
+  border: 1px solid hsl(var(--destructive) / 0.2);
+  border-radius: 0.5rem;
+  animation: authShake 0.4s ease;
+}
+
+@keyframes authShake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-6px); }
+  40% { transform: translateX(6px); }
+  60% { transform: translateX(-4px); }
+  80% { transform: translateX(4px); }
+}
+
+/* ===== FOOTER ===== */
+
+.auth-footer {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  font-size: 0.8125rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.auth-footer a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.auth-footer a:hover {
+  color: hsl(var(--foreground));
+}
+
+.auth-footer-dot {
+  opacity: 0.3;
+}
+
+/* ===== TERMS ===== */
+
+.auth-terms {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.auth-terms-checkbox {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.auth-terms a {
+  color: hsl(var(--primary));
+  text-decoration: none;
+}
+
+.auth-terms a:hover {
+  opacity: 0.8;
+}
+
+/* ===== CHANNEL TOGGLE ===== */
+
+.auth-channel-toggle {
+  display: flex;
+  padding: 4px;
+  background: hsl(var(--muted));
+  border-radius: 0.5rem;
+  gap: 4px;
+}
+
+.auth-channel-option {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.auth-channel-option[data-active="true"] {
+  color: hsl(var(--foreground));
+  background: hsl(var(--card));
+  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.05);
+}
+
+.auth-channel-option svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* ===== OTP INPUT ===== */
+
+.auth-otp-container {
+  display: flex;
+  justify-content: center;
+}
+
+.auth-otp-wrapper {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.auth-otp-wrapper input {
+  width: 3rem;
+  height: 3.5rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+  text-align: center;
+  background: hsl(var(--input));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  color: hsl(var(--foreground));
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.auth-otp-wrapper input:focus {
+  outline: none;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
+}
+
+.auth-otp-wrapper input:disabled {
+  opacity: 0.5;
+}
+
+/* ===== QR CODE ===== */
+
+.auth-qr-container {
+  display: flex;
+  justify-content: center;
+  padding: 1rem 0;
+}
+
+.auth-qr {
+  padding: 1rem;
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 8px hsl(0 0% 0% / 0.08);
+}
+
+/* ===== SECRET CODE ===== */
+
+.auth-secret-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+}
+
+.auth-secret {
+  padding: 0.5rem 1rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+  letter-spacing: 0.05em;
+  background: hsl(var(--muted));
+  border-radius: 0.375rem;
+  color: hsl(var(--foreground));
+  word-break: break-all;
+  text-align: center;
+}
+
+/* ===== BACKUP CODES ===== */
+
+.auth-backup-codes {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+  padding: 1rem;
+  background: hsl(var(--muted) / 0.5);
+  border: 1px dashed hsl(var(--border));
+  border-radius: 0.5rem;
+}
+
+.auth-backup-code {
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+  text-align: center;
+  padding: 0.5rem;
+  color: hsl(var(--foreground));
+}
+
+/* ===== SUCCESS OVERLAY ===== */
+
+.auth-success-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--background));
+  z-index: 50;
+  animation: authFadeIn 0.3s ease-out;
+}
+
+.auth-success-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.auth-success-logo {
+  width: 80px;
+  height: 80px;
+  object-fit: contain;
+  animation: authSuccessIn 0.5s var(--spring-bounce);
+}
+
+.auth-success-check {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(142 76% 36% / 0.1);
+  border-radius: 50%;
+  color: hsl(142 76% 36%);
+  animation: authSuccessIn 0.5s var(--spring-bounce);
+}
+
+@keyframes authSuccessIn {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.auth-success-check svg {
+  width: 40px;
+  height: 40px;
+}
+
+.auth-success-text {
+  font-size: 0.9375rem;
+  color: hsl(var(--muted-foreground));
+}
+
+/* ===== DEV NOTICE ===== */
+
+.auth-dev-notice {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  text-align: center;
+  color: hsl(38 92% 40%);
+  background: hsl(38 92% 95%);
+  border-radius: 0.375rem;
+  border: 1px solid hsl(38 92% 80%);
+}
+
+.dark .auth-dev-notice {
+  color: hsl(38 92% 65%);
+  background: hsl(38 92% 15%);
+  border-color: hsl(38 92% 30%);
+}
+
+/* ===== INSTRUCTION ===== */
+
+.auth-instruction {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+  margin: 0;
+}
+
+/* ===== RESPONSIVE ===== */
+
+@media (max-width: 480px) {
+  .auth-layout {
+    padding: 1rem;
+  }
+
+  .auth-container {
+    padding: 1.5rem;
+    gap: 1.5rem;
+  }
+
+  .auth-title {
+    font-size: 1.25rem;
+  }
+
+  .auth-otp-wrapper input {
+    width: 2.75rem;
+    height: 3rem;
+    font-size: 1rem;
+  }
+}
+
+/* ===== REDUCED MOTION ===== */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -28,7 +28,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import { TwoFactorSetup } from '../AuthLayout/components/TwoFactorSetup';
+import { SetupStep } from '../AuthLayout/components/steps/SetupStep';
 import { profileLogger } from '../../utils/logger';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -314,7 +314,7 @@ const ProfileContent = ({
   if (show2FASetup) {
     return (
       <div className="container mx-auto px-4 py-8 max-w-lg">
-        <TwoFactorSetup
+        <SetupStep
           onComplete={() => {
             setShow2FASetup(false);
             fetch2FAStatus();

package/src/layouts/ProfileLayout/components/TwoFactorSection.tsx

@@ -22,7 +22,7 @@ import {
   OTPInput,
 } from '@djangocfg/ui-core/components';
 
-import { TwoFactorSetup } from '../../AuthLayout/components/TwoFactorSetup';
+import { SetupStep } from '../../AuthLayout/components/steps/SetupStep';
 
 type ViewState = 'status' | 'setup' | 'disable';
 
@@ -102,7 +102,7 @@ export const TwoFactorSection: React.FC = () => {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <TwoFactorSetup
+          <SetupStep
             onComplete={handleSetupComplete}
             onSkip={handleSetupSkip}
           />

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