nuxt-users 1.11.0 → 1.13.0

package/dist/runtime/components/{LoginForm.vue.d.ts → NUsersLoginForm.vue.d.ts}

@@ -22,22 +22,18 @@ type __VLS_Slots = {} & {
     'error-message'?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LoginFormProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    success: (user: UserWithoutPassword) => any;
     error: (error: string) => any;
-    "forgot-password-error": (error: string) => any;
     submit: (data: LoginFormData) => any;
+    success: (user: UserWithoutPassword) => any;
+    "forgot-password-error": (error: string) => any;
     "forgot-password-success": () => any;
 }, string, import("vue").PublicProps, Readonly<LoginFormProps> & Readonly<{
-    onSuccess?: ((user: UserWithoutPassword) => any) | undefined;
     onError?: ((error: string) => any) | undefined;
-    "onForgot-password-error"?: ((error: string) => any) | undefined;
     onSubmit?: ((data: LoginFormData) => any) | undefined;
+    onSuccess?: ((user: UserWithoutPassword) => any) | undefined;
+    "onForgot-password-error"?: ((error: string) => any) | undefined;
     "onForgot-password-success"?: (() => any) | undefined;
-}>, {
-    apiEndpoint: string;
-    redirectTo: string;
-    forgotPasswordEndpoint: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/{LogoutLink.vue → NUsersLogoutLink.vue}

@@ -50,7 +50,7 @@ const handleLogout = async (event) => {
   >
     <div
       v-if="error"
-      :class="['error-message', props.errorClass]"
+      :class="['n-users-error-message', props.errorClass]"
       :style="props.errorStyle"
     >
       {{ error }}
@@ -58,7 +58,7 @@ const handleLogout = async (event) => {
 
     <a
       href="#"
-      :class="['logout-link', { loading: isLoading }, props.linkClass]"
+      :class="['n-users-logout-link', { loading: isLoading }, props.linkClass]"
       :style="props.linkStyle"
       :disabled="isLoading"
       @click="handleLogout"
@@ -70,7 +70,3 @@ const handleLogout = async (event) => {
     </a>
   </div>
 </template>
-
-<style scoped>
-.logout-link{background:var(--color-error);border:2px solid transparent;border-color:var(--color-error-dark);border-radius:.5em;color:#fff;display:inline-block;font-weight:500;padding:.5em 1em;text-decoration:none;transition:all .2s}.logout-link:hover{border-color:var(--color-primary)}.error-message{color:var(--color-error);font-size:1rem;margin-bottom:.5em}
-</style>

package/dist/runtime/components/{PasswordStrengthIndicator.vue → NUsersPasswordStrengthIndicator.vue}

@@ -11,7 +11,7 @@ const { public: { nuxtUsers } } = useRuntimeConfig();
 const moduleOptions = nuxtUsers;
 const hasErrors = computed(() => (props.validationResult?.errors?.length || 0) > 0);
 const hasHints = computed(() => (props.validationResult?.hints?.length || 0) > 0);
-const hasPassword = computed(() => props.password.length > 0);
+const hasPassword = computed(() => props.password?.length > 0);
 const validationRules = computed(() => {
   if (!props.password) return [];
   const rules = [];
@@ -57,11 +57,11 @@ const validationRules = computed(() => {
 <template>
   <div
     v-if="hasPassword"
-    class="password-strength"
+    class="n-users-password-strength"
   >
-    <div class="strength-bar">
+    <div class="n-users-strength-bar">
       <div
-        class="strength-fill"
+        class="n-users-strength-fill"
         :style="{
   width: `${validationResult?.score || 0}%`,
   backgroundColor: validationResult?.strength === 'weak' ? '#dc3545' : validationResult?.strength === 'medium' ? '#ffc107' : validationResult?.strength === 'strong' ? '#28a745' : '#6c757d'
@@ -69,7 +69,7 @@ const validationRules = computed(() => {
       />
     </div>
     <span
-      class="strength-text"
+      class="n-users-strength-text"
       :style="{
   color: validationResult?.strength === 'weak' ? '#dc3545' : validationResult?.strength === 'medium' ? '#ffc107' : validationResult?.strength === 'strong' ? '#28a745' : '#6c757d'
 }"
@@ -82,22 +82,22 @@ const validationRules = computed(() => {
   <!-- Validation rules -->
   <div
     v-if="showRules && hasPassword"
-    class="validation-rules"
+    class="n-users-validation-rules n-users-validation-container"
   >
-    <div class="rules-title">
+    <div class="n-users-rules-title n-users-container-title">
       Password Requirements:
     </div>
-    <ul class="rules-list">
+    <ul class="n-users-rules-list n-users-list-unstyled">
       <li
         v-for="rule in validationRules"
         :key="rule.text"
-        class="rule-item"
-        :class="{ 'rule-passed': rule.passed, 'rule-failed': !rule.passed }"
+        class="n-users-rule-item n-users-list-item"
+        :class="{ 'n-users-rule-passed': rule.passed, 'n-users-rule-failed': !rule.passed }"
       >
-        <span class="rule-icon">
+        <span class="n-users-rule-icon n-users-icon">
           {{ rule.passed ? "\u2713" : "\u2717" }}
         </span>
-        <span class="rule-text">
+        <span class="n-users-rule-text n-users-text">
           {{ rule.text }}
         </span>
       </li>
@@ -107,12 +107,12 @@ const validationRules = computed(() => {
   <!-- Validation errors -->
   <div
     v-if="hasErrors"
-    class="validation-errors"
+    class="n-users-validation-errors"
   >
     <small
       v-for="error in validationResult?.errors || []"
       :key="String(error)"
-      class="error-text"
+      class="n-users-error-text"
     >
       {{ error }}
     </small>
@@ -121,23 +121,19 @@ const validationRules = computed(() => {
   <!-- Password improvement hints -->
   <div
     v-if="showHints && hasPassword && hasHints"
-    class="password-hints"
+    class="n-users-password-hints n-users-validation-container"
   >
-    <div class="hint-title">
+    <div class="n-users-hint-title n-users-container-title">
       How to make your password stronger:
     </div>
-    <ul class="hint-list">
+    <ul class="n-users-hint-list n-users-list-unstyled">
       <li
         v-for="hint in validationResult?.hints || []"
         :key="'hint-' + hint"
-        class="hint-item"
+        class="n-users-hint-item n-users-list-item"
       >
         {{ hint }}
       </li>
     </ul>
   </div>
 </template>
-
-<style scoped>
-.password-strength{margin-top:8px}.strength-bar{background-color:#e9ecef;border-radius:2px;height:4px;margin-bottom:4px;overflow:hidden;width:100%}.strength-fill{height:100%;transition:width .3s ease,background-color .3s ease}.strength-text{font-size:.75rem;font-weight:500}.validation-rules{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;margin-top:12px;padding:12px}.rules-title{color:#495057;font-size:.875rem;font-weight:600;margin-bottom:8px}.rules-list{list-style:none;margin:0;padding-left:0}.rule-item{align-items:center;display:flex;font-size:.875rem;margin-bottom:6px;transition:color .2s ease}.rule-item:last-child{margin-bottom:0}.rule-passed{color:#28a745}.rule-failed{color:#dc3545}.rule-icon{font-weight:700;margin-right:8px;min-width:16px;text-align:center}.rule-text{flex:1}.validation-errors{margin-top:8px}.error-text{color:#dc3545;display:block;font-size:.875rem;margin-bottom:4px}.error-text:last-child{margin-bottom:0}.password-hints{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;margin-top:8px;padding:12px}.hint-title{color:#495057;font-size:.875rem;font-weight:600;margin-bottom:8px}.hint-list{margin:0;padding-left:16px}.hint-item{color:#6c757d;font-size:.875rem;margin-bottom:4px}.hint-item:last-child{margin-bottom:0}
-</style>

package/dist/runtime/components/{ProfileInfo.vue → NUsersProfileInfo.vue}

@@ -4,11 +4,13 @@ const { user } = useAuthentication();
 </script>
 
 <template>
-  <div>
-    <h2>Profile Information</h2>
+  <div class="n-users-profile-info n-users-section">
+    <h2 class="n-users-section-header">
+      Profile Information
+    </h2>
     <dl
       v-if="user"
-      class="profile-info"
+      class="n-users-profile-details n-users-grid n-users-grid-2"
     >
       <dt>Name:</dt>
       <dd>{{ user.name }}</dd>
@@ -27,7 +29,3 @@ const { user } = useAuthentication();
     </dl>
   </div>
 </template>
-
-<style scoped>
-div{background-color:var(--color-bg-primary);border-top-left-radius:.5em;border-top-right-radius:.5em;margin:0 auto;max-width:42em;padding:1em}h2{border-bottom:.1em solid var(--color-border)}dl{display:grid;font-size:1rem;gap:16px;grid-template-columns:1fr 5fr;list-style:none;margin:0;padding:0}
-</style>

package/dist/runtime/components/{ResetPasswordForm.vue → NUsersResetPasswordForm.vue}

@@ -2,13 +2,12 @@
 import { ref, watch } from "vue";
 import { usePasswordValidation } from "../composables/usePasswordValidation";
 import { useRuntimeConfig } from "#imports";
-import PasswordStrengthIndicator from "./PasswordStrengthIndicator.vue";
+import NUsersPasswordStrengthIndicator from "./NUsersPasswordStrengthIndicator.vue";
 const { public: { nuxtUsers } } = useRuntimeConfig();
-const apiBasePath = nuxtUsers?.apiBasePath;
 const moduleOptions = nuxtUsers;
 const props = defineProps({
-  apiEndpoint: { type: String, required: false, default: `${apiBasePath}/me` },
-  updatePasswordEndpoint: { type: String, required: false, default: `${apiBasePath}/password` }
+  apiEndpoint: { type: String, required: false },
+  updatePasswordEndpoint: { type: String, required: false }
 });
 const emit = defineEmits(["success", "error", "password-error", "password-updated"]);
 const isPasswordLoading = ref(false);
@@ -32,7 +31,7 @@ const updatePassword = async () => {
   passwordError.value = "";
   passwordSuccess.value = "";
   try {
-    await $fetch(props.updatePasswordEndpoint, {
+    await $fetch(props.updatePasswordEndpoint || nuxtUsers.apiBasePath + "/password", {
       method: "PATCH",
       body: passwordForm.value
     });
@@ -54,48 +53,49 @@ const updatePassword = async () => {
 </script>
 
 <template>
-  <div>
-    <h2>Change Password</h2>
+  <div class="n-users-section">
+    <h2 class="n-users-section-header">
+      Change Password
+    </h2>
 
     <form @submit.prevent="updatePassword">
-      <div class="form-group">
+      <div class="n-users-form-group">
         <label
           for="currentPassword"
-          class="form-label"
+          class="n-users-form-label"
         >Current Password</label>
         <input
           id="currentPassword"
           v-model="passwordForm.currentPassword"
           type="password"
-          class="form-input"
+          class="n-users-form-input"
           required
           :disabled="isPasswordLoading"
         >
       </div>
 
-      <div class="form-group">
+      <div class="n-users-form-group">
         <label
           for="newPassword"
-          class="form-label"
+          class="n-users-form-label"
         >New Password</label>
         <input
           id="newPassword"
           v-model="passwordForm.newPassword"
           type="password"
-          class="form-input"
+          class="n-users-form-input"
           required
           :minlength="moduleOptions.passwordValidation?.minLength || 8"
           :class="{ error: passwordValidation.errors.value.length > 0 && passwordForm.newPassword }"
           :disabled="isPasswordLoading"
         >
 
-        <PasswordStrengthIndicator
+        <NUsersPasswordStrengthIndicator
           :password="passwordForm.newPassword"
           :validation-result="passwordValidation.validationResult.value"
         />
 
-        <!-- Password requirements -->
-        <small class="form-help">
+        <small class="n-users-form-help">
           Password must contain at least {{ moduleOptions.passwordValidation?.minLength || 8 }} characters
           <span v-if="moduleOptions.passwordValidation?.requireUppercase">, including uppercase letters</span>
           <span v-if="moduleOptions.passwordValidation?.requireLowercase">, lowercase letters</span>
@@ -104,16 +104,16 @@ const updatePassword = async () => {
         </small>
       </div>
 
-      <div class="form-group">
+      <div class="n-users-form-group">
         <label
           for="newPasswordConfirmation"
-          class="form-label"
+          class="n-users-form-label"
         >Confirm New Password</label>
         <input
           id="newPasswordConfirmation"
           v-model="passwordForm.newPasswordConfirmation"
           type="password"
-          class="form-input"
+          class="n-users-form-input"
           required
           :disabled="isPasswordLoading"
         >
@@ -121,21 +121,21 @@ const updatePassword = async () => {
 
       <div
         v-if="passwordError"
-        class="error-message"
+        class="n-users-error-message"
       >
         {{ passwordError }}
       </div>
 
       <div
         v-if="passwordSuccess"
-        class="success-message"
+        class="n-users-success-message"
       >
         {{ passwordSuccess }}
       </div>
 
       <button
         type="submit"
-        class="btn btn-primary"
+        class="n-users-btn n-users-btn-primary"
         :disabled="isPasswordLoading"
       >
         <span v-if="isPasswordLoading">Updating...</span>
@@ -144,7 +144,3 @@ const updatePassword = async () => {
     </form>
   </div>
 </template>
-
-<style scoped>
-div{background-color:var(--color-bg-primary);border-bottom-left-radius:.5em;border-bottom-right-radius:.5em;margin:0 auto;max-width:42em;padding:1em}h2{border-bottom:.1em solid var(--color-border)}form{gap:1em}.form-group,form{display:flex;flex-direction:column}.form-group{gap:.5em;width:90%}.form-label{color:var(--color-text-primary);font-size:1rem;font-weight:500}.form-input{border:1px solid var(--color-border);border-radius:.5em;font-size:1rem;padding:.5em 1em;transition:border-color .2s,box-shadow .2s}.form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 .1em rgba(var(--color-primary-rgb),.1);outline:none}.form-input:disabled{background-color:var(--color-bg-secondary);cursor:not-allowed}.form-help{color:var(--color-text-secondary);font-size:.75rem;margin-top:.25em}.btn{align-self:flex-start;border:none;border-radius:.5em;cursor:pointer;font-size:1rem;font-weight:500;padding:.5em 1em;transition:background-color .2s,transform .1s}.btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-dark);transform:translateY(-1px)}.error-message{background-color:var(--color-error-bg);border:1px solid var(--color-error-border);border-radius:.5em;color:var(--color-error);font-size:.875rem;padding:12px}.success-message{background-color:#f0fff4;border:1px solid #9ae6b4;border-radius:6px;color:#38a169;font-size:.875rem;padding:12px}
-</style>

package/dist/runtime/components/{ResetPasswordForm.vue.d.ts → NUsersResetPasswordForm.vue.d.ts}

@@ -1,16 +1,13 @@
 import type { UserWithoutPassword, ResetPasswordFormProps } from '../../types.js';
 declare const _default: import("vue").DefineComponent<ResetPasswordFormProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    success: (user: UserWithoutPassword) => any;
     error: (error: string) => any;
+    success: (user: UserWithoutPassword) => any;
     "password-error": (error: string) => any;
     "password-updated": () => any;
 }, string, import("vue").PublicProps, Readonly<ResetPasswordFormProps> & Readonly<{
-    onSuccess?: ((user: UserWithoutPassword) => any) | undefined;
     onError?: ((error: string) => any) | undefined;
+    onSuccess?: ((user: UserWithoutPassword) => any) | undefined;
     "onPassword-error"?: ((error: string) => any) | undefined;
     "onPassword-updated"?: (() => any) | undefined;
-}>, {
-    apiEndpoint: string;
-    updatePasswordEndpoint: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/NUsersUserCard.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { computed } from "vue";
+import { useAuthentication } from "../composables/useAuthentication";
+import { useRuntimeConfig } from "#imports";
+import { defaultDisplayFields, defaultFieldLabels } from "../../types";
+const props = defineProps({
+  user: { type: Object, required: true },
+  index: { type: Number, required: true },
+  displayFields: { type: Array, required: false, default: () => defaultDisplayFields },
+  fieldLabels: { type: Object, required: false, default: () => defaultFieldLabels }
+});
+const emit = defineEmits(["delete", "editClick"]);
+const { user: currentUser } = useAuthentication();
+const { public: { nuxtUsers } } = useRuntimeConfig();
+const canEdit = computed(() => {
+  if (!currentUser.value) return false;
+  if (nuxtUsers.auth?.permissions) {
+    const userPermissions = nuxtUsers.auth.permissions[currentUser.value.role] || [];
+    const apiBasePath = nuxtUsers.apiBasePath;
+    return userPermissions.some(
+      (permission) => permission === "*" || permission === `${apiBasePath}/*` || permission === `${apiBasePath}/[id].delete`
+    );
+  }
+  return false;
+});
+const canDelete = computed(() => {
+  if (!currentUser.value) return false;
+  if (nuxtUsers.auth?.permissions) {
+    const userPermissions = nuxtUsers.auth.permissions[currentUser.value.role] || [];
+    const apiBasePath = nuxtUsers.apiBasePath;
+    return userPermissions.some(
+      (permission) => permission === "*" || permission === `${apiBasePath}/*` || permission === `${apiBasePath}/[id].delete`
+    );
+  }
+  return false;
+});
+const editUser = async (user) => {
+  emit("editClick", user);
+};
+const deleteUser = async (user) => {
+  if (!confirm(`Are you sure you want to delete user ${user.name}?`)) {
+    return;
+  }
+  try {
+    await $fetch(`${nuxtUsers.apiBasePath}/${user.id}`, { method: "DELETE" });
+    console.log(`User ${user.name} deleted successfully`);
+    emit("delete", user);
+  } catch (error) {
+    console.error("Failed to delete user:", error);
+  }
+};
+</script>
+
+<template>
+  <slot
+    name="userCard"
+    :user="user"
+    :index="index"
+  >
+    <dl class="n-users-user-card n-users-grid n-users-grid-2">
+      <template
+        v-for="field in props.displayFields"
+        :key="field"
+      >
+        <dt>{{ props.fieldLabels[field] || field }}:</dt>
+        <dd>{{ user[field] }}</dd>
+      </template>
+    </dl>
+
+    <div
+      class="n-users-user-card-actions"
+    >
+      <button
+        v-if="canEdit"
+        class="n-users-edit-btn"
+        @click="editUser(user)"
+      >
+        <slot name="editButton">
+          Edit
+        </slot>
+      </button>
+      <button
+        v-if="canDelete"
+        class="n-users-delete-btn"
+        @click="deleteUser(user)"
+      >
+        <slot name="deleteButton">
+          Delete
+        </slot>
+      </button>
+    </div>
+  </slot>
+</template>

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

@@ -0,0 +1,33 @@
+import { type DisplayFieldsProps, type User } from '../../types.js';
+interface Props extends DisplayFieldsProps {
+    user: User;
+    index: number;
+}
+declare var __VLS_1: {
+    user: User;
+    index: number;
+}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    userCard?: (props: typeof __VLS_1) => any;
+} & {
+    editButton?: (props: typeof __VLS_3) => any;
+} & {
+    deleteButton?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (user: User) => void;
+    editClick: (user: User) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onDelete?: ((user: User) => any) | undefined;
+    onEditClick?: ((user: User) => any) | undefined;
+}>, {
+    displayFields: string[];
+    fieldLabels: Record<string, string>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/NUsersUserForm.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import { usePasswordValidation } from "../composables/usePasswordValidation";
+import { useRuntimeConfig } from "#imports";
+const props = defineProps({
+  user: { type: [Object, null], required: false }
+});
+const emit = defineEmits(["submit", "cancel"]);
+const emptyFormData = {
+  name: "",
+  email: "",
+  role: "user",
+  password: ""
+};
+const formData = ref(props.user ?? emptyFormData);
+const { public: { nuxtUsers } } = useRuntimeConfig();
+const moduleOptions = nuxtUsers;
+const passwordValidation = usePasswordValidation(moduleOptions);
+const nameError = ref("");
+const isEditMode = computed(() => !!props.user);
+const title = computed(() => isEditMode.value ? "Edit User" : "Create User");
+const submitText = computed(() => isEditMode.value ? "Update" : "Create");
+watch(() => props.user, (newUser) => {
+  if (newUser) {
+    formData.value = { ...newUser };
+  }
+});
+watch(() => formData.value.name, (name) => {
+  if (!name || name.trim().length < 3) {
+    nameError.value = "Name must be at least 3 characters long";
+  } else {
+    nameError.value = "";
+  }
+});
+watch(() => formData.value.password, (newPassword) => {
+  if (newPassword) {
+    passwordValidation.validate(newPassword);
+  } else {
+    passwordValidation.clearValidation();
+  }
+});
+const handleSubmit = async () => {
+  const userData = { ...formData.value };
+  if (!userData.name || userData.name.trim().length < 3) {
+    console.log("name is too short");
+    return;
+  }
+  if (isEditMode.value && !userData.password) {
+    delete userData.password;
+  }
+  if (userData.password && !passwordValidation.validationResult.value?.isValid) {
+    console.log("password validation failed", passwordValidation.validationResult.value);
+    return;
+  }
+  try {
+    if (isEditMode.value) {
+      await $fetch(`${nuxtUsers.apiBasePath}/${props.user.id}`, {
+        method: "PATCH",
+        body: userData
+      });
+    } else {
+      await $fetch(nuxtUsers.apiBasePath, {
+        method: "POST",
+        body: userData
+      });
+    }
+    emit("submit", userData);
+    formData.value = { ...emptyFormData };
+  } catch (error) {
+    console.error("Failed to save user:", error);
+  }
+};
+</script>
+
+<template>
+  <div class="n-users-user-form">
+    <h3>{{ title }}</h3>
+
+    <form @submit.prevent="handleSubmit">
+      <div class="n-users-form-group">
+        <label for="name">Name:</label>
+        <input
+          v-model="formData.name"
+          name="name"
+          type="text"
+          minlength="3"
+          required
+          :class="{ error: nameError }"
+        >
+        <small
+          v-if="nameError"
+          class="n-users-error-text"
+        >
+          {{ nameError }}
+        </small>
+      </div>
+
+      <div class="n-users-form-group">
+        <label for="email">Email:</label>
+        <input
+          v-model="formData.email"
+          type="email"
+          required
+        >
+      </div>
+
+      <div class="n-users-form-group">
+        <label for="role">Role:</label>
+        <input
+          v-model="formData.role"
+          type="text"
+        >
+      </div>
+
+      <div class="n-users-form-group">
+        <label for="password">
+          {{ isEditMode ? "Password (leave blank to keep current)" : "Password:" }}
+        </label>
+        <input
+          v-model="formData.password"
+          type="password"
+          :required="!isEditMode"
+        >
+
+        <NUsersPasswordStrengthIndicator
+          :password="formData.password"
+          :validation-result="passwordValidation.validationResult.value"
+        />
+      </div>
+
+      <div class="n-users-form-actions">
+        <button
+          type="submit"
+          class="n-users-submit-btn"
+        >
+          {{ submitText }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+import type { User } from '../../types.js';
+type __VLS_Props = {
+    user?: User | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    submit: (userData: Partial<User>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((userData: Partial<User>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/composables/useAuthentication.d.ts

@@ -7,6 +7,7 @@ export declare const useAuthentication: () => {
         readonly role: string;
         readonly created_at: string;
         readonly updated_at: string;
+        readonly last_login_at?: string | undefined;
     } | null, {
         readonly id: number;
         readonly email: string;
@@ -14,6 +15,7 @@ export declare const useAuthentication: () => {
         readonly role: string;
         readonly created_at: string;
         readonly updated_at: string;
+        readonly last_login_at?: string | undefined;
     } | null>>;
     isAuthenticated: import("vue").ComputedRef<boolean>;
     login: (userData: User) => void;

package/dist/runtime/composables/usePasswordValidation.d.ts

@@ -1,6 +1,6 @@
 import { type PasswordValidationResult, type PasswordValidationOptions } from '../../utils/index.js';
-import type { ModuleOptions } from '../../types.js';
-export declare const usePasswordValidation: (moduleOptions?: ModuleOptions, options?: PasswordValidationOptions) => {
+import type { RuntimeModuleOptions } from '../../types.js';
+export declare const usePasswordValidation: (moduleOptions?: RuntimeModuleOptions, options?: PasswordValidationOptions) => {
     password: import("vue").Ref<string, string>;
     validationResult: import("vue").Ref<{
         isValid: boolean;

package/dist/runtime/middleware/authorization.client.js

@@ -23,7 +23,7 @@ export default defineNuxtRouteMiddleware((to) => {
     console.log(`[Nuxt Users] client.middleware.auth.global: Unauthenticated ${to.path}, redirecting to /login`);
     return navigateTo("/login");
   }
-  if (!user.value || !hasPermission(user.value.role, to.path, publicOptions.auth.permissions)) {
+  if (!user.value || !hasPermission(user.value.role, to.path, "GET", publicOptions.auth.permissions)) {
     console.log(`[Nuxt Users] client.middleware.auth.global: User with role ${user.value?.role} denied access to ${to.path}`);
     return navigateTo("/login");
   }