@sudobility/building_blocks 0.0.26 → 0.0.28

package/dist/components/pages/index.d.ts

@@ -2,3 +2,5 @@ export { AppSitemapPage } from './app-sitemap-page';
 export type { AppSitemapPageProps, SitemapPageText, SitemapSection, SitemapLink, LanguageOption, QuickLink, } from './app-sitemap-page';
 export { AppTextPage } from './app-text-page';
 export type { AppTextPageProps, TextPageContent, TextSection, TextSectionWithContent, TextSectionWithList, TextSectionWithSubsections, TextPageContact, TextPageContactInfo, GdprNotice, } from './app-text-page';
+export { LoginPage } from './login-page';
+export type { LoginPageProps, LoginPageText } from './login-page';

package/dist/components/pages/login-page.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react';
+import { type Auth } from 'firebase/auth';
+/**
+ * Props for the LoginPage component
+ */
+export interface LoginPageProps {
+    /** Application name displayed as the main title */
+    appName: string;
+    /** Optional logo element to display above the title */
+    logo?: ReactNode;
+    /** Firebase Auth instance */
+    auth: Auth;
+    /** Callback fired on successful authentication */
+    onSuccess: () => void;
+    /** Whether to show Google sign-in option (default: true) */
+    showGoogleSignIn?: boolean;
+    /** Whether to show sign-up option (default: true) */
+    showSignUp?: boolean;
+    /** Custom className for the container */
+    className?: string;
+    /** Custom primary color class (default: 'primary') */
+    primaryColorClass?: string;
+}
+/**
+ * Text content for the LoginPage
+ */
+export interface LoginPageText {
+    signIn: string;
+    signUp: string;
+    createAccount: string;
+    signInToAccount: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    passwordLabel: string;
+    passwordPlaceholder: string;
+    orContinueWith: string;
+    signInWithGoogle: string;
+    alreadyHaveAccount: string;
+    dontHaveAccount: string;
+}
+/**
+ * A reusable login page component with email/password and Google sign-in support.
+ *
+ * @example
+ * ```tsx
+ * import { LoginPage } from '@sudobility/building_blocks';
+ * import { getFirebaseAuth } from '@sudobility/auth_lib';
+ *
+ * function MyLoginPage() {
+ *   const navigate = useNavigate();
+ *   const auth = getFirebaseAuth();
+ *
+ *   return (
+ *     <LoginPage
+ *       appName="My App"
+ *       auth={auth}
+ *       onSuccess={() => navigate('/')}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function LoginPage({ appName, logo, auth, onSuccess, showGoogleSignIn, showSignUp, className, primaryColorClass, }: LoginPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -6,6 +6,7 @@ import { twMerge } from "tailwind-merge";
 import { ChevronDownIcon, CalendarDaysIcon, PaintBrushIcon, ChevronLeftIcon, LanguageIcon, ChevronRightIcon, EnvelopeIcon, DocumentTextIcon, CogIcon, HomeIcon } from "@heroicons/react/24/outline";
 import { GRADIENT_CLASSES, textVariants } from "@sudobility/design";
 import { cva } from "class-variance-authority";
+import { createUserWithEmailAndPassword, signInWithEmailAndPassword, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -5146,6 +5147,275 @@ const AppTextPage = ({
   }
   return content;
 };
+function GoogleIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+        fill: "#4285F4"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+        fill: "#34A853"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+        fill: "#FBBC05"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+        fill: "#EA4335"
+      }
+    )
+  ] });
+}
+const defaultText = {
+  signIn: "Sign in",
+  signUp: "Sign up",
+  createAccount: "Create your account",
+  signInToAccount: "Sign in to your account",
+  emailLabel: "Email address",
+  emailPlaceholder: "",
+  passwordLabel: "Password",
+  passwordPlaceholder: "",
+  orContinueWith: "Or continue with",
+  signInWithGoogle: "Sign in with Google",
+  alreadyHaveAccount: "Already have an account?",
+  dontHaveAccount: "Don't have an account?"
+};
+function LoginPage({
+  appName,
+  logo,
+  auth,
+  onSuccess,
+  showGoogleSignIn = true,
+  showSignUp = true,
+  className = "",
+  primaryColorClass = "primary"
+}) {
+  const [isSignUp, setIsSignUp] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setIsLoading(true);
+    try {
+      if (!auth) throw new Error("Firebase not configured");
+      if (isSignUp && showSignUp) {
+        await createUserWithEmailAndPassword(auth, email, password);
+      } else {
+        await signInWithEmailAndPassword(auth, email, password);
+      }
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Authentication failed");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleGoogleSignIn = async () => {
+    setError(null);
+    setIsLoading(true);
+    try {
+      if (!auth) throw new Error("Firebase not configured");
+      const provider = new GoogleAuthProvider();
+      await signInWithPopup(auth, provider);
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Google sign-in failed");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const text = defaultText;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 ${className}`,
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-md w-full space-y-8", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          logo && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: logo }),
+          /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: `text-center text-3xl font-bold text-${primaryColorClass}-600`,
+              children: appName
+            }
+          ),
+          /* @__PURE__ */ jsx("h2", { className: "mt-6 text-center text-2xl font-semibold text-gray-900", children: isSignUp && showSignUp ? text.createAccount : text.signInToAccount })
+        ] }),
+        /* @__PURE__ */ jsxs("form", { className: "mt-8 space-y-6", onSubmit: handleSubmit, children: [
+          error && /* @__PURE__ */ jsx("div", { className: "bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-md text-sm", children: error }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: "email",
+                  className: "block text-sm font-medium text-gray-700",
+                  children: text.emailLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: "email",
+                  name: "email",
+                  type: "email",
+                  autoComplete: "email",
+                  required: true,
+                  value: email,
+                  onChange: (e) => setEmail(e.target.value),
+                  placeholder: text.emailPlaceholder,
+                  className: `mt-1 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-${primaryColorClass}-500 focus:border-${primaryColorClass}-500 sm:text-sm`
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: "password",
+                  className: "block text-sm font-medium text-gray-700",
+                  children: text.passwordLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: "password",
+                  name: "password",
+                  type: "password",
+                  autoComplete: isSignUp ? "new-password" : "current-password",
+                  required: true,
+                  value: password,
+                  onChange: (e) => setPassword(e.target.value),
+                  placeholder: text.passwordPlaceholder,
+                  className: `mt-1 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-${primaryColorClass}-500 focus:border-${primaryColorClass}-500 sm:text-sm`
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "submit",
+              disabled: isLoading,
+              className: `w-full inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 bg-${primaryColorClass}-600 text-white hover:bg-${primaryColorClass}-700 focus:ring-${primaryColorClass}-500 disabled:bg-${primaryColorClass}-300 px-4 py-2 text-sm`,
+              children: [
+                isLoading && /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: "animate-spin -ml-1 mr-2 h-4 w-4",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          className: "opacity-25",
+                          cx: "12",
+                          cy: "12",
+                          r: "10",
+                          stroke: "currentColor",
+                          strokeWidth: "4"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          className: "opacity-75",
+                          fill: "currentColor",
+                          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isSignUp && showSignUp ? text.signUp : text.signIn
+              ]
+            }
+          ) }),
+          showGoogleSignIn && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-gray-300" }) }),
+              /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsx("span", { className: "px-2 bg-gray-50 text-gray-500", children: text.orContinueWith }) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: handleGoogleSignIn,
+                disabled: isLoading,
+                className: `w-full inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-${primaryColorClass}-500 disabled:bg-gray-100 px-4 py-2 text-sm`,
+                children: [
+                  isLoading ? /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      className: "animate-spin -ml-1 mr-2 h-5 w-5",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "circle",
+                          {
+                            className: "opacity-25",
+                            cx: "12",
+                            cy: "12",
+                            r: "10",
+                            stroke: "currentColor",
+                            strokeWidth: "4"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            className: "opacity-75",
+                            fill: "currentColor",
+                            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                          }
+                        )
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx(GoogleIcon, { className: "h-5 w-5 mr-2" }),
+                  text.signInWithGoogle
+                ]
+              }
+            ) })
+          ] })
+        ] }),
+        showSignUp && /* @__PURE__ */ jsxs("p", { className: "text-center text-sm text-gray-600", children: [
+          isSignUp ? text.alreadyHaveAccount : text.dontHaveAccount,
+          " ",
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsSignUp(!isSignUp),
+              className: `font-medium text-${primaryColorClass}-600 hover:text-${primaryColorClass}-500`,
+              children: isSignUp ? text.signIn : text.signUp
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
 export {
   AppBreadcrumbs,
   AppFooter,
@@ -5165,6 +5435,7 @@ export {
   FontSize,
   GlobalSettingsPage,
   LanguageSelector,
+  LoginPage,
   RTL_LANGUAGES,
   Theme,
   cn,