@mesob/auth-react 0.0.8 → 0.1.0

package/dist/components/auth/pages/sign-up-page.js

@@ -1,40 +1,75 @@
 "use client";
 
 // src/components/auth/pages/sign-up-page.tsx
-import { useTranslations as useTranslations2 } from "next-intl";
-import { useState as useState3 } from "react";
-
-// src/context/auth-provider.tsx
 import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState
-} from "react";
+  Alert,
+  AlertDescription,
+  AlertTitle
+} from "@mesob/ui/components/alert";
+import { toast } from "@mesob/ui/components/sonner";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+
+// 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, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-var AuthContext = createContext(null);
-var useAuth = () => {
-  const context = useContext(AuthContext);
+var SessionContext = createContext(null);
+var ApiContext = createContext(null);
+var ConfigContext = createContext(null);
+var queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1e3 * 60 * 5,
+      gcTime: 1e3 * 60 * 10,
+      retry: 1,
+      refetchOnWindowFocus: false
+    }
+  }
+});
+function useApi() {
+  const context = useContext(ApiContext);
   if (!context) {
-    throw new Error("useAuth must be used within AuthProvider");
+    throw new Error("useApi must be used within MesobAuthProvider");
   }
   return context;
-};
-
-// src/client.ts
-var AuthError = class extends Error {
-  code;
-  status;
-  details;
-  constructor(message, code, status, details) {
-    super(message);
-    this.name = "AuthError";
-    this.code = code;
-    this.status = status;
-    this.details = details;
+}
+function useConfig() {
+  const context = useContext(ConfigContext);
+  if (!context) {
+    throw new Error("useConfig must be used within MesobAuthProvider");
   }
-};
+  return context;
+}
 
 // src/constants/auth.error.codes.ts
 var AUTH_ERROR_MAPPING = {
@@ -86,71 +121,67 @@ var AUTH_ERROR_MAPPING = {
 var validCodes = Object.keys(AUTH_ERROR_MAPPING);
 
 // src/utils/handle-error.ts
-var handleError = (err, setError, t) => {
-  if (err instanceof AuthError) {
-    let errorCode = "";
-    if (err.code && validCodes.includes(err.code)) {
-      errorCode = err.code;
-    } else if (err.message) {
-      const messageUpper = err.message.toUpperCase().trim();
-      if (validCodes.includes(messageUpper)) {
-        errorCode = messageUpper;
-      }
-    }
-    if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {
-      const mapping = AUTH_ERROR_MAPPING[errorCode];
-      setError({
-        title: mapping.title,
-        description: mapping.description
-      });
-      return;
+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 handleAuthError(err, setError, t) {
+  const errorCode = extractErrorCode(err);
+  if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {
+    const mapping = AUTH_ERROR_MAPPING[errorCode];
     setError({
-      title: t("errors.fallback"),
-      // or 'Error'
-      description: err.message || t("errors.fallback")
+      title: mapping.title,
+      description: mapping.description
     });
+    return;
+  }
+  setError({
+    title: t("errors.fallback"),
+    description: err.message || t("errors.fallback")
+  });
+}
+function handleGenericError(err, setError, t) {
+  const message = err instanceof Error ? err.message : t("errors.fallback");
+  setError({
+    title: "Error",
+    description: message
+  });
+}
+var handleError = (err, setError, t) => {
+  if (isAuthError(err)) {
+    handleAuthError(err, setError, t);
   } else {
-    const message = err instanceof Error ? err.message : t("errors.fallback");
-    setError({
-      title: "Error",
-      description: message
-    });
+    handleGenericError(err, setError, t);
   }
 };
 
 // src/components/auth/auth-page-layout.tsx
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle
-} from "@mesob/ui/components/alert";
-import { IconAlertCircle } from "@tabler/icons-react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var AuthPageLayout = ({
   title,
   description,
   children,
-  error,
   footer,
   logoImage
 }) => {
-  const errorContent = error ? (
-    // biome-ignore lint/style/noNestedTernary: <explanation>
-    typeof error === "string" ? { title: "Error", description: error } : error
-  ) : null;
   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: "Jiret", width: 42, height: 42 }) }),
