@urbackend/react 0.1.1 → 0.2.1

package/dist/index.mjs

@@ -294,7 +294,7 @@ var GuestRoute = ({
 };
 
 // src/components/UrAuth.tsx
-import { useState as useState3, useEffect as useEffect4 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 
 // src/components/Toast.tsx
 import { useEffect as useEffect3, useState as useState2 } from "react";
@@ -374,9 +374,93 @@ var Toast = ({ message, type, onClose, isDark = false }) => {
 
 // src/components/UrAuth.tsx
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultLabels = {
+  loginTab: "Login",
+  signupTab: "Sign Up",
+  loginTitle: "Welcome back",
+  signupTitle: "Create your account",
+  forgotTitle: "Reset Password",
+  resetTitle: "Enter Reset Code",
+  loginButton: "Log In",
+  signupButton: "Create Account",
+  forgotButton: "Send Reset Code",
+  resetButton: "Reset Password",
+  emailLabel: "Email address",
+  emailPlaceholder: "Enter your email address",
+  passwordLabel: "Password",
+  passwordPlaceholder: "Enter your password",
+  nameLabel: "Full Name",
+  namePlaceholder: "Enter your name",
+  otpLabel: "6-digit OTP Code",
+  otpPlaceholder: "Enter reset code",
+  forgotPasswordLink: "Forgot password?",
+  socialDivider: "OR",
+  googleButton: "Continue with Google",
+  githubButton: "Continue with GitHub",
+  footerSigninPrompt: "Don't have an account yet?",
+  footerSignupPrompt: "Already have an account?",
+  footerForgotPrompt: "Remember your password?",
+  noAuthMethods: "No authentication methods are enabled for this screen.",
+  forgotSubtitle: "Welcome back",
+  resetSubtitle: "Enter the code sent to {email}"
+};
+var defaultThemeColors = {
+  light: {
+    background: "#ffffff",
+    surface: "#ffffff",
+    text: "#0f172a",
+    textMuted: "#64748b",
+    border: "#e2e8f0",
+    inputBackground: "#ffffff",
+    primary: "#111111",
+    primaryText: "#ffffff",
+    footerBackground: "#f8fafc",
+    dividerText: "#94a3b8",
+    socialButtonBackground: "#ffffff"
+  },
+  dark: {
+    background: "#1a1a1a",
+    surface: "#1a1a1a",
+    text: "#ffffff",
+    textMuted: "#a1a1aa",
+    border: "#333333",
+    inputBackground: "#2a2a2a",
+    primary: "#ffffff",
+    primaryText: "#111111",
+    footerBackground: "#222222",
+    dividerText: "#94a3b8",
+    socialButtonBackground: "#2a2a2a"
+  }
+};
+var adjustColor = (color, percent) => {
+  try {
+    if (color.startsWith("#")) {
+      let hex = color.replace("#", "");
+      if (hex.length === 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+      }
+      let r = parseInt(hex.substring(0, 2), 16);
+      let g = parseInt(hex.substring(2, 4), 16);
+      let b = parseInt(hex.substring(4, 6), 16);
+      r = Math.min(255, Math.max(0, r + percent));
+      g = Math.min(255, Math.max(0, g + percent));
+      b = Math.min(255, Math.max(0, b + percent));
+      const rr = r.toString(16).padStart(2, "0");
+      const gg = g.toString(16).padStart(2, "0");
+      const bb = b.toString(16).padStart(2, "0");
+      return `#${rr}${gg}${bb}`;
+    }
+  } catch (e) {
+  }
+  return color;
+};
 var UrAuth = ({
   providers = ["google", "github"],
+  enableEmailPassword = true,
   theme = "light",
+  colors,
+  branding,
+  labels,
   onSuccess
 }) => {
   const { login, signUp, socialLogin, requestPasswordReset, resetPassword, isLoading, error, clearError } = useAuth();
@@ -386,11 +470,49 @@ var UrAuth = ({
   const [otp, setOtp] = useState3("");
   const [name, setName] = useState3("");
   const [toast, setToast] = useState3(null);
+  const text = {
+    ...defaultLabels,
+    ...labels,
+    loginTab: labels?.signInTab ?? labels?.loginTab ?? defaultLabels.loginTab,
+    loginTitle: labels?.signInTitle ?? labels?.loginTitle ?? defaultLabels.loginTitle,
+    loginButton: labels?.signInButton ?? labels?.loginButton ?? defaultLabels.loginButton,
+    signupTab: labels?.signUpTab ?? labels?.signupTab ?? defaultLabels.signupTab,
+    signupTitle: labels?.signUpTitle ?? labels?.signupTitle ?? defaultLabels.signupTitle,
+    signupButton: labels?.signUpButton ?? labels?.signupButton ?? defaultLabels.signupButton
+  };
+  const themeColors = { ...defaultThemeColors[theme], ...colors };
+  const primaryColor = branding?.primaryColor || colors?.primaryColor || themeColors.primary;
+  const secondStopColor = adjustColor(primaryColor, -15);
+  let isGoogleEnabled = true;
+  let isGithubEnabled = true;
+  let isEmailPasswordEnabled = enableEmailPassword;
+  if (providers) {
+    if (Array.isArray(providers)) {
+      isGoogleEnabled = providers.includes("google");
+      isGithubEnabled = providers.includes("github");
+    } else if (typeof providers === "object") {
+      isGoogleEnabled = !!providers.google;
+      isGithubEnabled = !!providers.github;
+      isEmailPasswordEnabled = providers.emailPassword !== void 0 ? providers.emailPassword : enableEmailPassword;
+    }
+  }
+  const hasPasswordAuth = isEmailPasswordEnabled;
+  const hasSocialAuth = isGoogleEnabled || isGithubEnabled;
+  const brandName = branding?.brandName || branding?.appName || branding?.title || "urBackend";
+  const headerTitle = branding?.title || brandName;
+  const brandingLogo = branding?.logo ?? branding?.logoUrl;
+  const headerSubtitle = branding?.subtitle || (mode === "signin" ? text.loginTitle : mode === "signup" ? text.signupTitle : mode === "forgot" ? text.forgotTitle : text.resetTitle);
+  const showSwitcher = hasPasswordAuth;
   useEffect4(() => {
     if (error) {
       setToast({ message: error, type: "error" });
     }
   }, [error]);
+  useEffect4(() => {
+    if (!hasPasswordAuth && mode !== "signin") {
+      setMode("signin");
+    }
+  }, [hasPasswordAuth, mode]);
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
@@ -417,28 +539,58 @@ var UrAuth = ({
     } catch (err) {
     }
   };
-  const isDark = theme === "dark";
-  const bg = isDark ? "#1a1a1a" : "#ffffff";
-  const text = isDark ? "#ffffff" : "#0f172a";
-  const textMuted = isDark ? "#a1a1aa" : "#64748b";
-  const border = isDark ? "#333" : "#e2e8f0";
-  const inputBg = isDark ? "#2a2a2a" : "#ffffff";
   const styles = {
     wrapper: {
       width: "100%",
       maxWidth: "420px",
       margin: "0 auto",
       borderRadius: "0",
-      background: bg,
-      boxShadow: isDark ? "0 20px 40px rgba(0,0,0,0.5)" : "0 20px 40px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.05)",
-      border: `1px solid ${border}`,
+      background: themeColors.background,
+      boxShadow: theme === "dark" ? "0 20px 40px rgba(0,0,0,0.5)" : "0 20px 40px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.05)",
+      border: `1px solid ${themeColors.border}`,
       overflow: "hidden",
       fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-      color: text
+      color: themeColors.text
     },
     body: {
       padding: "32px 32px 24px 32px"
     },
+    header: {
+      textAlign: "center",
+      marginBottom: "28px"
+    },
+    brandRow: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "12px",
+      marginBottom: "10px"
+    },
+    brandLogo: {
+      width: "44px",
+      height: "44px",
+      borderRadius: "12px",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: theme === "dark" ? "#2a2a2a" : "#f1f5f9",
+      color: themeColors.text,
+      overflow: "hidden"
+    },
+    brandTitle: {
+      margin: 0,
+      fontSize: "26px",
+      lineHeight: 1.1,
+      fontWeight: 800,
+      color: themeColors.text
+    },
+    brandSubtitle: {
+      margin: "0 auto",
+      maxWidth: "320px",
+      fontSize: "14px",
+      lineHeight: 1.5,
+      color: themeColors.textMuted
+    },
     switcherContainer: {
       display: "flex",
       alignItems: "center",
@@ -447,7 +599,7 @@ var UrAuth = ({
     },
     switcher: {
       display: "inline-flex",
-      background: isDark ? "#2a2a2a" : "#f1f5f9",
+      background: theme === "dark" ? "#2a2a2a" : "#f1f5f9",
       padding: "4px",
       borderRadius: "0"
     },
@@ -460,9 +612,9 @@ var UrAuth = ({
       fontSize: "13px",
       fontWeight: 600,
       cursor: "pointer",
-      color: active ? text : textMuted,
-      background: active ? isDark ? "#444" : "#ffffff" : "transparent",
-      boxShadow: active ? isDark ? "0 2px 4px rgba(0,0,0,0.2)" : "0 2px 8px rgba(0,0,0,0.05)" : "none",
+      color: active ? themeColors.text : themeColors.textMuted,
+      background: active ? theme === "dark" ? "#444444" : "#ffffff" : "transparent",
+      boxShadow: active ? theme === "dark" ? "0 2px 4px rgba(0,0,0,0.2)" : "0 2px 8px rgba(0,0,0,0.05)" : "none",
       border: "none",
       transition: "all 0.2s ease"
     }),
@@ -478,12 +630,12 @@ var UrAuth = ({
     label: {
       fontSize: "13px",
       fontWeight: 600,
-      color: isDark ? "#ddd" : "#334155"
+      color: theme === "dark" ? "#dddddd" : "#334155"
     },
     forgotLink: {
       fontSize: "12px",
       fontWeight: 600,
-      color: text,
+      color: themeColors.text,
       cursor: "pointer",
       textDecoration: "none",
       background: "none",
@@ -494,9 +646,9 @@ var UrAuth = ({
       width: "100%",
       padding: "12px 16px",
       borderRadius: "0",
-      border: `1px solid ${border}`,
-      background: inputBg,
-      color: text,
+      border: `1px solid ${themeColors.border}`,
+      background: themeColors.inputBackground,
+      color: themeColors.text,
       fontSize: "14px",
       boxSizing: "border-box",
       outline: "none",
@@ -506,8 +658,8 @@ var UrAuth = ({
       width: "100%",
       padding: "14px",
       borderRadius: "0",
-      background: "linear-gradient(180deg, #2a2a2a 0%, #111111 100%)",
-      color: "#ffffff",
+      background: `linear-gradient(180deg, ${primaryColor} 0%, ${secondStopColor} 100%)`,
+      color: themeColors.primaryText,
       fontSize: "15px",
       fontWeight: 600,
       border: "none",
@@ -520,7 +672,7 @@ var UrAuth = ({
       display: "flex",
       alignItems: "center",
       margin: "24px 0",
-      color: "#94a3b8",
+      color: themeColors.dividerText,
       fontSize: "11px",
       fontWeight: 600,
       letterSpacing: "1px"
@@ -528,7 +680,7 @@ var UrAuth = ({
     dividerLine: {
       flex: 1,
       height: "1px",
-      background: border
+      background: themeColors.border
     },
     dividerText: {
       padding: "0 12px"
@@ -537,9 +689,9 @@ var UrAuth = ({
       width: "100%",
       padding: "12px",
       borderRadius: "0",
-      border: `1px solid ${border}`,
-      background: isDark ? "#2a2a2a" : "#ffffff",
-      color: text,
+      border: `1px solid ${themeColors.border}`,
+      background: themeColors.socialButtonBackground,
+      color: themeColors.text,
       fontSize: "14px",
       fontWeight: 600,
       display: "flex",
@@ -548,19 +700,19 @@ var UrAuth = ({
       gap: "10px",
       marginBottom: "12px",
       cursor: "pointer",
-      boxShadow: isDark ? "none" : "0 1px 2px rgba(0,0,0,0.02)",
+      boxShadow: theme === "dark" ? "none" : "0 1px 2px rgba(0,0,0,0.02)",
       transition: "background 0.2s ease"
     },
     footer: {
-      background: isDark ? "#222" : "#f8fafc",
+      background: themeColors.footerBackground,
       padding: "24px",
       textAlign: "center",
-      borderTop: `1px solid ${border}`,
+      borderTop: `1px solid ${themeColors.border}`,
       fontSize: "13px",
-      color: textMuted
+      color: themeColors.textMuted
     },
     footerLink: {
-      color: text,
+      color: themeColors.text,
       fontWeight: 600,
       textDecoration: "underline",
       cursor: "pointer",
@@ -576,14 +728,37 @@ var UrAuth = ({
     /* @__PURE__ */ jsx4("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__ */ jsx4("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 GithubIcon = () => /* @__PURE__ */ jsx4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: isDark ? "#fff" : "#000", children: /* @__PURE__ */ jsx4("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" }) });
+  const GithubIcon = () => /* @__PURE__ */ jsx4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: theme === "dark" ? "#fff" : "#000", children: /* @__PURE__ */ jsx4("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" }) });
+  const renderSocialButtons = () => {
+    if (!hasSocialAuth) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      hasPasswordAuth && /* @__PURE__ */ jsxs2("div", { style: styles.divider, children: [
+        /* @__PURE__ */ jsx4("div", { style: styles.dividerLine }),
+        /* @__PURE__ */ jsx4("span", { style: styles.dividerText, children: text.socialDivider }),
+        /* @__PURE__ */ jsx4("div", { style: styles.dividerLine })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { children: [
+        isGoogleEnabled && /* @__PURE__ */ jsxs2("button", { style: styles.socialBtn, onClick: () => socialLogin("google"), type: "button", children: [
+          /* @__PURE__ */ jsx4(GoogleIcon, {}),
+          text.googleButton
+        ] }),
+        isGithubEnabled && /* @__PURE__ */ jsxs2("button", { style: styles.socialBtn, onClick: () => socialLogin("github"), type: "button", children: [
+          /* @__PURE__ */ jsx4(GithubIcon, {}),
+          text.githubButton
+        ] })
+      ] })
+    ] });
+  };
+  const footerPrompt = mode === "signin" ? text.footerSigninPrompt : mode === "signup" ? text.footerSignupPrompt : text.footerForgotPrompt;
   return /* @__PURE__ */ jsxs2("div", { style: styles.wrapper, children: [
     toast && /* @__PURE__ */ jsx4(
       Toast,
       {
         message: toast.message,
         type: toast.type,
-        isDark,
+        isDark: theme === "dark",
         onClose: () => {
           setToast(null);
           if (toast.type === "error") clearError();
@@ -591,7 +766,12 @@ var UrAuth = ({
       }
     ),
     /* @__PURE__ */ jsxs2("div", { style: styles.body, children: [
-      (mode === "signin" || mode === "signup") && /* @__PURE__ */ jsx4("div", { style: styles.switcherContainer, children: /* @__PURE__ */ jsxs2("div", { style: styles.switcher, children: [
+      (brandingLogo || branding?.brandName || branding?.appName || branding?.title || branding?.subtitle || headerTitle || headerSubtitle) && /* @__PURE__ */ jsxs2("div", { style: styles.header, children: [
+        /* @__PURE__ */ jsx4("div", { style: styles.brandRow, children: brandingLogo ? /* @__PURE__ */ jsx4("div", { style: styles.brandLogo, children: typeof brandingLogo === "string" ? /* @__PURE__ */ jsx4("img", { src: brandingLogo, alt: brandName, style: { width: "100%", height: "100%", objectFit: "contain" } }) : brandingLogo }) : /* @__PURE__ */ jsx4("div", { style: styles.brandLogo, "aria-hidden": "true", children: brandName.slice(0, 1).toUpperCase() }) }),
+        /* @__PURE__ */ jsx4("h1", { style: styles.brandTitle, children: headerTitle }),
+        /* @__PURE__ */ jsx4("p", { style: styles.brandSubtitle, children: headerSubtitle })
+      ] }),
+      showSwitcher && (mode === "signin" || mode === "signup") && /* @__PURE__ */ jsx4("div", { style: styles.switcherContainer, children: /* @__PURE__ */ jsxs2("div", { style: styles.switcher, children: [
         /* @__PURE__ */ jsxs2(
           "button",
           {
@@ -607,7 +787,7 @@ var UrAuth = ({
                 /* @__PURE__ */ jsx4("polyline", { points: "10 17 15 12 10 7" }),
                 /* @__PURE__ */ jsx4("line", { x1: "15", y1: "12", x2: "3", y2: "12" })
               ] }),
-              "Login"
+              text.loginTab
             ]
           }
         ),
@@ -627,24 +807,25 @@ var UrAuth = ({
                 /* @__PURE__ */ jsx4("line", { x1: "19", y1: "8", x2: "19", y2: "14" }),
                 /* @__PURE__ */ jsx4("line", { x1: "22", y1: "11", x2: "16", y2: "11" })
               ] }),
-              "Sign Up"
+              text.signupTab
             ]
           }
         )
       ] }) }),
       (mode === "forgot" || mode === "reset") && /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-        /* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 8px", fontSize: "20px", fontWeight: 700, color: text }, children: mode === "forgot" ? "Reset Password" : "Enter Reset Code" }),
-        /* @__PURE__ */ jsx4("p", { style: { margin: 0, fontSize: "14px", color: textMuted }, children: mode === "forgot" ? "Enter your email and we'll send a code" : `Enter the code sent to ${email}` })
+        /* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 8px", fontSize: "20px", fontWeight: 700, color: themeColors.text }, children: mode === "forgot" ? text.forgotTitle : text.resetTitle }),
+        /* @__PURE__ */ jsx4("p", { style: { margin: 0, fontSize: "14px", color: themeColors.textMuted }, children: mode === "forgot" ? text.forgotSubtitle : text.resetSubtitle.replace("{email}", email) })
       ] }),
-      /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, children: [
+      !hasPasswordAuth && !hasSocialAuth && /* @__PURE__ */ jsx4("div", { style: { textAlign: "center", color: themeColors.textMuted, fontSize: "14px", lineHeight: 1.5 }, children: text.noAuthMethods }),
+      hasPasswordAuth && /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, children: [
         mode === "signup" && /* @__PURE__ */ jsxs2("div", { style: styles.field, children: [
-          /* @__PURE__ */ jsx4("div", { style: styles.labelRow, children: /* @__PURE__ */ jsx4("label", { style: styles.label, children: "Full Name" }) }),
+          /* @__PURE__ */ jsx4("div", { style: styles.labelRow, children: /* @__PURE__ */ jsx4("label", { style: styles.label, children: text.nameLabel }) }),
           /* @__PURE__ */ jsx4(
             "input",
             {
               style: styles.input,
               type: "text",
-              placeholder: "Enter your name",
+              placeholder: text.namePlaceholder,
               value: name,
               onChange: (e) => setName(e.target.value),
               required: true
@@ -652,13 +833,13 @@ var UrAuth = ({
           )
         ] }),
         /* @__PURE__ */ jsxs2("div", { style: styles.field, children: [
-          /* @__PURE__ */ jsx4("div", { style: styles.labelRow, children: /* @__PURE__ */ jsx4("label", { style: styles.label, children: "Email address" }) }),
+          /* @__PURE__ */ jsx4("div", { style: styles.labelRow, children: /* @__PURE__ */ jsx4("label", { style: styles.label, children: text.emailLabel }) }),
           /* @__PURE__ */ jsx4(
             "input",
             {
               style: styles.input,
               type: "email",
-              placeholder: "Enter your email address",
+              placeholder: text.emailPlaceholder,
               value: email,
               onChange: (e) => setEmail(e.target.value),
               required: true,
@@ -666,40 +847,40 @@ var UrAuth = ({
             }
           )
         ] }),
-        mode === "reset" && /* @__PURE__ */ jsxs2("div", { style: styles.field, children: [
-          /* @__PURE__ */ jsx4("div", { style: styles.labelRow, children: /* @__PURE__ */ jsx4("label", { style: styles.label, children: "6-digit OTP Code" }) }),
-          /* @__PURE__ */ jsx4(
-            "input",
-            {
-              style: styles.input,
-              type: "text",
-              placeholder: "Enter reset code",
-              value: otp,
-              onChange: (e) => setOtp(e.target.value),
-              required: true
-            }
-          )
-        ] }),
         (mode === "signin" || mode === "signup" || mode === "reset") && /* @__PURE__ */ jsxs2("div", { style: styles.field, children: [
           /* @__PURE__ */ jsxs2("div", { style: styles.labelRow, children: [
-            /* @__PURE__ */ jsx4("label", { style: styles.label, children: mode === "reset" ? "New Password" : "Password" }),
+            /* @__PURE__ */ jsx4("label", { style: styles.label, children: mode === "reset" ? text.passwordLabel : text.passwordLabel }),
             mode === "signin" && /* @__PURE__ */ jsx4("button", { type: "button", style: styles.forgotLink, onClick: () => {
               setMode("forgot");
               clearError();
-            }, children: "Forgot password?" })
+            }, children: text.forgotPasswordLink })
           ] }),
           /* @__PURE__ */ jsx4(
             "input",
             {
               style: styles.input,
               type: "password",
-              placeholder: mode === "reset" ? "Enter new password" : "Enter your password",
+              placeholder: text.passwordPlaceholder,
               value: password,
               onChange: (e) => setPassword(e.target.value),
               required: true
             }
           )
         ] }),
+        mode === "reset" && /* @__PURE__ */ jsxs2("div", { style: styles.field, children: [
+          /* @__PURE__ */ jsx4("div", { style: styles.labelRow, children: /* @__PURE__ */ jsx4("label", { style: styles.label, children: text.otpLabel }) }),
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              style: styles.input,
+              type: "text",
+              placeholder: text.otpPlaceholder,
+              value: otp,
+              onChange: (e) => setOtp(e.target.value),
+              required: true
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx4(
           "button",
           {
@@ -709,30 +890,14 @@ var UrAuth = ({
             onMouseDown: (e) => e.currentTarget.style.transform = "scale(0.98)",
             onMouseUp: (e) => e.currentTarget.style.transform = "scale(1)",
             onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
-            children: isLoading ? "Processing..." : mode === "signin" ? "Log In" : mode === "signup" ? "Create Account" : mode === "forgot" ? "Send Reset Code" : "Reset Password"
+            children: isLoading ? "Processing..." : mode === "signin" ? text.loginButton : mode === "signup" ? text.signupButton : mode === "forgot" ? text.forgotButton : text.resetButton
           }
         )
       ] }),
-      (mode === "signin" || mode === "signup") && providers && providers.length > 0 && /* @__PURE__ */ jsxs2(Fragment3, { children: [
-        /* @__PURE__ */ jsxs2("div", { style: styles.divider, children: [
-          /* @__PURE__ */ jsx4("div", { style: styles.dividerLine }),
-          /* @__PURE__ */ jsx4("span", { style: styles.dividerText, children: "OR" }),
-          /* @__PURE__ */ jsx4("div", { style: styles.dividerLine })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { children: [
-          providers.includes("google") && /* @__PURE__ */ jsxs2("button", { style: styles.socialBtn, onClick: () => socialLogin("google"), type: "button", children: [
-            /* @__PURE__ */ jsx4(GoogleIcon, {}),
-            "Continue with Google"
-          ] }),
-          providers.includes("github") && /* @__PURE__ */ jsxs2("button", { style: styles.socialBtn, onClick: () => socialLogin("github"), type: "button", children: [
-            /* @__PURE__ */ jsx4(GithubIcon, {}),
-            "Continue with GitHub"
-          ] })
-        ] })
-      ] })
+      (mode === "signin" || mode === "signup") && renderSocialButtons()
     ] }),
-    /* @__PURE__ */ jsxs2("div", { style: styles.footer, children: [
-      mode === "signin" ? "Don't have an account yet?" : mode === "signup" ? "Already have an account?" : "Remember your password?",
+    hasPasswordAuth && /* @__PURE__ */ jsxs2("div", { style: styles.footer, children: [
+      footerPrompt,
       /* @__PURE__ */ jsx4(
         "button",
         {
@@ -742,7 +907,7 @@ var UrAuth = ({
             setMode(mode === "signin" ? "signup" : "signin");
             clearError();
           },
-          children: mode === "signin" ? "Sign up" : "Log in"
+          children: mode === "signin" ? text.signupTab : text.loginTab
         }
       )
     ] })