Feat/on save settings

docs/content/docs/components/change-email-card.mdx

@@ -4,22 +4,30 @@ title: <ChangeEmailCard />
 
 The `<ChangeEmailCard />` component provides a simple and secure UI that allows users to change their account email address, including verification emails sent to the updated address, if email verification is enabled.
 
-<img alt="Change Email Card" src="/screenshots/change-email-card-dark.png" className="rounded-xl hidden dark:block w-lg mt-0 mb-0" />
-<img alt="Change Email Card" src="/screenshots/change-email-card-light.png" className="rounded-xl dark:hidden w-lg mt-0 mb-0" />
+<img
+  alt="Change Email Card"
+  src="/screenshots/change-email-card-dark.png"
+  className="rounded-xl hidden dark:block w-lg mt-0 mb-0"
+/>
+<img
+  alt="Change Email Card"
+  src="/screenshots/change-email-card-light.png"
+  className="rounded-xl dark:hidden w-lg mt-0 mb-0"
+/>
 
 ## Usage
 
 Here's how to implement `<ChangeEmailCard />` on your custom settings page:
 
 ```tsx
-import { ChangeEmailCard } from "@daveyplate/better-auth-ui"
+import { ChangeEmailCard } from "@daveyplate/better-auth-ui";
 
 export default function SettingsPage() {
-    return (
-        <div className="flex flex-col gap-6">
-            <ChangeEmailCard />
-        </div>
-    )
+  return (
+    <div className="flex flex-col gap-6">
+      <ChangeEmailCard />
+    </div>
+  );
 }
 ```
 
@@ -37,15 +45,15 @@ You can customize the styles using the provided `classNames` prop:
 
 ```tsx
 <ChangeEmailCard
-    classNames={{
-        base: "border-primary shadow",
-        header: "bg-primary-foreground text-primary",
-        title: "text-xl font-semibold",
-        description: "text-muted-foreground",
-        content: "bg-background",
-        footer: "bg-muted",
-        input: "bg-transparent border-primary placeholder:text-muted-foreground"
-    }}
+  classNames={{
+    base: "border-primary shadow",
+    header: "bg-primary-foreground text-primary",
+    title: "text-xl font-semibold",
+    description: "text-muted-foreground",
+    content: "bg-background",
+    footer: "bg-muted",
+    input: "bg-transparent border-primary placeholder:text-muted-foreground",
+  }}
 />
 ```
 
@@ -55,12 +63,41 @@ You can pass custom text via the `localization` prop:
 
 ```tsx
 <ChangeEmailCard
-    localization={{
-        EMAIL: "Your Email",
-        EMAIL_DESCRIPTION: "You can update your email here.",
-        EMAIL_INSTRUCTIONS: "We'll send you a verification link to your new email address.",
-        EMAIL_PLACEHOLDER: "[email protected]",
-        EMAIL_VERIFY_CHANGE: "Check your inbox for the verification link!"
-    }}
+  localization={{
+    EMAIL: "Your Email",
+    EMAIL_DESCRIPTION: "You can update your email here.",
+    EMAIL_INSTRUCTIONS: "We'll send you a verification link to your new email address.",
+    EMAIL_PLACEHOLDER: "[email protected]",
+    EMAIL_VERIFY_CHANGE: "Check your inbox for the verification link!",
+  }}
 />
-```
+```
+
+## Callbacks
+
+The `onSave` prop allows you to execute custom logic after a successful email change or verification email resend:
+
+```tsx
+// Basic usage
+<ChangeEmailCard
+  onSave={() => {
+    console.log("Email updated successfully");
+  }}
+/>;
+
+// Using with a dialog
+function EmailChangeDialog({ open, onOpenChange }) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <ChangeEmailCard
+          onSave={() => {
+            // Close the dialog after successful update
+            onOpenChange(false);
+          }}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+```

docs/content/docs/components/change-password-card.mdx

@@ -4,22 +4,30 @@ title: <ChangePasswordCard />
 
 The `<ChangePasswordCard />` provides a secure and user-friendly interface for users to update their account passwords, seamlessly integrated with your authentication flow. It supports verification workflows to ensure passwords are securely updated, revoking other active sessions when the password changes.
 
-<img alt="Change Password Card" src="/screenshots/change-password-card-dark.png" className="rounded-xl hidden dark:block w-lg mt-0 mb-0" />
-<img alt="Change Password Card" src="/screenshots/change-password-card-light.png" className="rounded-xl dark:hidden w-lg mt-0 mb-0" />
+<img
+  alt="Change Password Card"
+  src="/screenshots/change-password-card-dark.png"
+  className="rounded-xl hidden dark:block w-lg mt-0 mb-0"
+/>
+<img
+  alt="Change Password Card"
+  src="/screenshots/change-password-card-light.png"
+  className="rounded-xl dark:hidden w-lg mt-0 mb-0"
+/>
 
 ## Usage
 
 Here's how you can include `<ChangePasswordCard />` in your user account settings page:
 
 ```tsx
