@mesob/auth-react 0.4.0 → 0.4.1

package/dist/chunk-C26NPUPI.js

@@ -0,0 +1,272 @@
+import {
+  normalizePhone
+} from "./chunk-V2W3WPCZ.js";
+import {
+  useApi,
+  useConfig,
+  useSession
+} from "./chunk-72YRO3A7.js";
+
+// src/components/profile/request-change-phone-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Input, Label, Spinner } from "@mesob/ui/components";
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var phonePasswordSchema = (phoneRegex) => z.object({
+  phone: z.string().trim().min(1, { message: "Phone number is required" }).refine(
+    (val) => {
+      const isPhone = phoneRegex.test(val);
+      return isPhone;
+    },
+    {
+      message: "Invalid phone number"
+    }
+  ),
+  password: z.string().min(8, "Password must be at least 8 characters").max(128, "Password too long")
+});
+function isAuthError(error) {
+  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
+}
+function getErrorCode(error) {
+  if (error.code) {
+    return error.code;
+  }
+  if (error.message) {
+    const upperMessage = error.message.toUpperCase().trim();
+    const validCodes = [
+      "USER_NOT_FOUND",
+      "USER_EXISTS",
+      "INVALID_PASSWORD",
+      "VERIFICATION_EXPIRED",
+      "VERIFICATION_MISMATCH",
+      "VERIFICATION_NOT_FOUND",
+      "TOO_MANY_ATTEMPTS",
+      "UNAUTHORIZED"
+    ];
+    if (validCodes.includes(upperMessage)) {
+      return upperMessage;
+    }
+  }
+  return void 0;
+}
+function getErrorMessage(error) {
+  if (isAuthError(error)) {
+    const errorCode = getErrorCode(error);
+    switch (errorCode) {
+      case "USER_EXISTS":
+        return "This phone number is already taken. Please use a different number.";
+      case "VERIFICATION_EXPIRED":
+        return "Verification code has expired. Please request a new one.";
+      case "VERIFICATION_MISMATCH":
+        return "Invalid verification code. Please try again.";
+      case "VERIFICATION_NOT_FOUND":
+        return "Verification not found. Please request a new code.";
+      default:
+        return error.message || "An error occurred. Please try again.";
+    }
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return "An error occurred. Please try again.";
+}
+function RequestChangePhoneForm({
+  onSuccess,
+  onCancel,
+  buttonText
+}) {
+  const { user } = useSession();
+  const { hooks } = useApi();
+  const { config } = useConfig();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isChecking, setIsChecking] = useState(true);
+  const [showPassword, setShowPassword] = useState(false);
+  const phoneRegex = typeof config.phoneRegex === "string" ? new RegExp(config.phoneRegex) : config.phoneRegex || /^(\+2519|\+2517|2519|2517|09|07)\d{8}$/;
+  const getPendingAccountChangeQuery = hooks.useQuery(
+    "get",
+    "/account-change/pending",
+    {},
+    { enabled: false }
+  );
+  const verifyPasswordMutation = hooks.useMutation("post", "/password/verify");
+  const checkUserMutation = hooks.useMutation("post", "/check-account");
+  const requestPhoneOtpMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/request"
+  );
+  const phonePasswordForm = useForm({
+    resolver: zodResolver(phonePasswordSchema(phoneRegex)),
+    defaultValues: {
+      phone: "",
+      password: ""
+    }
+  });
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors }
+  } = phonePasswordForm;
+  useEffect(() => {
+    let active = true;
+    const run = async () => {
+      try {
+        const data = await getPendingAccountChangeQuery.refetch();
+        if (!active) {
+          return;
+        }
+        const accountChange = data.data?.accountChange;
+        const verificationId = data.data?.verificationId;
+        if (accountChange?.changeType !== "phone") {
+          setIsChecking(false);
+          return;
+        }
+        if (!accountChange.newPhone) {
+          setIsChecking(false);
+          return;
+        }
+        if (getValues("phone")) {
+          setIsChecking(false);
+          return;
+        }
+        setValue("phone", accountChange.newPhone, { shouldValidate: true });
+        if (verificationId) {
+          toast.message("Resuming verification\u2026");
+          onSuccess(verificationId, accountChange.newPhone);
+          return;
+        }
+        setIsChecking(false);
+      } catch {
+        setIsChecking(false);
+      }
+    };
+    run().catch(() => void 0);
+    return () => {
+      active = false;
+    };
+  }, [getPendingAccountChangeQuery.refetch, getValues, onSuccess, setValue]);
+  const onPhonePasswordSubmit = async (data) => {
+    if (!user) {
+      toast.error("User not found");
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      const normalizedPhone = normalizePhone(data.phone);
+      await verifyPasswordMutation.mutateAsync({
+        body: { password: data.password }
+      });
+      const checkResult = await checkUserMutation.mutateAsync({
+        body: { identifier: normalizedPhone }
+      });
+      if (checkResult.data?.exists) {
+        if (user?.phone?.replace(/\s/g, "") === normalizedPhone.replace(/\s/g, "")) {
+          toast.error("This is already your current phone number.");
+          return;
+        }
+        toast.error(
+          "This phone number is already taken. Please use a different number."
+        );
+        return;
+      }
+      const verification = await requestPhoneOtpMutation.mutateAsync({
+        body: {
+          phone: normalizedPhone,
+          context: "change-phone"
+        }
+      });
+      toast.success("Verification code sent to your phone");
+      onSuccess(verification.data?.verificationId ?? "", normalizedPhone);
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      if (isAuthError(error)) {
+        const errorCode = getErrorCode(error);
+        if (errorCode === "INVALID_PASSWORD" || errorCode === "USER_NOT_FOUND") {
+          toast.error("Incorrect password. Please try again.");
+          return;
+        }
+      }
+      toast.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const isLoading = isSubmitting || isChecking;
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit(onPhonePasswordSubmit),
+      className: "p-4 space-y-4 border-t",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4 w-full md:w-1/2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "phone", children: "Phone Number" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "phone",
+                type: "tel",
+                placeholder: "Enter your new phone number",
+                ...register("phone"),
+                disabled: isLoading
+              }
+            ),
+            errors.phone && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: errors.phone.message })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: "Password" }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "password",
+                  type: showPassword ? "text" : "password",
+                  autoComplete: "current-password",
+                  placeholder: "Enter your password",
+                  ...register("password"),
+                  disabled: isLoading
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "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__ */ jsx(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconEye, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            errors.password && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: errors.password.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: onCancel,
+              disabled: isLoading,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }),
+            isChecking ? "Checking\u2026" : buttonText
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  RequestChangePhoneForm
+};
+//# sourceMappingURL=chunk-C26NPUPI.js.map

