@mesob/auth-react 0.4.0 → 0.4.2

package/dist/components/auth/sign-in.js

@@ -1,566 +1,12 @@
 "use client";
-
-// src/components/auth/sign-in.tsx
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-  useFormField
-} from "@mesob/ui/components";
-import { useMesob as useMesob2 } from "@mesob/ui/providers";
-import { IconAlertCircle, IconEye, IconEyeOff } from "@tabler/icons-react";
-import { useEffect, useState as useState2 } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-// src/hooks/use-translator.ts
-import { useMesob } from "@mesob/ui/providers";
-
-// src/lib/translations.ts
-function createTranslator(messages, namespace) {
-  return (key, params) => {
-    const fullKey = namespace ? `${namespace}.${key}` : key;
-    const keys = fullKey.split(".");
-    let value = messages;
-    for (const k of keys) {
-      if (value && typeof value === "object" && value !== null) {
-        value = value[k];
-      } else {
-        return fullKey;
-      }
-    }
-    if (typeof value !== "string") {
-      return fullKey;
-    }
-    if (params) {
-      return value.replace(
-        /\{(\w+)\}/g,
-        (_, param) => String(params[param] ?? `{${param}}`)
-      );
-    }
-    return value;
-  };
-}
-
-// src/provider.tsx
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { deepmerge } from "deepmerge-ts";
-import createFetchClient from "openapi-fetch";
-import createClient from "openapi-react-query";
-import { createContext, useContext, useMemo, useState } from "react";
-
-// src/utils/cookie.ts
-var isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
-
-// src/provider.tsx
-import { jsx } from "react/jsx-runtime";
-var SessionContext = createContext(null);
-var ApiContext = createContext(null);
-var ConfigContext = createContext(null);
-var queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false
-    }
-  }
-});
-function useApi() {
-  const context = useContext(ApiContext);
-  if (!context) {
-    throw new Error("useApi must be used within MesobAuthProvider");
-  }
-  return context;
-}
-function useConfig() {
-  const context = useContext(ConfigContext);
-  if (!context) {
-    throw new Error("useConfig must be used within MesobAuthProvider");
-  }
-  return context;
-}
-
-// src/hooks/use-translator.ts
-function useTranslator(namespace) {
-  const mesob = useMesob();
-  const { config } = useConfig();
-  if (mesob?.t) {
-    return (key, params) => {
-      const fullKey = namespace ? `${namespace}.${key}` : key;
-      return mesob.t?.(fullKey, params) ?? fullKey;
-    };
-  }
-  return createTranslator(config.messages || {}, namespace);
-}
-
-// src/constants/auth.error.codes.ts
-var AUTH_ERROR_MAPPING = {
-  USER_NOT_FOUND: {
-    title: "Account Not Found",
-    description: "We could not find an account with that identifier. Please check your spelling or sign up."
-  },
-  INVALID_PASSWORD: {
-    title: "Invalid Password",
-    description: "The password you entered is incorrect. Please try again."
-  },
-  USER_EXISTS: {
-    title: "Account Already Exists",
-    description: "An account with this identifier already exists. Please sign in instead."
-  },
-  VERIFICATION_EXPIRED: {
-    title: "Verification Expired",
-    description: "The verification code or link has expired. Please request a new one."
-  },
-  VERIFICATION_MISMATCH: {
-    title: "Invalid Code",
-    description: "The verification code you entered is invalid. Please double-check and try again."
-  },
-  VERIFICATION_NOT_FOUND: {
-    title: "Verification Not Found",
-    description: "We could not find a pending verification request. Please restart the process."
-  },
-  TOO_MANY_ATTEMPTS: {
-    title: "Too Many Attempts",
-    description: "You have made too many requests recently. Please wait a moment before trying again."
-  },
-  REQUIRES_VERIFICATION: {
-    title: "Verification Required",
-    description: "You need to verify your account before you can continue. Please check your email or phone."
-  },
-  UNAUTHORIZED: {
-    title: "Unauthorized",
-    description: "You are not authorized to perform this action. Please sign in again."
-  },
-  ACCESS_DENIED: {
-    title: "Access Denied",
-    description: "You do not have permission to access this resource. Please contact support if you believe this is an error."
-  },
-  HAS_NO_PASSWORD: {
-    title: "No Password Set",
-    description: "Your account does not have a password yet. Continue to set a password before signing in."
-  },
-  PASSWORD_ALREADY_SET: {
-    title: "Password Already Set",
-    description: "This account already has a password. Use the normal sign-in form instead."
-  }
-};
-var validCodes = Object.keys(AUTH_ERROR_MAPPING);
-
-// src/utils/handle-error.ts
-function isAuthError(err) {
-  return typeof err === "object" && err !== null && "message" in err && typeof err.message === "string";
-}
-function extractErrorCode(err) {
-  if (err.code && validCodes.includes(err.code)) {
-    return err.code;
-  }
-  if (err.message) {
-    const messageUpper = err.message.toUpperCase().trim();
-    if (validCodes.includes(messageUpper)) {
-      return messageUpper;
-    }
-  }
-  return "";
-}
-function sanitizeErrorMessage(message) {
-  const lowerMessage = message.toLowerCase();
-  const isDatabaseError = lowerMessage.includes("failed query") || lowerMessage.includes("select") || lowerMessage.includes("insert") || lowerMessage.includes("update") || lowerMessage.includes("delete") || lowerMessage.includes("from") || lowerMessage.includes("where") || lowerMessage.includes("limit") || lowerMessage.includes("params:") || lowerMessage.includes("query") || message.includes('"iam".') || message.includes('"tenants"') || message.includes('"users"') || message.includes('"sessions"') || message.includes('"accounts"') || lowerMessage.includes("relation") || lowerMessage.includes("column") || lowerMessage.includes("syntax error") || lowerMessage.includes("database") || lowerMessage.includes("postgres") || lowerMessage.includes("sql");
-  if (isDatabaseError) {
-    return "An error occurred while processing your request";
-  }
-  return message;
-}
-function handleAuthError(err, setError, t) {
-  const errorCode = extractErrorCode(err);
-  if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {
-    const mapping = AUTH_ERROR_MAPPING[errorCode];
-    setError({
-      title: mapping.title,
-      description: mapping.description
-    });
-    return;
-  }
-  const sanitizedMessage = sanitizeErrorMessage(
-    err.message || t("errors.fallback")
-  );
-  setError({
-    title: t("errors.fallback"),
-    description: sanitizedMessage
-  });
-}
-function handleGenericError(err, setError, t) {
-  const rawMessage = err instanceof Error ? err.message : t("errors.fallback");
-  const sanitizedMessage = sanitizeErrorMessage(rawMessage);
-  setError({
-    title: "Error",
-    description: sanitizedMessage
-  });
-}
-var handleError = (err, setError, t) => {
-  if (isAuthError(err)) {
-    handleAuthError(err, setError, t);
-  } else {
-    handleGenericError(err, setError, t);
-  }
-};
-
-// src/utils/normalize-phone.ts
-function normalizePhone(phone) {
-  const cleaned = phone.trim().replace(/\s/g, "");
-  if (cleaned.startsWith("+2519") || cleaned.startsWith("+2517")) {
-    return cleaned;
-  }
-  if (cleaned.startsWith("2519") || cleaned.startsWith("2517")) {
-    return `+${cleaned}`;
-  }
-  if (cleaned.startsWith("09") || cleaned.startsWith("07")) {
-    return `+251${cleaned.slice(1)}`;
-  }
-  if ((cleaned.startsWith("9") || cleaned.startsWith("7")) && cleaned.length === 9) {
-    return `+251${cleaned}`;
-  }
-  return cleaned;
-}
-
-// src/components/auth/auth-layout.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var AuthLayout = ({
-  title,
-  description,
-  children,
-  footer,
-  logoImage
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx2("div", { className: "flex size-8 mb-6 w-full items-center justify-center rounded-md", children: /* @__PURE__ */ jsx2(
-      "img",
-      {
-        src: logoImage || "",
-        alt: title,
-        width: 42,
-        height: 42
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
-      description && /* @__PURE__ */ jsx2("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
-    ] }),
-    children,
-    footer && /* @__PURE__ */ jsx2("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsx2("div", { className: "w-full text-center text-sm text-muted-foreground", children: footer }) })
-  ] });
-};
-
-// src/components/auth/sign-in.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
-function PasswordInput({ field, show, onToggle }) {
-  const { formItemId, error } = useFormField();
-  return /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx3(
-      Input,
-      {
-        ...field,
-        id: formItemId,
-        type: show ? "text" : "password",
-        autoComplete: "current-password",
-        "aria-invalid": !!error,
-        className: "pr-10"
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        size: "icon",
-        className: "absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground",
-        onClick: onToggle,
-        "aria-label": show ? "Hide password" : "Show password",
-        children: show ? /* @__PURE__ */ jsx3(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(IconEye, { className: "h-4 w-4" })
-      }
-    )
-  ] });
-}
-var signInSchema = (t, phoneRegex) => z.object({
-  username: z.string().trim().min(1, { message: t("errors.requiredField") }).refine(
-    (val) => {
-      const isEmail = z.email().safeParse(val).success;
-      const isPhone2 = phoneRegex.test(val);
-      return isEmail || isPhone2;
-    },
-    { message: t("errors.invalidEmailOrPhone") }
-  ),
-  password: z.union([
-    z.literal(""),
-    z.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
-  ]).optional()
-});
-var SignIn = ({ redirectUrl } = {}) => {
-  const { hooks, setAuth } = useApi();
-  const { config } = useConfig();
-  const mesob = useMesob2();
-  const t = useTranslator("Auth.signIn");
-  const Link = mesob?.navigation?.Link;
-  const [isLoading, setIsLoading] = useState2(false);
-  const [error, setError] = useState2(null);
-  const [showPasswordField, setShowPasswordField] = useState2(false);
-  const [showPassword, setShowPassword] = useState2(false);
-  const [username, setUsername] = useState2("");
-  const [isChecking, setIsChecking] = useState2(false);
-  const checkUserMutation = hooks.useMutation("post", "/check-account");
-  const signInMutation = hooks.useMutation("post", "/sign-in");
-  const phoneRegex = typeof config.phoneRegex === "string" ? new RegExp(config.phoneRegex) : config.phoneRegex || /^(\+2519|\+2517|2519|2517|09|07)\d{8}$/;
-  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/dashboard";
-  const forgotPasswordLink = config.navigation?.links?.forgotPassword || "/auth/forgot-password";
-  const signUpLink = config.navigation?.links?.signUp || "/auth/sign-up";
-  const setPasswordLink = config.navigation?.links?.setPassword || "/auth/set-password";
-  const onNavigate = config.navigation?.onNavigate || ((path) => {
-    if (typeof window !== "undefined") {
-      window.location.href = path;
-    }
-  });
-  const logoImage = config.ui.logoImage;
-  const form = useForm({
-    resolver: zodResolver(signInSchema(t, phoneRegex)),
-    defaultValues: { username: "", password: "" },
-    mode: "onBlur"
-  });
-  useEffect(() => {
-    if (error) {
-      toast.error(error.title || "Error", {
-        description: error.description
-      });
-    }
-  }, [error]);
-  const handleCheckAccount = async (usernameValue) => {
-    setIsChecking(true);
-    try {
-      const normalizedUsername = phoneRegex.test(usernameValue) ? normalizePhone(usernameValue) : usernameValue;
-      const result = await checkUserMutation.mutateAsync({
-        body: {
-          username: normalizedUsername
-        }
-      });
-      if (result.exists) {
-        if (result.requiresPasswordSetup) {
-          const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
-          onNavigate(
-            `${setPasswordLink}?identifier=${encodeURIComponent(normalizedUsername)}${redirectParam}`
-          );
-          return;
-        }
-        setUsername(normalizedUsername);
-        form.setValue("username", normalizedUsername);
-        setShowPasswordField(true);
-      } else {
-        const email = isPhone(normalizedUsername) ? "" : normalizedUsername;
-        const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
-        if (email) {
-          onNavigate(
-            `${signUpLink}?email=${encodeURIComponent(email)}${redirectParam}`
-          );
-        } else {
-          onNavigate(
-            `${signUpLink}?phone=${encodeURIComponent(normalizedUsername)}${redirectParam}`
-          );
-        }
-      }
-    } catch {
-      form.setError("username", { message: t("errors.checkAccountFailed") });
-    } finally {
-      setIsChecking(false);
-    }
-  };
-  const onSubmit = async (values) => {
-    if (showPasswordField) {
-      const pwd = values.password;
-      if (!pwd || pwd.length < 8) {
-        form.setError("password", { message: t("errors.passwordLength") });
-        return;
-      }
-      await handlePasswordSubmit({ password: pwd });
-    } else {
-      await handleCheckAccount(values.username);
-    }
-  };
-  const handlePasswordSubmit = async (values) => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const res = await signInMutation.mutateAsync({
-        body: {
-          identifier: username,
-          password: values.password
-        }
-      });
-      if ("verificationId" in res && res.verificationId) {
-        const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
-        const verifyPath = isPhone(username) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(username)}${redirectParam}` : `/auth/verify-email?verificationId=${res.verificationId}${redirectParam}`;
-        onNavigate(verifyPath);
-        return;
-      }
-      if ("user" in res && "session" in res) {
-        setAuth(res);
-      }
-      onNavigate(defaultRedirect);
-    } catch (err) {
-      const authError = err;
-      const errorCode = authError.code || authError.message;
-      if (errorCode === "HAS_NO_PASSWORD") {
-        const redirectParam = defaultRedirect ? `&redirect=${encodeURIComponent(defaultRedirect)}` : "";
-        onNavigate(
-          `${setPasswordLink}?identifier=${encodeURIComponent(username)}${redirectParam}`
-        );
-        return;
-      }
-      handleError(err, setError, t);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  const handleBack = () => {
-    setShowPasswordField(false);
-    setUsername("");
-    form.setValue("password", "");
-  };
-  const isSubmitting = isLoading || checkUserMutation.isPending || signInMutation.isPending || isChecking;
-  let submitLabel = t("form.continue");
-  if (isSubmitting) {
-    submitLabel = showPasswordField ? t("form.submitting") : t("form.checking");
-  } else if (showPasswordField) {
-    submitLabel = t("form.submit");
-  }
-  let errorContent = null;
-  if (error) {
-    if (typeof error === "string") {
-      errorContent = { title: "Error", description: error };
-    } else {
-      errorContent = error;
-    }
-  }
-  const formContent = /* @__PURE__ */ jsx3(Form, { ...form, children: /* @__PURE__ */ jsxs2(
-    "form",
-    {
-      id: "sign-in-form",
-      onSubmit: form.handleSubmit(onSubmit),
-      className: "space-y-4",
-      children: [
-        showPasswordField ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsxs2(FormItem, { children: [
-            /* @__PURE__ */ jsxs2(FormLabel, { className: "flex justify-between items-center", children: [
-              t("form.accountLabel"),
-              /* @__PURE__ */ jsx3(
-                Button,
-                {
-                  type: "button",
-                  variant: "link",
-                  size: "sm",
-                  className: "p-0 m-0 h-auto",
-                  onClick: handleBack,
-                  children: t("changeAccount")
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx3(
-              Input,
-              {
-                id: "sign-in-username",
-                type: "text",
-                value: username,
-                autoComplete: "username",
-                disabled: true
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx3(
-            FormField,
-            {
-              control: form.control,
-              name: "password",
-              render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
-                /* @__PURE__ */ jsx3(FormLabel, { children: t("form.passwordLabel") }),
-                /* @__PURE__ */ jsx3(
-                  PasswordInput,
-                  {
-                    field: { ...field, value: field.value ?? "" },
-                    show: showPassword,
-                    onToggle: () => setShowPassword(!showPassword)
-                  }
-                ),
-                /* @__PURE__ */ jsx3(FormMessage, {})
-              ] })
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx3(
-          FormField,
-          {
-            control: form.control,
-            name: "username",
-            render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
-              /* @__PURE__ */ jsx3(FormLabel, { children: t("form.accountLabel") }),
-              /* @__PURE__ */ jsx3(FormControl, { children: /* @__PURE__ */ jsx3(Input, { ...field, type: "text", autoComplete: "username" }) }),
-              /* @__PURE__ */ jsx3(FormMessage, {})
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          Button,
-          {
-            type: "submit",
-            className: "w-full",
-            disabled: isSubmitting,
-            loading: isSubmitting,
-            children: submitLabel
-          }
-        )
-      ]
-    }
-  ) });
-  return /* @__PURE__ */ jsx3("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs2(
-    AuthLayout,
-    {
-      title: config.ui.name,
-      description: t("description"),
-      logoImage,
-      footer: showPasswordField ? /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center w-full", children: Link ? /* @__PURE__ */ jsx3(
-        Link,
-        {
-          href: forgotPasswordLink,
-          className: "text-primary inline-block hover:underline",
-          children: t("footer.forgotPassword")
-        }
-      ) : /* @__PURE__ */ jsx3(
-        "a",
-        {
-          href: forgotPasswordLink,
-          onClick: (e) => {
-            e.preventDefault();
-            onNavigate(forgotPasswordLink);
-          },
-          className: "text-primary inline-block hover:underline",
-          children: t("footer.forgotPassword")
-        }
-      ) }) : void 0,
-      children: [
-        formContent,
-        errorContent && /* @__PURE__ */ jsxs2(Alert, { variant: "destructive", className: "mt-4", children: [
-          /* @__PURE__ */ jsx3(IconAlertCircle, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx3(AlertTitle, { children: errorContent.title }),
-          /* @__PURE__ */ jsx3(AlertDescription, { children: errorContent.description })
-        ] })
-      ]
-    }
-  ) });
-};
+  SignIn
+} from "../../chunk-HB2RZTHS.js";
+import "../../chunk-V2W3WPCZ.js";
+import "../../chunk-55BMNC4S.js";
+import "../../chunk-DPH2PHK3.js";
+import "../../chunk-QNCE2B5O.js";
+import "../../chunk-72YRO3A7.js";
 export {
   SignIn
 };