nuxt-users 1.38.0 → 1.39.0

package/README.md

@@ -39,7 +39,7 @@ A user authentication module for Nuxt 3 and Nuxt 4 with database support for SQL
 
 MIT
 
-## Dev misc
+## Dev Misc
 
 ### Using yalc
 
@@ -49,4 +49,8 @@ yalc publish
 
 # Install the module in the consumer app
 yalc add nuxt-users
+
+# Clean up consumer app
+yalc remove nuxt-users
+yarn add nuxt-users
 ```

package/dist/cli.mjs

@@ -5,7 +5,10 @@ import { defaultOptions } from './module.mjs';
 import { loadNuxt } from '@nuxt/kit';
 import { defu } from 'defu';
 import { runMigrations, createUser as createUser$1, createUsersTable as createUsersTable$1, createPersonalAccessTokensTable as createPersonalAccessTokensTable$1, createPasswordResetTokensTable as createPasswordResetTokensTable$1, createMigrationsTable as createMigrationsTable$1 } from '../dist/runtime/server/utils/index.js';
-import { g as getPasswordValidationOptions, v as validatePassword } from './shared/nuxt-users.BnOQs2LI.mjs';
+import { g as getPasswordValidationOptions, v as validatePassword } from './shared/nuxt-users.DfZ7bc_P.mjs';
+import '../dist/runtime/locales/index.js';
+import '../dist/runtime/utils/locale.js';
+import '../dist/runtime/utils/deep-merge.js';
 import { addActiveToUsers as addActiveToUsers$1 } from '../dist/runtime/server/utils/add-active-to-users.js';
 import { useDb, checkTableExists } from '../dist/runtime/server/utils/db.js';
 import { getAppliedMigrations } from '../dist/runtime/server/utils/migrate.js';
@@ -75,10 +78,9 @@ const loadOptions = async () => {
         };
       }
       return mergedConfig;
-    } else {
-      console.log("[Nuxt Users] No nuxt-users configuration found, using environment variables");
-      return getOptionsFromEnv();
     }
+    console.log("[Nuxt Users] No nuxt-users configuration found, using environment variables");
+    return getOptionsFromEnv();
   } catch (error) {
     console.log("[Nuxt Users] Could not load Nuxt project, using environment variables");
     console.error("[Nuxt Users] Error:", error);
@@ -369,14 +371,16 @@ const projectInfo = defineCommand({
                 console.log("[Nuxt Users]      -", migration);
               });
             }
-          } else {
+          }
+          if (!migrationsTableExists) {
             console.log("[Nuxt Users]    Table exists: no \u274C");
             console.log('[Nuxt Users]    \u27A1\uFE0F  Run "npx nuxt-users migrate" to set up the database');
           }
         } catch (error) {
           console.log("[Nuxt Users]    Status: \u26A0\uFE0F  Error -", error instanceof Error ? error.message : "Unknown error");
         }
-      } else {
+      }
+      if (!nuxtUsersConfig) {
         console.log("[Nuxt Users] \u26A0\uFE0F  Nuxt Users module not configured in runtime config");
       }
     } catch (error) {

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.SXaMnaEL.mjs';
+import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.FiQjvlZl.mjs';
 export * from '../dist/runtime/server/internal/index.js';
 
 declare const defaultOptions: ModuleOptions;

package/dist/module.d.ts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.SXaMnaEL.js';
+import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.FiQjvlZl.js';
 export * from '../dist/runtime/server/internal/index.js';
 
 declare const defaultOptions: ModuleOptions;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-users",
   "configKey": "nuxtUsers",
-  "version": "1.38.0",
+  "version": "1.39.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -50,7 +50,12 @@ const defaultOptions = {
     requireSpecialChars: true,
     preventCommonPasswords: true
   },
-  hardDelete: false
+  hardDelete: false,
+  locale: {
+    default: "en",
+    fallbackLocale: "en",
+    texts: {}
+  }
 };
 const module$1 = defineNuxtModule({
   meta: {
@@ -63,6 +68,9 @@ const module$1 = defineNuxtModule({
     const resolver = createResolver(import.meta.url);
     const { connector: _defaultConnector, ...defaultsWithoutConnector } = defaultOptions;
     const runtimeConfigOptions = defu(nuxt.options.runtimeConfig.nuxtUsers || {}, options, defaultsWithoutConnector);
+    if (!runtimeConfigOptions.locale) {
+      runtimeConfigOptions.locale = defaultOptions.locale;
+    }
     const configuredConnector = nuxt.options.runtimeConfig.nuxtUsers?.connector || options.connector;
     runtimeConfigOptions.connector = configuredConnector || defaultOptions.connector;
     nuxt.options.runtimeConfig.nuxtUsers = {
@@ -108,6 +116,7 @@ const module$1 = defineNuxtModule({
     nuxt.options.runtimeConfig.public = nuxt.options.runtimeConfig.public || {};
     nuxt.options.runtimeConfig.public.nuxtUsers = {
       passwordValidation: runtimeConfigOptions.passwordValidation,
+      locale: runtimeConfigOptions.locale,
       auth: {
         whitelist: (() => {
           const combinedWhitelist = [...defaultOptions.auth?.whitelist || [], ...runtimeConfigOptions.auth?.whitelist || []];
@@ -163,7 +172,7 @@ const module$1 = defineNuxtModule({
       path: resolver.resolve("./runtime/middleware/authorization.client"),
       global: true
     });
-    const base = nuxt.options.runtimeConfig.nuxtUsers.apiBasePath || defaultOptions.apiBasePath;
+    const base = runtimeConfigOptions.apiBasePath || defaultOptions.apiBasePath;
     addServerHandler({
       route: `${base}/session`,
       method: "post",
@@ -252,7 +261,7 @@ const module$1 = defineNuxtModule({
       nitroConfig.scanDirs.push(resolver.resolve("./runtime/server/tasks"));
       nitroConfig.prerender = nitroConfig.prerender || {};
       nitroConfig.prerender.ignore = nitroConfig.prerender.ignore || [];
-      const apiBasePath = nuxt.options.runtimeConfig.nuxtUsers.apiBasePath || defaultOptions.apiBasePath;
+      const apiBasePath = runtimeConfigOptions.apiBasePath || defaultOptions.apiBasePath;
       const ignorePattern = `${apiBasePath}/**`;
       if (!nitroConfig.prerender.ignore.includes(ignorePattern)) {
         nitroConfig.prerender.ignore.push(ignorePattern);

package/dist/runtime/components/NUsersEmailConfirmation.d.vue.ts

@@ -2,6 +2,11 @@ interface Props {
     successTitle?: string;
     errorTitle?: string;
     loginButtonText?: string;
+    backToLoginText?: string;
+    processingTitle?: string;
+    processingMessage?: string;
+    successMessage?: string;
+    errorMessage?: string;
     loginUrl?: string;
     showLoginButton?: boolean;
 }
@@ -22,9 +27,6 @@ type __VLS_Slots = {} & {
     'loading-content'?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    successTitle: string;
-    errorTitle: string;
-    loginButtonText: string;
     loginUrl: string;
     showLoginButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/NUsersEmailConfirmation.vue

@@ -1,15 +1,22 @@
 <script setup>
 import { computed } from "vue";
 import { useRoute } from "#app";
+import { useNuxtUsersLocale } from "../composables/useNuxtUsersLocale";
+const { t } = useNuxtUsersLocale();
 const route = useRoute();
 const status = computed(() => route.query.status);
 const message = computed(() => route.query.message);
 const isSuccess = computed(() => status.value === "success");
 const isError = computed(() => status.value === "error");
 const _props = defineProps({
-  successTitle: { type: String, required: false, default: "Email Confirmed!" },
-  errorTitle: { type: String, required: false, default: "Confirmation Failed" },
-  loginButtonText: { type: String, required: false, default: "Continue to Login" },
+  successTitle: { type: String, required: false },
+  errorTitle: { type: String, required: false },
+  loginButtonText: { type: String, required: false },
+  backToLoginText: { type: String, required: false },
+  processingTitle: { type: String, required: false },
+  processingMessage: { type: String, required: false },
+  successMessage: { type: String, required: false },
+  errorMessage: { type: String, required: false },
   loginUrl: { type: String, required: false, default: "/login" },
   showLoginButton: { type: Boolean, required: false, default: true }
 });
@@ -44,10 +51,10 @@ const _props = defineProps({
         <div class="n-users-section-header">
           <slot name="success-content">
             <h1 class="n-users-login-title">
-              {{ successTitle }}
+              {{ _props.successTitle || t("emailConfirmation.successTitle") }}
             </h1>
             <div class="n-users-success-message">
-              {{ message || "Your email has been confirmed and your account is now active." }}
+              {{ message || _props.successMessage || t("emailConfirmation.successMessage") }}
             </div>
           </slot>
         </div>
@@ -58,10 +65,10 @@ const _props = defineProps({
             class="n-users-form-actions"
           >
             <a
-              :href="loginUrl"
+              :href="_props.loginUrl"
               class="n-users-btn n-users-btn-primary"
             >
-              {{ loginButtonText }}
+              {{ _props.loginButtonText || t("emailConfirmation.loginButton") }}
             </a>
           </div>
         </slot>
@@ -69,7 +76,7 @@ const _props = defineProps({
 
       <!-- Error state -->
       <div
-        v-else-if="isError"
+        v-if="isError"
         class="n-users-confirmation-content"
       >
         <slot name="error-icon">
@@ -104,10 +111,10 @@ const _props = defineProps({
         <div class="n-users-section-header">
           <slot name="error-content">
             <h1 class="n-users-login-title">
-              {{ errorTitle }}
+              {{ _props.errorTitle || t("emailConfirmation.errorTitle") }}
             </h1>
             <div class="n-users-error-message">
-              {{ message || "The confirmation link is invalid or has expired. Please try registering again or contact support." }}
+              {{ message || _props.errorMessage || t("emailConfirmation.errorMessage") }}
             </div>
           </slot>
         </div>
@@ -115,10 +122,10 @@ const _props = defineProps({
         <slot name="error-actions">
           <div class="n-users-form-actions">
             <a
-              :href="loginUrl"
+              :href="_props.loginUrl"
               class="n-users-btn n-users-btn-secondary"
             >
-              Back to Login
+              {{ _props.backToLoginText || t("emailConfirmation.backToLogin") }}
             </a>
           </div>
         </slot>
@@ -126,7 +133,7 @@ const _props = defineProps({
 
       <!-- Loading/unknown state -->
       <div
-        v-else
+        v-if="!isError"
         class="n-users-confirmation-content"
       >
         <slot name="loading-content">
@@ -135,10 +142,10 @@ const _props = defineProps({
           </div>
           <div class="n-users-section-header">
             <h1 class="n-users-login-title">
-              Processing...
+              {{ _props.processingTitle || t("emailConfirmation.processing") }}
             </h1>
             <div class="n-users-form-help">
-              Please wait while we process your email confirmation.
+              {{ _props.processingMessage || t("emailConfirmation.processingMessage") }}
             </div>
           </div>
         </slot>

package/dist/runtime/components/NUsersEmailConfirmation.vue.d.ts

@@ -2,6 +2,11 @@ interface Props {
     successTitle?: string;
     errorTitle?: string;
     loginButtonText?: string;
+    backToLoginText?: string;
+    processingTitle?: string;
+    processingMessage?: string;
+    successMessage?: string;
+    errorMessage?: string;
     loginUrl?: string;
     showLoginButton?: boolean;
 }
@@ -22,9 +27,6 @@ type __VLS_Slots = {} & {
     'loading-content'?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    successTitle: string;
-    errorTitle: string;
-    loginButtonText: string;
     loginUrl: string;
     showLoginButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/NUsersGoogleLoginButton.d.vue.ts

@@ -6,9 +6,12 @@ interface Props {
     redirectEndpoint?: string;
     /**
      * Button text
-     * @default 'Continue with Google'
      */
     buttonText?: string;
