@thetechfossil/auth2 1.2.20 → 1.2.22

package/dist/index.components.mjs

@@ -5,12 +5,16 @@ import { io } from 'socket.io-client';
 import { ImageManager, UpfilesClient } from '@thetechfossil/upfiles';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
+var ERROR_MESSAGES = {
+  NETWORK_ERROR: "Unable to connect to the server. Please check your internet connection and try again.",
+  TIMEOUT: "The request took too long. Please try again.",
+  SERVER_ERROR: "Something went wrong on our end. Please try again later.",
+  UNAUTHORIZED: "Your session has expired. Please log in again.",
+  FORBIDDEN: "You do not have permission to perform this action.",
+  NOT_FOUND: "The requested resource was not found.",
+  RATE_LIMITED: "Too many requests. Please wait a moment and try again.",
+  UNKNOWN: "An unexpected error occurred. Please try again."
+};
 var HttpClient = class {
   constructor(baseUrl, defaultHeaders = {}) {
     this.csrfToken = null;
@@ -45,7 +49,7 @@ var HttpClient = class {
         }
         return config;
       },
-      (error) => Promise.reject(error)
+      (error) => Promise.reject(this.createUserFriendlyError(error))
     );
     this.axiosInstance.interceptors.response.use(
       (response) => response,
@@ -60,18 +64,71 @@ var HttpClient = class {
             }
             return this.axiosInstance(originalRequest);
           } catch (refreshError) {
-            return Promise.reject(refreshError);
+            return Promise.reject(this.createUserFriendlyError(refreshError));
           }
         }
-        if (error.response && error.response.data && error.response.data.message) {
-          const customError = new Error(error.response.data.message);
-          customError.response = error.response;
-          return Promise.reject(customError);
-        }
-        return Promise.reject(error);
+        return Promise.reject(this.createUserFriendlyError(error));
       }
     );
   }