package/dist/chunk-C26NPUPI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/profile/request-change-phone-form.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Button, Input, Label, Spinner } from '@mesob/ui/components';\nimport { IconEye, IconEyeOff } from '@tabler/icons-react';\nimport { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { toast } from 'sonner';\nimport { z } from 'zod';\nimport { useApi, useConfig, useSession } from '../../provider';\nimport { normalizePhone } from '../../utils/normalize-phone';\n\nconst phonePasswordSchema = (phoneRegex: RegExp) =>\n  z.object({\n    phone: z\n      .string()\n      .trim()\n      .min(1, { message: 'Phone number is required' })\n      .refine(\n        (val) => {\n          const isPhone = phoneRegex.test(val);\n          return isPhone;\n        },\n        {\n          message: 'Invalid phone number',\n        },\n      ),\n    password: z\n      .string()\n      .min(8, 'Password must be at least 8 characters')\n      .max(128, 'Password too long'),\n  });\n\ntype PhonePasswordFormData = z.infer<ReturnType<typeof phonePasswordSchema>>;\n\ntype AuthErrorLike = {\n  code?: string;\n  message?: string;\n  name?: string;\n};\n\nfunction isAuthError(error: unknown): error is AuthErrorLike {\n  return (\n    typeof error === 'object' &&\n    error !== null &&\n    ('code' in error || 'message' in error || 'name' in error)\n  );\n}\n\nfunction getErrorCode(error: AuthErrorLike): string | undefined {\n  if (error.code) {\n    return error.code;\n  }\n  if (error.message) {\n    const upperMessage = error.message.toUpperCase().trim();\n    const validCodes = [\n      'USER_NOT_FOUND',\n      'USER_EXISTS',\n      'INVALID_PASSWORD',\n      'VERIFICATION_EXPIRED',\n      'VERIFICATION_MISMATCH',\n      'VERIFICATION_NOT_FOUND',\n      'TOO_MANY_ATTEMPTS',\n      'UNAUTHORIZED',\n    ];\n    if (validCodes.includes(upperMessage)) {\n      return upperMessage;\n    }\n  }\n  return undefined;\n}\n\nfunction getErrorMessage(error: unknown): string {\n  if (isAuthError(error)) {\n    const errorCode = getErrorCode(error);\n    switch (errorCode) {\n      case 'USER_EXISTS':\n        return 'This phone number is already taken. Please use a different number.';\n      case 'VERIFICATION_EXPIRED':\n        return 'Verification code has expired. Please request a new one.';\n      case 'VERIFICATION_MISMATCH':\n        return 'Invalid verification code. Please try again.';\n      case 'VERIFICATION_NOT_FOUND':\n        return 'Verification not found. Please request a new code.';\n      default:\n        return error.message || 'An error occurred. Please try again.';\n    }\n  }\n  if (error instanceof Error) {\n    return error.message;\n  }\n  return 'An error occurred. Please try again.';\n}\n\ninterface RequestChangePhoneFormProps {\n  onSuccess: (verificationId: string, phone: string) => void;\n  onCancel: () => void;\n  buttonText: string;\n}\n\nexport function RequestChangePhoneForm({\n  onSuccess,\n  onCancel,\n  buttonText,\n}: RequestChangePhoneFormProps) {\n  const { user } = useSession();\n  const { hooks } = useApi();\n  const { config } = useConfig();\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [isChecking, setIsChecking] = useState(true);\n  const [showPassword, setShowPassword] = useState(false);\n\n  const phoneRegex =\n    typeof config.phoneRegex === 'string'\n      ? new RegExp(config.phoneRegex)\n      : config.phoneRegex || /^(\\+2519|\\+2517|2519|2517|09|07)\\d{8}$/;\n\n  const getPendingAccountChangeQuery = hooks.useQuery(\n    'get',\n    '/account-change/pending',\n    {},\n    { enabled: false },\n  );\n  const verifyPasswordMutation = hooks.useMutation('post', '/password/verify');\n  const checkUserMutation = hooks.useMutation('post', '/check-account');\n  const requestPhoneOtpMutation = hooks.useMutation(\n    'post',\n    '/phone/verification/request',\n  );\n\n  const phonePasswordForm = useForm<PhonePasswordFormData>({\n    resolver: zodResolver(phonePasswordSchema(phoneRegex)),\n    defaultValues: {\n      phone: '',\n      password: '',\n    },\n  });\n\n  const {\n    register,\n    handleSubmit,\n    getValues,\n    setValue,\n    formState: { errors },\n  } = phonePasswordForm;\n\n  useEffect(() => {\n    let active = true;\n    const run = async () => {\n      try {\n        const data = await getPendingAccountChangeQuery.refetch();\n        if (!active) {\n          return;\n        }\n        const accountChange = data.data?.accountChange;\n        const verificationId = data.data?.verificationId;\n        if (accountChange?.changeType !== 'phone') {\n          setIsChecking(false);\n          return;\n        }\n        if (!accountChange.newPhone) {\n          setIsChecking(false);\n          return;\n        }\n        if (getValues('phone')) {\n          setIsChecking(false);\n          return;\n        }\n        setValue('phone', accountChange.newPhone, { shouldValidate: true });\n\n        if (verificationId) {\n          toast.message('Resuming verification…');\n          onSuccess(verificationId, accountChange.newPhone);\n          return;\n        }\n\n        setIsChecking(false);\n      } catch {\n        setIsChecking(false);\n      }\n    };\n    run().catch(() => undefined);\n    return () => {\n      active = false;\n    };\n  }, [getPendingAccountChangeQuery.refetch, getValues, onSuccess, setValue]);\n\n  const onPhonePasswordSubmit = async (data: PhonePasswordFormData) => {\n    if (!user) {\n      toast.error('User not found');\n      return;\n    }\n\n    try {\n      setIsSubmitting(true);\n\n      const normalizedPhone = normalizePhone(data.phone);\n\n      // Verify password first\n      await verifyPasswordMutation.mutateAsync({\n        body: { password: data.password },\n      });\n\n      // Check if phone exists\n      const checkResult = await checkUserMutation.mutateAsync({\n        body: { identifier: normalizedPhone },\n      });\n      if (checkResult.data?.exists) {\n        // Check if it belongs to current user\n        if (\n          user?.phone?.replace(/\\s/g, '') === normalizedPhone.replace(/\\s/g, '')\n        ) {\n          toast.error('This is already your current phone number.');\n          return;\n        }\n        toast.error(\n          'This phone number is already taken. Please use a different number.',\n        );\n        return;\n      }\n\n      // Request OTP\n      const verification = await requestPhoneOtpMutation.mutateAsync({\n        body: {\n          phone: normalizedPhone,\n          context: 'change-phone',\n        },\n      });\n\n      toast.success('Verification code sent to your phone');\n      onSuccess(verification.data?.verificationId ?? '', normalizedPhone);\n    } catch (error) {\n      const errorMessage = getErrorMessage(error);\n      if (isAuthError(error)) {\n        const errorCode = getErrorCode(error);\n        if (\n          errorCode === 'INVALID_PASSWORD' ||\n          errorCode === 'USER_NOT_FOUND'\n        ) {\n          toast.error('Incorrect password. Please try again.');\n          return;\n        }\n      }\n      toast.error(errorMessage);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const isLoading = isSubmitting || isChecking;\n\n  return (\n    <form\n      onSubmit={handleSubmit(onPhonePasswordSubmit)}\n      className=\"p-4 space-y-4 border-t\"\n    >\n      <div className=\"space-y-4 w-full md:w-1/2\">\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"phone\">Phone Number</Label>\n          <Input\n            id=\"phone\"\n            type=\"tel\"\n            placeholder=\"Enter your new phone number\"\n            {...register('phone')}\n            disabled={isLoading}\n          />\n          {errors.phone && (\n            <p className=\"text-sm text-destructive\">{errors.phone.message}</p>\n          )}\n        </div>\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"password\">Password</Label>\n          <div className=\"relative\">\n            <Input\n              id=\"password\"\n              type={showPassword ? 'text' : 'password'}\n              autoComplete=\"current-password\"\n              placeholder=\"Enter your password\"\n              {...register('password')}\n              disabled={isLoading}\n            />\n            <button\n              type=\"button\"\n              onClick={() => setShowPassword(!showPassword)}\n              className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n            >\n              {showPassword ? (\n                <IconEyeOff className=\"h-4 w-4\" />\n              ) : (\n                <IconEye className=\"h-4 w-4\" />\n              )}\n            </button>\n          </div>\n          {errors.password && (\n            <p className=\"text-sm text-destructive\">\n              {errors.password.message}\n            </p>\n          )}\n        </div>\n      </div>\n\n      <div className=\"flex justify-end gap-2\">\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          onClick={onCancel}\n          disabled={isLoading}\n        >\n          Cancel\n        </Button>\n        <Button type=\"submit\" disabled={isLoading}>\n          {isLoading && <Spinner className=\"mr-2 h-4 w-4\" />}\n          {isChecking ? 'Checking…' : buttonText}\n        </Button>\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-C2KFZ57H.js

@@ -0,0 +1,194 @@
+import {
+  useApi,
+  useConfig
+} from "./chunk-72YRO3A7.js";
+
+// src/components/iam/role-detail-page.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  EntityFormActions,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  LocaleInputText,
+  LocaleInputTextarea,
+  Section,
+  Skeleton
+} from "@mesob/ui/components";
+import { useLocaleSchemas } from "@mesob/ui/providers";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RoleDetailPage({
+  roleId,
+  basePath = "/iam/roles"
+}) {
+  const { hooks } = useApi();
+  const { config } = useConfig();
+  const qc = useQueryClient();
+  const { localeInputDefault, requiredSchema, optionalSchema } = useLocaleSchemas();
+  const schema = useMemo(
+    () => z.object({
+      name: requiredSchema,
+      code: z.string().min(1, "Code is required"),
+      description: optionalSchema
+    }),
+    [requiredSchema, optionalSchema]
+  );
+  const defaults = useMemo(
+    () => ({
+      name: { ...localeInputDefault },
+      code: "",
+      description: { ...localeInputDefault }
+    }),
+    [localeInputDefault]
+  );
+  const { data, isLoading } = hooks.useQuery(
+    "get",
+    "/roles/{id}",
+    { params: { path: { id: roleId } } },
+    { enabled: !!roleId }
+  );
+  const update = hooks.useMutation("put", "/roles/{id}", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/roles"] });
+      qc.invalidateQueries({ queryKey: ["get", "/roles/{id}"] });
+      toast.success("Role updated");
+    },
+    onError: () => {
+      toast.error("Failed to update role");
+    }
+  });
+  const remove = hooks.useMutation("delete", "/roles/{id}", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/roles"] });
+      toast.success("Role deleted");
+      config.navigation?.onNavigate?.(basePath);
+    },
+    onError: () => {
+      toast.error("Failed to delete role");
+    }
+  });
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: defaults
+  });
+  const { reset, formState, control, register } = form;
+  useEffect(() => {
+    if (!data?.role) {
+      return;
+    }
+    const r = data.role;
+    reset({
+      name: r.name ?? {},
+      code: r.code,
+      description: r.description ?? {}
+    });
+  }, [data?.role, reset]);
+  if (!roleId) {
+    return null;
+  }
+  const role = data?.role;
+  const editable = role?.isEditable !== false;
+  const deletable = role?.isDeletable !== false;
+  const onSubmit = form.handleSubmit(async (d) => {
+    await update.mutateAsync({
+      params: { path: { id: roleId } },
+      body: {
+        name: d.name,
+        code: d.code,
+        description: d.description ?? void 0
+      }
+    });
+  });
+  const footer = role ? /* @__PURE__ */ jsx(
+    EntityFormActions,
+    {
+      mode: "edit",
+      onSubmit,
+      onDelete: deletable ? () => remove.mutate({
+        params: { path: { id: roleId } }
+      }) : void 0,
+      isSubmitting: update.isPending,
+      isDeleting: remove.isPending,
+      disabled: !editable,
+      itemName: "role"
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(Section, { title: "Role details", footer, defaultOpen: true, children: isLoading || !role ? /* @__PURE__ */ jsx(RoleDetailSkeleton, {}) : /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(
+      LocaleInputText,
+      {
+        label: "Name",
+        field: "name",
+        required: true,
+        register,
+        errors: formState.errors,
+        placeholder: "e.g. Administrator",
+        disabled: !editable
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control,
+        name: "code",
+        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+          /* @__PURE__ */ jsxs(FormLabel, { children: [
+            "Code ",
+            /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: "e.g. admin",
+              disabled: !editable,
+              ...field
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LocaleInputTextarea,
+      {
+        label: "Description",
+        field: "description",
+        register,
+        errors: formState.errors,
+        placeholder: "Description",
+        rows: 3,
+        disabled: !editable
+      }
+    )
+  ] }) }) });
+}
+function RoleDetailSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-14" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" })
+    ] })
+  ] });
+}
+
+export {
+  RoleDetailPage
+};
+//# sourceMappingURL=chunk-C2KFZ57H.js.map

