@mesob/auth-react 0.3.4 → 0.4.0

package/dist/components/profile/security.js

@@ -1,14 +1,7 @@
 "use client";
 
-// src/components/profile/change-email-form.tsx
-import {
-  Button as Button4,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger
-} from "@mesob/ui/components";
-import { IconChevronDown } from "@tabler/icons-react";
-import { useState as useState5 } from "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";
@@ -80,6 +73,16 @@ function useConfig() {
   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";
@@ -342,7 +345,7 @@ import {
 // src/components/auth/verification-form.tsx
 import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
 import {
-  Button as Button3,
+  Button as Button2,
   Form,
   FormControl,
   FormField,
@@ -351,8 +354,7 @@ import {
   FormMessage,
   InputOTP,
   InputOTPGroup,
-  InputOTPSlot,
-  Spinner as Spinner3
+  InputOTPSlot
 } from "@mesob/ui/components";
 import { useForm as useForm2 } from "react-hook-form";
 import { z as z2 } from "zod";
@@ -372,7 +374,7 @@ function useTranslator(namespace) {
 }
 
 // src/components/auth/countdown.tsx
-import { Button as Button2, Spinner as Spinner2 } from "@mesob/ui/components";
+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 = ({
@@ -408,17 +410,19 @@ var Countdown = ({
       setIsResending(false);
     }
   };
+  const busy = isResending || resending;
   if (seconds > 0) {
-    return /* @__PURE__ */ jsx3(Button2, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
+    return /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: t("resendIn", { seconds }) });
   }
   return /* @__PURE__ */ jsxs2(
-    Button2,
+    "button",
     {
-      variant: "ghost",
+      type: "button",
       onClick: handleResend,
-      disabled: isResending || resending,
+      disabled: busy,
+      className: "text-sm text-primary hover:underline disabled:opacity-50 flex items-center gap-1",
       children: [
-        isResending || resending && /* @__PURE__ */ jsx3(Spinner2, {}),
+        busy && /* @__PURE__ */ jsx3(Spinner2, { className: "h-3 w-3" }),
         t("resend")
       ]
     }
@@ -438,13 +442,12 @@ var VerificationForm = ({
   const t = useTranslator("Auth.verification");
   const form = useForm2({
     resolver: zodResolver2(verificationSchema(t)),
-    defaultValues: {
-      code: ""
-    }
+    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",
     {
@@ -482,21 +485,18 @@ var VerificationForm = ({
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsx4(Countdown, { onResend, resending: isLoading }),
-          /* @__PURE__ */ jsxs3(
-            Button3,
-            {
-              type: "submit",
-              form: "verification-form",
-              disabled: isLoading || form.watch("code").length !== 6,
-              children: [
-                isLoading && /* @__PURE__ */ jsx4(Spinner3, {}),
-                t("form.confirm")
-              ]
-            }
-          )
-        ] })
+        /* @__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 }) })
       ]
     }
   ) });
@@ -700,7 +700,7 @@ function ChangeEmailForm() {
       CollapsibleTrigger,
       {
         render: /* @__PURE__ */ jsx7(
-          Button4,
+          Button3,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"
@@ -742,13 +742,13 @@ function ChangeEmailForm() {
 // src/components/profile/change-password-form.tsx
 import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
 import {
-  Button as Button5,
+  Button as Button4,
   Collapsible as Collapsible2,
   CollapsibleContent as CollapsibleContent2,
   CollapsibleTrigger as CollapsibleTrigger2,
   Input as Input2,
   Label as Label2,
-  Spinner as Spinner4
+  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";
@@ -844,7 +844,7 @@ function ChangePasswordForm() {
       CollapsibleTrigger2,
       {
         render: /* @__PURE__ */ jsx8(
-          Button5,
+          Button4,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"
@@ -947,7 +947,7 @@ function ChangePasswordForm() {
           ] }),
           /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-2", children: [
             /* @__PURE__ */ jsx8(
-              Button5,
+              Button4,
               {
                 type: "button",
                 variant: "outline",
@@ -959,8 +959,8 @@ function ChangePasswordForm() {
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsxs6(Button5, { type: "submit", disabled: isSubmitting, children: [
-              isSubmitting && /* @__PURE__ */ jsx8(Spinner4, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsxs6(Button4, { type: "submit", disabled: isSubmitting, children: [
+              isSubmitting && /* @__PURE__ */ jsx8(Spinner3, { className: "mr-2 h-4 w-4" }),
               "Change Password"
             ] })
           ] })
@@ -972,7 +972,7 @@ function ChangePasswordForm() {
 
 // src/components/profile/change-phone-form.tsx
 import {
-  Button as Button7,
+  Button as Button6,
   Collapsible as Collapsible3,
   CollapsibleContent as CollapsibleContent3,
   CollapsibleTrigger as CollapsibleTrigger3
@@ -982,7 +982,7 @@ 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 Button6, Input as Input3, Label as Label3, Spinner as Spinner5 } from "@mesob/ui/components";
+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";
@@ -1240,7 +1240,7 @@ function RequestChangePhoneForm({
         ] }),
         /* @__PURE__ */ jsxs7("div", { className: "flex justify-end gap-2", children: [
           /* @__PURE__ */ jsx9(
-            Button6,
+            Button5,
             {
               type: "button",
               variant: "outline",
@@ -1249,8 +1249,8 @@ function RequestChangePhoneForm({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsxs7(Button6, { type: "submit", disabled: isLoading, children: [
-            isLoading && /* @__PURE__ */ jsx9(Spinner5, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsxs7(Button5, { type: "submit", disabled: isLoading, children: [
+            isLoading && /* @__PURE__ */ jsx9(Spinner4, { className: "mr-2 h-4 w-4" }),
             isChecking ? "Checking\u2026" : buttonText
           ] })
         ] })
@@ -1423,7 +1423,7 @@ function ChangePhoneForm() {
       CollapsibleTrigger3,
       {
         render: /* @__PURE__ */ jsx11(
-          Button7,
+          Button6,
           {
             variant: "ghost",
             className: "w-full justify-between p-4 h-auto"
@@ -1465,15 +1465,46 @@ function ChangePhoneForm() {
 // src/components/profile/security.tsx
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function Security() {
-  return /* @__PURE__ */ jsxs9("div", { className: "p-6 space-y-6", children: [
-    /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsx12("h1", { className: "text-2xl font-semibold", children: "Security" }),
-      /* @__PURE__ */ jsx12("p", { className: "text-muted-foreground", children: "Manage your security settings" })
+  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: "space-y-4", children: [
-      /* @__PURE__ */ jsx12(ChangePasswordForm, {}),
-      /* @__PURE__ */ jsx12(ChangeEmailForm, {}),
-      /* @__PURE__ */ jsx12(ChangePhoneForm, {})
+    /* @__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, {})
+      ] })
     ] })
   ] });
 }