+    /* @__PURE__ */ jsx2("div", { className: "flex size-8 mb-6 w-full items-center justify-center rounded-md", children: /* @__PURE__ */ jsx2("img", { src: logoImage || "", alt: "Mesob", 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,
-    errorContent && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
-      /* @__PURE__ */ jsx2(IconAlertCircle, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx2(AlertTitle, { children: errorContent.title }),
-      /* @__PURE__ */ jsx2(AlertDescription, { children: errorContent.description })
-    ] }),
     /* @__PURE__ */ jsx2("div", { className: "mt-2 w-full", children: footer && /* @__PURE__ */ jsx2("div", { className: "w-full text-center text-sm text-muted-foreground", children: footer }) })
   ] });
 };
@@ -159,54 +190,56 @@ var AuthPageLayout = ({
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "@mesob/ui/components/button";
 import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage
-} from "@mesob/ui/components/form";
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel
+} from "@mesob/ui/components/field";
 import { Input } from "@mesob/ui/components/input";
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
-import { useTranslations } from "next-intl";
-import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
-import { useForm } from "react-hook-form";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
+
+// src/hooks/use-translator.ts
+function useTranslator(namespace) {
+  const { config } = useConfig();
+  return createTranslator(config.messages || {}, namespace);
+}
+
+// src/components/auth/sign-up.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
+var signUpSchema = (t) => z.object({
+  fullName: z.string().min(1, t("errors.fullNameRequired")),
+  identifier: z.string().min(1, t("errors.contactRequired")).refine(
+    (val) => {
+      if (!val) {
+        return false;
+      }
+      return val.includes("@") || isPhone(val);
+    },
+    {
+      message: t("errors.invalidEmailOrPhone")
+    }
+  ),
+  password: z.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError")),
+  confirmPassword: z.string()
+}).refine((data) => data.password === data.confirmPassword, {
+  message: t("errors.passwordsMismatch"),
+  path: ["confirmPassword"]
+});
 var SignUp = ({
   onSubmit,
   isLoading = false,
   initialIdentifier
 }) => {
-  const t = useTranslations("Auth.signUp");
+  const t = useTranslator("Auth.signUp");
   const hasInitialIdentifier = !!initialIdentifier;
   const [showPassword, setShowPassword] = useState2(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState2(false);
-  const signUpSchema = useMemo(
-    () => z.object({
-      fullName: z.string().min(1, t("errors.fullNameRequired")),
-      identifier: z.string().min(1, t("errors.contactRequired")).refine(
-        (val) => {
-          if (!val) {
-            return false;
-          }
-          return val.includes("@") || isPhone(val);
-        },
-        {
-          message: t("errors.invalidEmailOrPhone")
-        }
-      ),
-      password: z.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError")),
-      confirmPassword: z.string()
-    }).refine((data) => data.password === data.confirmPassword, {
-      message: t("errors.passwordsMismatch"),
-      path: ["confirmPassword"]
-    }),
-    [t]
-  );
   const form = useForm({
-    resolver: zodResolver(signUpSchema),
+    resolver: zodResolver(signUpSchema(t)),
     defaultValues: {
       fullName: "",
       identifier: initialIdentifier || "",
@@ -232,101 +265,133 @@ var SignUp = ({
     return t("form.phoneLabel");
   };
   const identifierLabel = getIdentifierLabel();
-  return /* @__PURE__ */ jsx3(Form, { ...form, children: /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsx3(
-      FormField,
-      {
-        control: form.control,
-        name: "fullName",
-        render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
-          /* @__PURE__ */ jsx3(FormLabel, { children: t("form.fullNameLabel") }),
-          /* @__PURE__ */ jsx3(FormControl, { children: /* @__PURE__ */ jsx3(Input, { placeholder: t("form.fullNamePlaceholder"), ...field }) }),
-          /* @__PURE__ */ jsx3(FormMessage, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      FormField,
-      {
-        control: form.control,
-        name: "identifier",
-        render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
-          /* @__PURE__ */ jsx3(FormLabel, { className: hasInitialIdentifier ? "block" : void 0, children: identifierLabel }),
-          /* @__PURE__ */ jsx3(FormControl, { children: /* @__PURE__ */ jsx3(
-            Input,
-            {
-              type: field.value.includes("@") ? "email" : "tel",
-              placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
-              ...field,
-              disabled: hasInitialIdentifier
-            }
-          ) }),
-          /* @__PURE__ */ jsx3(FormMessage, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      FormField,
-      {
-        control: form.control,
-        name: "password",
-        render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
-          /* @__PURE__ */ jsx3(FormLabel, { children: t("form.passwordLabel") }),
-          /* @__PURE__ */ jsx3(FormControl, { children: /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxs2("form", { id: "sign-up-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs2(FieldGroup, { children: [
+      /* @__PURE__ */ jsx3(
+        Controller,
+        {
+          name: "fullName",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsx3(FieldLabel, { htmlFor: "sign-up-fullName", children: t("form.fullNameLabel") }),
             /* @__PURE__ */ jsx3(
               Input,
               {
-                type: showPassword ? "text" : "password",
-                placeholder: t("form.passwordPlaceholder"),
-                ...field
+                ...field,
+                id: "sign-up-fullName",
+                placeholder: t("form.fullNamePlaceholder"),
+                "aria-invalid": fieldState.invalid
               }
             ),
+            fieldState.invalid && /* @__PURE__ */ jsx3(FieldError, { errors: [fieldState.error] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Controller,
+        {
+          name: "identifier",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
             /* @__PURE__ */ jsx3(
-              "button",
+              FieldLabel,
               {
-                type: "button",
-                onClick: () => setShowPassword(!showPassword),
-                className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                children: showPassword ? /* @__PURE__ */ jsx3(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(IconEye, { className: "h-4 w-4" })
+                htmlFor: "sign-up-identifier",
+                className: hasInitialIdentifier ? "block" : void 0,
+                children: identifierLabel
               }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx3(FormMessage, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      FormField,
-      {
-        control: form.control,
-        name: "confirmPassword",
-        render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
-          /* @__PURE__ */ jsx3(FormLabel, { children: t("form.confirmPasswordLabel") }),
-          /* @__PURE__ */ jsx3(FormControl, { children: /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+            ),
             /* @__PURE__ */ jsx3(
               Input,
               {
-                type: showConfirmPassword ? "text" : "password",
-                placeholder: t("form.passwordPlaceholder"),
-                ...field
+                ...field,
+                id: "sign-up-identifier",
+                type: field.value.includes("@") ? "email" : "tel",
+                placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
+                disabled: hasInitialIdentifier,
+                "aria-invalid": fieldState.invalid
               }
             ),
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                onClick: () => setShowConfirmPassword(!showConfirmPassword),
-                className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                children: showConfirmPassword ? /* @__PURE__ */ jsx3(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(IconEye, { className: "h-4 w-4" })
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx3(FormMessage, {})
-        ] })
+            fieldState.invalid && /* @__PURE__ */ jsx3(FieldError, { errors: [fieldState.error] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Controller,
+        {
+          name: "password",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsx3(FieldLabel, { htmlFor: "sign-up-password", children: t("form.passwordLabel") }),
+            /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx3(
+                Input,
+                {
+                  ...field,
+                  id: "sign-up-password",
+                  type: showPassword ? "text" : "password",
+                  placeholder: t("form.passwordPlaceholder"),
+                  "aria-invalid": fieldState.invalid
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  children: showPassword ? /* @__PURE__ */ jsx3(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(IconEye, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            fieldState.invalid && /* @__PURE__ */ jsx3(FieldError, { errors: [fieldState.error] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Controller,
+        {
+          name: "confirmPassword",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsx3(FieldLabel, { htmlFor: "sign-up-confirmPassword", children: t("form.confirmPasswordLabel") }),
+            /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx3(
+                Input,
+                {
+                  ...field,
+                  id: "sign-up-confirmPassword",
+                  type: showConfirmPassword ? "text" : "password",
+                  placeholder: t("form.passwordPlaceholder"),
+                  "aria-invalid": fieldState.invalid
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowConfirmPassword(!showConfirmPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  children: showConfirmPassword ? /* @__PURE__ */ jsx3(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(IconEye, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            fieldState.invalid && /* @__PURE__ */ jsx3(FieldError, { errors: [fieldState.error] })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "mt-4", children: /* @__PURE__ */ jsx3(
+      Button,
+      {
+        type: "submit",
+        form: "sign-up-form",
+        className: "w-full",
+        disabled: isLoading,
+        children: isLoading ? t("form.submitting") : t("form.submit")
       }
-    ),
-    /* @__PURE__ */ jsx3(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
-  ] }) });
+    ) })
+  ] });
 };
 
 // src/components/auth/pages/sign-up-page.tsx
@@ -334,33 +399,48 @@ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var isPhone2 = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
 var SignUpPage = ({
   redirectUrl,
-  onNavigate,
-  linkComponent: Link,
-  links,
-  initialIdentifier,
-  logoImage
-}) => {
-  const t = useTranslations2("Auth.signUp");
-  const { client, setAuth } = useAuth();
+  initialIdentifier
+} = {}) => {
+  const { hooks, setAuth } = useApi();
+  const { config } = useConfig();
+  const t = createTranslator(config.messages || {}, "Auth.signUp");
   const [isLoading, setIsLoading] = useState3(false);
   const [error, setError] = useState3(null);
-  const signInLink = links?.signIn || "/auth/sign-in";
+  const signUpMutation = hooks.useMutation("post", "/sign-up");
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const Link = config.navigation?.linkComponent;
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const logoImage = config.ui.logoImage;
+  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
+  useEffect3(() => {
+    if (error) {
+      toast.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
   const handleSubmit = async (values) => {
     setIsLoading(true);
     setError(null);
     try {
       const identifier = values.identifier;
       const usingPhone = isPhone2(identifier);
-      const res = usingPhone ? await client.signUpWithPhone({
-        phone: identifier,
-        password: values.password,
-        fullName: values.fullName,
-        handle: values.handle
-      }) : await client.signUpWithEmail({
-        email: identifier,
-        password: values.password,
-        fullName: values.fullName,
-        handle: values.handle
+      const res = await signUpMutation.mutateAsync({
+        body: usingPhone ? {
+          phone: identifier,
+          password: values.password,
+          fullName: values.fullName,
+          handle: values.handle
+        } : {
+          email: identifier,
+          password: values.password,
+          fullName: values.fullName,
+          handle: values.handle
+        }
       });
       if ("verificationId" in res && res.verificationId) {
         if (usingPhone) {
@@ -377,19 +457,26 @@ var SignUpPage = ({
       if ("user" in res && "session" in res) {
         setAuth(res);
       }
-      onNavigate(redirectUrl || "/");
+      onNavigate(defaultRedirect);
     } catch (err) {
       handleError(err, setError, t);
     } finally {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx4(
+  let errorContent = null;
+  if (error) {
+    if (typeof error === "string") {
+      errorContent = { title: "Error", description: error };
+    } else {
+      errorContent = error;
+    }
+  }
+  return /* @__PURE__ */ jsxs3(
     AuthPageLayout,
     {
       title: t("title"),
       description: t("description"),
-      error,
       logoImage,
       footer: /* @__PURE__ */ jsxs3("p", { children: [
         t("footer.hasAccount"),
@@ -407,14 +494,21 @@ var SignUpPage = ({
           }
         )
       ] }),
-      children: /* @__PURE__ */ jsx4(
-        SignUp,
-        {
-          onSubmit: handleSubmit,
-          isLoading,
-          initialIdentifier
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx4(
+          SignUp,
+          {
+            onSubmit: handleSubmit,
+            isLoading: isLoading || signUpMutation.isPending,
+            initialIdentifier
+          }
+        ),
+        errorContent && /* @__PURE__ */ jsxs3(Alert, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx4(IconAlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx4(AlertTitle, { children: errorContent.title }),
+          /* @__PURE__ */ jsx4(AlertDescription, { children: errorContent.description })
+        ] })
+      ]
     }
   );
 };