function ColorScheme({ theme = "light", onThemeChange }) { const colorSchemes = { light: { primary: "#C8A052", primaryHover: "#B08D3A", primaryDark: "#97783A", background: "#FFFFFF", backgroundAlt: "#F8F9FA", backgroundDark: "#E5E7EB", text: "#1A1F2E", textMuted: "#4A5568", border: "#E5E7EB", success: "#22C55E", error: "#EF4444", warning: "#F59E0B" }, dark: { primary: "#C8A052", primaryHover: "#B08D3A", primaryDark: "#97783A", background: "#1A1F2E", backgroundAlt: "#2D364B", backgroundDark: "#151923", text: "#FFFFFF", textMuted: "#9CA3AF", border: "#2D364B", success: "#22C55E", error: "#EF4444", warning: "#F59E0B" } }; const currentScheme = colorSchemes[theme]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, ` :root { --color-primary: ${currentScheme.primary}; --color-primary-hover: ${currentScheme.primaryHover}; --color-primary-dark: ${currentScheme.primaryDark}; --color-background: ${currentScheme.background}; --color-background-alt: ${currentScheme.backgroundAlt}; --color-background-dark: ${currentScheme.backgroundDark}; --color-text: ${currentScheme.text}; --color-text-muted: ${currentScheme.textMuted}; --color-border: ${currentScheme.border}; --color-success: ${currentScheme.success}; --color-error: ${currentScheme.error}; --color-warning: ${currentScheme.warning}; } .logo-large { height: 80px; width: auto; } .logo-medium { height: 60px; width: auto; } .logo-small { height: 40px; width: auto; } .brand-heading { font-family: 'Inter', sans-serif; color: var(--color-text); font-weight: 700; } .brand-subheading { font-family: 'Inter', sans-serif; color: var(--color-primary); font-weight: 500; } body { background-color: var(--color-background); color: var(--color-text); font-family: 'Inter', sans-serif; } .bg-primary { background-color: var(--color-primary); } .bg-background { background-color: var(--color-background); } .bg-background-alt { background-color: var(--color-background-alt); } .text-primary { color: var(--color-primary); } .text-muted { color: var(--color-text-muted); } .border-color { border-color: var(--color-border); } `), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 p-4 bg-background-alt rounded-lg", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-muted", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, "Current Theme:"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onThemeChange(theme === "light" ? "dark" : "light"), className: "px-4 py-2 bg-primary text-white rounded hover:bg-[var(--color-primary-hover)]", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, theme === "light" ? "Switch to Dark" : "Switch to Light")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "Logo Sizes"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-muted mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "Large Logo"), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/8fc4586c-cb38-4654-930d-e25b44cf2dce/-/format/auto/", alt: "Bledsoe Investment Management LLP", className: "logo-large", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-muted mb-2", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "Medium Logo"), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/8fc4586c-cb38-4654-930d-e25b44cf2dce/-/format/auto/", alt: "Bledsoe Investment Management LLP", className: "logo-medium", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-muted mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "Small Logo"), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/8fc4586c-cb38-4654-930d-e25b44cf2dce/-/format/auto/", alt: "Bledsoe Investment Management LLP", className: "logo-small", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4 mt-8", __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this }, Object.entries(currentScheme).map(([name, color])=>/*#__PURE__*/ React.createElement("div", { key: name, className: "p-4 bg-background-alt rounded-lg", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-12 rounded mb-2", style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-muted", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "text-xs font-mono", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, color))))); } function ColorSchemeStory() { const [theme, setTheme] = useState("light"); return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 154, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, "Color Scheme Component"), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, "Light Theme"), /*#__PURE__*/ React.createElement(ColorScheme, { theme: "light", onThemeChange: setTheme, __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, "Dark Theme"), /*#__PURE__*/ React.createElement(ColorScheme, { theme: "dark", onThemeChange: setTheme, __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this }, "Interactive Demo"), /*#__PURE__*/ React.createElement(ColorScheme, { theme: theme, onThemeChange: setTheme, __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this })))); } function MainComponent() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const { signInWithCredentials } = useAuth(); const handleSubmit = async (e)=>{ e.preventDefault(); // Trim whitespace from email to prevent login issues const trimmedEmail = email.trim(); // Basic validation if (!trimmedEmail || !password) { setError("Email and password are required"); return; } setLoading(true); setError(null); try { await signInWithCredentials({ email: trimmedEmail, password, callbackUrl: "/dashboard", redirect: true }); } catch (error) { console.error("Sign in error:", error); // More user-friendly error messages const errorMessage = error.message?.toLowerCase() || ""; if (errorMessage.includes("credentials")) { setError("Invalid email or password"); } else if (errorMessage.includes("network")) { setError("Network error. Please check your connection and try again."); } else { setError("Failed to sign in. Please try again."); } } finally{ setLoading(false); } }; // Prevent multiple form submissions const isSubmitDisabled = loading || !email.trim() || !password; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0A1525] bg-pattern flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full space-y-8 bg-[#1A2435]/95 backdrop-blur-sm p-8 rounded-xl border border-[#C8A052]/20", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse flex justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-16 w-32 bg-gray-700 rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/c5c1e2c4-e53c-4cdf-b9a8-c8983c30aec4/-/format/auto/", alt: "Sports Finance Exchange Logo", className: "mx-auto h-16 w-auto", width: "128", height: "64", loading: "eager", fetchPriority: "high", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mt-6 text-center text-4xl font-extrabold brand-heading", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Sign in to your account"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-center text-lg text-[var(--color-text-muted)]", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Welcome back to Bledsoe Investment Management LLP")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 sm:mx-auto sm:w-full sm:max-w-md", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[var(--color-background)] py-8 px-4 shadow-xl sm:rounded-lg sm:px-10 border-2 border-[var(--color-border)]", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, noValidate: true, __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "rounded-md bg-red-50 p-4 animate-fade-in", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 83, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "h-5 w-5 text-red-400", viewBox: "0 0 20 20", fill: "currentColor", __source: { fileName: "", lineNumber: 84, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd", __source: { fileName: "", lineNumber: 89, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 96, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-700", __source: { fileName: "", lineNumber: 97, columnNumber: 23 }, __self: this }, error)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-[var(--color-text)]", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, "Email address"), /*#__PURE__*/ React.createElement("div", { className: "mt-1", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "email", name: "email", type: "email", autoComplete: "email", required: true, value: email, onChange: (e)=>setEmail(e.target.value), className: "appearance-none block w-full px-3 py-2 border border-[var(--color-border)] rounded-md shadow-sm placeholder-[var(--color-text-muted)] focus:outline-none focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] sm:text-sm bg-[var(--color-background)] text-[var(--color-text)]", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-sm font-medium text-[var(--color-text)]", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("div", { className: "mt-1", __source: { fileName: "", lineNumber: 131, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "password", name: "password", type: "password", autoComplete: "current-password", required: true, value: password, onChange: (e)=>setPassword(e.target.value), className: "appearance-none block w-full px-3 py-2 border border-[var(--color-border)] rounded-md shadow-sm placeholder-[var(--color-text-muted)] focus:outline-none focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] sm:text-sm bg-[var(--color-background)] text-[var(--color-text)]", __source: { fileName: "", lineNumber: 132, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmitDisabled, className: "w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--color-primary)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 152, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2", __source: { fileName: "", lineNumber: 153, columnNumber: 23 }, __self: this }), "Signing in...") : "Sign in"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full border-t border-[var(--color-border)]", __source: { fileName: "", lineNumber: 166, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative flex justify-center text-sm", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "px-2 bg-[var(--color-background)] text-[var(--color-text-muted)]", __source: { fileName: "", lineNumber: 169, columnNumber: 19 }, __self: this }, "Or"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-center", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-hover)]", __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this }, "Don't have an account? Sign up")))))))); }