package/dist/chunk-C2KFZ57H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/iam/role-detail-page.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport {\n  EntityFormActions,\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  Input,\n  LocaleInputText,\n  LocaleInputTextarea,\n  Section,\n  Skeleton,\n} from '@mesob/ui/components';\nimport { useLocaleSchemas } from '@mesob/ui/providers';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useEffect, useMemo } from 'react';\nimport type { Resolver } from 'react-hook-form';\nimport { useForm } from 'react-hook-form';\nimport { toast } from 'sonner';\nimport { z } from 'zod';\nimport { useApi, useConfig } from '../../provider';\n\ntype RoleFormData = {\n  name: Record<string, string>;\n  code: string;\n  description: Record<string, string>;\n};\n\ntype RoleDetailPageProps = {\n  roleId: string;\n  basePath?: string;\n};\n\nexport function RoleDetailPage({\n  roleId,\n  basePath = '/iam/roles',\n}: RoleDetailPageProps) {\n  const { hooks } = useApi();\n  const { config } = useConfig();\n  const qc = useQueryClient();\n  const { localeInputDefault, requiredSchema, optionalSchema } =\n    useLocaleSchemas();\n  const schema = useMemo(\n    () =>\n      z.object({\n        name: requiredSchema,\n        code: z.string().min(1, 'Code is required'),\n        description: optionalSchema,\n      }),\n    [requiredSchema, optionalSchema],\n  );\n  const defaults: RoleFormData = useMemo(\n    () => ({\n      name: { ...localeInputDefault },\n      code: '',\n      description: { ...localeInputDefault },\n    }),\n    [localeInputDefault],\n  );\n\n  const { data, isLoading } = hooks.useQuery(\n    'get',\n    '/roles/{id}',\n    { params: { path: { id: roleId } } },\n    { enabled: !!roleId },\n  );\n\n  const update = hooks.useMutation('put', '/roles/{id}', {\n    onSuccess: () => {\n      qc.invalidateQueries({ queryKey: ['get', '/roles'] });\n      qc.invalidateQueries({ queryKey: ['get', '/roles/{id}'] });\n      toast.success('Role updated');\n    },\n    onError: () => {\n      toast.error('Failed to update role');\n    },\n  });\n  const remove = hooks.useMutation('delete', '/roles/{id}', {\n    onSuccess: () => {\n      qc.invalidateQueries({ queryKey: ['get', '/roles'] });\n      toast.success('Role deleted');\n      config.navigation?.onNavigate?.(basePath);\n    },\n    onError: () => {\n      toast.error('Failed to delete role');\n    },\n  });\n\n  const form = useForm<RoleFormData>({\n    resolver: zodResolver(schema) as Resolver<RoleFormData>,\n    defaultValues: defaults,\n  });\n\n  const { reset, formState, control, register } = form;\n\n  useEffect(() => {\n    if (!data?.role) {\n      return;\n    }\n    const r = data.role;\n    reset({\n      name: (r.name ?? {}) as RoleFormData['name'],\n      code: r.code,\n      description: (r.description ?? {}) as RoleFormData['description'],\n    });\n  }, [data?.role, reset]);\n\n  if (!roleId) {\n    return null;\n  }\n\n  const role = data?.role;\n  const editable = role?.isEditable !== false;\n  const deletable = role?.isDeletable !== false;\n  const onSubmit = form.handleSubmit(async (d) => {\n    await update.mutateAsync({\n      params: { path: { id: roleId } },\n      body: {\n        name: d.name,\n        code: d.code,\n        description: d.description ?? undefined,\n      },\n    });\n  });\n\n  const footer = role ? (\n    <EntityFormActions\n      mode=\"edit\"\n      onSubmit={onSubmit}\n      onDelete={\n        deletable\n          ? () =>\n              remove.mutate({\n                params: { path: { id: roleId } },\n              })\n          : undefined\n      }\n      isSubmitting={update.isPending}\n      isDeleting={remove.isPending}\n      disabled={!editable}\n      itemName=\"role\"\n    />\n  ) : null;\n\n  return (\n    <Section title=\"Role details\" footer={footer} defaultOpen>\n      {isLoading || !role ? (\n        <RoleDetailSkeleton />\n      ) : (\n        <Form {...form}>\n          <form onSubmit={onSubmit} className=\"space-y-4\">\n            <LocaleInputText\n              label=\"Name\"\n              field=\"name\"\n              required\n              register={register}\n              errors={formState.errors}\n              placeholder=\"e.g. Administrator\"\n              disabled={!editable}\n            />\n            <FormField\n              control={control}\n              name=\"code\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>\n                    Code <span className=\"text-destructive\">*</span>\n                  </FormLabel>\n                  <FormControl>\n                    <Input\n                      placeholder=\"e.g. admin\"\n                      disabled={!editable}\n                      {...field}\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n            <LocaleInputTextarea\n              label=\"Description\"\n              field=\"description\"\n              register={register}\n              errors={formState.errors}\n              placeholder=\"Description\"\n              rows={3}\n              disabled={!editable}\n            />\n          </form>\n        </Form>\n      )}\n    </Section>\n  );\n}\n\nfunction RoleDetailSkeleton() {\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-16\" />\n        <Skeleton className=\"h-10 w-full\" />\n      </div>\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-14\" />\n        <Skeleton className=\"h-10 w-full\" />\n      </div>\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-24\" />\n        <Skeleton className=\"h-20 w-full\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-C5ZW7FD2.js

@@ -0,0 +1,46 @@
+// src/components/profile/change-profile.tsx
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button
+} from "@mesob/ui/components";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChangeProfile = ({ user }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const initials = user.fullName?.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2) || "U";
+  return /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[1.5rem] border border-border/60 bg-background/80 p-5 shadow-sm backdrop-blur", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "h-14 w-14 ring-4 ring-primary/10", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { src: user.image || "", alt: user.fullName || "" }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: initials })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-base font-semibold", children: user.fullName }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Badge, { variant: "outline", children: user.emailVerified ? "Email verified" : "Email unverified" }),
+            /* @__PURE__ */ jsx(Badge, { variant: "outline", children: user.phoneVerified ? "Phone verified" : "Phone unverified" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          className: "rounded-full px-5 text-primary hover:text-primary/80",
+          onClick: () => setIsEditing((v) => !v),
+          children: isEditing ? "Hide editor" : "Update profile"
+        }
+      )
+    ] }),
+    isEditing && /* @__PURE__ */ jsx("div", { className: "mt-4 rounded-2xl border border-dashed border-border bg-muted/30 px-4 py-3 text-sm text-muted-foreground", children: "Profile editing is not wired yet. Contact and password flows below are live." })
+  ] });
+};
+
+export {
+  ChangeProfile
+};
+//# sourceMappingURL=chunk-C5ZW7FD2.js.map