+    /**
+     * Redirecting text
+     */
+    redirectingText?: string;
     /**
      * Show Google logo in button
      * @default true
@@ -24,7 +27,6 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClick?: (() => any) | undefined;
 }>, {
-    buttonText: string;
     showLogo: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/NUsersGoogleLoginButton.vue

@@ -1,9 +1,12 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useRuntimeConfig, navigateTo } from "#imports";
+import { useNuxtUsersLocale } from "../composables/useNuxtUsersLocale";
+const { t } = useNuxtUsersLocale();
 const props = defineProps({
   redirectEndpoint: { type: String, required: false },
-  buttonText: { type: String, required: false, default: "Continue with Google" },
+  buttonText: { type: String, required: false },
+  redirectingText: { type: String, required: false },
   showLogo: { type: Boolean, required: false, default: true },
   class: { type: String, required: false }
 });
@@ -69,7 +72,7 @@ const handleGoogleLogin = async () => {
 
     <!-- Button text -->
     <span class="n-users-google-text">
-      {{ isLoading ? "Redirecting..." : buttonText }}
+      {{ isLoading ? props.redirectingText || t("googleLogin.redirecting") : props.buttonText || t("googleLogin.buttonText") }}
     </span>
   </button>
 </template>

package/dist/runtime/components/NUsersGoogleLoginButton.vue.d.ts

@@ -6,9 +6,12 @@ interface Props {
     redirectEndpoint?: string;
     /**
      * Button text
-     * @default 'Continue with Google'
      */
     buttonText?: string;