-import { ChangePasswordCard } from "@daveyplate/better-auth-ui"
+import { ChangePasswordCard } from "@daveyplate/better-auth-ui";
 
 export default function SettingsPage() {
-    return (
-        <div className="flex flex-col gap-6">
-            <ChangePasswordCard />
-        </div>
-    )
+  return (
+    <div className="flex flex-col gap-6">
+      <ChangePasswordCard />
+    </div>
+  );
 }
 ```
 
@@ -37,16 +45,16 @@ Customize the component styles extensively by providing Tailwind CSS utility cla
 
 ```tsx
 <ChangePasswordCard
-    classNames={{
-        base: "border-primary shadow",
-        header: "bg-primary-foreground",
-        title: "text-primary font-semibold text-xl",
-        description: "text-muted-foreground",
-        content: "bg-background",
-        footer: "bg-muted",
-        input: "bg-background placeholder:text-muted-foreground",
-        button: "bg-primary hover:bg-primary-foreground text-white"
-    }}
+  classNames={{
+    base: "border-primary shadow",
+    header: "bg-primary-foreground",
+    title: "text-primary font-semibold text-xl",
+    description: "text-muted-foreground",
+    content: "bg-background",
+    footer: "bg-muted",
+    input: "bg-background placeholder:text-muted-foreground",
+    button: "bg-primary hover:bg-primary-foreground text-white",
+  }}
 />
 ```
 
@@ -64,15 +72,46 @@ You can easily adjust the displayed texts via the localization prop:
 
 ```tsx
 <ChangePasswordCard
-    localization={{
-        CHANGE_PASSWORD: "Update your password",
-        CHANGE_PASSWORD_DESCRIPTION: "Set a new password for your account",
-        CURRENT_PASSWORD: "Current Password",
-        NEW_PASSWORD: "New Password",
-        CHANGE_PASSWORD_SUCCESS: "Password successfully updated!",
-        SET_PASSWORD: "Set Password",
-        SET_PASSWORD_DESCRIPTION: "Add a password to your social account for easy future logins.",
-        SET_PASSWORD_EMAIL_SENT: "Check your mailbox to set your new password!"
-    }}
+  localization={{
+    CHANGE_PASSWORD: "Update your password",
+    CHANGE_PASSWORD_DESCRIPTION: "Set a new password for your account",
+    CURRENT_PASSWORD: "Current Password",
+    NEW_PASSWORD: "New Password",
+    CHANGE_PASSWORD_SUCCESS: "Password successfully updated!",
+    SET_PASSWORD: "Set Password",
+    SET_PASSWORD_DESCRIPTION: "Add a password to your social account for easy future logins.",
+    SET_PASSWORD_EMAIL_SENT: "Check your mailbox to set your new password!",
+  }}
 />