package/dist/chunk-C5ZW7FD2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/profile/change-profile.tsx"],"sourcesContent":["import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  Badge,\n  Button,\n} from '@mesob/ui/components';\nimport { useState } from 'react';\nimport type { User } from '../../types';\n\ntype Props = {\n  user: User;\n};\n\nexport const ChangeProfile = ({ user }: Props) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const initials =\n    user.fullName\n      ?.split(' ')\n      .map((part) => part[0])\n      .join('')\n      .toUpperCase()\n      .slice(0, 2) || 'U';\n\n  return (\n    <div className=\"w-full rounded-[1.5rem] border border-border/60 bg-background/80 p-5 shadow-sm backdrop-blur\">\n      <div className=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n        <div className=\"flex items-center gap-4\">\n          <Avatar className=\"h-14 w-14 ring-4 ring-primary/10\">\n            <AvatarImage src={user.image || ''} alt={user.fullName || ''} />\n            <AvatarFallback>{initials}</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <div className=\"text-base font-semibold\">{user.fullName}</div>\n            <div className=\"flex flex-wrap gap-2 text-xs text-muted-foreground\">\n              <Badge variant=\"outline\">\n                {user.emailVerified ? 'Email verified' : 'Email unverified'}\n              </Badge>\n              <Badge variant=\"outline\">\n                {user.phoneVerified ? 'Phone verified' : 'Phone unverified'}\n              </Badge>\n            </div>\n          </div>\n        </div>\n        <Button\n          variant=\"secondary\"\n          className=\"rounded-full px-5 text-primary hover:text-primary/80\"\n          onClick={() => setIsEditing((v) => !v)}\n        >\n          {isEditing ? 'Hide editor' : 'Update profile'}\n        </Button>\n      </div>\n      {isEditing && (\n        <div className=\"mt-4 rounded-2xl border border-dashed border-border bg-muted/30 px-4 py-3 text-sm text-muted-foreground\">\n          Profile editing is not wired yet. Contact and password flows below are\n          live.\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AAqBf,SACE,KADF;AAdH,IAAM,gBAAgB,CAAC,EAAE,KAAK,MAAa;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,WACJ,KAAK,UACD,MAAM,GAAG,EACV,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,KAAK,EAAE,EACP,YAAY,EACZ,MAAM,GAAG,CAAC,KAAK;AAEpB,SACE,qBAAC,SAAI,WAAU,gGACb;AAAA,yBAAC,SAAI,WAAU,sEACb;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,6BAAC,UAAO,WAAU,oCAChB;AAAA,8BAAC,eAAY,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,YAAY,IAAI;AAAA,UAC9D,oBAAC,kBAAgB,oBAAS;AAAA,WAC5B;AAAA,QACA,qBAAC,SAAI,WAAU,aACb;AAAA,8BAAC,SAAI,WAAU,2BAA2B,eAAK,UAAS;AAAA,UACxD,qBAAC,SAAI,WAAU,sDACb;AAAA,gCAAC,SAAM,SAAQ,WACZ,eAAK,gBAAgB,mBAAmB,oBAC3C;AAAA,YACA,oBAAC,SAAM,SAAQ,WACZ,eAAK,gBAAgB,mBAAmB,oBAC3C;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC;AAAA,UAEpC,sBAAY,gBAAgB;AAAA;AAAA,MAC/B;AAAA,OACF;AAAA,IACC,aACC,oBAAC,SAAI,WAAU,2GAA0G,0FAGzH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/chunk-DPH2PHK3.js

@@ -0,0 +1,32 @@
+// src/components/auth/auth-layout.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AuthLayout = ({
+  title,
+  description,
+  children,
+  footer,
+  logoImage
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex size-8 mb-6 w-full items-center justify-center rounded-md", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: logoImage || "",
+        alt: title,
+        width: 42,
+        height: 42
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
+    ] }),
+    children,
+    footer && /* @__PURE__ */ jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsx("div", { className: "w-full text-center text-sm text-muted-foreground", children: footer }) })
+  ] });
+};
+
+export {
+  AuthLayout
+};
+//# sourceMappingURL=chunk-DPH2PHK3.js.map

