+ {children}
+
+ );
+}
+
+/**
+ * AuthCardHeader component
+ * @description Header section with title and optional subtitle.
+ * @param {AuthCardHeaderProps} props - Component props
+ * @returns {JSX.Element} AuthCardHeader element
+ */
+export function AuthCardHeader({ title, subtitle }: AuthCardHeaderProps): JSX.Element {
+ return (
+
+
+ );
+}
+
+/**
+ * AuthCardContent component
+ * @description Content section for form fields and actions.
+ * @param {AuthCardContentProps} props - Component props
+ * @returns {JSX.Element} AuthCardContent element
+ */
+export function AuthCardContent({ children, className = '' }: AuthCardContentProps): JSX.Element {
+ return (
+
+
+ + {title} +
+ {subtitle && ( ++ {subtitle} +
+ )} +
+ {children}
+
+ );
+}
+
diff --git a/src/components/auth/auth-form-card.tsx b/src/components/auth/auth-form-card.tsx
new file mode 100644
index 0000000..97e14d0
--- /dev/null
+++ b/src/components/auth/auth-form-card.tsx
@@ -0,0 +1,311 @@
+/**
+ * AuthFormCard Component
+ * @description Unified authentication form with animated transitions between Sign In and Register.
+ * Uses framer-motion for smooth expand/collapse animations.
+ * Follows AgenticIQ Enterprise Coding Guidelines v1.0
+ */
+
+import { useState, type FormEvent } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+ AuthCard,
+ AuthCardHeader,
+ AuthCardContent,
+ AuthInput,
+ AuthButton,
+ SocialButton,
+ TextButton,
+ GoogleIcon,
+ AzureIcon,
+} from './index';
+
+/**
+ * Auth form mode type
+ */
+type AuthMode = 'signin' | 'register';
+
+/**
+ * Props for AuthFormCard component
+ */
+interface AuthFormCardProps {
+ /** Initial mode (signin or register) */
+ initialMode?: AuthMode;
+ /** Callback when sign in is submitted */
+ onSignIn?: (email: string, password: string) => void;
+ /** Callback when register is submitted */
+ onRegister?: (data: RegisterData) => void;
+ /** Callback for Google sign in */
+ onGoogleAuth?: () => void;
+ /** Callback for Azure sign in */
+ onAzureAuth?: () => void;
+ /** Callback for forgot password */
+ onForgotPassword?: () => void;
+}
+
+/**
+ * Register form data interface
+ */
+interface RegisterData {
+ firstName: string;
+ lastName: string;
+ email: string;
+ password: string;
+}
+
+/**
+ * Spring transition for smooth physics-based animations
+ * Using 'as const' to ensure literal types for framer-motion
+ */
+const springTransition = {
+ type: 'spring' as const,
+ stiffness: 500,
+ damping: 30,
+ mass: 1,
+};
+
+/**
+ * Animation variants for the collapsible name fields row
+ */
+const nameFieldsVariants = {
+ hidden: {
+ height: 0,
+ opacity: 0,
+ marginBottom: 0,
+ transition: {
+ height: { ...springTransition, duration: 0.2 },
+ opacity: { duration: 0.1 },
+ marginBottom: { ...springTransition, duration: 0.2 },
+ },
+ },
+ visible: {
+ height: 'auto',
+ opacity: 1,
+ marginBottom: 16,
+ transition: {
+ height: { ...springTransition, duration: 0.2 },
+ opacity: { duration: 0.15, delay: 0.05 },
+ marginBottom: { ...springTransition, duration: 0.2 },
+ },
+ },
+};
+
+/**
+ * Animation variants for forgot password link
+ */
+const forgotPasswordVariants = {
+ hidden: {
+ height: 0,
+ opacity: 0,
+ marginTop: 0,
+ transition: {
+ height: { ...springTransition, duration: 0.15 },
+ opacity: { duration: 0.1 },
+ marginTop: { ...springTransition, duration: 0.15 },
+ },
+ },
+ visible: {
+ height: 'auto',
+ opacity: 1,
+ marginTop: 8,
+ transition: {
+ height: { ...springTransition, duration: 0.15 },
+ opacity: { duration: 0.15, delay: 0.05 },
+ marginTop: { ...springTransition, duration: 0.15 },
+ },
+ },
+};
+
+/**
+ * AuthFormCard component
+ * @description Unified authentication card with animated transitions between Sign In and Register modes.
+ * @param {AuthFormCardProps} props - Component props
+ * @returns {JSX.Element} AuthFormCard element
+ */
+export function AuthFormCard({
+ initialMode = 'signin',
+ onSignIn,
+ onRegister,
+ onGoogleAuth,
+ onAzureAuth,
+ onForgotPassword,
+}: AuthFormCardProps): JSX.Element {
+ const [mode, setMode] = useState
+
+
+
+ {isRegister ? 'Already have an account?' : "Don't have an account?"}
+
+
+ {isRegister ? 'Sign In' : 'Register here'}
+
+
+
+ {/* Label */}
+
+
+ {/* Input Container */}
+
+ );
+ }
+);
+
diff --git a/src/components/auth/forgot-password-modal.tsx b/src/components/auth/forgot-password-modal.tsx
new file mode 100644
index 0000000..f5c9aaf
--- /dev/null
+++ b/src/components/auth/forgot-password-modal.tsx
@@ -0,0 +1,391 @@
+/**
+ * ForgotPasswordModal Component
+ * @description Modal dialog for password recovery with two steps:
+ * 1. Email input (forgot password)
+ * 2. OTP verification (verify your email)
+ * Features smooth animated transitions between steps.
+ * Follows AgenticIQ Enterprise Coding Guidelines v1.0
+ */
+
+import { useState, useRef, useEffect, type FormEvent, type KeyboardEvent, type ClipboardEvent } from 'react';
+import { motion, AnimatePresence, type Easing } from 'framer-motion';
+import { AuthInput, AuthButton } from './index';
+
+/**
+ * Modal step type - determines which view to show
+ */
+type ModalStep = 'email' | 'verify';
+
+/**
+ * Props for ForgotPasswordModal component
+ */
+interface ForgotPasswordModalProps {
+ /** Whether the modal is visible */
+ isOpen: boolean;
+ /** Callback when modal should close */
+ onClose: () => void;
+ /** Callback when email is submitted */
+ onSubmit?: (email: string) => void;
+ /** Callback when OTP is verified */
+ onVerify?: (otp: string) => void;
+}
+
+/**
+ * Close icon component
+ */
+function CloseIcon(): JSX.Element {
+ return (
+
+ );
+}
+
+/**
+ * Left arrow icon component
+ */
+function ArrowLeftIcon(): JSX.Element {
+ return (
+
+ );
+}
+
+/**
+ * Smooth easing curve for animations (cubic-bezier)
+ */
+const smoothEasing: Easing = [0.4, 0, 0.2, 1];
+
+/**
+ * OTP Input component for 6-digit verification code
+ */
+function OTPInput({
+ otp,
+ setOtp,
+}: {
+ otp: string[];
+ setOtp: React.Dispatch
+
+
+ {/* Password Toggle Icon */}
+ {isPasswordType && (
+
+ )}
+
+
+ {/* Error Message */}
+ {error && (
+ {error}
+ )} +
+ {otp.map((digit, index) => (
+ { inputRefs.current[index] = el; }}
+ type="text"
+ inputMode="numeric"
+ maxLength={1}
+ value={digit}
+ onChange={(e) => handleChange(index, e.target.value)}
+ onKeyDown={(e) => handleKeyDown(e, index)}
+ onPaste={handlePaste}
+ className="
+ w-[44px] h-[44px]
+ bg-[rgba(255,255,255,0.15)]
+ border border-[rgba(255,255,255,0.1)]
+ rounded-[8px]
+ text-center text-white text-[18px] font-medium
+ outline-none
+ focus:border-[rgba(255,255,255,0.4)]
+ focus:bg-[rgba(255,255,255,0.2)]
+ transition-all duration-200
+ "
+ placeholder="•"
+ aria-label={`Digit ${index + 1}`}
+ />
+ ))}
+
+ );
+}
+
+/**
+ * ForgotPasswordModal component
+ * @description Modal with smooth transitions between email input and OTP verification.
+ * @param {ForgotPasswordModalProps} props - Component props
+ * @returns {JSX.Element} ForgotPasswordModal element
+ */
+export function ForgotPasswordModal({
+ isOpen,
+ onClose,
+ onSubmit,
+ onVerify,
+}: ForgotPasswordModalProps): JSX.Element {
+ const [step, setStep] = useState
+ {/* Title Section */}
+
+
+ {/* Form Content */}
+
+
+
+
+
+
+
+ {/* Close Button */}
+
+ + {isEmailStep ? 'Forgot your password' : 'Verify Your Email'} +
++ {isEmailStep ? 'and continue' : 'Enter the 6-Digit Verification Code'} +
+
+
+ {isEmailStep ? (
+
+ setEmail(e.target.value)}
+ isRequired
+ autoComplete="email"
+ />
+
+ Submit
+
+
+ ) : (
+
+
+ Continue
+
+
+ )}
+
+
+
+ {/* Footer */}
+
+
+ );
+}
+
+/**
+ * BackgroundDecorations component
+ * @description Renders decorative background images matching Figma design.
+ * @returns {JSX.Element} Background decoration elements
+ */
+function BackgroundDecorations(): JSX.Element {
+ return (
+
+ );
+}
+
+/**
+ * LeftColumnText component
+ * @description Left side text content (heading and description).
+ * @returns {JSX.Element} Text elements positioned as per Figma
+ */
+function LeftColumnText(): JSX.Element {
+ return (
+ <>
+
+ {/* Decorative Background Elements */}
+
+
+ {/* Forgot Password Modal */}
+
+ 
+
+
+ {/* Left Side Text Content */}
+
+ {/* Left Column - Branding/Marketing Content */}
+
+
+
+ + Engineering the Future with Intelligent Agents +
++ Deploy intelligent agents that automate complex workflows, enhance decision-making, and scale your operations. Built for enterprise reliability with seamless integration capabilities. +
+ + ); +} + +/** + * LeftColumn component + * @description Empty container for left side content. + * @returns {JSX.Element} Left column container + */ +function LeftColumn(): JSX.Element { + return ( +
+ {/* Text content is positioned absolutely on page level */}
+
+ );
+}
diff --git a/src/pages/sign-in.tsx b/src/pages/sign-in.tsx
deleted file mode 100644
index 86eb94d..0000000
--- a/src/pages/sign-in.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Sign In Page
- * @description Basic sign-in form for existing users.
- */
-
-import { Link } from '@tanstack/react-router';
-
-export function SignInPage() {
- return (
-
-
- );
-}
-
diff --git a/src/routes.tsx b/src/routes.tsx
index a03eb0d..2bf20b3 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -8,8 +8,8 @@ import { RootLayout } from '@/components/layout';
import { AgentPage } from '@/pages/agent';
import { AgentCreatePage } from '@/pages/agent-create';
import { Dashboard } from '@/pages/dashboard';
-import { SignInPage } from '@/pages/sign-in';
import { SignUpPage } from '@/pages/sign-up';
+import { LoginPage } from '@/pages/login-page';
export const APP_PATHS = {
signIn: '/',
@@ -39,10 +39,10 @@ const appRoute = createRoute({
),
});
-const signInRoute = createRoute({
+const loginRoute = createRoute({
getParentRoute: () => publicRoute,
- path: APP_PATHS.signIn,
- component: SignInPage,
+ path: '/',
+ component: LoginPage,
});
const signUpRoute = createRoute({
@@ -83,9 +83,8 @@ const notFoundRoute = createRoute({
});
const routeTree = rootRoute.addChildren([
- publicRoute.addChildren([signInRoute, signUpRoute]),
- appRoute.addChildren([dashboardRoute, agentRoute, agentCreateRoute]),
- notFoundRoute,
+ publicRoute.addChildren([loginRoute, signUpRoute]),
+ appRoute.addChildren([dashboardRoute,agentRoute,agentCreateRoute,notFoundRoute]),
]);
export const router = createRouter({
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..8d6a9c5
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,14 @@
+///
-
-
- 
-
-
-
-
-
- Welcome back
-Sign in to continue to your dashboard.
-- New here?{' '} - - Create an account - -
-