nuxt-users 1.38.0 → 1.40.0

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>

package/dist/runtime/components/NUsersLoginForm.vue.d.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/NUsersLogoutLink.d.vue.ts

@@ -2,6 +2,7 @@ interface LogoutLinkProps {
     redirectTo?: string;
     linkText?: string;
     confirmMessage?: string;
+    loggingOutText?: string;
     class?: string;
     style?: string | Record<string, string | number>;
     linkClass?: string;
@@ -16,17 +17,15 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LogoutLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    success: () => any;
     error: (error: string) => any;
+    success: () => any;
     click: () => any;
 }, string, import("vue").PublicProps, Readonly<LogoutLinkProps> & Readonly<{
-    onSuccess?: (() => any) | undefined;
     onError?: ((error: string) => any) | undefined;
+    onSuccess?: (() => any) | undefined;
     onClick?: (() => any) | undefined;
 }>, {
     redirectTo: string;
-    linkText: string;
-    confirmMessage: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/NUsersLogoutLink.vue

@@ -2,10 +2,13 @@
 import { ref, onMounted } from "vue";
 import { navigateTo } from "#app";
 import { useAuthentication } from "../composables/useAuthentication";
+import { useNuxtUsersLocale } from "../composables/useNuxtUsersLocale";
+const { t } = useNuxtUsersLocale();
 const props = defineProps({
   redirectTo: { type: String, required: false, default: "/login" },
-  linkText: { type: String, required: false, default: "Logout" },
-  confirmMessage: { type: String, required: false, default: "Are you sure you want to logout?" },
+  linkText: { type: String, required: false },
+  confirmMessage: { type: String, required: false },
+  loggingOutText: { type: String, required: false },
   class: { type: String, required: false },
   style: { type: [String, Object], required: false },
   linkClass: { type: String, required: false },
@@ -24,7 +27,7 @@ onMounted(() => {
 });
 const handleLogout = async (event) => {
   event.preventDefault();
-  if (!confirm(props.confirmMessage)) {
+  if (!confirm(props.confirmMessage || t("logout.confirmMessage"))) {
     return;
   }
   if (!authComposable) {
@@ -71,8 +74,8 @@ const handleLogout = async (event) => {
       @click="handleLogout"
     >
       <slot>
-        <span v-if="isLoading">Logging out...</span>
-        <span v-else>{{ linkText }}</span>
+        <span v-if="isLoading">{{ props.loggingOutText || t("logout.loggingOut") }}</span>
+        <span v-if="!isLoading">{{ props.linkText || t("logout.linkText") }}</span>
       </slot>
     </a>
   </div>

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

@@ -2,6 +2,7 @@ interface LogoutLinkProps {
     redirectTo?: string;
     linkText?: string;
     confirmMessage?: string;
+    loggingOutText?: string;
     class?: string;
     style?: string | Record<string, string | number>;
     linkClass?: string;
@@ -16,17 +17,15 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LogoutLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    success: () => any;
     error: (error: string) => any;
+    success: () => any;
     click: () => any;
 }, string, import("vue").PublicProps, Readonly<LogoutLinkProps> & Readonly<{
-    onSuccess?: (() => any) | undefined;
     onError?: ((error: string) => any) | undefined;
+    onSuccess?: (() => any) | undefined;
     onClick?: (() => any) | undefined;
 }>, {
     redirectTo: string;
-    linkText: string;
-    confirmMessage: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -4,6 +4,12 @@ interface Props {
     validationResult: PasswordValidationResult | null;
     showHints?: boolean;
     showRules?: boolean;
+    weakLabel?: string;
+    mediumLabel?: string;
+    strongLabel?: string;
+    unknownLabel?: string;
+    requirementsTitleText?: string;
+    hintsTitleText?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     showHints: boolean;

package/dist/runtime/components/NUsersPasswordStrengthIndicator.vue

@@ -1,11 +1,19 @@
 <script setup>
 import { computed } from "vue";
 import { useRuntimeConfig } from "#app";
+import { useNuxtUsersLocale } from "../composables/useNuxtUsersLocale";
+const { t } = useNuxtUsersLocale();
 const props = defineProps({
   password: { type: String, required: true },
   validationResult: { type: null, required: true },
   showHints: { type: Boolean, required: false, default: true },
-  showRules: { type: Boolean, required: false, default: true }
+  showRules: { type: Boolean, required: false, default: true },
+  weakLabel: { type: String, required: false },
+  mediumLabel: { type: String, required: false },
+  strongLabel: { type: String, required: false },
+  unknownLabel: { type: String, required: false },
+  requirementsTitleText: { type: String, required: false },
+  hintsTitleText: { type: String, required: false }
 });
 const { public: { nuxtUsers } } = useRuntimeConfig();
 const moduleOptions = nuxtUsers;
@@ -18,35 +26,35 @@ const validationRules = computed(() => {
   if (moduleOptions.passwordValidation.minLength) {
     const hasMinLength = props.password.length >= moduleOptions.passwordValidation.minLength;
     rules.push({
-      text: `At least ${moduleOptions.passwordValidation.minLength} characters`,
+      text: t("passwordStrength.minLength", [moduleOptions.passwordValidation.minLength]),
       passed: hasMinLength
     });
   }
   if (moduleOptions.passwordValidation.requireUppercase) {
     const hasUppercase = /[A-Z]/.test(props.password);
     rules.push({
-      text: "Contains uppercase letter (A-Z)",
+      text: t("passwordStrength.uppercase"),
       passed: hasUppercase
     });
   }
   if (moduleOptions.passwordValidation.requireLowercase) {
     const hasLowercase = /[a-z]/.test(props.password);
     rules.push({
-      text: "Contains lowercase letter (a-z)",
+      text: t("passwordStrength.lowercase"),
       passed: hasLowercase
     });
   }
   if (moduleOptions.passwordValidation.requireNumbers) {
     const hasNumbers = /\d/.test(props.password);
     rules.push({
-      text: "Contains number (0-9)",
+      text: t("passwordStrength.number"),
       passed: hasNumbers
     });
   }
   if (moduleOptions.passwordValidation.requireSpecialChars) {
     const hasSpecialChars = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(props.password);
     rules.push({
-      text: "Contains special character (!@#$%^&*)",
+      text: t("passwordStrength.specialChar"),
       passed: hasSpecialChars
     });
   }
@@ -74,7 +82,7 @@ const validationRules = computed(() => {
   color: validationResult?.strength === 'weak' ? '#dc3545' : validationResult?.strength === 'medium' ? '#ffc107' : validationResult?.strength === 'strong' ? '#28a745' : '#6c757d'
 }"
     >
-      {{ validationResult?.strength === "weak" ? "Weak" : validationResult?.strength === "medium" ? "Medium" : validationResult?.strength === "strong" ? "Strong" : "Unknown" }}
+      {{ validationResult?.strength === "weak" ? props.weakLabel || t("passwordStrength.weak") : validationResult?.strength === "medium" ? props.mediumLabel || t("passwordStrength.medium") : validationResult?.strength === "strong" ? props.strongLabel || t("passwordStrength.strong") : props.unknownLabel || t("passwordStrength.unknown") }}
       ({{ validationResult?.score || 0 }}%)
     </span>
   </div>
@@ -85,7 +93,7 @@ const validationRules = computed(() => {
     class="n-users-validation-rules n-users-validation-container"
   >
     <div class="n-users-rules-title n-users-container-title">
-      Password Requirements:
+      {{ props.requirementsTitleText || t("passwordStrength.label") }}
     </div>
     <ul class="n-users-rules-list n-users-list-unstyled">
       <li
@@ -124,7 +132,7 @@ const validationRules = computed(() => {
     class="n-users-password-hints n-users-validation-container"
   >
     <div class="n-users-hint-title n-users-container-title">
-      How to make your password stronger:
+      {{ props.hintsTitleText || t("passwordStrength.hintsTitle") }}
     </div>
     <ul class="n-users-hint-list n-users-list-unstyled">
       <li

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

@@ -4,6 +4,12 @@ interface Props {
     validationResult: PasswordValidationResult | null;
     showHints?: boolean;
     showRules?: boolean;
+    weakLabel?: string;
+    mediumLabel?: string;
+    strongLabel?: string;
+    unknownLabel?: string;
+    requirementsTitleText?: string;
+    hintsTitleText?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     showHints: boolean;

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

@@ -1,3 +1,15 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+interface Props {
+    title?: string;
+    nameLabel?: string;
+    emailLabel?: string;
+    roleLabel?: string;
+    registeredLabel?: string;
+    lastUpdatedLabel?: string;
+    activeLabel?: string;
+    idLabel?: string;
+    yesText?: string;
+    noText?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/NUsersProfileInfo.vue

@@ -1,6 +1,20 @@
 <script setup>
 import { computed, onMounted, ref } from "vue";
 import { useAuthentication } from "../composables/useAuthentication";
+import { useNuxtUsersLocale } from "../composables/useNuxtUsersLocale";
+const { t } = useNuxtUsersLocale();
+const props = defineProps({
+  title: { type: String, required: false },
+  nameLabel: { type: String, required: false },
+  emailLabel: { type: String, required: false },
+  roleLabel: { type: String, required: false },
+  registeredLabel: { type: String, required: false },
+  lastUpdatedLabel: { type: String, required: false },
+  activeLabel: { type: String, required: false },
+  idLabel: { type: String, required: false },
+  yesText: { type: String, required: false },
+  noText: { type: String, required: false }
+});
 const authComposable = ref(null);
 const user = computed(() => authComposable.value?.user ?? null);
 onMounted(() => {
@@ -11,31 +25,31 @@ onMounted(() => {
 <template>
   <div class="n-users-profile-info n-users-section">
     <h2 class="n-users-section-header">
-      Profile Information
+      {{ props.title || t("profile.title") }}
     </h2>
     <dl
       v-if="user"
       class="n-users-profile-details n-users-grid n-users-grid-2"
     >
-      <dt>Name:</dt>
+      <dt>{{ props.nameLabel || t("profile.name") }}</dt>
       <dd>{{ user.name }}</dd>
 
-      <dt>Email:</dt>
+      <dt>{{ props.emailLabel || t("profile.email") }}</dt>
       <dd>{{ user.email }}</dd>
 
-      <dt>Role:</dt>
+      <dt>{{ props.roleLabel || t("profile.role") }}</dt>
       <dd>{{ user.role }}</dd>
 
-      <dt>Registered:</dt>
+      <dt>{{ props.registeredLabel || t("profile.registered") }}</dt>
       <dd>{{ Intl.DateTimeFormat().format(new Date(user.created_at)) }}</dd>
 
-      <dt>Last updated:</dt>
+      <dt>{{ props.lastUpdatedLabel || t("profile.lastUpdated") }}</dt>
       <dd>{{ Intl.DateTimeFormat().format(new Date(user.updated_at)) }}</dd>
 
-      <dt>Active:</dt>
-      <dd>{{ user.active ? "Yes" : "No" }}</dd>
+      <dt>{{ props.activeLabel || t("profile.active") }}</dt>
+      <dd>{{ user.active ? props.yesText || t("common.yes") : props.noText || t("common.no") }}</dd>
 
-      <dt>ID:</dt>
+      <dt>{{ props.idLabel || t("profile.id") }}</dt>
       <dd>{{ user.id }}</dd>
     </dl>
   </div>

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

@@ -1,3 +1,15 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+interface Props {
+    title?: string;
+    nameLabel?: string;
+    emailLabel?: string;
+    roleLabel?: string;
+    registeredLabel?: string;
+    lastUpdatedLabel?: string;
+    activeLabel?: string;
+    idLabel?: string;
+    yesText?: string;
+    noText?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;