nuxt-users 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,6 +1,67 @@
 # Changelog
 
 
+## v1.5.0
+
+[compare changes](https://github.com/rrd108/nuxt-users/compare/v1.4.0...v1.5.0)
+
+### 🚀 Enhancements
+
+- Implement forgot password closes #57 ([#57](https://github.com/rrd108/nuxt-users/issues/57))
+- Add profile page closes #58 ([#58](https://github.com/rrd108/nuxt-users/issues/58))
+
+### 🩹 Fixes
+
+- Css color ([1d72336](https://github.com/rrd108/nuxt-users/commit/1d72336))
+- Auth middleware ([113b165](https://github.com/rrd108/nuxt-users/commit/113b165))
+- Enhances auth middleware and improves logging ([f519bbc](https://github.com/rrd108/nuxt-users/commit/f519bbc))
+- Playground colors ([f87ade1](https://github.com/rrd108/nuxt-users/commit/f87ade1))
+- Enhances user authentication and data handling ([d15c77f](https://github.com/rrd108/nuxt-users/commit/d15c77f))
+
+### 💅 Refactors
+
+- Have a dedicated playground  login page ([487d754](https://github.com/rrd108/nuxt-users/commit/487d754))
+- Module options and defaults ([00aa094](https://github.com/rrd108/nuxt-users/commit/00aa094))
+
+### 🏡 Chore
+
+- **release:** V1.4.0 ([e07ca9a](https://github.com/rrd108/nuxt-users/commit/e07ca9a))
+
+### ✅ Tests
+
+- Do not run unit tests for various dbs ([5b5e3aa](https://github.com/rrd108/nuxt-users/commit/5b5e3aa))
+
+### ❤️ Contributors
+
+- Rrd108 ([@rrd108](https://github.com/rrd108))
+
+## v1.4.0
+
+[compare changes](https://github.com/rrd108/nuxt-users/compare/v1.3.0...v1.4.0)
+
+### 🚀 Enhancements
+
+- Implement forgot password closes #57 ([#57](https://github.com/rrd108/nuxt-users/issues/57))
+
+### 🩹 Fixes
+
+- Css color ([1d72336](https://github.com/rrd108/nuxt-users/commit/1d72336))
+- Auth middleware ([113b165](https://github.com/rrd108/nuxt-users/commit/113b165))
+- Enhances auth middleware and improves logging ([f519bbc](https://github.com/rrd108/nuxt-users/commit/f519bbc))
+- Playground colors ([f87ade1](https://github.com/rrd108/nuxt-users/commit/f87ade1))
+
+### 💅 Refactors
+
+- Have a dedicated playground  login page ([487d754](https://github.com/rrd108/nuxt-users/commit/487d754))
+
+### 🏡 Chore
+
+- **release:** V1.3.0 ([b127043](https://github.com/rrd108/nuxt-users/commit/b127043))
+
+### ❤️ Contributors
+
+- Rrd108 ([@rrd108](https://github.com/rrd108))
+
 ## v1.3.0
 
 [compare changes](https://github.com/rrd108/nuxt-users/compare/v1.2.0...v1.3.0)

package/dist/cli.mjs

@@ -2,36 +2,11 @@
 import { defineCommand, runMain } from 'citty';
 import 'db0';
 import 'bcrypt';
-import { r as runMigrations, a as createUser$1, d as createUsersTable$1, e as createPersonalAccessTokensTable$1, g as createPasswordResetTokensTable$1, h as createMigrationsTable$1 } from './shared/nuxt-users.DZkU2AbH.mjs';
+import { r as runMigrations, i as getPasswordValidationOptions, v as validatePassword, a as createUser$1, d as createUsersTable$1, e as createPersonalAccessTokensTable$1, g as createPasswordResetTokensTable$1, h as createMigrationsTable$1 } from './shared/nuxt-users.37k1R3_g.mjs';
+import { defaultOptions } from './module.mjs';
 import { loadNuxt } from '@nuxt/kit';
+import 'defu';
 
-const defaultOptions = {
-  connector: {
-    name: "sqlite",
-    options: {
-      path: "./data/users.sqlite3"
-    }
-  },
-  tables: {
-    migrations: "migrations",
-    users: "users",
-    personalAccessTokens: "personal_access_tokens",
-    passwordResetTokens: "password_reset_tokens"
-  },
-  mailer: {
-    host: "smtp.ethereal.email",
-    port: 587,
-    secure: false,
-    auth: {
-      user: "user@ethereal.email",
-      pass: "password"
-    },
-    defaults: {
-      from: '"Nuxt Users Module" <noreply@example.com>'
-    }
-  },
-  passwordResetBaseUrl: "http://localhost:3000"
-};
 const getOptionsFromEnv = () => {
   const connectorName = process.env.DB_CONNECTOR || "sqlite";
   let connectorOptions;
@@ -74,7 +49,7 @@ const loadOptions = async () => {
   try {
     console.log("[Nuxt Users] Loading Nuxt project...");
     const nuxt = await loadNuxt({ cwd: process.cwd() });
-    const nuxtUsersConfig = nuxt.options.runtimeConfig?.nuxtUsers;
+    const nuxtUsersConfig = nuxt.options.nuxtUsers;
     await nuxt.close();
     if (nuxtUsersConfig) {
       console.log("[Nuxt Users] Using configuration from Nuxt project");
@@ -144,6 +119,13 @@ const createUser = defineCommand({
     const { email, name, password, role } = args;
     const options = await loadOptions();
     try {
+      const passwordOptions = getPasswordValidationOptions(options);
+      const passwordValidation = validatePassword(password, passwordOptions);
+      if (!passwordValidation.isValid) {
+        console.error("[Nuxt Users] Password validation failed:");
+        passwordValidation.errors.forEach((error) => console.error(`  - ${error}`));
+        process.exit(1);
+      }
       const user = await createUser$1({ email, name, password, role }, options);
       console.log(`[Nuxt Users] User created successfully: ${user.email} (role: ${user.role})`);
       process.exit(0);
@@ -248,7 +230,7 @@ const projectInfo = defineCommand({
       } else {
         console.log("[Nuxt Users] \u26A0\uFE0F  Nuxt Users module not configured in runtime config");
       }
-      const publicConfig = nuxt.options.runtimeConfig?.public?.nuxtUsers;
+      const publicConfig = nuxt.options.runtimeConfig?.nuxtUsers;
       if (publicConfig) {
         console.log("[Nuxt Users] \u{1F30D} Public runtime config:");
         console.log("[Nuxt Users]    Users table exists:", publicConfig.tables?.users);

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { M as ModuleOptions } from './shared/nuxt-users.DGRKT2Tq.mjs';
+import { M as ModuleOptions } from './shared/nuxt-users.CMEtv_Mw.mjs';
 
 declare const defaultOptions: ModuleOptions;
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.d.ts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { M as ModuleOptions } from './shared/nuxt-users.DGRKT2Tq.js';
+import { M as ModuleOptions } from './shared/nuxt-users.CMEtv_Mw.js';
 
 declare const defaultOptions: ModuleOptions;
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-users",
   "configKey": "nuxtUsers",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.6.0"

package/dist/module.mjs

@@ -29,8 +29,17 @@ const defaultOptions = {
       from: '"Nuxt Users Module" <noreply@example.com>'
     }
   },
+  passwordResetBaseUrl: "http://localhost:3000",
   auth: {
     whitelist: ["/login"]
+  },
+  passwordValidation: {
+    minLength: 8,
+    requireUppercase: true,
+    requireLowercase: true,
+    requireNumbers: true,
+    requireSpecialChars: true,
+    preventCommonPasswords: true
   }
 };
 const module = defineNuxtModule({
@@ -52,7 +61,21 @@ const module = defineNuxtModule({
         passwordResetTokens: options.tables?.passwordResetTokens || defaultOptions.tables.passwordResetTokens
       },
       auth: {
-        whitelist: options.auth?.whitelist || defaultOptions.auth?.whitelist || ["/login"]
+        whitelist: [...defaultOptions.auth?.whitelist || [], ...options.auth?.whitelist || []]
+      }
+    };
+    nuxt.options.runtimeConfig.public = nuxt.options.runtimeConfig.public || {};
+    nuxt.options.runtimeConfig.public.nuxtUsers = {
+      passwordValidation: {
+        minLength: options.passwordValidation?.minLength || defaultOptions.passwordValidation.minLength,
+        requireUppercase: options.passwordValidation?.requireUppercase ?? defaultOptions.passwordValidation.requireUppercase,
+        requireLowercase: options.passwordValidation?.requireLowercase ?? defaultOptions.passwordValidation.requireLowercase,
+        requireNumbers: options.passwordValidation?.requireNumbers ?? defaultOptions.passwordValidation.requireNumbers,
+        requireSpecialChars: options.passwordValidation?.requireSpecialChars ?? defaultOptions.passwordValidation.requireSpecialChars,
+        preventCommonPasswords: options.passwordValidation?.preventCommonPasswords ?? defaultOptions.passwordValidation.preventCommonPasswords
+      },
+      auth: {
+        whitelist: [...defaultOptions.auth?.whitelist || [], ...options.auth?.whitelist || []]
       }
     };
     addPlugin({
@@ -80,6 +103,16 @@ const module = defineNuxtModule({
       method: "get",
       handler: resolver.resolve("./runtime/server/api/logout.get")
     });
+    addServerHandler({
+      route: "/api/profile",
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/profile.get")
+    });
+    addServerHandler({
+      route: "/api/profile/update-password",
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/profile/update-password.post")
+    });
     addComponent({
       name: "LoginForm",
       filePath: resolver.resolve("./runtime/components/LoginForm.vue")
@@ -96,6 +129,10 @@ const module = defineNuxtModule({
       name: "LogoutLink",
       filePath: resolver.resolve("./runtime/components/LogoutLink.vue")
     });
+    addComponent({
+      name: "ProfileForm",
+      filePath: resolver.resolve("./runtime/components/ProfileForm.vue")
+    });
     nuxt.options.css = nuxt.options.css || [];
     nuxt.options.css.push(resolver.resolve("./runtime/assets/colors.css"));
   }

package/dist/runtime/components/LoginForm.vue

@@ -3,11 +3,14 @@ import { ref } from "vue";
 import { navigateTo } from "#app";
 const props = defineProps({
   apiEndpoint: { type: String, required: false, default: "/api/login" },
-  redirectTo: { type: String, required: false, default: "/" }
+  redirectTo: { type: String, required: false, default: "/" },
+  forgotPasswordEndpoint: { type: String, required: false, default: "/api/auth/forgot-password" }
 });
-const emit = defineEmits(["success", "error", "submit"]);
+const emit = defineEmits(["success", "error", "forgot-password-error", "submit", "forgot-password-success"]);
 const isLoading = ref(false);
+const isForgotPasswordLoading = ref(false);
 const error = ref("");
+const forgotPasswordMessage = ref("");
 const formData = ref({
   email: "",
   password: "",
@@ -37,6 +40,31 @@ const handleSubmit = async () => {
     isLoading.value = false;
   }
 };
+const handleForgotPassword = async () => {
+  if (!formData.value.email) {
+    error.value = "Please enter your email address first";
+    return;
+  }
+  isForgotPasswordLoading.value = true;
+  forgotPasswordMessage.value = "";
+  error.value = "";
+  try {
+    const response = await $fetch(props.forgotPasswordEndpoint, {
+      method: "POST",
+      body: {
+        email: formData.value.email
+      }
+    });
+    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";
+    error.value = errorMessage;
+    emit("forgot-password-error", errorMessage);
+  } finally {
+    isForgotPasswordLoading.value = false;
+  }
+};
 </script>
 
 <template>
@@ -119,13 +147,32 @@ const handleSubmit = async () => {
             <a
               href="#"
               class="forgot-link"
+              :class="{ loading: isForgotPasswordLoading }"
+              @click.prevent="handleForgotPassword"
             >
-              Forgot your password?
+              <span
+                v-if="isForgotPasswordLoading"
+                class="loading-spinner"
+              />
+              {{ isForgotPasswordLoading ? "Sending..." : "Forgot your password?" }}
             </a>
           </p>
         </div>
       </slot>
 
+      <!-- Success message slot -->
+      <slot
+        name="success-message"
+        :message="forgotPasswordMessage"
+      >
+        <div
+          v-if="forgotPasswordMessage"
+          class="success-message"
+        >
+          {{ forgotPasswordMessage }}
+        </div>
+      </slot>
+
       <!-- Error message slot -->
       <slot
         name="error-message"
@@ -143,5 +190,5 @@ const handleSubmit = async () => {
 </template>
 
 <style scoped>
-section{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:.75em;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);margin:0 auto;max-width:25rem;padding:1em}form{gap:1.5rem}.form-group,form{display:flex;flex-direction:column}label{display:block;font-weight:500;margin-bottom:.5em}input[type=email],input[type=password],label{color:var(--color-gray-700);font-size:.875rem}input[type=email],input[type=password]{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-light);border-radius:8px;box-sizing:border-box;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}input[type=email]:focus,input[type=password]:focus{background-color:var(--color-bg-primary);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.login-header{margin-bottom:1em;text-align:center}.login-title{color:var(--color-gray-800);font-size:1.875rem;font-weight:700;line-height:1.2;margin:0 0 .5em}.login-subtitle{color:var(--color-gray-500);font-size:.875rem;line-height:1.5;margin:0}.remember-me{align-items:center;display:flex;gap:.5rem}input[type=checkbox]{margin:0;width:auto}.remember-me label{color:var(--color-gray-700);font-size:.875rem;margin:0}button[type=submit]{align-items:center;background-color:var(--color-primary);border:1px solid var(--color-primary);border-radius:8px;color:var(--color-white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;min-height:44px;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}button[type=submit]:hover:not(:disabled){background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}button[type=submit]:disabled{cursor:not-allowed;opacity:.6}.loading-spinner{animation:spin 1s linear infinite;border:2px solid var(--color-white);border-radius:50%;border-top:2px solid transparent;height:16px;width:16px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.login-footer{margin-top:1em;text-align:center}.forgot-password{margin:0}.forgot-link{color:var(--color-primary);font-size:.875rem;text-decoration:none;transition:color .2s ease-in-out}.forgot-link:hover{color:var(--color-primary-dark);text-decoration:underline}.error-message{background-color:var(--color-error-light);border:1px solid var(--color-error-border);border-radius:8px;color:var(--color-error);font-size:.875rem;margin-top:1em;padding:.75em 1em;text-align:center}@media (max-width:480px){.login-form-container{margin:1em;padding:1.5em}.login-title{font-size:1.5rem}}
+section{background:linear-gradient(135deg,var(--color-bg-primary) 0,var(--color-bg-secondary) 100%);border:1px solid var(--color-border);border-radius:.75em;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);margin:0 auto;max-width:25rem;padding:1em}form{gap:1.5rem}.form-group,form{display:flex;flex-direction:column}label{display:block;font-weight:500;margin-bottom:.5em}input[type=email],input[type=password],label{color:var(--color-gray-700);font-size:.875rem}input[type=email],input[type=password]{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-light);border-radius:8px;box-sizing:border-box;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}input[type=email]:focus,input[type=password]:focus{background-color:var(--color-bg-primary);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.login-header{margin-bottom:1em;text-align:center}.login-title{color:var(--color-gray-800);font-size:1.875rem;font-weight:700;line-height:1.2;margin:0 0 .5em}.login-subtitle{color:var(--color-gray-500);font-size:.875rem;line-height:1.5;margin:0}.remember-me{align-items:center;display:flex;gap:.5rem}input[type=checkbox]{margin:0;width:auto}.remember-me label{color:var(--color-gray-700);font-size:.875rem;margin:0}button[type=submit]{align-items:center;background-color:var(--color-primary);border:1px solid var(--color-primary);border-radius:8px;color:var(--color-white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;min-height:44px;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}button[type=submit]:hover:not(:disabled){background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}button[type=submit]:disabled{cursor:not-allowed;opacity:.6}.loading-spinner{animation:spin 1s linear infinite;border:2px solid var(--color-white);border-radius:50%;border-top:2px solid transparent;height:16px;width:16px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.login-footer{margin-top:1em;text-align:center}.forgot-password{margin:0}.forgot-link{align-items:center;color:var(--color-primary);display:inline-flex;font-size:.875rem;gap:.5rem;text-decoration:none;transition:color .2s ease-in-out}.forgot-link:hover:not(.loading){color:var(--color-primary-dark);text-decoration:underline}.forgot-link.loading{cursor:not-allowed;opacity:.6;pointer-events:none}.error-message{background-color:var(--color-error-light);border:1px solid var(--color-error-border);border-radius:8px;color:var(--color-error)}.error-message,.success-message{font-size:.875rem;margin-top:1em;padding:.75em 1em;text-align:center}.success-message{background-color:var(--color-success-light);border:1px solid var(--color-success-border);border-radius:8px;color:var(--color-success)}@media (max-width:480px){.login-form-container{margin:1em;padding:1.5em}.login-title{font-size:1.5rem}}
 </style>

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

@@ -1,5 +1,7 @@
-import type { LoginFormData, LoginFormProps, User } from '../../types.js';
+import type { LoginFormData, LoginFormProps, UserWithoutPassword } from '../../types.js';
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {
+    message: string;
+}, __VLS_15: {
     error: string;
 };
 type __VLS_Slots = {} & {
@@ -15,19 +17,26 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_11) => any;
 } & {
-    'error-message'?: (props: typeof __VLS_13) => any;
+    'success-message'?: (props: typeof __VLS_13) => any;
+} & {
+    'error-message'?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LoginFormProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     error: (error: string) => any;
     submit: (data: LoginFormData) => any;
-    success: (user: User) => any;
+    success: (user: UserWithoutPassword) => any;
+    "forgot-password-error": (error: string) => any;
+    "forgot-password-success": () => any;
 }, string, import("vue").PublicProps, Readonly<LoginFormProps> & Readonly<{
     onError?: ((error: string) => any) | undefined;
     onSubmit?: ((data: LoginFormData) => any) | undefined;
-    onSuccess?: ((user: User) => 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>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/PasswordStrengthIndicator.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  password: { type: String, required: true },
+  validationResult: { type: [Object, null], required: true },
+  showHints: { type: Boolean, required: false, default: true },
+  showRules: { type: Boolean, required: false, default: true }
+});
+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 validationRules = computed(() => {
+  if (!props.password) return [];
+  const rules = [];
+  const minLength = 8;
+  const hasMinLength = props.password.length >= minLength;
+  rules.push({
+    text: `At least ${minLength} characters`,
+    passed: hasMinLength
+  });
+  const hasUppercase = /[A-Z]/.test(props.password);
+  rules.push({
+    text: "Contains uppercase letter (A-Z)",
+    passed: hasUppercase
+  });
+  const hasLowercase = /[a-z]/.test(props.password);
+  rules.push({
+    text: "Contains lowercase letter (a-z)",
+    passed: hasLowercase
+  });
+  const hasNumbers = /\d/.test(props.password);
+  rules.push({
+    text: "Contains number (0-9)",
+    passed: hasNumbers
+  });
+  const hasSpecialChars = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(props.password);
+  rules.push({
+    text: "Contains special character (!@#$%^&*)",
+    passed: hasSpecialChars
+  });
+  return rules;
+});
+</script>
+
+<template>
+  <!-- Password strength indicator -->
+  <div
+    v-if="hasPassword"
+    class="password-strength"
+  >
+    <div class="strength-bar">
+      <div
+        class="strength-fill"
+        :style="{
+  width: `${validationResult?.score || 0}%`,
+  backgroundColor: validationResult?.strength === 'weak' ? '#dc3545' : validationResult?.strength === 'medium' ? '#ffc107' : validationResult?.strength === 'strong' ? '#28a745' : '#6c757d'
+}"
+      />
+    </div>
+    <span
+      class="strength-text"
+      :style="{
+  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?.score || 0 }}%)
+    </span>
+  </div>
+
+  <!-- Validation rules -->
+  <div
+    v-if="showRules && hasPassword"
+    class="validation-rules"
+  >
+    <div class="rules-title">
+      Password Requirements:
+    </div>
+    <ul class="rules-list">
+      <li
+        v-for="rule in validationRules"
+        :key="rule.text"
+        class="rule-item"
+        :class="{ 'rule-passed': rule.passed, 'rule-failed': !rule.passed }"
+      >
+        <span class="rule-icon">
+          {{ rule.passed ? "\u2713" : "\u2717" }}
+        </span>
+        <span class="rule-text">
+          {{ rule.text }}
+        </span>
+      </li>
+    </ul>
+  </div>
+
+  <!-- Validation errors -->
+  <div
+    v-if="hasErrors"
+    class="validation-errors"
+  >
+    <small
+      v-for="error in validationResult?.errors || []"
+      :key="String(error)"
+      class="error-text"
+    >
+      {{ error }}
+    </small>
+  </div>
+
+  <!-- Password improvement hints -->
+  <div
+    v-if="showHints && hasPassword && hasHints"
+    class="password-hints"
+  >
+    <div class="hint-title">
+      How to make your password stronger:
+    </div>
+    <ul class="hint-list">
+      <li
+        v-for="hint in validationResult?.hints || []"
+        :key="'hint-' + hint"
+        class="hint-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/PasswordStrengthIndicator.vue.d.ts

@@ -0,0 +1,12 @@
+import type { PasswordValidationResult } from '../../utils/password-validation.js';
+interface Props {
+    password: string;
+    validationResult: PasswordValidationResult | null;
+    showHints?: boolean;
+    showRules?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    showHints: boolean;
+    showRules: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;