@mesob/auth-react 0.3.5 → 0.4.0

package/dist/pages/profile/security.js

@@ -0,0 +1,1539 @@
+"use client";
+
+// src/pages/profile/security.tsx
+import {
+  PageBody,
+  PageContainer,
+  PageTitle,
+  useBreadcrumbs
+} from "@mesob/ui/components";
+import { IconShieldLock } from "@tabler/icons-react";
+
+// src/components/profile/security.tsx
+import { Badge, Card, CardContent, Separator } from "@mesob/ui/components";
+
+// 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/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/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 useSession() {
+  const context = useContext(SessionContext);
+  if (!context) {
+    throw new Error("useSession must be used within MesobAuthProvider");
+  }
+  return context;
+}
+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/components/profile/change-email-form.tsx
+import {
+  Button as Button3,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "@mesob/ui/components";
+import { IconChevronDown } from "@tabler/icons-react";
+import { useState as useState5 } from "react";
+
+// src/components/profile/request-change-email-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 as useState2 } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var emailPasswordSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  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 email is already taken. Please use a different email.";
+      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 RequestChangeEmailForm({
+  onSuccess,
+  onCancel,
+  buttonText
+}) {
+  const { user } = useSession();
+  const { hooks } = useApi();
+  const [isSubmitting, setIsSubmitting] = useState2(false);
+  const [isChecking, setIsChecking] = useState2(true);
+  const [showPassword, setShowPassword] = useState2(false);
+  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 requestEmailVerificationMutation = hooks.useMutation(
+    "post",
+    "/email/verification/request"
+  );
+  const emailPasswordForm = useForm({
+    resolver: zodResolver(emailPasswordSchema),
+    defaultValues: {
+      email: "",
+      password: ""
+    }
+  });
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors }
+  } = emailPasswordForm;
+  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 !== "email") {
+          setIsChecking(false);
+          return;
+        }
+        if (!accountChange.newEmail) {
+          setIsChecking(false);
+          return;
+        }
+        if (getValues("email")) {
+          setIsChecking(false);
+          return;
+        }
+        setValue("email", accountChange.newEmail, { shouldValidate: true });
+        if (verificationId) {
+          toast.message("Resuming verification\u2026");
+          onSuccess(verificationId, accountChange.newEmail);
+          return;
+        }
+        setIsChecking(false);
+      } catch {
+        setIsChecking(false);
+      }
+    };
+    run().catch(() => void 0);
+    return () => {
+      active = false;
+    };
+  }, [getPendingAccountChangeQuery.refetch, getValues, onSuccess, setValue]);
+  const onEmailPasswordSubmit = async (data) => {
+    if (!user) {
+      toast.error("User not found");
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      await verifyPasswordMutation.mutateAsync({
+        body: { password: data.password }
+      });
+      const checkResult = await checkUserMutation.mutateAsync({
+        body: { identifier: data.email }
+      });
+      if (checkResult.data?.exists) {
+        if (user?.email?.toLowerCase() === data.email.toLowerCase()) {
+          toast.error("This is already your current email address.");
+          return;
+        }
+        toast.error(
+          "This email is already taken. Please use a different email."
+        );
+        return;
+      }
+      const verification = await requestEmailVerificationMutation.mutateAsync({
+        body: { email: data.email }
+      });
+      toast.success("Verification code sent to your email");
+      onSuccess(verification.data?.verificationId ?? "", data.email);
+    } 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(onEmailPasswordSubmit),
+      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__ */ jsx2(Label, { htmlFor: "email", children: "New Email Address" }),
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                id: "email",
+                type: "email",
+                placeholder: "Enter your new email",
+                ...register("email"),
+                disabled: isLoading
+              }
+            ),
+            errors.email && /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: errors.email.message })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx2(Label, { htmlFor: "password", children: "Password" }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx2(
+                Input,
+                {
+                  id: "password",
+                  type: showPassword ? "text" : "password",
+                  autoComplete: "current-password",
+                  placeholder: "Enter your password",
+                  ...register("password"),
+                  disabled: isLoading
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  disabled: isLoading,
+                  children: showPassword ? /* @__PURE__ */ jsx2(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(IconEye, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            errors.password && /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: errors.password.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx2(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: onCancel,
+              disabled: isLoading,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx2(Spinner, { className: "mr-2 h-4 w-4" }),
+            isChecking ? "Checking\u2026" : buttonText
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/profile/verify-change-email-form.tsx
+import { useState as useState4 } from "react";
+import { toast as toast2 } from "sonner";
+
+// src/components/profile/otp-verification-modal.tsx
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@mesob/ui/components";
+
+// src/components/auth/verification-form.tsx
+import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
+import {
+  Button as Button2,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot
+} from "@mesob/ui/components";
+import { useForm as useForm2 } from "react-hook-form";
+import { z as z2 } from "zod";
+
+// src/hooks/use-translator.ts
+import { useMesob } from "@mesob/ui/providers";
+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/components/auth/countdown.tsx
+import { Spinner as Spinner2 } from "@mesob/ui/components";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Countdown = ({
+  initialSeconds = 60,
+  onResend,
+  resending = false
+}) => {
+  const t = useTranslator("Common");
+  const [seconds, setSeconds] = useState3(initialSeconds);
+  const [isResending, setIsResending] = useState3(false);
+  useEffect2(() => {
+    if (seconds <= 0) {
+      return;
+    }
+    const timer = setInterval(() => {
+      setSeconds((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [seconds]);
+  const handleResend = async () => {
+    setIsResending(true);
+    try {
+      await onResend();
+      setSeconds(initialSeconds);
+    } catch (_error) {
+    } finally {
+      setIsResending(false);
+    }
+  };
+  const busy = isResending || resending;
+  if (seconds > 0) {
+    return /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: t("resendIn", { seconds }) });
+  }
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      onClick: handleResend,
+      disabled: busy,
+      className: "text-sm text-primary hover:underline disabled:opacity-50 flex items-center gap-1",
+      children: [
+        busy && /* @__PURE__ */ jsx3(Spinner2, { className: "h-3 w-3" }),
+        t("resend")
+      ]
+    }
+  );
+};
+
+// src/components/auth/verification-form.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var verificationSchema = (t) => z2.object({
+  code: z2.string().length(6, t("form.codeLength"))
+});
+var VerificationForm = ({
+  onSubmit,
+  onResend,
+  isLoading = false
+}) => {
+  const t = useTranslator("Auth.verification");
+  const form = useForm2({
+    resolver: zodResolver2(verificationSchema(t)),
+    defaultValues: { code: "" }
+  });
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await onSubmit(values);
+  });
+  const codeLength = form.watch("code").length;
+  return /* @__PURE__ */ jsx4(Form, { ...form, children: /* @__PURE__ */ jsxs3(
+    "form",
+    {
+      id: "verification-form",
+      onSubmit: handleSubmit,
+      className: "space-y-4",
+      children: [
+        /* @__PURE__ */ jsx4(
+          FormField,
+          {
+            control: form.control,
+            name: "code",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem, { children: [
+              /* @__PURE__ */ jsx4("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx4(FormLabel, { children: t("form.codeLabel") }) }),
+              /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(
+                InputOTP,
+                {
+                  maxLength: 6,
+                  required: true,
+                  value: field.value ?? "",
+                  onChange: field.onChange,
+                  onBlur: field.onBlur,
+                  containerClassName: "gap-4 justify-center mb-2 flex items-center",
+                  children: /* @__PURE__ */ jsxs3(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__ */ jsx4(InputOTPSlot, { className: "h-12", index: 0 }),
+                    /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 1 }),
+                    /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 2 }),
+                    /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 3 }),
+                    /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 4 }),
+                    /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 5 })
+                  ] })
+                }
+              ) }),
+              /* @__PURE__ */ jsx4(FormMessage, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          Button2,
+          {
+            type: "submit",
+            form: "verification-form",
+            className: "w-full",
+            disabled: isLoading || codeLength !== 6,
+            loading: isLoading,
+            children: t("form.confirm")
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx4(Countdown, { onResend, resending: isLoading }) })
+      ]
+    }
+  ) });
+};
+
+// src/components/profile/otp-verification-modal.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function OtpVerificationModal({
+  open,
+  title,
+  description,
+  verificationId,
+  isLoading,
+  onSubmit,
+  onResend,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsx5(
+    Dialog,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) {
+          onCancel?.();
+        }
+      },
+      children: /* @__PURE__ */ jsxs4(DialogContent, { children: [
+        /* @__PURE__ */ jsxs4(DialogHeader, { children: [
+          /* @__PURE__ */ jsx5(DialogTitle, { children: title }),
+          description && /* @__PURE__ */ jsx5(DialogDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          VerificationForm,
+          {
+            verificationId,
+            isLoading,
+            onSubmit: async ({ code }) => onSubmit(code),
+            onResend: onResend ?? (() => void 0)
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/profile/verify-change-email-form.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function isAuthError2(error) {
+  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
+}
+function getErrorCode2(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 getErrorMessage2(error) {
+  if (isAuthError2(error)) {
+    const errorCode = getErrorCode2(error);
+    switch (errorCode) {
+      case "USER_EXISTS":
+        return "This email is already taken. Please use a different email.";
+      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 VerifyChangeEmailForm({
+  email,
+  verificationId,
+  onSuccess,
+  onCancel
+}) {
+  const { refresh } = useSession();
+  const { hooks } = useApi();
+  const [isSubmitting, setIsSubmitting] = useState4(false);
+  const [currentVerificationId, setCurrentVerificationId] = useState4(verificationId);
+  const verifyEmailMutation = hooks.useMutation(
+    "post",
+    "/email/verification/confirm"
+  );
+  const updateEmailMutation = hooks.useMutation("put", "/profile/email");
+  const requestEmailVerificationMutation = hooks.useMutation(
+    "post",
+    "/email/verification/request"
+  );
+  const onOtpSubmit = async (code) => {
+    if (!currentVerificationId) {
+      toast2.error("Verification not found. Please request a new code.");
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      await verifyEmailMutation.mutateAsync({
+        body: {
+          verificationId: currentVerificationId,
+          code
+        }
+      });
+      await updateEmailMutation.mutateAsync({
+        body: { email }
+      });
+      toast2.success("Email updated successfully");
+      await refresh();
+      onSuccess();
+    } catch (error) {
+      const errorMessage = getErrorMessage2(error);
+      toast2.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  if (!currentVerificationId) {
+    toast2.error("Verification not found. Please request a new code.");
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(
+    OtpVerificationModal,
+    {
+      open: true,
+      title: "Verify email",
+      description: `Enter the verification code sent to ${email}`,
+      verificationId: currentVerificationId,
+      isLoading: isSubmitting,
+      onSubmit: onOtpSubmit,
+      onResend: async () => {
+        try {
+          setIsSubmitting(true);
+          const next = await requestEmailVerificationMutation.mutateAsync({
+            body: { email }
+          });
+          setCurrentVerificationId(next.data?.verificationId ?? null);
+          toast2.success("Verification code resent");
+        } catch (error) {
+          toast2.error(getErrorMessage2(error));
+        } finally {
+          setIsSubmitting(false);
+        }
+      },
+      onCancel
+    }
+  );
+}
+
+// src/components/profile/change-email-form.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChangeEmailForm() {
+  const { user } = useSession();
+  const [isOpen, setIsOpen] = useState5(false);
+  const [showOtp, setShowOtp] = useState5(false);
+  const [verificationId, setVerificationId] = useState5(null);
+  const [newEmail, setNewEmail] = useState5("");
+  const resetForms = () => {
+    setShowOtp(false);
+    setVerificationId(null);
+    setNewEmail("");
+  };
+  const handleRequestSuccess = (id, email) => {
+    setVerificationId(id);
+    setNewEmail(email);
+    setShowOtp(true);
+  };
+  const handleVerifySuccess = () => {
+    resetForms();
+    setIsOpen(false);
+  };
+  const handleCancel = () => {
+    resetForms();
+    setIsOpen(false);
+  };
+  const title = user?.email ? "Change Email" : "Add Email";
+  const description = user?.email ? "Update your email address" : "Add an email address to your account";
+  return /* @__PURE__ */ jsx7(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs5("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsxs5(
+      CollapsibleTrigger,
+      {
+        render: /* @__PURE__ */ jsx7(
+          Button3,
+          {
+            variant: "ghost",
+            className: "w-full justify-between p-4 h-auto"
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx7("span", { className: "font-medium", children: title }),
+            /* @__PURE__ */ jsx7("span", { className: "text-sm text-muted-foreground", children: description })
+          ] }),
+          /* @__PURE__ */ jsx7(
+            IconChevronDown,
+            {
+              className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx7(CollapsibleContent, { children: showOtp ? /* @__PURE__ */ jsx7(
+      VerifyChangeEmailForm,
+      {
+        email: newEmail,
+        verificationId,
+        onSuccess: handleVerifySuccess,
+        onCancel: handleCancel
+      }
+    ) : /* @__PURE__ */ jsx7(
+      RequestChangeEmailForm,
+      {
+        onSuccess: handleRequestSuccess,
+        onCancel: handleCancel,
+        buttonText: title
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/profile/change-password-form.tsx
+import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
+import {
+  Button as Button4,
+  Collapsible as Collapsible2,
+  CollapsibleContent as CollapsibleContent2,
+  CollapsibleTrigger as CollapsibleTrigger2,
+  Input as Input2,
+  Label as Label2,
+  Spinner as Spinner3
+} from "@mesob/ui/components";
+import { IconChevronDown as IconChevronDown2, IconEye as IconEye2, IconEyeOff as IconEyeOff2 } from "@tabler/icons-react";
+import { useState as useState6 } from "react";
+import { useForm as useForm3 } from "react-hook-form";
+import { toast as toast3 } from "sonner";
+import { z as z3 } from "zod";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var changePasswordSchema = z3.object({
+  currentPassword: z3.string().min(8, "Password must be at least 8 characters"),
+  newPassword: z3.string().min(8, "Password must be at least 8 characters"),
+  confirmPassword: z3.string().min(8, "Password must be at least 8 characters")
+}).refine((data) => data.newPassword === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"]
+});
+function isAuthError3(error) {
+  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
+}
+function getErrorCode3(error) {
+  if (error.code) {
+    return error.code;
+  }
+  if (error.message) {
+    const upperMessage = error.message.toUpperCase().trim();
+    const validCodes = [
+      "INVALID_PASSWORD",
+      "UNAUTHORIZED",
+      "HAS_NO_PASSWORD",
+      "USER_NOT_FOUND",
+      "USER_EXISTS",
+      "VERIFICATION_EXPIRED",
+      "VERIFICATION_MISMATCH",
+      "VERIFICATION_NOT_FOUND",
+      "TOO_MANY_ATTEMPTS",
+      "REQUIRES_VERIFICATION",
+      "ACCESS_DENIED"
+    ];
+    if (validCodes.includes(upperMessage)) {
+      return upperMessage;
+    }
+  }
+  return void 0;
+}
+function getPasswordChangeErrorMessage(error) {
+  if (isAuthError3(error)) {
+    const errorCode = getErrorCode3(error);
+    switch (errorCode) {
+      case "INVALID_PASSWORD":
+        return "The current password you entered is incorrect. Please try again.";
+      case "UNAUTHORIZED":
+        return "You are not authorized to perform this action. Please sign in again.";
+      case "HAS_NO_PASSWORD":
+        return "Your account does not have a password set. Please use password reset instead.";
+      default:
+        return error.message || "Failed to change password. Please try again.";
+    }
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return "Failed to change password. Please try again.";
+}
+function ChangePasswordForm() {
+  const { user: _user } = useSession();
+  const [isOpen, setIsOpen] = useState6(false);
+  const [isSubmitting, setIsSubmitting] = useState6(false);
+  const [showPassword, setShowPassword] = useState6(false);
+  const [showNewPassword, setShowNewPassword] = useState6(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState6(false);
+  const form = useForm3({
+    resolver: zodResolver3(changePasswordSchema),
+    defaultValues: {
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: ""
+    }
+  });
+  const { register, handleSubmit, formState, reset } = form;
+  const onSubmit = (_data) => {
+    try {
+      setIsSubmitting(true);
+      toast3.error("Password change unavailable");
+      setIsOpen(false);
+    } catch (error) {
+      const errorMessage = getPasswordChangeErrorMessage(error);
+      toast3.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsx8(Collapsible2, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs6("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsxs6(
+      CollapsibleTrigger2,
+      {
+        render: /* @__PURE__ */ jsx8(
+          Button4,
+          {
+            variant: "ghost",
+            className: "w-full justify-between p-4 h-auto"
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx8("span", { className: "font-medium", children: "Change Password" }),
+            /* @__PURE__ */ jsx8("span", { className: "text-sm text-muted-foreground", children: "Update your account password" })
+          ] }),
+          /* @__PURE__ */ jsx8(
+            IconChevronDown2,
+            {
+              className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8(CollapsibleContent2, { children: /* @__PURE__ */ jsxs6(
+      "form",
+      {
+        onSubmit: handleSubmit(onSubmit),
+        className: "p-4 space-y-4 border-t",
+        children: [
+          /* @__PURE__ */ jsxs6("div", { className: "space-y-2 w-full md:w-1/2", children: [
+            /* @__PURE__ */ jsx8(Label2, { htmlFor: "currentPassword", children: "Old Password" }),
+            /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx8(
+                Input2,
+                {
+                  id: "currentPassword",
+                  type: showPassword ? "text" : "password",
+                  autoComplete: "current-password",
+                  placeholder: "Enter your current password",
+                  ...register("currentPassword")
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "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__ */ jsx8(IconEyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx8(IconEye2, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            formState.errors.currentPassword && /* @__PURE__ */ jsx8("p", { className: "text-sm text-destructive", children: formState.errors.currentPassword.message })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "space-y-2 w-full md:w-1/2", children: [
+            /* @__PURE__ */ jsx8(Label2, { htmlFor: "newPassword", children: "New Password" }),
+            /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx8(
+                Input2,
+                {
+                  id: "newPassword",
+                  type: showNewPassword ? "text" : "password",
+                  placeholder: "Enter your new password",
+                  autoComplete: "new-password",
+                  ...register("newPassword")
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowNewPassword(!showNewPassword),
+                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  children: showNewPassword ? /* @__PURE__ */ jsx8(IconEyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx8(IconEye2, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            formState.errors.newPassword && /* @__PURE__ */ jsx8("p", { className: "text-sm text-destructive", children: formState.errors.newPassword.message })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "space-y-2 w-full md:w-1/2", children: [
+            /* @__PURE__ */ jsx8(Label2, { htmlFor: "confirmPassword", children: "Confirm New Password" }),
+            /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx8(
+                Input2,
+                {
+                  id: "confirmPassword",
+                  type: showConfirmPassword ? "text" : "password",
+                  placeholder: "Confirm your new password",
+                  autoComplete: "new-password",
+                  ...register("confirmPassword")
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "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__ */ jsx8(IconEyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx8(IconEye2, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            formState.errors.confirmPassword && /* @__PURE__ */ jsx8("p", { className: "text-sm text-destructive", children: formState.errors.confirmPassword.message })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-2", children: [
+            /* @__PURE__ */ jsx8(
+              Button4,
+              {
+                type: "button",
+                variant: "outline",
+                onClick: () => {
+                  reset();
+                  setIsOpen(false);
+                },
+                disabled: isSubmitting,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsxs6(Button4, { type: "submit", disabled: isSubmitting, children: [
+              isSubmitting && /* @__PURE__ */ jsx8(Spinner3, { className: "mr-2 h-4 w-4" }),
+              "Change Password"
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/profile/change-phone-form.tsx
+import {
+  Button as Button6,
+  Collapsible as Collapsible3,
+  CollapsibleContent as CollapsibleContent3,
+  CollapsibleTrigger as CollapsibleTrigger3
+} from "@mesob/ui/components";
+import { IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
+import { useState as useState9 } from "react";
+
+// src/components/profile/request-change-phone-form.tsx
+import { zodResolver as zodResolver4 } from "@hookform/resolvers/zod";
+import { Button as Button5, Input as Input3, Label as Label3, Spinner as Spinner4 } from "@mesob/ui/components";
+import { IconEye as IconEye3, IconEyeOff as IconEyeOff3 } from "@tabler/icons-react";
+import { useEffect as useEffect3, useState as useState7 } from "react";
+import { useForm as useForm4 } from "react-hook-form";
+import { toast as toast4 } from "sonner";
+import { z as z4 } from "zod";
+
+// 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/profile/request-change-phone-form.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var phonePasswordSchema = (phoneRegex) => z4.object({
+  phone: z4.string().trim().min(1, { message: "Phone number is required" }).refine(
+    (val) => {
+      const isPhone = phoneRegex.test(val);
+      return isPhone;
+    },
+    {
+      message: "Invalid phone number"
+    }
+  ),
+  password: z4.string().min(8, "Password must be at least 8 characters").max(128, "Password too long")
+});
+function isAuthError4(error) {
+  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
+}
+function getErrorCode4(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 getErrorMessage3(error) {
+  if (isAuthError4(error)) {
+    const errorCode = getErrorCode4(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] = useState7(false);
+  const [isChecking, setIsChecking] = useState7(true);
+  const [showPassword, setShowPassword] = useState7(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 = useForm4({
+    resolver: zodResolver4(phonePasswordSchema(phoneRegex)),
+    defaultValues: {
+      phone: "",
+      password: ""
+    }
+  });
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors }
+  } = phonePasswordForm;
+  useEffect3(() => {
+    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) {
+          toast4.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) {
+      toast4.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, "")) {
+          toast4.error("This is already your current phone number.");
+          return;
+        }
+        toast4.error(
+          "This phone number is already taken. Please use a different number."
+        );
+        return;
+      }
+      const verification = await requestPhoneOtpMutation.mutateAsync({
+        body: {
+          phone: normalizedPhone,
+          context: "change-phone"
+        }
+      });
+      toast4.success("Verification code sent to your phone");
+      onSuccess(verification.data?.verificationId ?? "", normalizedPhone);
+    } catch (error) {
+      const errorMessage = getErrorMessage3(error);
+      if (isAuthError4(error)) {
+        const errorCode = getErrorCode4(error);
+        if (errorCode === "INVALID_PASSWORD" || errorCode === "USER_NOT_FOUND") {
+          toast4.error("Incorrect password. Please try again.");
+          return;
+        }
+      }
+      toast4.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const isLoading = isSubmitting || isChecking;
+  return /* @__PURE__ */ jsxs7(
+    "form",
+    {
+      onSubmit: handleSubmit(onPhonePasswordSubmit),
+      className: "p-4 space-y-4 border-t",
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "space-y-4 w-full md:w-1/2", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx9(Label3, { htmlFor: "phone", children: "Phone Number" }),
+            /* @__PURE__ */ jsx9(
+              Input3,
+              {
+                id: "phone",
+                type: "tel",
+                placeholder: "Enter your new phone number",
+                ...register("phone"),
+                disabled: isLoading
+              }
+            ),
+            errors.phone && /* @__PURE__ */ jsx9("p", { className: "text-sm text-destructive", children: errors.phone.message })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx9(Label3, { htmlFor: "password", children: "Password" }),
+            /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx9(
+                Input3,
+                {
+                  id: "password",
+                  type: showPassword ? "text" : "password",
+                  autoComplete: "current-password",
+                  placeholder: "Enter your password",
+                  ...register("password"),
+                  disabled: isLoading
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                "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__ */ jsx9(IconEyeOff3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx9(IconEye3, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            errors.password && /* @__PURE__ */ jsx9("p", { className: "text-sm text-destructive", children: errors.password.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx9(
+            Button5,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: onCancel,
+              disabled: isLoading,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs7(Button5, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx9(Spinner4, { className: "mr-2 h-4 w-4" }),
+            isChecking ? "Checking\u2026" : buttonText
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/profile/verify-change-phone-form.tsx
+import { useState as useState8 } from "react";
+import { toast as toast5 } from "sonner";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function isAuthError5(error) {
+  return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
+}
+function getErrorCode5(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 getErrorMessage4(error) {
+  if (isAuthError5(error)) {
+    const errorCode = getErrorCode5(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 VerifyChangePhoneForm({
+  phone,
+  verificationId,
+  onSuccess,
+  onCancel
+}) {
+  const { refresh } = useSession();
+  const { hooks } = useApi();
+  const [isSubmitting, setIsSubmitting] = useState8(false);
+  const [currentVerificationId, setCurrentVerificationId] = useState8(verificationId);
+  const verifyPhoneOtpMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/confirm"
+  );
+  const updatePhoneMutation = hooks.useMutation("put", "/profile/phone");
+  const requestPhoneOtpMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/request"
+  );
+  const onOtpSubmit = async (code) => {
+    if (!currentVerificationId) {
+      toast5.error("Verification not found. Please request a new code.");
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      await verifyPhoneOtpMutation.mutateAsync({
+        body: {
+          verificationId: currentVerificationId,
+          code,
+          context: "change-phone"
+        }
+      });
+      await updatePhoneMutation.mutateAsync({
+        body: { phone }
+      });
+      toast5.success("Phone number updated successfully");
+      await refresh();
+      onSuccess();
+    } catch (error) {
+      const errorMessage = getErrorMessage4(error);
+      toast5.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  if (!currentVerificationId) {
+    toast5.error("Verification not found. Please request a new code.");
+    return null;
+  }
+  return /* @__PURE__ */ jsx10(
+    OtpVerificationModal,
+    {
+      open: true,
+      title: "Verify phone",
+      description: `Enter the verification code sent to ${phone}`,
+      verificationId: currentVerificationId,
+      isLoading: isSubmitting,
+      onSubmit: onOtpSubmit,
+      onResend: async () => {
+        try {
+          setIsSubmitting(true);
+          const next = await requestPhoneOtpMutation.mutateAsync({
+            body: {
+              phone,
+              context: "change-phone"
+            }
+          });
+          setCurrentVerificationId(next.data?.verificationId ?? null);
+          toast5.success("Verification code resent");
+        } catch (error) {
+          toast5.error(getErrorMessage4(error));
+        } finally {
+          setIsSubmitting(false);
+        }
+      },
+      onCancel
+    }
+  );
+}
+
+// src/components/profile/change-phone-form.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function ChangePhoneForm() {
+  const { user } = useSession();
+  const [isOpen, setIsOpen] = useState9(false);
+  const [showOtp, setShowOtp] = useState9(false);
+  const [verificationId, setVerificationId] = useState9(null);
+  const [newPhone, setNewPhone] = useState9("");
+  const resetForms = () => {
+    setShowOtp(false);
+    setVerificationId(null);
+    setNewPhone("");
+  };
+  const handleRequestSuccess = (id, phone) => {
+    setVerificationId(id);
+    setNewPhone(phone);
+    setShowOtp(true);
+  };
+  const handleVerifySuccess = () => {
+    resetForms();
+    setIsOpen(false);
+  };
+  const handleCancel = () => {
+    resetForms();
+    setIsOpen(false);
+  };
+  const title = user?.phone ? "Change Phone" : "Add Phone";
+  const description = user?.phone ? "Update your phone number" : "Add a phone number to your account";
+  return /* @__PURE__ */ jsx11(Collapsible3, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs8("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsxs8(
+      CollapsibleTrigger3,
+      {
+        render: /* @__PURE__ */ jsx11(
+          Button6,
+          {
+            variant: "ghost",
+            className: "w-full justify-between p-4 h-auto"
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx11("span", { className: "font-medium", children: title }),
+            /* @__PURE__ */ jsx11("span", { className: "text-sm text-muted-foreground", children: description })
+          ] }),
+          /* @__PURE__ */ jsx11(
+            IconChevronDown3,
+            {
+              className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx11(CollapsibleContent3, { children: showOtp ? /* @__PURE__ */ jsx11(
+      VerifyChangePhoneForm,
+      {
+        phone: newPhone,
+        verificationId,
+        onSuccess: handleVerifySuccess,
+        onCancel: handleCancel
+      }
+    ) : /* @__PURE__ */ jsx11(
+      RequestChangePhoneForm,
+      {
+        onSuccess: handleRequestSuccess,
+        onCancel: handleCancel,
+        buttonText: title
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/profile/security.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function Security() {
+  const { user } = useSession();
+  return /* @__PURE__ */ jsxs9("div", { className: "mx-auto flex w-full max-w-6xl flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "relative overflow-hidden rounded-[2rem] border border-border/60 bg-gradient-to-br from-background via-background to-amber-500/5 p-6 shadow-sm", children: [
+      /* @__PURE__ */ jsx12("div", { className: "absolute left-0 top-0 h-32 w-32 rounded-full bg-primary/10 blur-3xl" }),
+      /* @__PURE__ */ jsxs9("div", { className: "relative flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: "Security center" }),
+          /* @__PURE__ */ jsx12(Badge, { variant: "secondary", children: user?.emailVerified || user?.phoneVerified ? "Recovery methods available" : "Add a recovery method" })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx12("h1", { className: "text-2xl font-semibold tracking-tight", children: "Security" }),
+          /* @__PURE__ */ jsx12("p", { className: "max-w-2xl text-sm text-muted-foreground", children: "Password, email, and phone updates all live here. Keep recovery channels current so account recovery stays predictable." })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "grid gap-4 lg:grid-cols-[0.85fr_1.4fr]", children: [
+      /* @__PURE__ */ jsx12(Card, { className: "rounded-[1.75rem] border-border/60 shadow-sm", children: /* @__PURE__ */ jsxs9(CardContent, { className: "space-y-5 p-6", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx12("div", { className: "text-sm font-medium text-muted-foreground", children: "Verification state" }),
+          /* @__PURE__ */ jsx12("div", { className: "text-lg font-semibold", children: "Recovery readiness" })
+        ] }),
+        /* @__PURE__ */ jsx12(Separator, {}),
+        /* @__PURE__ */ jsxs9("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "rounded-2xl border border-border/60 bg-muted/20 p-4", children: [
+            /* @__PURE__ */ jsx12("div", { className: "text-sm font-medium", children: "Email" }),
+            /* @__PURE__ */ jsx12("div", { className: "mt-1 text-sm text-muted-foreground", children: user?.email ?? "No email added" }),
+            /* @__PURE__ */ jsx12("div", { className: "mt-3", children: /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: user?.emailVerified ? "Verified" : "Unverified" }) })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { className: "rounded-2xl border border-border/60 bg-muted/20 p-4", children: [
+            /* @__PURE__ */ jsx12("div", { className: "text-sm font-medium", children: "Phone" }),
+            /* @__PURE__ */ jsx12("div", { className: "mt-1 text-sm text-muted-foreground", children: user?.phone ?? "No phone added" }),
+            /* @__PURE__ */ jsx12("div", { className: "mt-3", children: /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: user?.phoneVerified ? "Verified" : "Unverified" }) })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx12(ChangePasswordForm, {}),
+        /* @__PURE__ */ jsx12(ChangeEmailForm, {}),
+        /* @__PURE__ */ jsx12(ChangePhoneForm, {})
+      ] })
+    ] })
+  ] });
+}
+
+// src/pages/profile/security.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function ProfileSecurityPage() {
+  useBreadcrumbs({
+    items: [
+      { label: "Home", href: "/dashboard" },
+      { label: "Profile", href: "/profile/security" },
+      { label: "Security" }
+    ]
+  });
+  return /* @__PURE__ */ jsxs10(PageContainer, { className: "flex flex-1 flex-col overflow-auto p-4 pt-0 lg:p-6 lg:pt-0", children: [
+    /* @__PURE__ */ jsx13(PageTitle, { icon: /* @__PURE__ */ jsx13(IconShieldLock, { className: "size-5" }), children: "Security" }),
+    /* @__PURE__ */ jsx13(PageBody, { className: "px-0 pb-6", children: /* @__PURE__ */ jsx13(Security, {}) })
+  ] });
+}
+export {
+  ProfileSecurityPage as default
+};
+//# sourceMappingURL=security.js.map