@mesob/auth-react 0.0.7 → 0.1.0

package/dist/components/auth/pages/reset-password-page.js

@@ -1,40 +1,75 @@
 "use client";
 
 // src/components/auth/pages/reset-password-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 useEffect2, 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,13 +190,11 @@ 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 {
   InputOTP,
@@ -174,30 +203,34 @@ import {
 } from "@mesob/ui/components/input-otp";
 import { Spinner } from "@mesob/ui/components/spinner";
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
-import { useTranslations } from "next-intl";
-import { useMemo, useState as useState2 } from "react";
-import { useForm } from "react-hook-form";
+import { 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/reset-password-form.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var resetPasswordSchema = (t) => z.object({
+  code: z.string().length(6, t("errors.codeLength")),
+  password: z.string().min(8, t("errors.passwordLength")),
+  confirmPassword: z.string()
+}).refine((data) => data.password === data.confirmPassword, {
+  message: t("errors.passwordsMismatch"),
+  path: ["confirmPassword"]
+});
 var ResetPasswordForm = ({
   onSubmit,
   isLoading = false
 }) => {
-  const t = useTranslations("Auth.resetPassword");
+  const t = useTranslator("Auth.resetPassword");
   const [showPassword, setShowPassword] = useState2(false);
-  const resetPasswordSchema = useMemo(
-    () => z.object({
-      code: z.string().length(6, t("errors.codeLength")),
-      password: z.string().min(8, t("errors.passwordLength")),
-      confirmPassword: z.string()
-    }).refine((data) => data.password === data.confirmPassword, {
-      message: t("errors.passwordsMismatch"),
-      path: ["confirmPassword"]
-    }),
-    [t]
-  );
   const form = useForm({
-    resolver: zodResolver(resetPasswordSchema),
+    resolver: zodResolver(resetPasswordSchema(t)),
     defaultValues: {
       code: "",
       password: "",
@@ -207,110 +240,149 @@ var ResetPasswordForm = ({
   const handleSubmit = form.handleSubmit(async (values) => {
     await onSubmit(values);
   });
-  return /* @__PURE__ */ jsx3(Form, { ...form, children: /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsx3(
-      FormField,
-      {
-        control: form.control,
-        name: "code",
-        render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
-          /* @__PURE__ */ jsx3("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx3(FormLabel, { children: t("form.codeLabel") }) }),
-          /* @__PURE__ */ jsx3(FormControl, { children: /* @__PURE__ */ jsx3("div", { className: "flex mt-2 justify-center", children: /* @__PURE__ */ jsx3(InputOTP, { maxLength: 6, ...field, containerClassName: "gap-4", children: /* @__PURE__ */ jsxs2(InputOTPGroup, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
-            /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 0 }),
-            /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 1 }),
-            /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 2 }),
-            /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 3 }),
-            /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 4 }),
-            /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 5 })
-          ] }) }) }) }),
-          /* @__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: [
-            /* @__PURE__ */ jsx3(
-              Input,
-              {
-                type: showPassword ? "text" : "password",
-                placeholder: t("form.passwordPlaceholder"),
-                ...field
-              }
-            ),
-            /* @__PURE__ */ jsx3(
-              "button",
+  return /* @__PURE__ */ jsxs2("form", { id: "reset-password-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs2(FieldGroup, { children: [
+      /* @__PURE__ */ jsx3(
+        Controller,
+        {
+          name: "code",
+          control: form.control,
+          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+            /* @__PURE__ */ jsx3("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx3(FieldLabel, { children: t("form.codeLabel") }) }),
+            /* @__PURE__ */ jsx3("div", { className: "flex mt-2 justify-center", children: /* @__PURE__ */ jsx3(
+              InputOTP,
               {
-                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" })
+                maxLength: 6,
+                value: field.value,
+                onChange: field.onChange,
+                onBlur: field.onBlur,
+                containerClassName: "gap-4",
+                "aria-invalid": fieldState.invalid,
+                children: /* @__PURE__ */ jsxs2(InputOTPGroup, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
+                  /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 0 }),
+                  /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 1 }),
+                  /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 2 }),
+                  /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 3 }),
+                  /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 4 }),
+                  /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 5 })
+                ] })
               }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx3(FormMessage, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      FormField,
+            ) }),
+            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: "reset-password-password", children: t("form.passwordLabel") }),
+            /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx3(
+                Input,
+                {
+                  ...field,
+                  id: "reset-password-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: "reset-password-confirmPassword", children: t("form.confirmPasswordLabel") }),
+            /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx3(
+                Input,
+                {
+                  ...field,
+                  id: "reset-password-confirmPassword",
+                  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("div", { className: "mt-4", children: /* @__PURE__ */ jsxs2(
+      Button,
       {
-        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: showPassword ? "text" : "password",
-                placeholder: t("form.passwordPlaceholder"),
-                ...field
-              }
-            ),
-            /* @__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" })
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx3(FormMessage, {})
-        ] })
+        type: "submit",
+        form: "reset-password-form",
+        className: "w-full",
+        disabled: isLoading,
+        children: [
+          isLoading && /* @__PURE__ */ jsx3(Spinner, {}),
+          isLoading ? t("form.submitting") : t("form.submit")
+        ]
       }
-    ),
-    /* @__PURE__ */ jsxs2(Button, { type: "submit", className: "w-full", disabled: isLoading, children: [
-      isLoading && /* @__PURE__ */ jsx3(Spinner, {}),
-      isLoading ? t("form.submitting") : t("form.submit")
-    ] })
-  ] }) });
+    ) })
+  ] });
 };
 
 // src/components/auth/pages/reset-password-page.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var ResetPasswordPage = ({
   verificationId,
