nuxt-users 1.4.0 → 1.6.0

package/CHANGELOG.md

@@ -1,6 +1,69 @@
 # Changelog
 
 
+## v1.6.0
+
+[compare changes](https://github.com/rrd108/nuxt-users/compare/v1.5.0...v1.6.0)
+
+### 🚀 Enhancements
+
+- Add profile page closes #58 ([#58](https://github.com/rrd108/nuxt-users/issues/58))
+
+### 🩹 Fixes
+
+- Enhances user authentication and data handling ([d15c77f](https://github.com/rrd108/nuxt-users/commit/d15c77f))
+
+### 💅 Refactors
+
+- Module options and defaults ([00aa094](https://github.com/rrd108/nuxt-users/commit/00aa094))
+- Move file to one level up ([e9111c0](https://github.com/rrd108/nuxt-users/commit/e9111c0))
+
+### 🏡 Chore
+
+- **release:** V1.5.0 ([c639fcf](https://github.com/rrd108/nuxt-users/commit/c639fcf))
+
+### ✅ 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.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)

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.4.0",
+  "version": "1.6.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({
@@ -55,6 +64,20 @@ const module = defineNuxtModule({
         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({
       src: resolver.resolve("./runtime/plugin"),
       mode: "server"
@@ -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/update-password",
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/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.d.ts

@@ -1,4 +1,4 @@
-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: {
@@ -24,13 +24,13 @@ type __VLS_Slots = {} & {
 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;
 }>, {

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;

package/dist/runtime/components/ProfileForm.vue

@@ -0,0 +1,240 @@
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import { usePasswordValidation } from "../composables/usePasswordValidation";
+import { useRuntimeConfig } from "#imports";
+import PasswordStrengthIndicator from "./PasswordStrengthIndicator.vue";
+const props = defineProps({
+  apiEndpoint: { type: String, required: false, default: "/api/profile" },
+  updatePasswordEndpoint: { type: String, required: false, default: "/api/update-password" }
+});
+const emit = defineEmits(["success", "error", "password-error", "password-updated"]);
+const isLoading = ref(false);
+const isPasswordLoading = ref(false);
+const error = ref("");
+const passwordError = ref("");
+const passwordSuccess = ref("");
+const user = ref(null);
+const passwordForm = ref({
+  currentPassword: "",
+  newPassword: "",
+  newPasswordConfirmation: ""
+});
+const { public: { nuxtUsers } } = useRuntimeConfig();
+const moduleOptions = nuxtUsers;
+const passwordValidation = usePasswordValidation(moduleOptions);
+watch(() => passwordForm.value.newPassword, (newPassword) => {
+  if (newPassword) {
+    passwordValidation.validate(newPassword);
+  } else {
+    passwordValidation.clearValidation();
+  }
+});
+const loadProfile = async () => {
+  isLoading.value = true;
+  error.value = "";
+  try {
+    const response = await $fetch(props.apiEndpoint, {
+      method: "GET"
+    });
+    user.value = response.user;
+    emit("success", response.user);
+  } 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 load profile";
+    error.value = errorMessage;
+    emit("error", errorMessage);
+  } finally {
+    isLoading.value = false;
+  }
+};
+const updatePassword = async () => {
+  isPasswordLoading.value = true;
+  passwordError.value = "";
+  passwordSuccess.value = "";
+  try {
+    await $fetch(props.updatePasswordEndpoint, {
+      method: "POST",
+      body: passwordForm.value
+    });
+    passwordSuccess.value = "Password updated successfully";
+    emit("password-updated");
+    passwordForm.value = {
+      currentPassword: "",
+      newPassword: "",
+      newPasswordConfirmation: ""
+    };
+  } 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 update password";
+    passwordError.value = errorMessage;
+    emit("password-error", errorMessage);
+  } finally {
+    isPasswordLoading.value = false;
+  }
+};
+const formatDate = (dateString) => {
+  return new Date(dateString).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+};
+onMounted(() => {
+  loadProfile();
+});
+</script>
+
+<template>
+  <div class="profile-form">
+    <!-- Profile Information Section -->
+    <div class="profile-section">
+      <h2 class="section-title">
+        Profile Information
+      </h2>
+
+      <div
+        v-if="isLoading"
+        class="loading"
+      >
+        Loading profile...
+      </div>
+
+      <div
+        v-else-if="error"
+        class="error-message"
+      >
+        {{ error }}
+      </div>
+
+      <div
+        v-else-if="user"
+        class="profile-info"
+      >
+        <div class="info-row">
+          <label class="info-label">Name:</label>
+          <span class="info-value">{{ user.name }}</span>
+        </div>
+
+        <div class="info-row">
+          <label class="info-label">Email:</label>
+          <span class="info-value">{{ user.email }}</span>
+        </div>
+
+        <div class="info-row">
+          <label class="info-label">Role:</label>
+          <span class="info-value">{{ user.role }}</span>
+        </div>
+
+        <div class="info-row">
+          <label class="info-label">Member since:</label>
+          <span class="info-value">{{ formatDate(user.created_at) }}</span>
+        </div>
+
+        <div class="info-row">
+          <label class="info-label">Last updated:</label>
+          <span class="info-value">{{ formatDate(user.updated_at) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Change Password Section -->
+    <div class="password-section">
+      <h2 class="section-title">
+        Change Password
+      </h2>
+
+      <form
+        class="password-form"
+        @submit.prevent="updatePassword"
+      >
+        <div class="form-group">
+          <label
+            for="currentPassword"
+            class="form-label"
+          >Current Password</label>
+          <input
+            id="currentPassword"
+            v-model="passwordForm.currentPassword"
+            type="password"
+            class="form-input"
+            required
+            :disabled="isPasswordLoading"
+          >
+        </div>
+
+        <div class="form-group">
+          <label
+            for="newPassword"
+            class="form-label"
+          >New Password</label>
+          <input
+            id="newPassword"
+            v-model="passwordForm.newPassword"
+            type="password"
+            class="form-input"
+            required
+            :minlength="moduleOptions.passwordValidation?.minLength || 8"
+            :class="{ error: passwordValidation.errors.value.length > 0 && passwordForm.newPassword }"
+            :disabled="isPasswordLoading"
+          >
+
+          <PasswordStrengthIndicator
+            :password="passwordForm.newPassword"
+            :validation-result="passwordValidation.validationResult.value"
+          />
+
+          <!-- Password requirements -->
+          <small class="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>
+            <span v-if="moduleOptions.passwordValidation?.requireNumbers">, numbers</span>
+            <span v-if="moduleOptions.passwordValidation?.requireSpecialChars">, and special characters</span>.
+          </small>
+        </div>
+
+        <div class="form-group">
+          <label
+            for="newPasswordConfirmation"
+            class="form-label"
+          >Confirm New Password</label>
+          <input
+            id="newPasswordConfirmation"
+            v-model="passwordForm.newPasswordConfirmation"
+            type="password"
+            class="form-input"
+            required
+            :disabled="isPasswordLoading"
+          >
+        </div>
+
+        <div
+          v-if="passwordError"
+          class="error-message"
+        >
+          {{ passwordError }}
+        </div>
+
+        <div
+          v-if="passwordSuccess"
+          class="success-message"
+        >
+          {{ passwordSuccess }}
+        </div>
+
+        <button
+          type="submit"
+          class="btn btn-primary"
+          :disabled="isPasswordLoading"
+        >
+          <span v-if="isPasswordLoading">Updating...</span>
+          <span v-else>Update Password</span>
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.profile-form{margin:0 auto;max-width:600px;padding:20px}.password-section,.profile-section{background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:24px;padding:24px}.section-title{border-bottom:2px solid #e2e8f0;color:#1a202c;font-size:1.5rem;font-weight:600;margin:0 0 20px;padding-bottom:12px}.loading{color:#718096;font-style:italic;text-align:center}.profile-info{display:flex;flex-direction:column;gap:16px}.info-row{align-items:center;border-bottom:1px solid #f7fafc;display:flex;padding:12px 0}.info-row:last-child{border-bottom:none}.info-label{color:#4a5568;font-weight:600;margin-right:16px;min-width:120px}.info-value{color:#2d3748;flex:1}.password-form{gap:20px}.form-group,.password-form{display:flex;flex-direction:column}.form-group{gap:8px}.form-label{color:#4a5568;font-size:.875rem;font-weight:500}.form-input{border:1px solid #e2e8f0;border-radius:6px;font-size:1rem;padding:12px 16px;transition:border-color .2s,box-shadow .2s}.form-input:focus{border-color:#4299e1;box-shadow:0 0 0 3px rgba(66,153,225,.1);outline:none}.form-input:disabled{background-color:#f7fafc;cursor:not-allowed}.form-help{color:#718096;font-size:.75rem;margin-top:4px}.btn{align-self:flex-start;border:none;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:500;padding:12px 24px;transition:background-color .2s,transform .1s}.btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.btn-primary{background-color:#4299e1;color:#fff}.btn-primary:hover:not(:disabled){background-color:#3182ce;transform:translateY(-1px)}.error-message{background-color:#fed7d7;border:1px solid #feb2b2;border-radius:6px;color:#e53e3e;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/ProfileForm.vue.d.ts

@@ -0,0 +1,20 @@
+import type { UserWithoutPassword } from '../../types.js';
+interface ProfileFormProps {
+    apiEndpoint?: string;
+    updatePasswordEndpoint?: string;
+}
+declare const _default: import("vue").DefineComponent<ProfileFormProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    error: (error: string) => any;
+    success: (user: UserWithoutPassword) => any;
+    "password-error": (error: string) => any;
+    "password-updated": () => any;
+}, string, import("vue").PublicProps, Readonly<ProfileFormProps> & Readonly<{
+    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>;
+export default _default;