@beyondcorp/beyond-ui 1.3.6 → 1.3.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Auth/AuthShowcase.js +5 -5
- package/dist/components/Auth/AuthShowcase.js.map +1 -1
- package/dist/components/Auth/LoginForm.d.ts +4 -1
- package/dist/components/Auth/LoginForm.example.js +1 -1
- package/dist/components/Auth/LoginForm.example.js.map +1 -1
- package/dist/components/Auth/LoginForm.js +6 -11
- package/dist/components/Auth/LoginForm.js.map +1 -1
- package/dist/components/Auth/SignupForm.d.ts +4 -1
- package/dist/components/Auth/SignupForm.example.js +1 -1
- package/dist/components/Auth/SignupForm.example.js.map +1 -1
- package/dist/components/Auth/SignupForm.js +6 -11
- package/dist/components/Auth/SignupForm.js.map +1 -1
- package/dist/components/ComponentShowcase/ComponentShowcase.js +21 -5
- package/dist/components/ComponentShowcase/ComponentShowcase.js.map +1 -1
- package/dist/components/DashboardHeader/DashboardHeader.js +22 -19
- package/dist/components/DashboardHeader/DashboardHeader.js.map +1 -1
- package/dist/components/DashboardLayout/DashboardLayout.js +23 -17
- package/dist/components/DashboardLayout/DashboardLayout.js.map +1 -1
- package/dist/components/Sidebar/Sidebar.js +9 -9
- package/dist/components/Sidebar/Sidebar.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -29,8 +29,8 @@ const codeExamples = {
|
|
|
29
29
|
function LoginPage() {
|
|
30
30
|
return (
|
|
31
31
|
<LoginForm
|
|
32
|
-
|
|
33
|
-
console.log('Login successful!');
|
|
32
|
+
onSubmit={async (data) => {
|
|
33
|
+
console.log('Login successful!', data);
|
|
34
34
|
// Redirect to dashboard
|
|
35
35
|
}}
|
|
36
36
|
onForgotPassword={() => {
|
|
@@ -44,8 +44,8 @@ function LoginPage() {
|
|
|
44
44
|
function SignupPage() {
|
|
45
45
|
return (
|
|
46
46
|
<SignupForm
|
|
47
|
-
|
|
48
|
-
console.log('Signup successful!');
|
|
47
|
+
onSubmit={async (data) => {
|
|
48
|
+
console.log('Signup successful!', data);
|
|
49
49
|
// Redirect to dashboard
|
|
50
50
|
}}
|
|
51
51
|
/>
|
|
@@ -98,7 +98,7 @@ const AuthShowcase = () => {
|
|
|
98
98
|
showToast.error('Failed to copy code');
|
|
99
99
|
}
|
|
100
100
|
};
|
|
101
|
-
return (jsx(AuthProvider, { children: jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: "Authentication Components" }), jsx("p", { className: "text-gray-600 mt-1", children: "Comprehensive authentication system with forms, validation, and protection" })] }), jsxs(Badge, { variant: "outline", className: "flex items-center", children: [jsx(Shield, { className: "h-4 w-4 mr-1" }), "Secure"] })] }), jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [jsxs(TabsList, { children: [jsxs(TabsTrigger, { value: "demo", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Demo"] }), jsxs(TabsTrigger, { value: "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code Examples"] }), jsxs(TabsTrigger, { value: "features", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Features"] })] }), jsx(TabsContent, { value: "demo", className: "mt-6", children: jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [jsx("div", { children: jsxs(Card, { children: [jsx(CardHeader, { children: jsxs("div", { className: "flex items-center justify-between", children: [jsx(CardTitle, { children: "Authentication Forms" }), jsxs("div", { className: "flex bg-gray-100 rounded-lg p-1", children: [jsxs(Button, { variant: authMode === 'login' ? 'primary' : 'ghost', size: "sm", onClick: () => setAuthMode('login'), children: [jsx(Lock, { className: "h-4 w-4 mr-1" }), "Login"] }), jsxs(Button, { variant: authMode === 'signup' ? 'primary' : 'ghost', size: "sm", onClick: () => setAuthMode('signup'), children: [jsx(UserPlus, { className: "h-4 w-4 mr-1" }), "Signup"] })] })] }) }), jsx(CardContent, { children: authMode === 'login' ? (jsx(LoginForm, {
|
|
101
|
+
return (jsx(AuthProvider, { children: jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: "Authentication Components" }), jsx("p", { className: "text-gray-600 mt-1", children: "Comprehensive authentication system with forms, validation, and protection" })] }), jsxs(Badge, { variant: "outline", className: "flex items-center", children: [jsx(Shield, { className: "h-4 w-4 mr-1" }), "Secure"] })] }), jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [jsxs(TabsList, { children: [jsxs(TabsTrigger, { value: "demo", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Demo"] }), jsxs(TabsTrigger, { value: "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code Examples"] }), jsxs(TabsTrigger, { value: "features", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Features"] })] }), jsx(TabsContent, { value: "demo", className: "mt-6", children: jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [jsx("div", { children: jsxs(Card, { children: [jsx(CardHeader, { children: jsxs("div", { className: "flex items-center justify-between", children: [jsx(CardTitle, { children: "Authentication Forms" }), jsxs("div", { className: "flex bg-gray-100 rounded-lg p-1", children: [jsxs(Button, { variant: authMode === 'login' ? 'primary' : 'ghost', size: "sm", onClick: () => setAuthMode('login'), children: [jsx(Lock, { className: "h-4 w-4 mr-1" }), "Login"] }), jsxs(Button, { variant: authMode === 'signup' ? 'primary' : 'ghost', size: "sm", onClick: () => setAuthMode('signup'), children: [jsx(UserPlus, { className: "h-4 w-4 mr-1" }), "Signup"] })] })] }) }), jsx(CardContent, { children: authMode === 'login' ? (jsx(LoginForm, { onSubmit: async () => { showToast.success('Login successful!'); }, onForgotPassword: () => showToast.info('Forgot password clicked'), onSignupClick: () => setAuthMode('signup') })) : (jsx(SignupForm, { onSubmit: async () => { showToast.success('Signup successful!'); }, onLoginClick: () => setAuthMode('login') })) })] }) }), jsx("div", { children: jsx(AuthStatus, {}) })] }) }), jsx(TabsContent, { value: "code", className: "mt-6", children: jsx("div", { className: "space-y-6", children: Object.entries(codeExamples).map(([key, code]) => (jsxs(Card, { children: [jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [jsxs(CardTitle, { className: "capitalize", children: [key, " Example"] }), jsx(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(code), children: "Copy Code" })] }), jsx(CardContent, { children: jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm", children: jsx("code", { children: code }) }) })] }, key))) }) }), jsx(TabsContent, { value: "features", className: "mt-6", children: jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "LoginForm Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Email/password validation with Zod schema" }), jsx("li", { children: "\u2022 Password visibility toggle" }), jsx("li", { children: "\u2022 \"Remember me\" functionality" }), jsx("li", { children: "\u2022 Loading states and error handling" }), jsx("li", { children: "\u2022 ARIA labels for accessibility" }), jsx("li", { children: "\u2022 Keyboard navigation support" }), jsx("li", { children: "\u2022 Demo credentials provided" })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "SignupForm Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Real-time form validation" }), jsx("li", { children: "\u2022 Password strength indicator" }), jsx("li", { children: "\u2022 Password confirmation matching" }), jsx("li", { children: "\u2022 Terms of service acceptance" }), jsx("li", { children: "\u2022 Email uniqueness validation" }), jsx("li", { children: "\u2022 Responsive design" }), jsx("li", { children: "\u2022 Error boundary protection" })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "AuthProvider Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Context-based state management" }), jsx("li", { children: "\u2022 Token persistence with cookies" }), jsx("li", { children: "\u2022 Automatic token refresh" }), jsx("li", { children: "\u2022 Session management" }), jsx("li", { children: "\u2022 Error handling and recovery" }), jsx("li", { children: "\u2022 TypeScript support" }), jsx("li", { children: "\u2022 Secure cookie configuration" })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "ProtectedRoute Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Authentication checking" }), jsx("li", { children: "\u2022 Role-based access control" }), jsx("li", { children: "\u2022 Automatic redirects" }), jsx("li", { children: "\u2022 Loading states" }), jsx("li", { children: "\u2022 Custom fallback components" }), jsx("li", { children: "\u2022 Location state preservation" }), jsx("li", { children: "\u2022 HOC pattern support" })] }) })] })] }) })] })] }) }));
|
|
102
102
|
};
|
|
103
103
|
|
|
104
104
|
export { AuthShowcase };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthShowcase.js","sources":["../../../src/components/Auth/AuthShowcase.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Shield, Lock, UserPlus, Eye, Code, Settings } from 'lucide-react';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Button } from '../Button';\nimport { Badge } from '../Badge';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\nimport { LoginForm } from './LoginForm';\nimport { SignupForm } from './SignupForm';\nimport { AuthProvider, useAuth } from '../../contexts/AuthContext';\nimport { showToast } from '../Toast';\n\n/**\n * Component to display current authentication state\n */\nconst AuthStatus: React.FC = () => {\n const { user, isAuthenticated, logout } = useAuth();\n\n if (!isAuthenticated || !user) {\n return (\n <Card>\n <CardContent className=\"p-6 text-center\">\n <Shield className=\"h-12 w-12 text-gray-400 mx-auto mb-4\" />\n <h3 className=\"text-lg font-semibold text-gray-900 mb-2\">\n Not Authenticated\n </h3>\n <p className=\"text-gray-600\">\n Please log in to see your authentication status\n </p>\n </CardContent>\n </Card>\n );\n }\n\n return (\n <Card>\n <CardHeader>\n <CardTitle className=\"flex items-center\">\n <Shield className=\"h-5 w-5 text-success-600 mr-2\" />\n Authentication Status\n </CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Status:</span>\n <Badge variant=\"success\">Authenticated</Badge>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">User:</span>\n <span className=\"text-sm text-gray-900\">{user.name}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Email:</span>\n <span className=\"text-sm text-gray-900\">{user.email}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Role:</span>\n <Badge variant=\"outline\">{user.role}</Badge>\n </div>\n <div className=\"pt-4 border-t\">\n <Button\n variant=\"outline\"\n onClick={logout}\n className=\"w-full\"\n >\n Sign Out\n </Button>\n </div>\n </CardContent>\n </Card>\n );\n};\n\n/**\n * Code examples for the authentication components\n */\nconst codeExamples = {\n login: `import { LoginForm } from '@/components/Auth';\n\nfunction LoginPage() {\n return (\n <LoginForm\n onSuccess={() => {\n console.log('Login successful!');\n // Redirect to dashboard\n }}\n onForgotPassword={() => {\n // Handle forgot password\n }}\n />\n );\n}`,\n signup: `import { SignupForm } from '@/components/Auth';\n\nfunction SignupPage() {\n return (\n <SignupForm\n onSuccess={() => {\n console.log('Signup successful!');\n // Redirect to dashboard\n }}\n />\n );\n}`,\n provider: `import { AuthProvider } from '@/contexts/AuthContext';\n\nfunction App() {\n return (\n <AuthProvider>\n <Router>\n <Routes>\n <Route path=\"/login\" element={<LoginPage />} />\n <Route path=\"/signup\" element={<SignupPage />} />\n <Route\n path=\"/dashboard\"\n element={\n <ProtectedRoute>\n <Dashboard />\n </ProtectedRoute>\n }\n />\n </Routes>\n </Router>\n </AuthProvider>\n );\n}`,\n protected: `import { ProtectedRoute } from '@/components/Auth';\n\nfunction AdminPanel() {\n return (\n <ProtectedRoute requiredRole=\"admin\">\n <div>Admin-only content</div>\n </ProtectedRoute>\n );\n}`,\n};\n\n/**\n * AuthShowcase component demonstrating all authentication features\n */\nexport const AuthShowcase: React.FC = () => {\n const [activeTab, setActiveTab] = useState('demo');\n const [authMode, setAuthMode] = useState<'login' | 'signup'>('login');\n\n const copyToClipboard = async (code: string) => {\n try {\n await navigator.clipboard.writeText(code);\n showToast.success('Code copied to clipboard!');\n } catch (err) {\n showToast.error('Failed to copy code');\n }\n };\n\n return (\n <AuthProvider>\n <div className=\"space-y-6\">\n {/* Header */}\n <div className=\"flex items-center justify-between\">\n <div>\n <h1 className=\"text-2xl font-bold text-gray-900\">Authentication Components</h1>\n <p className=\"text-gray-600 mt-1\">\n Comprehensive authentication system with forms, validation, and protection\n </p>\n </div>\n <Badge variant=\"outline\" className=\"flex items-center\">\n <Shield className=\"h-4 w-4 mr-1\" />\n Secure\n </Badge>\n </div>\n\n {/* Tabs */}\n <Tabs value={activeTab} onValueChange={setActiveTab}>\n <TabsList>\n <TabsTrigger value=\"demo\">\n <Eye className=\"h-4 w-4 mr-2\" />\n Demo\n </TabsTrigger>\n <TabsTrigger value=\"code\">\n <Code className=\"h-4 w-4 mr-2\" />\n Code Examples\n </TabsTrigger>\n <TabsTrigger value=\"features\">\n <Settings className=\"h-4 w-4 mr-2\" />\n Features\n </TabsTrigger>\n </TabsList>\n\n <TabsContent value=\"demo\" className=\"mt-6\">\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {/* Authentication Forms */}\n <div>\n <Card>\n <CardHeader>\n <div className=\"flex items-center justify-between\">\n <CardTitle>Authentication Forms</CardTitle>\n <div className=\"flex bg-gray-100 rounded-lg p-1\">\n <Button\n variant={authMode === 'login' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setAuthMode('login')}\n >\n <Lock className=\"h-4 w-4 mr-1\" />\n Login\n </Button>\n <Button\n variant={authMode === 'signup' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setAuthMode('signup')}\n >\n <UserPlus className=\"h-4 w-4 mr-1\" />\n Signup\n </Button>\n </div>\n </div>\n </CardHeader>\n <CardContent>\n {authMode === 'login' ? (\n <LoginForm\n onSuccess={() => showToast.success('Login successful!')}\n onForgotPassword={() => showToast.info('Forgot password clicked')}\n onSignupClick={() => setAuthMode('signup')}\n />\n ) : (\n <SignupForm\n onSuccess={() => showToast.success('Signup successful!')}\n onLoginClick={() => setAuthMode('login')}\n />\n )}\n </CardContent>\n </Card>\n </div>\n\n {/* Authentication Status */}\n <div>\n <AuthStatus />\n </div>\n </div>\n </TabsContent>\n\n <TabsContent value=\"code\" className=\"mt-6\">\n <div className=\"space-y-6\">\n {Object.entries(codeExamples).map(([key, code]) => (\n <Card key={key}>\n <CardHeader className=\"flex flex-row items-center justify-between\">\n <CardTitle className=\"capitalize\">{key} Example</CardTitle>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => copyToClipboard(code)}\n >\n Copy Code\n </Button>\n </CardHeader>\n <CardContent>\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm\">\n <code>{code}</code>\n </pre>\n </CardContent>\n </Card>\n ))}\n </div>\n </TabsContent>\n\n <TabsContent value=\"features\" className=\"mt-6\">\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <Card>\n <CardHeader>\n <CardTitle>LoginForm Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Email/password validation with Zod schema</li>\n <li>• Password visibility toggle</li>\n <li>• \"Remember me\" functionality</li>\n <li>• Loading states and error handling</li>\n <li>• ARIA labels for accessibility</li>\n <li>• Keyboard navigation support</li>\n <li>• Demo credentials provided</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>SignupForm Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Real-time form validation</li>\n <li>• Password strength indicator</li>\n <li>• Password confirmation matching</li>\n <li>• Terms of service acceptance</li>\n <li>• Email uniqueness validation</li>\n <li>• Responsive design</li>\n <li>• Error boundary protection</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>AuthProvider Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Context-based state management</li>\n <li>• Token persistence with cookies</li>\n <li>• Automatic token refresh</li>\n <li>• Session management</li>\n <li>• Error handling and recovery</li>\n <li>• TypeScript support</li>\n <li>• Secure cookie configuration</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>ProtectedRoute Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Authentication checking</li>\n <li>• Role-based access control</li>\n <li>• Automatic redirects</li>\n <li>• Loading states</li>\n <li>• Custom fallback components</li>\n <li>• Location state preservation</li>\n <li>• HOC pattern support</li>\n </ul>\n </CardContent>\n </Card>\n </div>\n </TabsContent>\n </Tabs>\n </div>\n </AuthProvider>\n );\n};"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AuthShowcase.js","sources":["../../../src/components/Auth/AuthShowcase.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Shield, Lock, UserPlus, Eye, Code, Settings } from 'lucide-react';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Button } from '../Button';\nimport { Badge } from '../Badge';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\nimport { LoginForm } from './LoginForm';\nimport { SignupForm } from './SignupForm';\nimport { AuthProvider, useAuth } from '../../contexts/AuthContext';\nimport { showToast } from '../Toast';\n\n/**\n * Component to display current authentication state\n */\nconst AuthStatus: React.FC = () => {\n const { user, isAuthenticated, logout } = useAuth();\n\n if (!isAuthenticated || !user) {\n return (\n <Card>\n <CardContent className=\"p-6 text-center\">\n <Shield className=\"h-12 w-12 text-gray-400 mx-auto mb-4\" />\n <h3 className=\"text-lg font-semibold text-gray-900 mb-2\">\n Not Authenticated\n </h3>\n <p className=\"text-gray-600\">\n Please log in to see your authentication status\n </p>\n </CardContent>\n </Card>\n );\n }\n\n return (\n <Card>\n <CardHeader>\n <CardTitle className=\"flex items-center\">\n <Shield className=\"h-5 w-5 text-success-600 mr-2\" />\n Authentication Status\n </CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Status:</span>\n <Badge variant=\"success\">Authenticated</Badge>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">User:</span>\n <span className=\"text-sm text-gray-900\">{user.name}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Email:</span>\n <span className=\"text-sm text-gray-900\">{user.email}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Role:</span>\n <Badge variant=\"outline\">{user.role}</Badge>\n </div>\n <div className=\"pt-4 border-t\">\n <Button\n variant=\"outline\"\n onClick={logout}\n className=\"w-full\"\n >\n Sign Out\n </Button>\n </div>\n </CardContent>\n </Card>\n );\n};\n\n/**\n * Code examples for the authentication components\n */\nconst codeExamples = {\n login: `import { LoginForm } from '@/components/Auth';\n\nfunction LoginPage() {\n return (\n <LoginForm\n onSubmit={async (data) => {\n console.log('Login successful!', data);\n // Redirect to dashboard\n }}\n onForgotPassword={() => {\n // Handle forgot password\n }}\n />\n );\n}`,\n signup: `import { SignupForm } from '@/components/Auth';\n\nfunction SignupPage() {\n return (\n <SignupForm\n onSubmit={async (data) => {\n console.log('Signup successful!', data);\n // Redirect to dashboard\n }}\n />\n );\n}`,\n provider: `import { AuthProvider } from '@/contexts/AuthContext';\n\nfunction App() {\n return (\n <AuthProvider>\n <Router>\n <Routes>\n <Route path=\"/login\" element={<LoginPage />} />\n <Route path=\"/signup\" element={<SignupPage />} />\n <Route\n path=\"/dashboard\"\n element={\n <ProtectedRoute>\n <Dashboard />\n </ProtectedRoute>\n }\n />\n </Routes>\n </Router>\n </AuthProvider>\n );\n}`,\n protected: `import { ProtectedRoute } from '@/components/Auth';\n\nfunction AdminPanel() {\n return (\n <ProtectedRoute requiredRole=\"admin\">\n <div>Admin-only content</div>\n </ProtectedRoute>\n );\n}`,\n};\n\n/**\n * AuthShowcase component demonstrating all authentication features\n */\nexport const AuthShowcase: React.FC = () => {\n const [activeTab, setActiveTab] = useState('demo');\n const [authMode, setAuthMode] = useState<'login' | 'signup'>('login');\n\n const copyToClipboard = async (code: string) => {\n try {\n await navigator.clipboard.writeText(code);\n showToast.success('Code copied to clipboard!');\n } catch (err) {\n showToast.error('Failed to copy code');\n }\n };\n\n return (\n <AuthProvider>\n <div className=\"space-y-6\">\n {/* Header */}\n <div className=\"flex items-center justify-between\">\n <div>\n <h1 className=\"text-2xl font-bold text-gray-900\">Authentication Components</h1>\n <p className=\"text-gray-600 mt-1\">\n Comprehensive authentication system with forms, validation, and protection\n </p>\n </div>\n <Badge variant=\"outline\" className=\"flex items-center\">\n <Shield className=\"h-4 w-4 mr-1\" />\n Secure\n </Badge>\n </div>\n\n {/* Tabs */}\n <Tabs value={activeTab} onValueChange={setActiveTab}>\n <TabsList>\n <TabsTrigger value=\"demo\">\n <Eye className=\"h-4 w-4 mr-2\" />\n Demo\n </TabsTrigger>\n <TabsTrigger value=\"code\">\n <Code className=\"h-4 w-4 mr-2\" />\n Code Examples\n </TabsTrigger>\n <TabsTrigger value=\"features\">\n <Settings className=\"h-4 w-4 mr-2\" />\n Features\n </TabsTrigger>\n </TabsList>\n\n <TabsContent value=\"demo\" className=\"mt-6\">\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {/* Authentication Forms */}\n <div>\n <Card>\n <CardHeader>\n <div className=\"flex items-center justify-between\">\n <CardTitle>Authentication Forms</CardTitle>\n <div className=\"flex bg-gray-100 rounded-lg p-1\">\n <Button\n variant={authMode === 'login' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setAuthMode('login')}\n >\n <Lock className=\"h-4 w-4 mr-1\" />\n Login\n </Button>\n <Button\n variant={authMode === 'signup' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setAuthMode('signup')}\n >\n <UserPlus className=\"h-4 w-4 mr-1\" />\n Signup\n </Button>\n </div>\n </div>\n </CardHeader>\n <CardContent>\n {authMode === 'login' ? (\n <LoginForm\n onSubmit={async () => { showToast.success('Login successful!'); }}\n onForgotPassword={() => showToast.info('Forgot password clicked')}\n onSignupClick={() => setAuthMode('signup')}\n />\n ) : (\n <SignupForm\n onSubmit={async () => { showToast.success('Signup successful!'); }}\n onLoginClick={() => setAuthMode('login')}\n />\n )}\n </CardContent>\n </Card>\n </div>\n\n {/* Authentication Status */}\n <div>\n <AuthStatus />\n </div>\n </div>\n </TabsContent>\n\n <TabsContent value=\"code\" className=\"mt-6\">\n <div className=\"space-y-6\">\n {Object.entries(codeExamples).map(([key, code]) => (\n <Card key={key}>\n <CardHeader className=\"flex flex-row items-center justify-between\">\n <CardTitle className=\"capitalize\">{key} Example</CardTitle>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => copyToClipboard(code)}\n >\n Copy Code\n </Button>\n </CardHeader>\n <CardContent>\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm\">\n <code>{code}</code>\n </pre>\n </CardContent>\n </Card>\n ))}\n </div>\n </TabsContent>\n\n <TabsContent value=\"features\" className=\"mt-6\">\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <Card>\n <CardHeader>\n <CardTitle>LoginForm Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Email/password validation with Zod schema</li>\n <li>• Password visibility toggle</li>\n <li>• \"Remember me\" functionality</li>\n <li>• Loading states and error handling</li>\n <li>• ARIA labels for accessibility</li>\n <li>• Keyboard navigation support</li>\n <li>• Demo credentials provided</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>SignupForm Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Real-time form validation</li>\n <li>• Password strength indicator</li>\n <li>• Password confirmation matching</li>\n <li>• Terms of service acceptance</li>\n <li>• Email uniqueness validation</li>\n <li>• Responsive design</li>\n <li>• Error boundary protection</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>AuthProvider Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Context-based state management</li>\n <li>• Token persistence with cookies</li>\n <li>• Automatic token refresh</li>\n <li>• Session management</li>\n <li>• Error handling and recovery</li>\n <li>• TypeScript support</li>\n <li>• Secure cookie configuration</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>ProtectedRoute Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Authentication checking</li>\n <li>• Role-based access control</li>\n <li>• Automatic redirects</li>\n <li>• Loading states</li>\n <li>• Custom fallback components</li>\n <li>• Location state preservation</li>\n <li>• HOC pattern support</li>\n </ul>\n </CardContent>\n </Card>\n </div>\n </TabsContent>\n </Tabs>\n </div>\n </AuthProvider>\n );\n};"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;AAWA;;AAEG;AACH,MAAM,UAAU,GAAa,MAAK;IAChC,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE;AAEnD,IAAA,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE;AAC7B,QAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EACHC,KAAC,WAAW,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CACtCD,GAAA,CAAC,MAAM,IAAC,SAAS,EAAC,sCAAsC,EAAA,CAAG,EAC3DA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,mBAAA,EAAA,CAEnD,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,iDAAA,EAAA,CAExB,CAAA,EAAA,CACQ,EAAA,CACT;IAEX;AAEA,IAAA,QACEC,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHD,IAAC,UAAU,EAAA,EAAA,QAAA,EACTC,IAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,mBAAmB,aACtCD,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,+BAA+B,EAAA,CAAG,EAAA,uBAAA,CAAA,EAAA,CAE1C,GACD,EACbC,IAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CAChCA,cAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mCAAmC,wBAAe,EAClEA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,eAAA,EAAA,CAAsB,IAC1C,EACNC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,EAChEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,IAAI,CAAC,IAAI,EAAA,CAAQ,CAAA,EAAA,CACtD,EACNC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,aAChDD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,EACjEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,IAAI,CAAC,KAAK,EAAA,CAAQ,CAAA,EAAA,CACvD,EACNC,cAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDD,cAAM,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,EAChEA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAE,IAAI,CAAC,IAAI,EAAA,CAAS,CAAA,EAAA,CACxC,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,YAC5BA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,MAAM,EACf,SAAS,EAAC,QAAQ,EAAA,QAAA,EAAA,UAAA,EAAA,CAGX,EAAA,CACL,CAAA,EAAA,CACM,CAAA,EAAA,CACT;AAEX,CAAC;AAED;;AAEG;AACH,MAAM,YAAY,GAAG;AACnB,IAAA,KAAK,EAAE,CAAA;;;;;;;;;;;;;;AAcP,CAAA,CAAA;AACA,IAAA,MAAM,EAAE,CAAA;;;;;;;;;;;AAWR,CAAA,CAAA;AACA,IAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;AAqBV,CAAA,CAAA;AACA,IAAA,SAAS,EAAE,CAAA;;;;;;;;AAQX,CAAA,CAAA;CACD;AAED;;AAEG;AACI,MAAM,YAAY,GAAa,MAAK;IACzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;IAClD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAqB,OAAO,CAAC;AAErE,IAAA,MAAM,eAAe,GAAG,OAAO,IAAY,KAAI;AAC7C,QAAA,IAAI;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AACzC,YAAA,SAAS,CAAC,OAAO,CAAC,2BAA2B,CAAC;QAChD;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,SAAS,CAAC,KAAK,CAAC,qBAAqB,CAAC;QACxC;AACF,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXC,cAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CAExBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,aAChDA,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACED,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,2BAAA,EAAA,CAA+B,EAC/EA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,4EAAA,EAAA,CAE7B,CAAA,EAAA,CACA,EACNC,IAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,CACpDD,GAAA,CAAC,MAAM,IAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,QAAA,CAAA,EAAA,CAE7B,CAAA,EAAA,CACJ,EAGNC,IAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,aACjDA,IAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACPA,IAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,MAAM,aACvBD,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,MAAA,CAAA,EAAA,CAEpB,EACdC,IAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA,QAAA,EAAA,CACvBD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,eAAA,CAAA,EAAA,CAErB,EACdC,IAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,UAAU,aAC3BD,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,UAAA,CAAA,EAAA,CAEzB,CAAA,EAAA,CACL,EAEXA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EACxCC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CAEpDD,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EACEC,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHD,GAAA,CAAC,UAAU,cACTC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,aAChDD,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,CAAiC,EAC3CC,cAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC9CA,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,QAAQ,KAAK,OAAO,GAAG,SAAS,GAAG,OAAO,EACnD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,WAAW,CAAC,OAAO,CAAC,EAAA,QAAA,EAAA,CAEnCD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,OAAA,CAAA,EAAA,CAE1B,EACTC,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,QAAQ,KAAK,QAAQ,GAAG,SAAS,GAAG,OAAO,EACpD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,WAAW,CAAC,QAAQ,CAAC,aAEpCD,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,QAAA,CAAA,EAAA,CAE9B,IACL,CAAA,EAAA,CACF,EAAA,CACK,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACT,QAAQ,KAAK,OAAO,IACnBA,GAAA,CAAC,SAAS,EAAA,EACR,QAAQ,EAAE,YAAW,EAAG,SAAS,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,EACjE,gBAAgB,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,yBAAyB,CAAC,EACjE,aAAa,EAAE,MAAM,WAAW,CAAC,QAAQ,CAAC,EAAA,CAC1C,KAEFA,GAAA,CAAC,UAAU,EAAA,EACT,QAAQ,EAAE,YAAW,EAAG,SAAS,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,EAClE,YAAY,EAAE,MAAM,WAAW,CAAC,OAAO,CAAC,EAAA,CACxC,CACH,EAAA,CACW,CAAA,EAAA,CACT,EAAA,CACH,EAGNA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,GACV,CAAA,EAAA,CACF,EAAA,CACM,EAEdA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACxCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EACvB,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,MAC5CC,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHA,KAAC,UAAU,EAAA,EAAC,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CAChEA,IAAA,CAAC,SAAS,IAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAAA,CAAE,GAAG,EAAA,UAAA,CAAA,EAAA,CAAqB,EAC3DD,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,eAAe,CAAC,IAAI,CAAC,0BAG7B,CAAA,EAAA,CACE,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kEAAkE,EAAA,QAAA,EAC/EA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,EAAA,CAAQ,GACf,EAAA,CACM,CAAA,EAAA,EAfL,GAAG,CAgBP,CACR,CAAC,EAAA,CACE,EAAA,CACM,EAEdA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAC5CC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpDA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHD,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,CAA+B,EAAA,CAC9B,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVC,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7CD,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,kDAAA,EAAA,CAAoD,EACpDA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,CAAqC,EACrCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,CAAsC,EACtCA,mEAA4C,EAC5CA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,CAAwC,EACxCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,CAAsC,EACtCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,kCAAA,EAAA,CAAoC,CAAA,EAAA,CACjC,EAAA,CACO,CAAA,EAAA,CACT,EAEPC,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHD,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,sCAAgC,EAAA,CAC/B,EACbA,GAAA,CAAC,WAAW,cACVC,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iCAAiC,aAC7CD,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,kCAAA,EAAA,CAAoC,EACpCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,CAAsC,EACtCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,uCAAA,EAAA,CAAyC,EACzCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,CAAsC,EACtCA,6DAAsC,EACtCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,CAA4B,EAC5BA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,kCAAA,EAAA,CAAoC,IACjC,EAAA,CACO,CAAA,EAAA,CACT,EAEPC,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHD,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAkC,EAAA,CACjC,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVC,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7CD,gEAAyC,EACzCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,uCAAA,EAAA,CAAyC,EACzCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,CAAkC,EAClCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,CAA6B,EAC7BA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,CAAsC,EACtCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,CAA6B,EAC7BA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,CAAsC,CAAA,EAAA,CACnC,GACO,CAAA,EAAA,CACT,EAEPC,IAAA,CAAC,IAAI,eACHD,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,CAAoC,EAAA,CACnC,EACbA,IAAC,WAAW,EAAA,EAAA,QAAA,EACVC,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7CD,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,CAAkC,EAClCA,2DAAoC,EACpCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,CAA8B,EAC9BA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAyB,EACzBA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,CAAqC,EACrCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,CAAsC,EACtCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,CAA8B,CAAA,EAAA,CAC3B,EAAA,CACO,CAAA,EAAA,CACT,IACH,EAAA,CACM,CAAA,EAAA,CACT,CAAA,EAAA,CACH,EAAA,CACO;AAEnB;;;;"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { type LoginFormData } from '../../utils/validation';
|
|
2
3
|
interface LoginFormProps {
|
|
3
4
|
className?: string;
|
|
4
|
-
|
|
5
|
+
onSubmit: (data: LoginFormData) => Promise<void>;
|
|
6
|
+
isLoading?: boolean;
|
|
7
|
+
error?: string | null;
|
|
5
8
|
onForgotPassword?: () => void;
|
|
6
9
|
onSignupClick?: () => void;
|
|
7
10
|
}
|
|
@@ -3,7 +3,7 @@ import { LoginForm } from './LoginForm.js';
|
|
|
3
3
|
import { Card, CardHeader, CardTitle, CardContent } from '../Card/Card.js';
|
|
4
4
|
import { AuthProvider } from '../../contexts/AuthContext.js';
|
|
5
5
|
|
|
6
|
-
const LoginFormExample = () => (jsx(AuthProvider, { children: jsx("div", { className: "flex items-center justify-center min-h-[400px] bg-background", children: jsxs(Card, { className: "w-full max-w-md", children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Login" }) }), jsx(CardContent, { children: jsx(LoginForm, {}) })] }) }) }));
|
|
6
|
+
const LoginFormExample = () => (jsx(AuthProvider, { children: jsx("div", { className: "flex items-center justify-center min-h-[400px] bg-background", children: jsxs(Card, { className: "w-full max-w-md", children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Login" }) }), jsx(CardContent, { children: jsx(LoginForm, { onSubmit: async (data) => console.log('Login submitted:', data) }) })] }) }) }));
|
|
7
7
|
|
|
8
8
|
export { LoginFormExample };
|
|
9
9
|
//# sourceMappingURL=LoginForm.example.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoginForm.example.js","sources":["../../../src/components/Auth/LoginForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { LoginForm } from \"./LoginForm\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { AuthProvider } from \"../../contexts/AuthContext\";\n\nexport const LoginFormExample: React.FC = () => (\n <AuthProvider>\n <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\n <Card className=\"w-full max-w-md\">\n <CardHeader>\n <CardTitle>Login</CardTitle>\n </CardHeader>\n <CardContent>\n
|
|
1
|
+
{"version":3,"file":"LoginForm.example.js","sources":["../../../src/components/Auth/LoginForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { LoginForm } from \"./LoginForm\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { AuthProvider } from \"../../contexts/AuthContext\";\n\nexport const LoginFormExample: React.FC = () => (\n <AuthProvider>\n <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\n <Card className=\"w-full max-w-md\">\n <CardHeader>\n <CardTitle>Login</CardTitle>\n </CardHeader>\n <CardContent>\n <LoginForm onSubmit={async (data) => console.log('Login submitted:', data)} />\n </CardContent>\n </Card>\n </div>\n </AuthProvider>\n);"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKO,MAAM,gBAAgB,GAAa,OACxCA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAC3EC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC/BD,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAkB,EAAA,CACjB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACZA,GAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,IAAI,CAAC,EAAA,CAAI,EAAA,CAChE,CAAA,EAAA,CACT,EAAA,CACH,EAAA,CACO;;;;"}
|
|
@@ -9,14 +9,12 @@ import { Input } from '../Input/Input.js';
|
|
|
9
9
|
import { Checkbox } from '../Checkbox/Checkbox.js';
|
|
10
10
|
import { Alert, AlertDescription } from '../Alert/Alert.js';
|
|
11
11
|
import { Spinner } from '../Spinner/Spinner.js';
|
|
12
|
-
import { useAuth } from '../../contexts/AuthContext.js';
|
|
13
12
|
import { loginSchema } from '../../utils/validation.js';
|
|
14
13
|
|
|
15
14
|
/**
|
|
16
15
|
* LoginForm component with validation and accessibility features
|
|
17
16
|
*/
|
|
18
|
-
const LoginForm = ({ className,
|
|
19
|
-
const { login, isLoading, error, clearError } = useAuth();
|
|
17
|
+
const LoginForm = ({ className, onSubmit, isLoading, error, onForgotPassword, onSignupClick, }) => {
|
|
20
18
|
const [showPassword, setShowPassword] = useState(false);
|
|
21
19
|
const { register, handleSubmit, formState: { errors, isSubmitting }, reset, } = useForm({
|
|
22
20
|
resolver: zodResolver(loginSchema),
|
|
@@ -26,22 +24,19 @@ const LoginForm = ({ className, onSuccess, onForgotPassword, onSignupClick, }) =
|
|
|
26
24
|
rememberMe: false,
|
|
27
25
|
},
|
|
28
26
|
});
|
|
29
|
-
const
|
|
27
|
+
const handleFormSubmit = async (data) => {
|
|
30
28
|
try {
|
|
31
|
-
|
|
32
|
-
await login(data);
|
|
29
|
+
await onSubmit(data);
|
|
33
30
|
reset();
|
|
34
|
-
onSuccess?.();
|
|
35
31
|
}
|
|
36
|
-
catch (
|
|
37
|
-
|
|
38
|
-
console.error('Login failed:', error);
|
|
32
|
+
catch (err) {
|
|
33
|
+
console.error('Login failed:', err);
|
|
39
34
|
}
|
|
40
35
|
};
|
|
41
36
|
const togglePasswordVisibility = () => {
|
|
42
37
|
setShowPassword(prev => !prev);
|
|
43
38
|
};
|
|
44
|
-
return (jsx("div", { className: cn('w-full max-w-md mx-auto', className), children: jsxs("div", { className: "bg-white rounded-lg shadow-lg p-8", children: [jsxs("div", { className: "text-center mb-8", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Welcome Back" }), jsx("p", { className: "text-gray-600", children: "Sign in to your account to continue" })] }), error && (jsxs(Alert, { variant: "danger", className: "mb-6", children: [jsx(AlertCircle, { className: "h-4 w-4" }), jsx(AlertDescription, { children: error })] })), jsxs("form", { onSubmit: handleSubmit(
|
|
39
|
+
return (jsx("div", { className: cn('w-full max-w-md mx-auto', className), children: jsxs("div", { className: "bg-white rounded-lg shadow-lg p-8", children: [jsxs("div", { className: "text-center mb-8", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Welcome Back" }), jsx("p", { className: "text-gray-600", children: "Sign in to your account to continue" })] }), error && (jsxs(Alert, { variant: "danger", className: "mb-6", children: [jsx(AlertCircle, { className: "h-4 w-4" }), jsx(AlertDescription, { children: error })] })), jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), className: "space-y-6", children: [jsxs("div", { children: [jsx("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-2", children: "Email Address" }), jsxs("div", { className: "relative", children: [jsx(Mail, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "email", type: "email", placeholder: "Enter your email", className: cn('pl-10', errors.email && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.email ? 'true' : 'false', "aria-describedby": errors.email ? 'email-error' : undefined, ...register('email') })] }), errors.email && (jsx("p", { id: "email-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.email.message }))] }), jsxs("div", { children: [jsx("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700 mb-2", children: "Password" }), jsxs("div", { className: "relative", children: [jsx(Lock, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "password", type: showPassword ? 'text' : 'password', placeholder: "Enter your password", className: cn('pl-10 pr-10', errors.password && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.password ? 'true' : 'false', "aria-describedby": errors.password ? 'password-error' : undefined, ...register('password') }), jsx("button", { type: "button", onClick: togglePasswordVisibility, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? (jsx(EyeOff, { className: "h-5 w-5" })) : (jsx(Eye, { className: "h-5 w-5" })) })] }), errors.password && (jsx("p", { id: "password-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.password.message }))] }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("label", { className: "flex items-center", children: [jsx(Checkbox, { ...register('rememberMe') }), jsx("span", { className: "ml-2 text-sm text-gray-600", children: "Remember me" })] }), jsx("button", { type: "button", onClick: onForgotPassword, className: "text-sm text-primary-600 hover:text-primary-500 font-medium", children: "Forgot password?" })] }), jsx(Button, { type: "submit", variant: "primary", className: "w-full", disabled: isSubmitting || isLoading, children: isSubmitting || isLoading ? (jsxs(Fragment, { children: [jsx(Spinner, { size: "sm", className: "mr-2" }), "Signing in..."] })) : ('Sign In') })] }), jsxs("div", { className: "mt-6 p-4 bg-gray-50 rounded-lg", children: [jsx("p", { className: "text-sm text-gray-600 mb-2 font-medium", children: "Demo Credentials:" }), jsxs("p", { className: "text-xs text-gray-500", children: ["Email: admin@example.com", jsx("br", {}), "Password: Password123!"] })] }), jsx("div", { className: "mt-6 text-center", children: jsxs("p", { className: "text-sm text-gray-600", children: ["Don't have an account?", ' ', jsx("button", { type: "button", onClick: onSignupClick, className: "text-primary-600 hover:text-primary-500 font-medium", children: "Sign up" })] }) })] }) }));
|
|
45
40
|
};
|
|
46
41
|
|
|
47
42
|
export { LoginForm };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoginForm.js","sources":["../../../src/components/Auth/LoginForm.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Eye, EyeOff, Mail, Lock, AlertCircle } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Input } from '../Input';\nimport { Checkbox } from '../Checkbox';\nimport { Alert, AlertDescription } from '../Alert';\nimport { Spinner } from '../Spinner';\nimport { useAuth } from '../../contexts/AuthContext';\nimport { loginSchema, type LoginFormData } from '../../utils/validation';\n\ninterface LoginFormProps {\n className?: string;\n onSuccess?: () => void;\n onForgotPassword?: () => void;\n onSignupClick?: () => void;\n}\n\n/**\n * LoginForm component with validation and accessibility features\n */\nexport const LoginForm: React.FC<LoginFormProps> = ({\n className,\n onSuccess,\n onForgotPassword,\n onSignupClick,\n}) => {\n const { login, isLoading, error, clearError } = useAuth();\n const [showPassword, setShowPassword] = useState(false);\n\n const {\n register,\n handleSubmit,\n formState: { errors, isSubmitting },\n reset,\n } = useForm<LoginFormData>({\n resolver: zodResolver(loginSchema),\n defaultValues: {\n email: '',\n password: '',\n rememberMe: false,\n },\n });\n\n const onSubmit = async (data: LoginFormData) => {\n try {\n clearError();\n await login(data);\n reset();\n onSuccess?.();\n } catch (error) {\n // Error is handled by the auth context\n console.error('Login failed:', error);\n }\n };\n\n const togglePasswordVisibility = () => {\n setShowPassword(prev => !prev);\n };\n\n return (\n <div className={cn('w-full max-w-md mx-auto', className)}>\n <div className=\"bg-white rounded-lg shadow-lg p-8\">\n {/* Header */}\n <div className=\"text-center mb-8\">\n <h1 className=\"text-2xl font-bold text-gray-900 mb-2\">\n Welcome Back\n </h1>\n <p className=\"text-gray-600\">\n Sign in to your account to continue\n </p>\n </div>\n\n {/* Error Alert */}\n {error && (\n <Alert variant=\"danger\" className=\"mb-6\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n )}\n\n {/* Login Form */}\n <form onSubmit={handleSubmit(onSubmit)} className=\"space-y-6\">\n {/* Email Field */}\n <div>\n <label\n htmlFor=\"email\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Email Address\n </label>\n <div className=\"relative\">\n <Mail className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n className={cn(\n 'pl-10',\n errors.email && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.email ? 'true' : 'false'}\n aria-describedby={errors.email ? 'email-error' : undefined}\n {...register('email')}\n />\n </div>\n {errors.email && (\n <p\n id=\"email-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.email.message}\n </p>\n )}\n </div>\n\n {/* Password Field */}\n <div>\n <label\n htmlFor=\"password\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"password\"\n type={showPassword ? 'text' : 'password'}\n placeholder=\"Enter your password\"\n className={cn(\n 'pl-10 pr-10',\n errors.password && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.password ? 'true' : 'false'}\n aria-describedby={errors.password ? 'password-error' : undefined}\n {...register('password')}\n />\n <button\n type=\"button\"\n onClick={togglePasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showPassword ? 'Hide password' : 'Show password'}\n >\n {showPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n {errors.password && (\n <p\n id=\"password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.password.message}\n </p>\n )}\n </div>\n\n {/* Remember Me & Forgot Password */}\n <div className=\"flex items-center justify-between\">\n <label className=\"flex items-center\">\n <Checkbox {...register('rememberMe')} />\n <span className=\"ml-2 text-sm text-gray-600\">Remember me</span>\n </label>\n <button\n type=\"button\"\n onClick={onForgotPassword}\n className=\"text-sm text-primary-600 hover:text-primary-500 font-medium\"\n >\n Forgot password?\n </button>\n </div>\n\n {/* Submit Button */}\n <Button\n type=\"submit\"\n variant=\"primary\"\n className=\"w-full\"\n disabled={isSubmitting || isLoading}\n >\n {isSubmitting || isLoading ? (\n <>\n <Spinner size=\"sm\" className=\"mr-2\" />\n Signing in...\n </>\n ) : (\n 'Sign In'\n )}\n </Button>\n </form>\n\n {/* Demo Credentials */}\n <div className=\"mt-6 p-4 bg-gray-50 rounded-lg\">\n <p className=\"text-sm text-gray-600 mb-2 font-medium\">Demo Credentials:</p>\n <p className=\"text-xs text-gray-500\">\n Email: admin@example.com<br />\n Password: Password123!\n </p>\n </div>\n\n {/* Sign Up Link */}\n <div className=\"mt-6 text-center\">\n <p className=\"text-sm text-gray-600\">\n Don't have an account?{' '}\n <button\n type=\"button\"\n onClick={onSignupClick}\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Sign up\n </button>\n </p>\n </div>\n </div>\n </div>\n );\n};"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LoginForm.js","sources":["../../../src/components/Auth/LoginForm.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Eye, EyeOff, Mail, Lock, AlertCircle } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Input } from '../Input';\nimport { Checkbox } from '../Checkbox';\nimport { Alert, AlertDescription } from '../Alert';\nimport { Spinner } from '../Spinner';\nimport { loginSchema, type LoginFormData } from '../../utils/validation';\n\ninterface LoginFormProps {\n className?: string;\n onSubmit: (data: LoginFormData) => Promise<void>;\n isLoading?: boolean;\n error?: string | null;\n onForgotPassword?: () => void;\n onSignupClick?: () => void;\n}\n\n/**\n * LoginForm component with validation and accessibility features\n */\nexport const LoginForm: React.FC<LoginFormProps> = ({\n className,\n onSubmit,\n isLoading,\n error,\n onForgotPassword,\n onSignupClick,\n}) => {\n const [showPassword, setShowPassword] = useState(false);\n\n const {\n register,\n handleSubmit,\n formState: { errors, isSubmitting },\n reset,\n } = useForm<LoginFormData>({\n resolver: zodResolver(loginSchema),\n defaultValues: {\n email: '',\n password: '',\n rememberMe: false,\n },\n });\n\n const handleFormSubmit = async (data: LoginFormData) => {\n try {\n await onSubmit(data);\n reset();\n } catch (err) {\n console.error('Login failed:', err);\n }\n };\n\n const togglePasswordVisibility = () => {\n setShowPassword(prev => !prev);\n };\n\n return (\n <div className={cn('w-full max-w-md mx-auto', className)}>\n <div className=\"bg-white rounded-lg shadow-lg p-8\">\n {/* Header */}\n <div className=\"text-center mb-8\">\n <h1 className=\"text-2xl font-bold text-gray-900 mb-2\">\n Welcome Back\n </h1>\n <p className=\"text-gray-600\">\n Sign in to your account to continue\n </p>\n </div>\n\n {/* Error Alert */}\n {error && (\n <Alert variant=\"danger\" className=\"mb-6\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n )}\n\n {/* Login Form */}\n <form onSubmit={handleSubmit(handleFormSubmit)} className=\"space-y-6\">\n {/* Email Field */}\n <div>\n <label\n htmlFor=\"email\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Email Address\n </label>\n <div className=\"relative\">\n <Mail className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n className={cn(\n 'pl-10',\n errors.email && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.email ? 'true' : 'false'}\n aria-describedby={errors.email ? 'email-error' : undefined}\n {...register('email')}\n />\n </div>\n {errors.email && (\n <p\n id=\"email-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.email.message}\n </p>\n )}\n </div>\n\n {/* Password Field */}\n <div>\n <label\n htmlFor=\"password\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"password\"\n type={showPassword ? 'text' : 'password'}\n placeholder=\"Enter your password\"\n className={cn(\n 'pl-10 pr-10',\n errors.password && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.password ? 'true' : 'false'}\n aria-describedby={errors.password ? 'password-error' : undefined}\n {...register('password')}\n />\n <button\n type=\"button\"\n onClick={togglePasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showPassword ? 'Hide password' : 'Show password'}\n >\n {showPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n {errors.password && (\n <p\n id=\"password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.password.message}\n </p>\n )}\n </div>\n\n {/* Remember Me & Forgot Password */}\n <div className=\"flex items-center justify-between\">\n <label className=\"flex items-center\">\n <Checkbox {...register('rememberMe')} />\n <span className=\"ml-2 text-sm text-gray-600\">Remember me</span>\n </label>\n <button\n type=\"button\"\n onClick={onForgotPassword}\n className=\"text-sm text-primary-600 hover:text-primary-500 font-medium\"\n >\n Forgot password?\n </button>\n </div>\n\n {/* Submit Button */}\n <Button\n type=\"submit\"\n variant=\"primary\"\n className=\"w-full\"\n disabled={isSubmitting || isLoading}\n >\n {isSubmitting || isLoading ? (\n <>\n <Spinner size=\"sm\" className=\"mr-2\" />\n Signing in...\n </>\n ) : (\n 'Sign In'\n )}\n </Button>\n </form>\n\n {/* Demo Credentials */}\n <div className=\"mt-6 p-4 bg-gray-50 rounded-lg\">\n <p className=\"text-sm text-gray-600 mb-2 font-medium\">Demo Credentials:</p>\n <p className=\"text-xs text-gray-500\">\n Email: admin@example.com<br />\n Password: Password123!\n </p>\n </div>\n\n {/* Sign Up Link */}\n <div className=\"mt-6 text-center\">\n <p className=\"text-sm text-gray-600\">\n Don't have an account?{' '}\n <button\n type=\"button\"\n onClick={onSignupClick}\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Sign up\n </button>\n </p>\n </div>\n </div>\n </div>\n );\n};"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { type SignupFormData } from '../../utils/validation';
|
|
2
3
|
interface SignupFormProps {
|
|
3
4
|
className?: string;
|
|
4
|
-
|
|
5
|
+
onSubmit: (data: SignupFormData) => Promise<void>;
|
|
6
|
+
isLoading?: boolean;
|
|
7
|
+
error?: string | null;
|
|
5
8
|
onLoginClick?: () => void;
|
|
6
9
|
}
|
|
7
10
|
/**
|
|
@@ -3,7 +3,7 @@ import { SignupForm } from './SignupForm.js';
|
|
|
3
3
|
import { Card, CardHeader, CardTitle, CardContent } from '../Card/Card.js';
|
|
4
4
|
import { AuthProvider } from '../../contexts/AuthContext.js';
|
|
5
5
|
|
|
6
|
-
const SignupFormExample = () => (jsx(AuthProvider, { children: jsx("div", { className: "flex items-center justify-center min-h-[400px] bg-background", children: jsxs(Card, { className: "w-full max-w-md", children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Sign Up" }) }), jsx(CardContent, { children: jsx(SignupForm, {}) })] }) }) }));
|
|
6
|
+
const SignupFormExample = () => (jsx(AuthProvider, { children: jsx("div", { className: "flex items-center justify-center min-h-[400px] bg-background", children: jsxs(Card, { className: "w-full max-w-md", children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Sign Up" }) }), jsx(CardContent, { children: jsx(SignupForm, { onSubmit: async (data) => console.log('Signup submitted:', data) }) })] }) }) }));
|
|
7
7
|
|
|
8
8
|
export { SignupFormExample };
|
|
9
9
|
//# sourceMappingURL=SignupForm.example.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SignupForm.example.js","sources":["../../../src/components/Auth/SignupForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { SignupForm } from \"./SignupForm\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { AuthProvider } from \"../../contexts/AuthContext\";\n\nexport const SignupFormExample: React.FC = () => (\n <AuthProvider>\n <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\n <Card className=\"w-full max-w-md\">\n <CardHeader>\n <CardTitle>Sign Up</CardTitle>\n </CardHeader>\n <CardContent>\n
|
|
1
|
+
{"version":3,"file":"SignupForm.example.js","sources":["../../../src/components/Auth/SignupForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { SignupForm } from \"./SignupForm\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { AuthProvider } from \"../../contexts/AuthContext\";\n\nexport const SignupFormExample: React.FC = () => (\n <AuthProvider>\n <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\n <Card className=\"w-full max-w-md\">\n <CardHeader>\n <CardTitle>Sign Up</CardTitle>\n </CardHeader>\n <CardContent>\n <SignupForm onSubmit={async (data) => console.log('Signup submitted:', data)} />\n </CardContent>\n </Card>\n </div>\n </AuthProvider>\n);"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKO,MAAM,iBAAiB,GAAa,OACzCA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAC3EC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC/BD,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAoB,EAAA,CACnB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACZA,GAAA,CAAC,UAAU,EAAA,EAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,EAAA,CAAI,EAAA,CAClE,CAAA,EAAA,CACT,EAAA,CACH,EAAA,CACO;;;;"}
|
|
@@ -10,14 +10,12 @@ import { Checkbox } from '../Checkbox/Checkbox.js';
|
|
|
10
10
|
import { Alert, AlertDescription } from '../Alert/Alert.js';
|
|
11
11
|
import { Spinner } from '../Spinner/Spinner.js';
|
|
12
12
|
import { Badge } from '../Badge/Badge.js';
|
|
13
|
-
import { useAuth } from '../../contexts/AuthContext.js';
|
|
14
13
|
import { signupSchema, calculatePasswordStrength } from '../../utils/validation.js';
|
|
15
14
|
|
|
16
15
|
/**
|
|
17
16
|
* SignupForm component with real-time validation and password strength indicator
|
|
18
17
|
*/
|
|
19
|
-
const SignupForm = ({ className,
|
|
20
|
-
const { signup, isLoading, error, clearError } = useAuth();
|
|
18
|
+
const SignupForm = ({ className, onSubmit, isLoading, error, onLoginClick, }) => {
|
|
21
19
|
const [showPassword, setShowPassword] = useState(false);
|
|
22
20
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
23
21
|
const { register, handleSubmit, watch, formState: { errors, isSubmitting }, reset, } = useForm({
|
|
@@ -33,16 +31,13 @@ const SignupForm = ({ className, onSuccess, onLoginClick, }) => {
|
|
|
33
31
|
});
|
|
34
32
|
const password = watch('password');
|
|
35
33
|
const passwordStrength = password ? calculatePasswordStrength(password) : null;
|
|
36
|
-
const
|
|
34
|
+
const handleFormSubmit = async (data) => {
|
|
37
35
|
try {
|
|
38
|
-
|
|
39
|
-
await signup(data);
|
|
36
|
+
await onSubmit(data);
|
|
40
37
|
reset();
|
|
41
|
-
onSuccess?.();
|
|
42
38
|
}
|
|
43
|
-
catch (
|
|
44
|
-
|
|
45
|
-
console.error('Signup failed:', error);
|
|
39
|
+
catch (err) {
|
|
40
|
+
console.error('Signup failed:', err);
|
|
46
41
|
}
|
|
47
42
|
};
|
|
48
43
|
const togglePasswordVisibility = () => {
|
|
@@ -51,7 +46,7 @@ const SignupForm = ({ className, onSuccess, onLoginClick, }) => {
|
|
|
51
46
|
const toggleConfirmPasswordVisibility = () => {
|
|
52
47
|
setShowConfirmPassword(prev => !prev);
|
|
53
48
|
};
|
|
54
|
-
return (jsx("div", { className: cn('w-full max-w-md mx-auto', className), children: jsxs("div", { className: "bg-white rounded-lg shadow-lg p-8", children: [jsxs("div", { className: "text-center mb-8", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Create Account" }), jsx("p", { className: "text-gray-600", children: "Join us today and get started" })] }), error && (jsxs(Alert, { variant: "danger", className: "mb-6", children: [jsx(AlertCircle, { className: "h-4 w-4" }), jsx(AlertDescription, { children: error })] })), jsxs("form", { onSubmit: handleSubmit(
|
|
49
|
+
return (jsx("div", { className: cn('w-full max-w-md mx-auto', className), children: jsxs("div", { className: "bg-white rounded-lg shadow-lg p-8", children: [jsxs("div", { className: "text-center mb-8", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Create Account" }), jsx("p", { className: "text-gray-600", children: "Join us today and get started" })] }), error && (jsxs(Alert, { variant: "danger", className: "mb-6", children: [jsx(AlertCircle, { className: "h-4 w-4" }), jsx(AlertDescription, { children: error })] })), jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), className: "space-y-6", children: [jsxs("div", { children: [jsx("label", { htmlFor: "name", className: "block text-sm font-medium text-gray-700 mb-2", children: "Full Name" }), jsxs("div", { className: "relative", children: [jsx(User, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "name", type: "text", placeholder: "Enter your full name", className: cn('pl-10', errors.name && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.name ? 'true' : 'false', "aria-describedby": errors.name ? 'name-error' : undefined, ...register('name') })] }), errors.name && (jsx("p", { id: "name-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.name.message }))] }), jsxs("div", { children: [jsx("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-2", children: "Email Address" }), jsxs("div", { className: "relative", children: [jsx(Mail, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "email", type: "email", placeholder: "Enter your email", className: cn('pl-10', errors.email && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.email ? 'true' : 'false', "aria-describedby": errors.email ? 'email-error' : undefined, ...register('email') })] }), errors.email && (jsx("p", { id: "email-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.email.message }))] }), jsxs("div", { children: [jsx("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700 mb-2", children: "Password" }), jsxs("div", { className: "relative", children: [jsx(Lock, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "password", type: showPassword ? 'text' : 'password', placeholder: "Create a strong password", className: cn('pl-10 pr-10', errors.password && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.password ? 'true' : 'false', "aria-describedby": errors.password ? 'password-error password-strength' : 'password-strength', ...register('password') }), jsx("button", { type: "button", onClick: togglePasswordVisibility, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? (jsx(EyeOff, { className: "h-5 w-5" })) : (jsx(Eye, { className: "h-5 w-5" })) })] }), password && passwordStrength && (jsxs("div", { id: "password-strength", className: "mt-2", children: [jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsx("span", { className: "text-xs text-gray-600", children: "Password strength:" }), jsx(Badge, { variant: passwordStrength.color === 'success' ? 'success' :
|
|
55
50
|
passwordStrength.color === 'warning' ? 'warning' : 'danger', className: "text-xs", children: passwordStrength.label })] }), jsx("div", { className: "w-full bg-gray-200 rounded-full h-2", children: jsx("div", { className: cn('h-2 rounded-full transition-all duration-300', passwordStrength.color === 'success' && 'bg-success-500', passwordStrength.color === 'warning' && 'bg-warning-500', passwordStrength.color === 'danger' && 'bg-danger-500'), style: { width: `${(passwordStrength.score / 6) * 100}%` } }) })] })), errors.password && (jsx("p", { id: "password-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.password.message }))] }), jsxs("div", { children: [jsx("label", { htmlFor: "confirmPassword", className: "block text-sm font-medium text-gray-700 mb-2", children: "Confirm Password" }), jsxs("div", { className: "relative", children: [jsx(Lock, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "confirmPassword", type: showConfirmPassword ? 'text' : 'password', placeholder: "Confirm your password", className: cn('pl-10 pr-10', errors.confirmPassword && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.confirmPassword ? 'true' : 'false', "aria-describedby": errors.confirmPassword ? 'confirm-password-error' : undefined, ...register('confirmPassword') }), jsx("button", { type: "button", onClick: toggleConfirmPasswordVisibility, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600", "aria-label": showConfirmPassword ? 'Hide password' : 'Show password', children: showConfirmPassword ? (jsx(EyeOff, { className: "h-5 w-5" })) : (jsx(Eye, { className: "h-5 w-5" })) })] }), errors.confirmPassword && (jsx("p", { id: "confirm-password-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.confirmPassword.message }))] }), jsxs("div", { children: [jsxs("label", { className: "flex items-start", children: [jsx(Checkbox, { className: "mt-1", ...register('acceptTerms'), "aria-invalid": errors.acceptTerms ? 'true' : 'false', "aria-describedby": errors.acceptTerms ? 'terms-error' : undefined }), jsxs("span", { className: "ml-2 text-sm text-gray-600", children: ["I agree to the", ' ', jsx("a", { href: "#", className: "text-primary-600 hover:text-primary-500 font-medium", children: "Terms of Service" }), ' ', "and", ' ', jsx("a", { href: "#", className: "text-primary-600 hover:text-primary-500 font-medium", children: "Privacy Policy" })] })] }), errors.acceptTerms && (jsx("p", { id: "terms-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.acceptTerms.message }))] }), jsx(Button, { type: "submit", variant: "primary", className: "w-full", disabled: isSubmitting || isLoading, children: isSubmitting || isLoading ? (jsxs(Fragment, { children: [jsx(Spinner, { size: "sm", className: "mr-2" }), "Creating account..."] })) : ('Create Account') })] }), jsx("div", { className: "mt-6 text-center", children: jsxs("p", { className: "text-sm text-gray-600", children: ["Already have an account?", ' ', jsx("button", { type: "button", onClick: onLoginClick, className: "text-primary-600 hover:text-primary-500 font-medium", children: "Sign in" })] }) })] }) }));
|
|
56
51
|
};
|
|
57
52
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SignupForm.js","sources":["../../../src/components/Auth/SignupForm.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Eye, EyeOff, Mail, Lock, User, AlertCircle, Check } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Input } from '../Input';\nimport { Checkbox } from '../Checkbox';\nimport { Alert, AlertDescription } from '../Alert';\nimport { Spinner } from '../Spinner';\nimport { Badge } from '../Badge';\nimport { useAuth } from '../../contexts/AuthContext';\nimport { signupSchema, type SignupFormData, calculatePasswordStrength } from '../../utils/validation';\n\ninterface SignupFormProps {\n className?: string;\n onSuccess?: () => void;\n onLoginClick?: () => void;\n}\n\n/**\n * SignupForm component with real-time validation and password strength indicator\n */\nexport const SignupForm: React.FC<SignupFormProps> = ({\n className,\n onSuccess,\n onLoginClick,\n}) => {\n const { signup, isLoading, error, clearError } = useAuth();\n const [showPassword, setShowPassword] = useState(false);\n const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n\n const {\n register,\n handleSubmit,\n watch,\n formState: { errors, isSubmitting },\n reset,\n } = useForm<SignupFormData>({\n resolver: zodResolver(signupSchema),\n defaultValues: {\n name: '',\n email: '',\n password: '',\n confirmPassword: '',\n acceptTerms: false,\n },\n mode: 'onChange',\n });\n\n const password = watch('password');\n const passwordStrength = password ? calculatePasswordStrength(password) : null;\n\n const onSubmit = async (data: SignupFormData) => {\n try {\n clearError();\n await signup(data);\n reset();\n onSuccess?.();\n } catch (error) {\n // Error is handled by the auth context\n console.error('Signup failed:', error);\n }\n };\n\n const togglePasswordVisibility = () => {\n setShowPassword(prev => !prev);\n };\n\n const toggleConfirmPasswordVisibility = () => {\n setShowConfirmPassword(prev => !prev);\n };\n\n return (\n <div className={cn('w-full max-w-md mx-auto', className)}>\n <div className=\"bg-white rounded-lg shadow-lg p-8\">\n {/* Header */}\n <div className=\"text-center mb-8\">\n <h1 className=\"text-2xl font-bold text-gray-900 mb-2\">\n Create Account\n </h1>\n <p className=\"text-gray-600\">\n Join us today and get started\n </p>\n </div>\n\n {/* Error Alert */}\n {error && (\n <Alert variant=\"danger\" className=\"mb-6\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n )}\n\n {/* Signup Form */}\n <form onSubmit={handleSubmit(onSubmit)} className=\"space-y-6\">\n {/* Name Field */}\n <div>\n <label\n htmlFor=\"name\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Full Name\n </label>\n <div className=\"relative\">\n <User className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"name\"\n type=\"text\"\n placeholder=\"Enter your full name\"\n className={cn(\n 'pl-10',\n errors.name && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.name ? 'true' : 'false'}\n aria-describedby={errors.name ? 'name-error' : undefined}\n {...register('name')}\n />\n </div>\n {errors.name && (\n <p\n id=\"name-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.name.message}\n </p>\n )}\n </div>\n\n {/* Email Field */}\n <div>\n <label\n htmlFor=\"email\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Email Address\n </label>\n <div className=\"relative\">\n <Mail className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n className={cn(\n 'pl-10',\n errors.email && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.email ? 'true' : 'false'}\n aria-describedby={errors.email ? 'email-error' : undefined}\n {...register('email')}\n />\n </div>\n {errors.email && (\n <p\n id=\"email-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.email.message}\n </p>\n )}\n </div>\n\n {/* Password Field */}\n <div>\n <label\n htmlFor=\"password\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"password\"\n type={showPassword ? 'text' : 'password'}\n placeholder=\"Create a strong password\"\n className={cn(\n 'pl-10 pr-10',\n errors.password && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.password ? 'true' : 'false'}\n aria-describedby={errors.password ? 'password-error password-strength' : 'password-strength'}\n {...register('password')}\n />\n <button\n type=\"button\"\n onClick={togglePasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showPassword ? 'Hide password' : 'Show password'}\n >\n {showPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n \n {/* Password Strength Indicator */}\n {password && passwordStrength && (\n <div id=\"password-strength\" className=\"mt-2\">\n <div className=\"flex items-center justify-between mb-1\">\n <span className=\"text-xs text-gray-600\">Password strength:</span>\n <Badge\n variant={\n passwordStrength.color === 'success' ? 'success' :\n passwordStrength.color === 'warning' ? 'warning' : 'danger'\n }\n className=\"text-xs\"\n >\n {passwordStrength.label}\n </Badge>\n </div>\n <div className=\"w-full bg-gray-200 rounded-full h-2\">\n <div\n className={cn(\n 'h-2 rounded-full transition-all duration-300',\n passwordStrength.color === 'success' && 'bg-success-500',\n passwordStrength.color === 'warning' && 'bg-warning-500',\n passwordStrength.color === 'danger' && 'bg-danger-500'\n )}\n style={{ width: `${(passwordStrength.score / 6) * 100}%` }}\n />\n </div>\n </div>\n )}\n \n {errors.password && (\n <p\n id=\"password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.password.message}\n </p>\n )}\n </div>\n\n {/* Confirm Password Field */}\n <div>\n <label\n htmlFor=\"confirmPassword\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Confirm Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"confirmPassword\"\n type={showConfirmPassword ? 'text' : 'password'}\n placeholder=\"Confirm your password\"\n className={cn(\n 'pl-10 pr-10',\n errors.confirmPassword && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.confirmPassword ? 'true' : 'false'}\n aria-describedby={errors.confirmPassword ? 'confirm-password-error' : undefined}\n {...register('confirmPassword')}\n />\n <button\n type=\"button\"\n onClick={toggleConfirmPasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showConfirmPassword ? 'Hide password' : 'Show password'}\n >\n {showConfirmPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n {errors.confirmPassword && (\n <p\n id=\"confirm-password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.confirmPassword.message}\n </p>\n )}\n </div>\n\n {/* Terms of Service */}\n <div>\n <label className=\"flex items-start\">\n <Checkbox\n className=\"mt-1\"\n {...register('acceptTerms')}\n aria-invalid={errors.acceptTerms ? 'true' : 'false'}\n aria-describedby={errors.acceptTerms ? 'terms-error' : undefined}\n />\n <span className=\"ml-2 text-sm text-gray-600\">\n I agree to the{' '}\n <a\n href=\"#\"\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Terms of Service\n </a>{' '}\n and{' '}\n <a\n href=\"#\"\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Privacy Policy\n </a>\n </span>\n </label>\n {errors.acceptTerms && (\n <p\n id=\"terms-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.acceptTerms.message}\n </p>\n )}\n </div>\n\n {/* Submit Button */}\n <Button\n type=\"submit\"\n variant=\"primary\"\n className=\"w-full\"\n disabled={isSubmitting || isLoading}\n >\n {isSubmitting || isLoading ? (\n <>\n <Spinner size=\"sm\" className=\"mr-2\" />\n Creating account...\n </>\n ) : (\n 'Create Account'\n )}\n </Button>\n </form>\n\n {/* Login Link */}\n <div className=\"mt-6 text-center\">\n <p className=\"text-sm text-gray-600\">\n Already have an account?{' '}\n <button\n type=\"button\"\n onClick={onLoginClick}\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Sign in\n </button>\n </p>\n </div>\n </div>\n </div>\n );\n};"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SignupForm.js","sources":["../../../src/components/Auth/SignupForm.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Eye, EyeOff, Mail, Lock, User, AlertCircle, Check } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Input } from '../Input';\nimport { Checkbox } from '../Checkbox';\nimport { Alert, AlertDescription } from '../Alert';\nimport { Spinner } from '../Spinner';\nimport { Badge } from '../Badge';\nimport { signupSchema, type SignupFormData, calculatePasswordStrength } from '../../utils/validation';\n\ninterface SignupFormProps {\n className?: string;\n onSubmit: (data: SignupFormData) => Promise<void>;\n isLoading?: boolean;\n error?: string | null;\n onLoginClick?: () => void;\n}\n\n/**\n * SignupForm component with real-time validation and password strength indicator\n */\nexport const SignupForm: React.FC<SignupFormProps> = ({\n className,\n onSubmit,\n isLoading,\n error,\n onLoginClick,\n}) => {\n const [showPassword, setShowPassword] = useState(false);\n const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n\n const {\n register,\n handleSubmit,\n watch,\n formState: { errors, isSubmitting },\n reset,\n } = useForm<SignupFormData>({\n resolver: zodResolver(signupSchema),\n defaultValues: {\n name: '',\n email: '',\n password: '',\n confirmPassword: '',\n acceptTerms: false,\n },\n mode: 'onChange',\n });\n\n const password = watch('password');\n const passwordStrength = password ? calculatePasswordStrength(password) : null;\n\n const handleFormSubmit = async (data: SignupFormData) => {\n try {\n await onSubmit(data);\n reset();\n } catch (err) {\n console.error('Signup failed:', err);\n }\n };\n\n const togglePasswordVisibility = () => {\n setShowPassword(prev => !prev);\n };\n\n const toggleConfirmPasswordVisibility = () => {\n setShowConfirmPassword(prev => !prev);\n };\n\n return (\n <div className={cn('w-full max-w-md mx-auto', className)}>\n <div className=\"bg-white rounded-lg shadow-lg p-8\">\n {/* Header */}\n <div className=\"text-center mb-8\">\n <h1 className=\"text-2xl font-bold text-gray-900 mb-2\">\n Create Account\n </h1>\n <p className=\"text-gray-600\">\n Join us today and get started\n </p>\n </div>\n\n {/* Error Alert */}\n {error && (\n <Alert variant=\"danger\" className=\"mb-6\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n )}\n\n {/* Signup Form */}\n <form onSubmit={handleSubmit(handleFormSubmit)} className=\"space-y-6\">\n {/* Name Field */}\n <div>\n <label\n htmlFor=\"name\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Full Name\n </label>\n <div className=\"relative\">\n <User className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"name\"\n type=\"text\"\n placeholder=\"Enter your full name\"\n className={cn(\n 'pl-10',\n errors.name && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.name ? 'true' : 'false'}\n aria-describedby={errors.name ? 'name-error' : undefined}\n {...register('name')}\n />\n </div>\n {errors.name && (\n <p\n id=\"name-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.name.message}\n </p>\n )}\n </div>\n\n {/* Email Field */}\n <div>\n <label\n htmlFor=\"email\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Email Address\n </label>\n <div className=\"relative\">\n <Mail className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n className={cn(\n 'pl-10',\n errors.email && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.email ? 'true' : 'false'}\n aria-describedby={errors.email ? 'email-error' : undefined}\n {...register('email')}\n />\n </div>\n {errors.email && (\n <p\n id=\"email-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.email.message}\n </p>\n )}\n </div>\n\n {/* Password Field */}\n <div>\n <label\n htmlFor=\"password\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"password\"\n type={showPassword ? 'text' : 'password'}\n placeholder=\"Create a strong password\"\n className={cn(\n 'pl-10 pr-10',\n errors.password && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.password ? 'true' : 'false'}\n aria-describedby={errors.password ? 'password-error password-strength' : 'password-strength'}\n {...register('password')}\n />\n <button\n type=\"button\"\n onClick={togglePasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showPassword ? 'Hide password' : 'Show password'}\n >\n {showPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n \n {/* Password Strength Indicator */}\n {password && passwordStrength && (\n <div id=\"password-strength\" className=\"mt-2\">\n <div className=\"flex items-center justify-between mb-1\">\n <span className=\"text-xs text-gray-600\">Password strength:</span>\n <Badge\n variant={\n passwordStrength.color === 'success' ? 'success' :\n passwordStrength.color === 'warning' ? 'warning' : 'danger'\n }\n className=\"text-xs\"\n >\n {passwordStrength.label}\n </Badge>\n </div>\n <div className=\"w-full bg-gray-200 rounded-full h-2\">\n <div\n className={cn(\n 'h-2 rounded-full transition-all duration-300',\n passwordStrength.color === 'success' && 'bg-success-500',\n passwordStrength.color === 'warning' && 'bg-warning-500',\n passwordStrength.color === 'danger' && 'bg-danger-500'\n )}\n style={{ width: `${(passwordStrength.score / 6) * 100}%` }}\n />\n </div>\n </div>\n )}\n \n {errors.password && (\n <p\n id=\"password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.password.message}\n </p>\n )}\n </div>\n\n {/* Confirm Password Field */}\n <div>\n <label\n htmlFor=\"confirmPassword\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Confirm Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"confirmPassword\"\n type={showConfirmPassword ? 'text' : 'password'}\n placeholder=\"Confirm your password\"\n className={cn(\n 'pl-10 pr-10',\n errors.confirmPassword && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.confirmPassword ? 'true' : 'false'}\n aria-describedby={errors.confirmPassword ? 'confirm-password-error' : undefined}\n {...register('confirmPassword')}\n />\n <button\n type=\"button\"\n onClick={toggleConfirmPasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showConfirmPassword ? 'Hide password' : 'Show password'}\n >\n {showConfirmPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n {errors.confirmPassword && (\n <p\n id=\"confirm-password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.confirmPassword.message}\n </p>\n )}\n </div>\n\n {/* Terms of Service */}\n <div>\n <label className=\"flex items-start\">\n <Checkbox\n className=\"mt-1\"\n {...register('acceptTerms')}\n aria-invalid={errors.acceptTerms ? 'true' : 'false'}\n aria-describedby={errors.acceptTerms ? 'terms-error' : undefined}\n />\n <span className=\"ml-2 text-sm text-gray-600\">\n I agree to the{' '}\n <a\n href=\"#\"\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Terms of Service\n </a>{' '}\n and{' '}\n <a\n href=\"#\"\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Privacy Policy\n </a>\n </span>\n </label>\n {errors.acceptTerms && (\n <p\n id=\"terms-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.acceptTerms.message}\n </p>\n )}\n </div>\n\n {/* Submit Button */}\n <Button\n type=\"submit\"\n variant=\"primary\"\n className=\"w-full\"\n disabled={isSubmitting || isLoading}\n >\n {isSubmitting || isLoading ? (\n <>\n <Spinner size=\"sm\" className=\"mr-2\" />\n Creating account...\n </>\n ) : (\n 'Create Account'\n )}\n </Button>\n </form>\n\n {/* Login Link */}\n <div className=\"mt-6 text-center\">\n <p className=\"text-sm text-gray-600\">\n Already have an account?{' '}\n <button\n type=\"button\"\n onClick={onLoginClick}\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Sign in\n </button>\n </p>\n </div>\n </div>\n </div>\n );\n};"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|