-  onNavigate,
-  linkComponent: Link,
-  links,
-  logoImage,
   redirectUrl
 }) => {
-  const t = useTranslations2("Auth.resetPassword");
-  const common = useTranslations2("Common");
-  const { client, refresh } = useAuth();
+  const { hooks, refresh } = useApi();
+  const { config } = useConfig();
+  const t = createTranslator(config.messages || {}, "Auth.resetPassword");
+  const common = createTranslator(config.messages || {}, "Common");
   const [isLoading, setIsLoading] = useState3(false);
   const [error, setError] = useState3(null);
-  const signInLink = links?.signIn || "/auth/sign-in";
-  const forgotPasswordLink = links?.forgotPassword || "/auth/forgot-password";
+  const resetPasswordMutation = hooks.useMutation("post", "/password/reset");
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const forgotPasswordLink = config.navigation?.links?.forgotPassword || "/auth/forgot-password";
+  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 || "/";
+  useEffect2(() => {
+    if (error) {
+      toast.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
   const handleSubmit = async (values) => {
     if (!verificationId) {
       setError({
@@ -322,13 +394,15 @@ var ResetPasswordPage = ({
     setIsLoading(true);
     setError(null);
     try {
-      await client.resetPassword({
-        verificationId,
-        code: values.code,
-        password: values.password
+      await resetPasswordMutation.mutateAsync({
+        body: {
+          verificationId,
+          code: values.code,
+          password: values.password
+        }
       });
       await refresh();
-      onNavigate(redirectUrl || "/");
+      onNavigate(defaultRedirect);
     } catch (err) {
       handleError(err, setError, t);
     } finally {
@@ -365,12 +439,19 @@ var ResetPasswordPage = ({
       }
     );
   }
-  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: Link ? /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between w-full gap-2", children: [
         /* @__PURE__ */ jsx4(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }),
@@ -408,15 +489,22 @@ var ResetPasswordPage = ({
           }
         )
       ] }),
-      children: /* @__PURE__ */ jsx4(
-        ResetPasswordForm,
-        {
-          verificationId,
-          onSubmit: handleSubmit,
-          isLoading,
-          error
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx4(
+          ResetPasswordForm,
+          {
+            verificationId,
+            onSubmit: handleSubmit,
+            isLoading: isLoading || resetPasswordMutation.isPending,
+            error
+          }
+        ),
+        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 })
+        ] })
+      ]
     }
   );
 };