+    /**
+     * Redirecting text
+     */
+    redirectingText?: string;
     /**
      * Show Google logo in button
      * @default true
@@ -24,7 +27,6 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClick?: (() => any) | undefined;
 }>, {
-    buttonText: string;
     showLogo: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/NUsersList.vue

@@ -2,10 +2,24 @@
 import { onMounted, computed, ref } from "vue";
 import { useUsers } from "../composables/useUsers";
 import { defaultDisplayFields, defaultFieldLabels } from "nuxt-users/utils";
+import { useNuxtUsersLocale } from "../composables/useNuxtUsersLocale";
+const { t } = useNuxtUsersLocale();
 const props = defineProps({
   displayFields: { type: Array, required: false, default: () => defaultDisplayFields },
   fieldLabels: { type: Object, required: false, default: () => defaultFieldLabels },
-  filter: { type: [Object, Function], required: false, default: () => ({}) }
+  filter: { type: [Object, Function], required: false, default: () => ({}) },
+  title: { type: String, required: false },
+  loadingText: { type: String, required: false },
+  noUsersText: { type: String, required: false },
+  errorText: { type: String, required: false },
+  editButtonText: { type: String, required: false },
+  deleteButtonText: { type: String, required: false },
+  pageText: { type: String, required: false },
+  ofText: { type: String, required: false },
+  totalText: { type: String, required: false },
+  usersText: { type: String, required: false },
+  previousText: { type: String, required: false },
+  nextText: { type: String, required: false }
 });
 const emit = defineEmits(["editClick", "delete"]);
 const usersComposable = ref(null);
@@ -59,7 +73,7 @@ const handleFetchUsers = (page, limit) => {
   <div class="n-users-list">
     <slot name="title">
       <h2>
-        Users List
+        {{ props.title || t("usersList.title") }}
       </h2>
     </slot>
 
@@ -68,7 +82,7 @@ const handleFetchUsers = (page, limit) => {
       :loading="loading"
     >
       <div v-if="loading">
-        Loading users...
+        {{ props.loadingText || t("usersList.loading") }}
       </div>
     </slot>
 
@@ -77,13 +91,13 @@ const handleFetchUsers = (page, limit) => {
       :error="error"
     >
       <div v-if="error">
-        Error: {{ error }}
+        {{ props.errorText || t("usersList.error") }} {{ error }}
       </div>
     </slot>
 
     <slot name="noUsers">
       <div v-if="users.length === 0">
-        No users found
+        {{ props.noUsersText || t("usersList.noUsers") }}
       </div>
     </slot>
 
@@ -126,7 +140,7 @@ const handleFetchUsers = (page, limit) => {
                         class="n-users-edit-btn"
                         @click="editUserFn"
                       >
-                        Edit
+                        {{ props.editButtonText || t("common.edit") }}
                       </button>
                     </slot>
                   </template>
@@ -142,7 +156,7 @@ const handleFetchUsers = (page, limit) => {
                         class="n-users-delete-btn"
                         @click="deleteUserFn"
                       >
-                        Delete
+                        {{ props.deleteButtonText || t("common.delete") }}
                       </button>
                     </slot>
                   </template>
@@ -210,8 +224,8 @@ const handleFetchUsers = (page, limit) => {
       >
         <div v-if="pagination && pagination.totalPages > 1">
           <div>
-            <span>Page {{ pagination.page }} of {{ pagination.totalPages }}</span>
-            <span>Total: {{ pagination.total }} users</span>
+            <span>{{ props.pageText || t("usersList.page") }} {{ pagination.page }} {{ props.ofText || t("usersList.of") }} {{ pagination.totalPages }}</span>
+            <span>{{ props.totalText || t("usersList.total") }} {{ pagination.total }} {{ props.usersText || t("usersList.users") }}</span>
           </div>
         </div>
       </slot>
@@ -229,7 +243,7 @@ const handleFetchUsers = (page, limit) => {
               :disabled="loading"
               @click="handleFetchUsers(pagination.page - 1)"
             >
-              Previous
+              {{ props.previousText || t("usersList.previous") }}
             </button>
 
             <button
@@ -237,7 +251,7 @@ const handleFetchUsers = (page, limit) => {
               :disabled="loading"
               @click="handleFetchUsers(pagination.page + 1)"
             >
-              Next
+              {{ props.nextText || t("usersList.next") }}
             </button>
           </div>
         </div>

package/dist/runtime/components/NUsersLoginForm.d.vue.ts

@@ -2,6 +2,17 @@ interface Props {
     apiEndpoint?: string;
     forgotPasswordEndpoint?: string;
     redirectTo?: string;
+    title?: string;
+    subtitle?: string;
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    passwordLabel?: string;
+    passwordPlaceholder?: string;
+    rememberMeLabel?: string;
+    submitLabel?: string;
+    submittingLabel?: string;
+    forgotPasswordLabel?: string;
+    forgotPasswordSendingLabel?: string;
 }
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {
     message: string;
@@ -26,15 +37,15 @@ type __VLS_Slots = {} & {
     'error-message'?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    success: (user: UserWithoutPassword, rememberMe: boolean) => any;
     error: (error: string) => any;
     submit: (data: LoginFormData) => any;
+    success: (user: UserWithoutPassword, rememberMe: boolean) => any;
     "forgot-password-error": (error: string) => any;
     "forgot-password-success": () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onSuccess?: ((user: UserWithoutPassword, rememberMe: boolean) => any) | undefined;
     onError?: ((error: string) => any) | undefined;
     onSubmit?: ((data: LoginFormData) => any) | undefined;
+    onSuccess?: ((user: UserWithoutPassword, rememberMe: boolean) => any) | undefined;
     "onForgot-password-error"?: ((error: string) => any) | undefined;
     "onForgot-password-success"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/NUsersLoginForm.vue

@@ -2,14 +2,36 @@
 import { ref, computed } from "vue";
 import { navigateTo } from "#app";
 import { useRuntimeConfig } from "#imports";
+import { useNuxtUsersLocale } from "../composables/useNuxtUsersLocale";
 const { public: { nuxtUsers } } = useRuntimeConfig();
 const { passwordValidation } = nuxtUsers;
+const { t } = useNuxtUsersLocale();
 const props = defineProps({
   apiEndpoint: { type: String, required: false },
   forgotPasswordEndpoint: { type: String, required: false },
-  redirectTo: { type: String, required: false }
+  redirectTo: { type: String, required: false },
+  title: { type: String, required: false },
+  subtitle: { type: String, required: false },
+  emailLabel: { type: String, required: false },
+  emailPlaceholder: { type: String, required: false },
+  passwordLabel: { type: String, required: false },
+  passwordPlaceholder: { type: String, required: false },
+  rememberMeLabel: { type: String, required: false },
+  submitLabel: { type: String, required: false },
+  submittingLabel: { type: String, required: false },
+  forgotPasswordLabel: { type: String, required: false },
+  forgotPasswordSendingLabel: { type: String, required: false }
 });
 const emit = defineEmits(["success", "error", "forgot-password-error", "submit", "forgot-password-success"]);
+const extractErrorMessage = (err, defaultMessage) => {
+  if (err && typeof err === "object" && "data" in err && err.data && typeof err.data === "object" && "statusMessage" in err.data) {
+    return String(err.data.statusMessage);
+  }
+  if (err instanceof Error) {
+    return err.message;
+  }
+  return defaultMessage;
+};
 const apiEndpoint = computed(() => props.apiEndpoint || `${nuxtUsers?.apiBasePath}/session`);
 const forgotPasswordEndpoint = computed(() => props.forgotPasswordEndpoint || `${nuxtUsers?.apiBasePath}/password/forgot`);
 const isLoading = ref(false);
@@ -39,7 +61,7 @@ const handleSubmit = async () => {
       await navigateTo(props.redirectTo);
     }
   } catch (err) {
-    const errorMessage = err && typeof err === "object" && "data" in err && err.data && typeof err.data === "object" && "statusMessage" in err.data ? String(err.data.statusMessage) : err instanceof Error ? err.message : "Login failed";
+    const errorMessage = extractErrorMessage(err, t("login.loginFailed"));
     error.value = errorMessage;
     emit("error", errorMessage);
   } finally {
@@ -48,7 +70,7 @@ const handleSubmit = async () => {
 };
 const handleForgotPassword = async () => {
   if (!formData.value.email) {
-    error.value = "Please enter your email address first";
+    error.value = t("login.emailRequiredForForgotPassword");
     return;
   }
   isForgotPasswordLoading.value = true;
@@ -64,7 +86,7 @@ const handleForgotPassword = async () => {
     forgotPasswordMessage.value = response.message;
     emit("forgot-password-success");
   } catch (err) {
-    const errorMessage = err && typeof err === "object" && "data" in err && err.data && typeof err.data === "object" && "statusMessage" in err.data ? String(err.data.statusMessage) : err instanceof Error ? err.message : "Failed to send password reset email";
+    const errorMessage = extractErrorMessage(err, t("login.forgotPasswordFailed"));
     error.value = errorMessage;
     emit("forgot-password-error", errorMessage);
   } finally {
@@ -80,10 +102,10 @@ const handleForgotPassword = async () => {
       <slot name="header">
         <div class="n-users-login-header">
           <h2 class="n-users-login-title">
-            Welcome Back
+            {{ props.title || t("login.title") }}
           </h2>
           <p class="n-users-login-subtitle">
-            Sign in to your account
+            {{ props.subtitle || t("login.subtitle") }}
           </p>
         </div>
       </slot>
@@ -91,13 +113,13 @@ const handleForgotPassword = async () => {
       <!-- Email field -->
       <slot name="email-field">
         <div class="n-users-form-group">
-          <label for="email">Email</label>
+          <label for="email">{{ props.emailLabel || t("common.email") }}</label>
           <input
             id="email"
             v-model="formData.email"
             type="email"
             name="email"
-            placeholder="Enter your email"
+            :placeholder="props.emailPlaceholder || t('login.emailPlaceholder')"
             required
           >
         </div>
@@ -106,13 +128,13 @@ const handleForgotPassword = async () => {
       <!-- Password field -->
       <slot name="password-field">
         <div class="n-users-form-group">
-          <label for="password">Password</label>
+          <label for="password">{{ props.passwordLabel || t("login.passwordLabel") }}</label>
           <input
             id="password"
             v-model="formData.password"
             type="password"
             name="password"
-            placeholder="Enter your password"
+            :placeholder="props.passwordPlaceholder || t('login.passwordPlaceholder')"
             required
             :minlength="passwordValidation.minLength"
           >
@@ -128,7 +150,7 @@ const handleForgotPassword = async () => {
             type="checkbox"
             name="rememberMe"
           >
-          <label for="rememberMe">Remember me</label>
+          <label for="rememberMe">{{ props.rememberMeLabel || t("login.rememberMe") }}</label>
         </div>
       </slot>
 
@@ -142,7 +164,7 @@ const handleForgotPassword = async () => {
             v-if="isLoading"
             class="n-users-loading-spinner"
           />
-          {{ isLoading ? "Signing in..." : "Sign In" }}
+          {{ isLoading ? props.submittingLabel || t("login.submitting") : props.submitLabel || t("login.submit") }}
         </button>
       </slot>
 
@@ -160,7 +182,7 @@ const handleForgotPassword = async () => {
                 v-if="isForgotPasswordLoading"
                 class="n-users-loading-spinner"
               />
-              {{ isForgotPasswordLoading ? "Sending..." : "Forgot your password?" }}
+              {{ isForgotPasswordLoading ? props.forgotPasswordSendingLabel || t("login.forgotPasswordSending") : props.forgotPasswordLabel || t("login.forgotPassword") }}
             </a>
           </p>
         </div>