package/dist/chunk-DPH2PHK3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/auth/auth-layout.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\n\ntype AuthLayoutProps = {\n  title: ReactNode;\n  description?: string;\n  children: ReactNode;\n  footer?: ReactNode;\n  logoImage?: string;\n};\n\nexport const AuthLayout = ({\n  title,\n  description,\n  children,\n  footer,\n  logoImage,\n}: AuthLayoutProps) => {\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex size-8 mb-6 w-full items-center justify-center rounded-md\">\n        {/** biome-ignore lint/performance/noImgElement: logo image */}\n        <img\n          src={logoImage || ''}\n          alt={title as string}\n          width={42}\n          height={42}\n        />\n      </div>\n      <div className=\"text-center\">\n        <h1 className=\"text-2xl font-bold tracking-tight\">{title}</h1>\n        {description && (\n          <p className=\"mt-2 text-sm text-muted-foreground\">{description}</p>\n        )}\n      </div>\n\n      {children}\n\n      {footer && (\n        <div className=\"mt-2 w-full\">\n          <div className=\"w-full text-center text-sm text-muted-foreground\">\n            {footer}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";AAuBQ,cAOF,YAPE;AAXD,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,SAAI,WAAU,kEAEb;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,aAAa;AAAA,QAClB,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV,GACF;AAAA,IACA,qBAAC,SAAI,WAAU,eACb;AAAA,0BAAC,QAAG,WAAU,qCAAqC,iBAAM;AAAA,MACxD,eACC,oBAAC,OAAE,WAAU,sCAAsC,uBAAY;AAAA,OAEnE;AAAA,IAEC;AAAA,IAEA,UACC,oBAAC,SAAI,WAAU,eACb,8BAAC,SAAI,WAAU,oDACZ,kBACH,GACF;AAAA,KAEJ;AAEJ;","names":[]}