feat: expose useUsers composable

Author: rrd108

docs/.vitepress/config.ts

@@ -47,6 +47,7 @@ export default defineConfig({
               { text: 'Authorization (RBAC)', link: '/user-guide/authorization' },
               { text: 'Password Reset', link: '/user-guide/password-reset' },
               { text: 'Components', link: '/user-guide/components' },
+              { text: 'Composables', link: '/user-guide/composables' },
               { text: 'Troubleshooting', link: '/user-guide/troubleshooting' }
             ]
           },

docs/user-guide/authentication.md

@@ -156,30 +156,7 @@ const handleLogin = async () => {
 </script>
 ```
 
-### Using the Authentication Composable
-
-The module provides a `useAuthentication` composable for easier authentication management:
-
-```vue
-<script setup>
-const { login, user, isAuthenticated } = useAuthentication()
-
-const handleLogin = async (email, password) => {
-  try {
-    await login(email, password)
-    console.log('Login successful:', user.value)
-    await navigateTo('/dashboard')
-  } catch (error) {
-    console.error('Login failed:', error)
-  }
-}
-
-// Check if user is authenticated
-if (isAuthenticated.value) {
-  console.log('User is logged in:', user.value)
-}
-</script>
-```
+For detailed usage of the `useAuthentication` composable, refer to the [Composables documentation](/user-guide/composables.md#useauthentication).
 
 ## Logout
 
@@ -226,23 +203,7 @@ You can customize the appearance and behavior:
 
 ### Manual Logout
 
-You can implement custom logout logic using the `useAuthentication` composable:
-
-```vue
-<script setup>
-const { logout } = useAuthentication()
-
-const handleLogout = async () => {
-  try {
-    await logout()
-    console.log('Logged out successfully')
-    await navigateTo('/login')
-  } catch (error) {
-    console.error('Logout failed:', error)
-  }
-}
-</script>
-```
+For manual logout using the `useAuthentication` composable, refer to the [Composables documentation](/user-guide/composables.md#useauthentication).
 
 ### Direct API Call
 
@@ -360,103 +321,11 @@ apiShield: {
 
 ## Checking Authentication Status
 
-### In Components
-
-```vue
-<template>
-  <div>
-    <div v-if="isAuthenticated">
-      <p>Welcome, {{ user.name }}!</p>
-      <NUsersLogoutLink />
-    </div>
-    <div v-else>
-      <p>Please log in to continue</p>
-      <NUsersLoginForm @success="handleLoginSuccess" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-const { user, isAuthenticated } = useAuthentication()
-
-const handleLoginSuccess = (userData) => {
-  console.log('User logged in:', userData)
-  // Handle post-login logic
-}
-</script>
-```
-
-### In Pages with Middleware
-
-You can protect pages using the built-in authorization middleware:
-
-```vue
-<!-- pages/dashboard.vue -->
-<template>
-  <div>
-    <h1>Dashboard</h1>
-    <p>Welcome, {{ user.name }}!</p>
-  </div>
-</template>
-
-<script setup>
-// This page will automatically redirect to login if user is not authenticated
-definePageMeta({
-  middleware: 'authorization'
-})
-
-const { user } = useAuthentication()
-</script>
-```
+For checking authentication status using the `useAuthentication` composable, refer to the [Composables documentation](/user-guide/composables.md#useauthentication).
 
 ## Error Handling
 
-### Handling Authentication Errors
-
-```vue
-<script setup>
-const { login } = useAuthentication()
-
-const handleLogin = async (email, password) => {
-  try {
-    await login(email, password)
-    // Success - user is now authenticated
-  } catch (error) {
-    // Handle different types of errors
-    if (error.statusCode === 401) {
-      console.error('Invalid credentials')
-      // Show "Invalid email or password" message
-    } else if (error.statusCode === 400) {
-      console.error('Missing email or password')
-      // Show "Please fill in all fields" message
-    } else {
-      console.error('Login failed:', error.message)
-      // Show generic error message
-    }
-  }
-}
-</script>
-```
-
-### Network Error Handling
-
-```vue
-<script setup>
-const handleLogin = async (email, password) => {
-  try {
-    await login(email, password)
-  } catch (error) {
-    if (error.name === 'FetchError') {
-      console.error('Network error - please check your connection')
-      // Show network error message
-    } else {
-      console.error('Authentication error:', error)
-      // Show authentication error message
-    }
-  }
-}
-</script>
-```
+For error handling with the `useAuthentication` composable, refer to the [Composables documentation](/user-guide/composables.md#useauthentication).
 
 ## Security Best Practices
 

docs/user-guide/authorization.md

@@ -216,166 +216,4 @@ The default role is `user` if not specified.
 
 ## Programmatic Access Control
 
-### usePublicPaths Composable
-
-The module provides a `usePublicPaths` composable that allows you to programmatically determine which paths are accessible to users. This is useful for building dynamic navigation menus, API endpoint lists, or conditional UI elements.
-
-```vue
-<script setup>
-import { usePublicPaths } from 'nuxt-users/composables'
-
-const { getPublicPaths, getAccessiblePaths, isPublicPath, isAccessiblePath } = usePublicPaths()
-</script>
-```
-
-#### Getting Public Paths
-
-Get all paths that don't require authentication (accessible to everyone):
-
-```js
-const publicPaths = getPublicPaths()
-console.log(publicPaths)
-/*
-{
-  all: ['/login', '/reset-password', '/api/nuxt-users/session', '/about'],
-  builtIn: {
-    pages: ['/login', '/reset-password'],
-    api: ['/api/nuxt-users/session', '/api/nuxt-users/password/forgot', '/api/nuxt-users/password/reset']
-  },
-  whitelist: ['/about', '/contact'], // From your nuxt.config.ts
-  customPasswordResetPath: null,
-  apiBasePath: '/api/nuxt-users'
-}
-*/
-```
-
-#### Getting User-Accessible Paths
-
-Get all paths accessible to the current authenticated user (includes public + role-based paths):
-
-```js
-const accessiblePaths = getAccessiblePaths()
-console.log(accessiblePaths)
-/*
-For authenticated user with 'user' role:
-{
-  all: ['/login', '/about', '/profile', '/dashboard', '/api/nuxt-users/me'],
-  public: ['/login', '/reset-password', '/about'],
-  roleBasedPaths: ['/profile', '/dashboard', '/api/nuxt-users/me'],
-  userRole: 'user'
-}
-*/
-```
-
-#### Checking Individual Paths
-
-Check if specific paths are accessible:
-
-```js
-// Check if a path is truly public (no auth required)
-console.log(isPublicPath('/login'))     // true
-console.log(isPublicPath('/profile'))   // false
-console.log(isPublicPath('/about'))     // true (if whitelisted)
-
-// Check if current user can access a path
-console.log(isAccessiblePath('/profile'))           // true if user role allows
-console.log(isAccessiblePath('/admin'))             // depends on user role
-console.log(isAccessiblePath('/api/users', 'POST')) // check specific HTTP method
-```
-
-#### Practical Examples
-
-**Building Dynamic Navigation:**
-
-```vue
-<template>
-  <nav>
-    <NuxtLink 
-      v-for="item in visibleNavItems" 
-      :key="item.path"
-      :to="item.path"
-    >
-      {{ item.label }}
-    </NuxtLink>
-  </nav>
-</template>
-
-<script setup>
-const { isAccessiblePath } = usePublicPaths()
-
-const allNavItems = [
-  { path: '/dashboard', label: 'Dashboard' },
-  { path: '/profile', label: 'Profile' },
-  { path: '/admin', label: 'Admin Panel' },
-  { path: '/about', label: 'About' }
-]
-
-const visibleNavItems = computed(() => 
-  allNavItems.filter(item => isAccessiblePath(item.path))
-)
-</script>
-```
-
-**Conditional API Endpoints:**
-
-```vue
-<script setup>
-const { isAccessiblePath } = usePublicPaths()
-
-const availableActions = computed(() => {
-  const actions = []
-  
-  if (isAccessiblePath('/api/users', 'GET')) {
-    actions.push({ label: 'View Users', endpoint: '/api/users', method: 'GET' })
-  }
-  
-  if (isAccessiblePath('/api/users', 'POST')) {
-    actions.push({ label: 'Create User', endpoint: '/api/users', method: 'POST' })
-  }
-  
-  return actions
-})
-</script>
-```
-
-**Role-Based UI Components:**
-
-```vue
-<template>
-  <div>
-    <!-- Always visible for public paths -->
-    <PublicContent v-if="isPublicPath($route.path)" />
-    
-    <!-- Only visible if user can access admin routes -->
-    <AdminPanel v-if="canAccessAdmin" />
-    
-    <!-- Conditional buttons based on permissions -->
-    <button v-if="canCreateUsers" @click="createUser">
-      Create User
-    </button>
-  </div>
-</template>
-
-<script setup>
-const { isPublicPath, isAccessiblePath } = usePublicPaths()
-
-const canAccessAdmin = computed(() => 
-  isAccessiblePath('/admin')
-)
-
-const canCreateUsers = computed(() => 
-  isAccessiblePath('/api/users', 'POST')
-)
-</script>
-```
-
-### API Reference
-
-| Method | Description | Returns |
-|--------|-------------|----------|
-| `getPublicPaths()` | Get all truly public paths (no auth required) | Object with categorized public paths |
-| `getAccessiblePaths()` | Get all paths accessible to current user | Object with public + role-based paths |
-| `isPublicPath(path)` | Check if a path is public | Boolean |
-| `isAccessiblePath(path, method?)` | Check if current user can access path | Boolean |
-
-**Note:** Static assets (files with dots) and Nuxt internal routes (starting with `/_`) are always considered public and accessible.
+For programmatic access control using the `usePublicPaths` composable, refer to the [Composables documentation](/user-guide/composables.md#usepublicpaths).

docs/user-guide/components.md

@@ -12,6 +12,7 @@ The Nuxt Users module provides several Vue components to help you quickly implem
 | `NUsersList` | Paginated list of users with management actions |
 | `NUsersUserCard` | Individual user display card with edit/delete actions |
 | `NUsersUserForm` | Form for creating and editing user accounts |
+| `NUsersPasswordStrengthIndicator` | Displays real-time password strength feedback (uses `usePasswordValidation` composable) |
 
 ## Authentication Components
 
@@ -226,9 +227,7 @@ const handleUserUpdated = () => {
           <span class="role-badge">{{ user.role }}</span>
         </div>
         <div class="user-actions">
-          <button @click="handleEdit(user)" class="edit-btn">
-            Edit
-          </button>
+          <button @click="handleEdit(user)">Edit</button>
         </div>
       </div>
     </template>