+  /**
+   * Creates a user-friendly error message from an Axios error
+   */
+  createUserFriendlyError(error) {
+    if (error instanceof Error && !error.isAxiosError) {
+      return error;
+    }
+    let message;
+    let statusCode;
+    if (axios.isAxiosError(error)) {
+      statusCode = error.response?.status;
+      const responseData = error.response?.data;
+      if (responseData?.message) {
+        message = responseData.message;
+      } else if (!error.response) {
+        if (error.code === "ECONNABORTED" || error.message.includes("timeout")) {
+          message = ERROR_MESSAGES.TIMEOUT;
+        } else if (error.code === "ERR_NETWORK" || error.message === "Network Error") {
+          message = ERROR_MESSAGES.NETWORK_ERROR;
+        } else {
+          message = ERROR_MESSAGES.NETWORK_ERROR;
+        }
+      } else {
+        switch (statusCode) {
+          case 400:
+            message = responseData?.message || "Invalid request. Please check your input.";
+            break;
+          case 401:
+            message = responseData?.message || ERROR_MESSAGES.UNAUTHORIZED;
+            break;
+          case 403:
+            message = responseData?.message || ERROR_MESSAGES.FORBIDDEN;
+            break;
+          case 404:
+            message = responseData?.message || ERROR_MESSAGES.NOT_FOUND;
+            break;
+          case 429:
+            message = ERROR_MESSAGES.RATE_LIMITED;
+            break;
+          case 500:
+          case 502:
+          case 503:
+          case 504:
+            message = ERROR_MESSAGES.SERVER_ERROR;
+            break;
+          default:
+            message = responseData?.message || ERROR_MESSAGES.UNKNOWN;
+        }
+      }
+    } else {
+      message = error?.message || ERROR_MESSAGES.UNKNOWN;
+    }
+    const customError = new Error(message);
+    customError.response = error?.response;
+    customError.statusCode = statusCode;
+    customError.originalError = error;
+    return customError;
+  }
   async get(endpoint, headers) {
     const response = await this.axiosInstance.get(endpoint, { headers });
     return response.data;
@@ -277,6 +334,7 @@ var AuthService = class {
         if (token) {
           this.token = token;
           this.httpClient.setAuthToken(token);
+          this.setTokenCookie(token);
         }
       } catch (error) {
         console.warn("Failed to load token from storage:", error);
@@ -287,15 +345,28 @@ var AuthService = class {
     if (typeof window !== "undefined" && this.config.localStorageKey) {
       try {
         localStorage.setItem(this.config.localStorageKey, token);
+        this.setTokenCookie(token);
       } catch (error) {
         console.warn("Failed to save token to storage:", error);
       }
     }
   }
+  setTokenCookie(token) {
+    if (typeof window !== "undefined") {
+      const maxAge = 7 * 24 * 60 * 60;
+      document.cookie = `auth_token=${token}; path=/; max-age=${maxAge}; SameSite=Lax`;
+    }
+  }
+  removeTokenCookie() {
+    if (typeof window !== "undefined") {
+      document.cookie = "auth_token=; path=/; max-age=0; SameSite=Lax";
+    }
+  }
   removeTokenFromStorage() {
     if (typeof window !== "undefined" && this.config.localStorageKey) {
       try {
         localStorage.removeItem(this.config.localStorageKey);
+        this.removeTokenCookie();
       } catch (error) {
         console.warn("Failed to remove token from storage:", error);
       }
@@ -895,14 +966,6 @@ function useThemeColors() {
   const { theme } = useAuthTheme();
   return theme === "dark" ? darkTheme : lightTheme;
 }
-var PhoneInputWithCountry = null;
-try {
-  const module = __require("react-phone-number-input");
-  PhoneInputWithCountry = module.default || module;
-  __require("react-phone-number-input/style.css");
-} catch (error) {
-  console.warn("react-phone-number-input not available, using fallback");
-}
 var CustomPhoneInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   "input",
   {
@@ -923,6 +986,8 @@ var PhoneInput = ({
 }) => {
   const colors = useThemeColors();
   const [defaultCountry, setDefaultCountry] = useState("US");
+  const [PhoneInputComponent, setPhoneInputComponent] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
   const styleContent = useMemo(() => `
     .PhoneInput {
       display: flex;
@@ -1035,6 +1100,29 @@ var PhoneInput = ({
       opacity: 0.6;
     }
   `, [colors]);
+  useEffect(() => {
+    let mounted = true;
+    const loadPhoneInput = async () => {
+      try {
+        const module = await import('react-phone-number-input');
+        if (mounted) {
+          setPhoneInputComponent(() => module.default);
+        }
+      } catch (error) {
+        if (mounted) {
+          setPhoneInputComponent(null);
+        }
+      } finally {
+        if (mounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+    loadPhoneInput();
+    return () => {
+      mounted = false;
+    };
+  }, []);
   useEffect(() => {
     const detectCountry = async () => {
       try {
@@ -1087,7 +1175,6 @@ var PhoneInput = ({
           }
         }
       } catch (error) {
-        console.log("Country detection failed, using default US");
       }
     };
     detectCountry();
@@ -1095,7 +1182,31 @@ var PhoneInput = ({
   const handleChange = useMemo(() => (val) => {
     onChange(val || "");
   }, [onChange]);
-  if (!PhoneInputWithCountry) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "tel",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        disabled,
+        required,
+        placeholder,
+        style: {
+          width: "100%",
+          padding: "12px 16px",
+          border: `1px solid ${colors.borderSecondary}`,
+          borderRadius: "8px",
+          fontSize: "16px",
+          backgroundColor: colors.bgSecondary,
+          color: colors.textPrimary,
+          ...style
+        }
+      }
+    );
+  }
+  if (!PhoneInputComponent) {
     return /* @__PURE__ */ jsx(
       "input",
       {
@@ -1129,7 +1240,7 @@ var PhoneInput = ({
       children: [
         /* @__PURE__ */ jsx("style", { children: styleContent }),
         /* @__PURE__ */ jsx(
-          PhoneInputWithCountry,
+          PhoneInputComponent,
           {
             id,
             international: true,
@@ -1627,6 +1738,28 @@ var RegisterForm = ({
   const [error, setError] = useState(null);
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [invitationDetails, setInvitationDetails] = useState(null);
+  const [isLoadingInvitation, setIsLoadingInvitation] = useState(false);
+  const config = authConfig || {
+    baseUrl: "http://localhost:7000"
+  };
+  useEffect(() => {
+    if (invitationToken) {
+      setIsLoadingInvitation(true);
+      fetch(`${config.baseUrl}/api/v1/auth/verify-invitation/${invitationToken}`).then((res) => res.json()).then((data) => {
+        setInvitationDetails(data);
+        if (data.valid && data.email) {
+          setEmail(data.email);
+        }
+      }).catch((err) => {
+        console.error("Failed to verify invitation:", err);
+        setError("Failed to verify invitation. Please try again.");
+      }).finally(() => {
+        setIsLoadingInvitation(false);
+      });
+    }
+  }, [invitationToken, config.baseUrl]);
+  const isEmailDisabled = isLoading || invitationDetails?.valid && !!invitationDetails?.email;
   const getPasswordStrength = (pwd) => {
     if (!pwd) return { strength: "weak", score: 0, label: "" };
     let score = 0;
@@ -1640,9 +1773,6 @@ var RegisterForm = ({
     return { strength: "strong", score, label: "Strong" };
   };
   getPasswordStrength(password);
-  const config = authConfig || {
-    baseUrl: "http://localhost:7000"
-  };
   const { register } = useAuth(config);
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -1677,6 +1807,25 @@ var RegisterForm = ({
         if (response.ok && data.success) {
           if (typeof window !== "undefined" && data.token) {
             localStorage.setItem("auth_token", data.token);
+            if (data.invitation?.organizationId && data.invitation?.role) {
+              localStorage.setItem("currentOrganizationId", data.invitation.organizationId);
+              const backendUrl = typeof window !== "undefined" ? process.env.NEXT_PUBLIC_INVENTORY_API_URL || process.env.NEXT_PUBLIC_BIZFLOW_API_URL || "http://localhost:5002" : "http://localhost:5002";
+              try {
+                await fetch(`${backendUrl}/api/auth/sync-with-role`, {
+                  method: "POST",
+                  headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${data.token}`
+                  },
+                  body: JSON.stringify({
+                    organizationId: data.invitation.organizationId,
+                    roleName: data.invitation.role
+                  })
+                });
+              } catch (syncError) {
+                console.error("Failed to sync user role with backend:", syncError);
+              }
+            }
           }
           onRegisterSuccess?.();
         } else {
@@ -1784,7 +1933,7 @@ var RegisterForm = ({
           value: email,
           onChange: (e) => setEmail(e.target.value),
           required: !phoneNumber,
-          disabled: isLoading,
+          disabled: isEmailDisabled,
           style: {
             width: "100%",
             padding: "12px 16px",
@@ -1792,9 +1941,11 @@ var RegisterForm = ({
             borderRadius: "8px",
             fontSize: "16px",
             boxSizing: "border-box",
-            color: colors.textPrimary,
+            color: isEmailDisabled ? colors.textSecondary : colors.textPrimary,
             transition: "all 0.2s ease",
-            backgroundColor: colors.bgSecondary
+            backgroundColor: isEmailDisabled ? colors.bgHover : colors.bgSecondary,
+            cursor: isEmailDisabled ? "not-allowed" : "text",
+            opacity: isEmailDisabled ? 0.7 : 1
           },
           placeholder: "Enter your email"
         }
@@ -2497,7 +2648,7 @@ var EmailVerificationPage = ({
       } })
     ] }) });
   }
-  return /* @__PURE__ */ jsx("div", { style: {
+  return /* @__PURE__ */ jsxs("div", { style: {
     maxWidth: "500px",
     margin: "0 auto",
     padding: "30px",
@@ -2506,44 +2657,86 @@ var EmailVerificationPage = ({
     backgroundColor: "#ffffff",
     textAlign: "center",
     border: "1px solid #eaeaea"
-  }, children: /* @__PURE__ */ jsxs("div", { style: {
-    padding: "20px"
   }, children: [
-    /* @__PURE__ */ jsx("h2", { style: { color: "black" }, children: "Email Verification" }),
-    /* @__PURE__ */ jsx("div", { style: {
-      padding: "16px 20px",
-      margin: "24px 0",
-      borderRadius: "8px",
-      fontSize: "15px",
-      fontWeight: 500,
-      backgroundColor: isSuccess ? "#d4edda" : "#f8d7da",
-      color: isSuccess ? "#155724" : "#721c24",
-      border: isSuccess ? "1px solid #c3e6cb" : "1px solid #f5c6cb"
-    }, children: message }),
-    isSuccess && /* @__PURE__ */ jsxs("div", { style: {
-      marginTop: "24px"
+    /* @__PURE__ */ jsxs("div", { style: {
+      padding: "20px"
     }, children: [
-      /* @__PURE__ */ jsx("p", { style: { color: "black" }, children: "Your email has been successfully verified!" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => window.location.href = "/login",
-          style: {
-            padding: "12px 24px",
-            backgroundColor: "#007bff",
-            color: "white",
-            border: "none",
-            borderRadius: "8px",
-            fontSize: "16px",
-            fontWeight: 600,
-            cursor: "pointer",
-            transition: "all 0.2s ease"
-          },
-          children: "Go to Login"
+      /* @__PURE__ */ jsx("h2", { style: { color: "black" }, children: isSuccess ? "\u2713 Email Verified!" : "\u2717 Verification Failed" }),
+      /* @__PURE__ */ jsx("div", { style: {
+        padding: "16px 20px",
+        margin: "24px 0",
+        borderRadius: "8px",
+        fontSize: "15px",
+        fontWeight: 500,
+        backgroundColor: isSuccess ? "#d4edda" : "#f8d7da",
+        color: isSuccess ? "#155724" : "#721c24",
+        border: isSuccess ? "1px solid #c3e6cb" : "1px solid #f5c6cb"
+      }, children: message }),
+      isSuccess ? /* @__PURE__ */ jsxs("div", { style: { marginTop: "24px" }, children: [
+        /* @__PURE__ */ jsx("p", { style: { color: "#666", marginBottom: "16px" }, children: "Redirecting to login..." }),
+        /* @__PURE__ */ jsx("div", { style: {
+          border: "3px solid #d4edda",
+          borderTop: "3px solid #28a745",
+          borderRadius: "50%",
+          width: "30px",
+          height: "30px",
+          animation: "spin 1s linear infinite",
+          margin: "0 auto"
+        } })
+      ] }) : /* @__PURE__ */ jsxs("div", { style: { marginTop: "24px" }, children: [
+        /* @__PURE__ */ jsx("p", { style: { color: "#666", marginBottom: "16px" }, children: "The verification link may have expired or already been used." }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              const registerPath = process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_REGISTER || process.env.REACT_APP_AUTH_REDIRECT_TO_REGISTER || "/auth/register";
+              window.location.href = registerPath;
+            },
+            style: {
+              padding: "12px 24px",
+              backgroundColor: "#007bff",
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "16px",
+              fontWeight: 600,
+              cursor: "pointer",
+              transition: "all 0.2s ease",
+              marginRight: "12px"
+            },
+            children: "Register Again"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              const loginPath = process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_TO_LOGIN || "/auth/login";
+              window.location.href = loginPath;
+            },
+            style: {
+              padding: "12px 24px",
+              backgroundColor: "#6c757d",
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "16px",
+              fontWeight: 600,
+              cursor: "pointer",
+              transition: "all 0.2s ease"
+            },
+            children: "Go to Login"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
         }
-      )
-    ] })
-  ] }) });
+      ` })
+  ] });
 };
 var AuthContext = createContext(void 0);
 var useAuth2 = () => {
@@ -4762,6 +4955,274 @@ var UserProfile = ({
     ] })
   ] });
 };
+var SuperAdminSignIn = ({ redirectUrl, appearance }) => {
+  const { signIn, isSignedIn, loading: authLoading, user } = useAuth2();
+  const colors = useThemeColors();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+  useEffect(() => {
+    if (isSignedIn && user) {
+      const isSuperAdmin = user.role === "SUPER_ADMIN" || user.role === "SUPERADMIN";
+      if (isSuperAdmin) {
+        const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGIN || "/dashboard";
+        const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+        window.location.href = `${baseUrl}${redirect}`;
+      } else {
+        setError("Access denied. Only Super Admin users can access this portal.");
+        document.cookie = "auth_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+        document.cookie = "refresh_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+      }
+    }
+  }, [isSignedIn, user, redirectUrl]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const response = await signIn({ email, password });
+      if (response.success) {
+        const userRole = response.user?.role;
+        const isSuperAdmin = userRole === "SUPER_ADMIN" || userRole === "SUPERADMIN";
+        if (!isSuperAdmin) {
+          document.cookie = "auth_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+          document.cookie = "refresh_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+          setError("Access denied. Only Super Admin users can access this portal.");
+          return;
+        }
+        setSuccess("Login successful! Redirecting...");
+      } else {
+        setError(response.message || "Login failed. Please check your credentials.");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred during login.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  if (authLoading) {
+    return /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "40px" }, children: /* @__PURE__ */ jsx("div", { children: "Loading..." }) });
+  }
+  return /* @__PURE__ */ jsx(
+    ThemeWrapper,
+    {
+      style: {
+        maxWidth: "400px",
+        margin: "0 auto",
+        padding: "30px",
+        borderRadius: "12px",
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+        backgroundColor: colors.bgPrimary,
+        border: `1px solid ${colors.borderPrimary}`,
+        ...appearance?.elements?.card
+      },
+      children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: "24px" }, children: [
+          /* @__PURE__ */ jsx("div", { style: {
+            width: "60px",
+            height: "60px",
+            margin: "0 auto 16px",
+            backgroundColor: colors.buttonPrimary + "20",
+            borderRadius: "12px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }, children: /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: colors.buttonPrimary, strokeWidth: "2", children: [
+            /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }),
+            /* @__PURE__ */ jsx("path", { d: "M9 12l2 2 4-4" })
+          ] }) }),
+          /* @__PURE__ */ jsx("h2", { style: {
+            color: colors.textPrimary,
+            fontSize: "24px",
+            fontWeight: 600,
+            margin: 0,
+            ...appearance?.elements?.headerTitle
+          }, children: "Super Admin Portal" }),
+          /* @__PURE__ */ jsx("p", { style: {
+            color: colors.textSecondary,
+            fontSize: "14px",
+            marginTop: "8px"
+          }, children: "Sign in with your administrator credentials" })
+        ] }),
+        error && /* @__PURE__ */ jsx("div", { style: {
+          padding: "12px 16px",
+          marginBottom: "20px",
+          backgroundColor: colors.errorBg,
+          color: colors.errorText,
+          border: `1px solid ${colors.errorBorder}`,
+          borderRadius: "8px",
+          fontSize: "14px"
+        }, children: error }),
+        success && /* @__PURE__ */ jsx("div", { style: {
+          padding: "12px 16px",
+          marginBottom: "20px",
+          backgroundColor: colors.successBg,
+          color: colors.successText,
+          border: `1px solid ${colors.successBorder}`,
+          borderRadius: "8px",
+          fontSize: "14px"
+        }, children: success }),
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "email", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Email Address" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "email",
+              type: "email",
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              onFocus: (e) => {
+                e.currentTarget.style.borderColor = colors.buttonPrimary;
+                e.currentTarget.style.outline = `2px solid ${colors.buttonPrimary}40`;
+              },
+              onBlur: (e) => {
+                e.currentTarget.style.borderColor = colors.borderSecondary;
+                e.currentTarget.style.outline = "none";
+              },
+              required: true,
+              disabled: isLoading,
+              autoComplete: "email",
+              style: {
+                width: "100%",
+                padding: "12px 16px",
+                border: `1px solid ${colors.borderSecondary}`,
+                borderRadius: "8px",
+                fontSize: "16px",
+                boxSizing: "border-box",
+                backgroundColor: colors.bgSecondary,
+                color: colors.textPrimary,
+                transition: "all 0.2s ease",
+                WebkitTextFillColor: colors.textPrimary,
+                WebkitBoxShadow: `0 0 0 1000px ${colors.bgSecondary} inset`,
+                ...appearance?.elements?.formFieldInput
+              },
+              placeholder: "admin@example.com"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: "24px", position: "relative" }, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "password", style: {
+            display: "block",
+            marginBottom: "8px",
+            fontWeight: 500,
+            color: colors.textSecondary,
+            fontSize: "14px"
+          }, children: "Password" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "password",
+              type: showPassword ? "text" : "password",
+              value: password,
+              onChange: (e) => setPassword(e.target.value),
+              onFocus: (e) => {
+                e.currentTarget.style.borderColor = colors.buttonPrimary;
+                e.currentTarget.style.outline = `2px solid ${colors.buttonPrimary}40`;
+              },
+              onBlur: (e) => {
+                e.currentTarget.style.borderColor = colors.borderSecondary;
+                e.currentTarget.style.outline = "none";
+              },
+              required: true,
+              disabled: isLoading,
+              autoComplete: "current-password",
+              style: {
+                width: "100%",
+                padding: "12px 16px",
+                paddingRight: "60px",
+                border: `1px solid ${colors.borderSecondary}`,
+                borderRadius: "8px",
+                fontSize: "16px",
+                boxSizing: "border-box",
+                backgroundColor: colors.bgSecondary,
+                color: colors.textPrimary,
+                transition: "all 0.2s ease",
+                WebkitTextFillColor: colors.textPrimary,
+                WebkitBoxShadow: `0 0 0 1000px ${colors.bgSecondary} inset`,
+                ...appearance?.elements?.formFieldInput
+              },
+              placeholder: "Enter your password"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowPassword(!showPassword),
+              style: {
+                position: "absolute",
+                right: "12px",
+                top: "38px",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                color: colors.textTertiary,
+                fontSize: "14px",
+                padding: "4px 8px"
+              },
+              children: showPassword ? "Hide" : "Show"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isLoading || !email || !password,
+            onMouseEnter: (e) => {
+              if (!isLoading && email && password) {
+                e.currentTarget.style.backgroundColor = colors.buttonPrimaryHover;
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = colors.buttonPrimary;
+            },
+            style: {
+              width: "100%",
+              padding: "14px",
+              backgroundColor: colors.buttonPrimary,
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "16px",
+              fontWeight: 600,
+              cursor: isLoading || !email || !password ? "not-allowed" : "pointer",
+              opacity: isLoading || !email || !password ? 0.6 : 1,
+              transition: "all 0.2s ease",
+              ...appearance?.elements?.formButtonPrimary
+            },
+            children: isLoading ? "Signing in..." : "Sign In"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: {
+          marginTop: "20px",
+          padding: "12px",
+          backgroundColor: colors.bgSecondary,
+          borderRadius: "8px",
+          textAlign: "center"
+        }, children: /* @__PURE__ */ jsxs("p", { style: {
+          color: colors.textTertiary,
+          fontSize: "12px",
+          margin: 0
+        }, children: [
+          "\u{1F512} This portal is restricted to Super Admin users only.",
+          /* @__PURE__ */ jsx("br", {}),
+          "Contact your system administrator if you need access."
+        ] }) })
+      ] })
+    }
+  );
+};
 var AvatarManager = ({
   open,
   onOpenChange,
@@ -4844,6 +5305,6 @@ var AvatarManager = ({
   );
 };
 
-export { AuthFlow, AvatarManager, AvatarUploader, ChangePassword, EmailVerificationPage, ForgotPassword, LoginForm, OtpForm, PhoneInput, ProtectedRoute, PublicRoute, RegisterForm, ResetPassword, SignIn, SignOut, SignUp, UserButton, UserProfile, VerifyEmail };
+export { AuthFlow, AvatarManager, AvatarUploader, ChangePassword, EmailVerificationPage, ForgotPassword, LoginForm, OtpForm, PhoneInput, ProtectedRoute, PublicRoute, RegisterForm, ResetPassword, SignIn, SignOut, SignUp, SuperAdminSignIn, UserButton, UserProfile, VerifyEmail };
 //# sourceMappingURL=index.components.mjs.map
 //# sourceMappingURL=index.components.mjs.map