-```
+```
+
+## Callbacks
+
+The `onSave` prop allows you to execute custom logic after a successful password change or set password email sent:
+
+```tsx
+// Basic usage
+<ChangePasswordCard
+  onSave={() => {
+    console.log("Password updated successfully");
+  }}
+/>;
+
+// Using with a dialog
+function PasswordChangeDialog({ open, onOpenChange }) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <ChangePasswordCard
+          onSave={() => {
+            // Close dialog after successful password update
+            onOpenChange(false);
+            // Optionally redirect to security settings
+            router.push("/settings/security");
+          }}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+```

docs/content/docs/components/update-username-card.mdx

@@ -9,14 +9,14 @@ The `<UpdateUsernameCard />` component provides a simple, intuitive UI that enab
 Include the `<UpdateUsernameCard />` in your custom settings or profile page:
 
 ```tsx
-import { UpdateUsernameCard } from "@daveyplate/better-auth-ui"
+import { UpdateUsernameCard } from "@daveyplate/better-auth-ui";
 
 export default function CustomSettings() {
-    return (
-        <div className="flex flex-col gap-6">
-            <UpdateUsernameCard />
-        </div>
-    )
+  return (
+    <div className="flex flex-col gap-6">
+      <UpdateUsernameCard />
+    </div>
+  );
 }
 ```
 
@@ -32,14 +32,45 @@ The styles can be customized precisely with Tailwind classes via the `classNames
 
 ```tsx
 <UpdateUsernameCard
-    classNames={{
-        base: "border-blue-500",
-        header: "bg-blue-50",
-        title: "text-blue-500",
-        description: "text-muted-foreground",
-        content: "bg-blue-50",
-        footer: "bg-blue-50",
-        input: "bg-background border-blue-500 placeholder:text-muted",
-    }}
+  classNames={{
+    base: "border-blue-500",
+    header: "bg-blue-50",
+    title: "text-blue-500",
+    description: "text-muted-foreground",
+    content: "bg-blue-50",
+    footer: "bg-blue-50",
+    input: "bg-background border-blue-500 placeholder:text-muted",
+  }}
 />
-```
+```
+
+## Callbacks
+
+The `onSave` prop allows you to execute custom logic after a successful username update:
+
+```tsx
+// Basic usage
+<UpdateUsernameCard
+  onSave={() => {
+    console.log("Username updated successfully");
+  }}
+/>;
+
+// Using with a dialog
+function UsernameUpdateDialog({ open, onOpenChange }) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <UpdateUsernameCard
+          onSave={() => {
+            // Close dialog after successful update
+            onOpenChange(false);
+            // Optionally refresh user profile
+            refreshUserProfile();
+          }}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+```

src/components/settings/account/update-field-card.tsx

@@ -38,7 +38,8 @@ export interface UpdateFieldCardProps {
     label?: ReactNode
     type?: FieldType
     value?: unknown
-    validate?: (value: string) => boolean | Promise<boolean>
+    validate?: (value: string) => boolean | Promise<boolean>,
+    onSave?: () => void
 }
 
 export function UpdateFieldCard({
@@ -53,7 +54,8 @@ export function UpdateFieldCard({
     label,
     type,
     value,
-    validate
+    validate,
+    onSave
 }: UpdateFieldCardProps) {
     const {
         hooks: { useSession },
@@ -148,6 +150,8 @@ export function UpdateFieldCard({
                 message: getLocalizedError({ error, localization })
             })
         }
+
+        onSave?.()
     }
 
     return (

src/components/settings/account/update-name-card.tsx

@@ -9,6 +9,7 @@ export function UpdateNameCard({
     className,
     classNames,
     localization,
+    onSave,
     ...props
 }: SettingsCardProps) {
     const {
@@ -33,6 +34,7 @@ export function UpdateNameCard({
             localization={localization}
             placeholder={localization.NAME_PLACEHOLDER}
             required={nameRequired}
+            onSave={onSave}
             {...props}
         />
     )