create-nala 3.0.0

package/template/src/router/index.ts

@@ -0,0 +1,147 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { loadingBar } from '@/lib/loading-bar'
+
+// ─── Route Guard (Auth Protection) ────────────────────────────────────────────
+// Uncomment the block below to enable authentication-based route protection.
+// Make sure your auth store has an `isAuthenticated` boolean state.
+//
+// import { useAuthStore } from '@/stores/auth'
+//
+// const PUBLIC_ROUTES: string[] = [
+//   'login',
+//   'register',
+//   'forgot-password',
+//   'reset-password',
+//   'verify-otp',
+//   'confirm-email',
+// ]
+//
+// router.beforeEach((to, _from, next) => {
+//   const authStore = useAuthStore()
+//   const isPublic = PUBLIC_ROUTES.includes(to.name as string)
+//
+//   if (!isPublic && !authStore.isAuthenticated) {
+//     // Not authenticated → redirect to login, preserve intended destination
+//     next({ name: 'login', query: { redirect: to.fullPath } })
+//   } else if (isPublic && authStore.isAuthenticated) {
+//     // Already authenticated → skip auth pages, go straight to dashboard
+//     next({ name: 'dashboard' })
+//   } else {
+//     next()
+//   }
+// })
+// ──────────────────────────────────────────────────────────────────────────────
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      component: () => import('@/layouts/AdminLayout.vue'),
+      children: [
+        {
+          path: '',
+          name: 'dashboard',
+          component: () => import('@/views/dashboard/IndexView.vue'),
+        },
+        {
+          path: '_blank',
+          name: 'starter-blank',
+          component: () => import('@/views/_starter/BlankView.vue'),
+        },
+        {
+          path: 'errors/404',
+          name: 'not-found',
+          component: () => import('@/views/errors/NotFoundView.vue'),
+        },
+        {
+          path: 'errors/500',
+          name: 'server-error',
+          component: () => import('@/views/errors/ServerErrorView.vue'),
+        },
+        {
+          path: 'errors/403',
+          name: 'unauthorized',
+          component: () => import('@/views/errors/UnauthorizedView.vue'),
+        },
+        {
+          path: 'errors/maintenance',
+          name: 'maintenance',
+          component: () => import('@/views/errors/MaintenanceView.vue'),
+        },
+        {
+          path: 'errors/coming-soon',
+          name: 'coming-soon',
+          component: () => import('@/views/errors/ComingSoonView.vue'),
+        },
+      ],
+    },
+    {
+      path: '/auth',
+      component: () => import('@/layouts/AuthLayout.vue'),
+      children: [
+        {
+          path: 'login',
+          name: 'login',
+          component: () => import('@/views/auth/LoginView.vue'),
+        },
+        {
+          path: 'register',
+          name: 'register',
+          component: () => import('@/views/auth/RegisterView.vue'),
+        },
+        {
+          path: 'forgot-password',
+          name: 'forgot-password',
+          component: () => import('@/views/auth/ForgotPasswordView.vue'),
+        },
+        {
+          path: 'reset-password',
+          name: 'reset-password',
+          component: () => import('@/views/auth/ResetPasswordView.vue'),
+        },
+        {
+          path: 'confirm-email',
+          name: 'confirm-email',
+          component: () => import('@/views/auth/ConfirmEmailView.vue'),
+        },
+        {
+          path: 'verify-otp',
+          name: 'verify-otp',
+          component: () => import('@/views/auth/VerifyOtpView.vue'),
+        },
+        {
+          path: 'lock-screen',
+          name: 'lock-screen',
+          component: () => import('@/views/auth/LockScreenView.vue'),
+        },
+      ],
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      component: () => import('@/layouts/AdminLayout.vue'),
+      children: [
+        {
+          path: '',
+          name: 'catch-all-not-found',
+          component: () => import('@/views/errors/NotFoundView.vue'),
+        },
+      ],
+    },
+  ],
+})
+
+// ─── Global Route Transition Loading Indicator ──────────────────────────────
+router.beforeEach(() => {
+  loadingBar.start()
+})
+
+router.afterEach(() => {
+  loadingBar.finish()
+})
+
+router.onError(() => {
+  loadingBar.fail()
+})
+
+export default router

package/template/src/services/auth.service.spec.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { authService, type LoginCredentials } from './auth.service'
+import { apiClient, tokenStorage } from '@/lib/axios'
+
+vi.mock('@/lib/axios', () => ({
+  apiClient: {
+    get: vi.fn(),
+    post: vi.fn(),
+    delete: vi.fn(),
+  },
+  tokenStorage: {
+    getAccessToken: vi.fn(),
+    setAccessToken: vi.fn(),
+    getRefreshToken: vi.fn(),
+    setRefreshToken: vi.fn(),
+    clearTokens: vi.fn(),
+  },
+}))
+
+describe('authService', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('stores tokens and returns data when login succeeds', async () => {
+    const mockApiResponse = {
+      user: {
+        id: 'u1',
+        name: 'Super Admin',
+        email: 'super@nala.dev',
+        avatar: '',
+        role: 'Admin',
+      },
+      accessToken: 'real_access_token_123',
+      refreshToken: 'real_refresh_token_123',
+    }
+
+    vi.mocked(apiClient.post).mockResolvedValueOnce({ data: mockApiResponse })
+
+    const credentials: LoginCredentials = {
+      email: 'super@nala.dev',
+      password: 'Password123!',
+    }
+
+    const result = await authService.login(credentials)
+
+    expect(apiClient.post).toHaveBeenCalledWith('/auth/login', credentials)
+    expect(tokenStorage.setAccessToken).toHaveBeenCalledWith('real_access_token_123')
+    expect(tokenStorage.setRefreshToken).toHaveBeenCalledWith('real_refresh_token_123')
+    expect(result.user.email).toBe('super@nala.dev')
+  })
+
+  it('provides fallback mock auth data when backend API is offline', async () => {
+    vi.mocked(apiClient.post).mockRejectedValueOnce(new Error('Network Error'))
+
+    const credentials: LoginCredentials = {
+      email: 'john@example.com',
+      password: 'password',
+    }
+
+    const result = await authService.login(credentials)
+
+    expect(tokenStorage.setAccessToken).toHaveBeenCalled()
+    expect(result.user.email).toBe('john@example.com')
+    expect(result.user.name).toBe('john')
+    expect(result.accessToken).toContain('mock_jwt_access_')
+  })
+
+  it('calls clearTokens on logout even if backend API fails', async () => {
+    vi.mocked(apiClient.post).mockRejectedValueOnce(new Error('500 Internal Server Error'))
+
+    await authService.logout()
+
+    expect(apiClient.post).toHaveBeenCalledWith('/auth/logout', {}, { skipToast: true })
+    expect(tokenStorage.clearTokens).toHaveBeenCalledTimes(1)
+  })
+
+  it('fetches user profile via getProfile', async () => {
+    const mockProfile = {
+      id: 'usr_1',
+      name: 'Admin User',
+      email: 'admin@example.com',
+      avatar: '/img/avatar.webp',
+      role: 'Administrator',
+    }
+
+    vi.mocked(apiClient.get).mockResolvedValueOnce({ data: mockProfile })
+
+    const result = await authService.getProfile()
+    expect(apiClient.get).toHaveBeenCalledWith('/auth/me')
+    expect(result.name).toBe('Admin User')
+  })
+})

package/template/src/services/auth.service.ts

@@ -0,0 +1,243 @@
+import { apiClient, tokenStorage } from '@/lib/axios'
+import type { ApiResponse } from './types'
+
+export interface LoginCredentials {
+  email: string
+  password?: string
+  rememberMe?: boolean
+}
+
+export interface RegisterPayload {
+  name: string
+  email: string
+  password?: string
+  agreeTerms?: boolean
+}
+
+export interface ResetPasswordPayload {
+  token?: string
+  email?: string
+  newPassword?: string
+}
+
+export interface UserProfile {
+  id: string
+  name: string
+  email: string
+  avatar: string
+  role: string
+  username?: string
+  bio?: string
+  timezone?: string
+  company?: string
+  phone?: string
+  jobTitle?: string
+  location?: string
+  website?: string
+  github?: string
+  twitter?: string
+  linkedin?: string
+  createdAt?: string
+}
+
+export interface UpdateProfilePayload {
+  name: string
+  email: string
+  username?: string
+  avatar?: string
+  bio?: string
+  timezone?: string
+  company?: string
+  phone?: string
+  jobTitle?: string
+  location?: string
+  website?: string
+  github?: string
+  twitter?: string
+  linkedin?: string
+}
+
+export interface AuthResponse {
+  user: UserProfile
+  accessToken: string
+  refreshToken?: string
+  expiresIn?: number
+}
+
+/**
+ * Authentication API Service
+ */
+export const authService = {
+  /**
+   * Login user with credentials
+   */
+  async login(credentials: LoginCredentials): Promise<AuthResponse> {
+    try {
+      const res = await apiClient.post<ApiResponse<AuthResponse> | AuthResponse>(
+        '/auth/login',
+        credentials,
+      )
+      const authData = 'data' in res && res.data ? res.data : (res as AuthResponse)
+
+      if (authData.accessToken) {
+        tokenStorage.setAccessToken(authData.accessToken)
+      }
+      if (authData.refreshToken) {
+        tokenStorage.setRefreshToken(authData.refreshToken)
+      }
+
+      return authData
+    } catch {
+      // Fallback mock login for template preview when backend is not connected
+      const mockAuth: AuthResponse = {
+        user: {
+          id: 'usr_admin_1',
+          name: credentials.email.split('@')[0] || 'Admin User',
+          email: credentials.email,
+          avatar: '/img/avatar.webp',
+          role: 'Administrator',
+          username: 'admin',
+          timezone: 'utc-7',
+          company: 'Nala Corp',
+        },
+        accessToken: `mock_jwt_access_${Date.now()}`,
+        refreshToken: `mock_jwt_refresh_${Date.now()}`,
+      }
+
+      tokenStorage.setAccessToken(mockAuth.accessToken)
+      if (mockAuth.refreshToken) {
+        tokenStorage.setRefreshToken(mockAuth.refreshToken)
+      }
+
+      return mockAuth
+    }
+  },
+
+  /**
+   * Register new account
+   */
+  async register(payload: RegisterPayload): Promise<AuthResponse> {
+    try {
+      const res = await apiClient.post<ApiResponse<AuthResponse> | AuthResponse>(
+        '/auth/register',
+        payload,
+      )
+      return 'data' in res && res.data ? res.data : (res as AuthResponse)
+    } catch {
+      // Fallback mock register response
+      return {
+        user: {
+          id: `usr_${Date.now()}`,
+          name: payload.name,
+          email: payload.email,
+          avatar: '',
+          role: 'User',
+        },
+        accessToken: `mock_jwt_access_${Date.now()}`,
+        refreshToken: `mock_jwt_refresh_${Date.now()}`,
+      }
+    }
+  },
+
+  /**
+   * Request password reset link/email
+   */
+  async forgotPassword(email: string): Promise<{ success: boolean; message: string }> {
+    try {
+      const res = await apiClient.post<{ success: boolean; message: string }>(
+        '/auth/forgot-password',
+        { email },
+      )
+      return res
+    } catch {
+      return { success: true, message: 'Password reset link sent to your email.' }
+    }
+  },
+
+  /**
+   * Reset password with token
+   */
+  async resetPassword(payload: ResetPasswordPayload): Promise<{ success: boolean }> {
+    try {
+      return await apiClient.post<{ success: boolean }>('/auth/reset-password', payload)
+    } catch {
+      return { success: true }
+    }
+  },
+
+  /**
+   * Fetch current authenticated user profile
+   */
+  async getProfile(): Promise<UserProfile> {
+    const res = await apiClient.get<ApiResponse<UserProfile> | UserProfile>('/auth/me')
+    return 'data' in res && res.data ? res.data : (res as UserProfile)
+  },
+
+  /**
+   * Update authenticated user profile
+   */
+  async updateProfile(payload: UpdateProfilePayload): Promise<UserProfile> {
+    try {
+      const res = await apiClient.patch<ApiResponse<UserProfile> | UserProfile>(
+        '/auth/profile',
+        payload,
+      )
+      return 'data' in res && res.data ? res.data : (res as UserProfile)
+    } catch (error) {
+      if (import.meta.env.DEV) {
+        return {
+          id: 'usr_admin_1',
+          role: 'Administrator',
+          avatar: payload.avatar || '/img/avatar.webp',
+          name: payload.name,
+          email: payload.email,
+          username: payload.username || 'admin',
+          bio: payload.bio,
+          timezone: payload.timezone || 'utc-7',
+          company: payload.company || 'Nala Corp',
+          phone: payload.phone,
+          jobTitle: payload.jobTitle,
+          location: payload.location,
+          website: payload.website,
+          github: payload.github,
+          twitter: payload.twitter,
+          linkedin: payload.linkedin,
+          createdAt: '2025-01-15T00:00:00.000Z',
+        }
+      }
+      throw error
+    }
+  },
+
+  /**
+   * Delete account with password verification safeguard
+   */
+  async deleteAccount(password: string): Promise<{ success: boolean; message: string }> {
+    try {
+      const res = await apiClient.post<{ success: boolean; message: string }>('/auth/delete-account', { password })
+      return res
+    } catch (error) {
+      if (import.meta.env.DEV) {
+        tokenStorage.clearTokens()
+        return {
+          success: true,
+          message: 'Account successfully deleted and all sessions purged.',
+        }
+      }
+      throw error
+    }
+  },
+
+  /**
+   * Logout user and clear tokens
+   */
+  async logout(): Promise<void> {
+    try {
+      await apiClient.post('/auth/logout', {}, { skipToast: true })
+    } catch {
+      // Ignore errors during logout
+    } finally {
+      tokenStorage.clearTokens()
+    }
+  },
+}

package/template/src/services/index.ts

@@ -0,0 +1,3 @@
+export * from './types'
+export * from './auth.service'
+export * from './user.service'

package/template/src/services/types.ts

@@ -0,0 +1,28 @@
+/**
+ * Common API Response & Request Types
+ */
+
+export interface ApiResponse<T = unknown> {
+  success: boolean
+  message?: string
+  data: T
+}
+
+export interface PaginationMeta {
+  page: number
+  perPage: number
+  total: number
+  totalPages: number
+}
+
+export interface PaginatedResponse<T = unknown> {
+  data: T[]
+  meta: PaginationMeta
+}
+
+export interface ApiError {
+  statusCode: number
+  message: string
+  error?: string
+  details?: Record<string, string[]>
+}

package/template/src/services/user.service.spec.ts

@@ -0,0 +1,91 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { userService, type CreateUserPayload, type UpdateUserPayload } from './user.service'
+import { apiClient } from '@/lib/axios'
+
+vi.mock('@/lib/axios', () => ({
+  apiClient: {
+    get: vi.fn(),
+    post: vi.fn(),
+    put: vi.fn(),
+    patch: vi.fn(),
+    delete: vi.fn(),
+  },
+}))
+
+describe('userService', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('fetches paginated users with query params', async () => {
+    const mockData = [
+      {
+        id: 'usr-1',
+        name: 'Test User',
+        email: 'test@example.com',
+        role: 'Admin' as const,
+        status: 'Active' as const,
+        twoFactor: true,
+        avatar: '',
+        initials: 'TU',
+        lastActive: 'Just now',
+        createdAt: 'Jan 1, 2026',
+      },
+    ]
+
+    vi.mocked(apiClient.get).mockResolvedValueOnce({ data: mockData })
+
+    const result = await userService.getUsers({ page: 1, perPage: 10, search: 'Test' })
+    expect(apiClient.get).toHaveBeenCalledWith('/users', {
+      params: { page: 1, perPage: 10, search: 'Test' },
+      skipToast: true,
+    })
+    expect(result.length).toBe(1)
+    expect(result[0].name).toBe('Test User')
+  })
+
+  it('uses mock fallback when getUsers API fails', async () => {
+    vi.mocked(apiClient.get).mockRejectedValueOnce(new Error('Network Error'))
+
+    const result = await userService.getUsers({ search: 'Olivia' })
+    expect(result.length).toBeGreaterThan(0)
+    expect(result[0].name).toContain('Olivia')
+  })
+
+  it('creates user with initials generated when avatar is not provided', async () => {
+    const payload: CreateUserPayload = {
+      name: 'Sarah Connor',
+      email: 'sarah@example.com',
+      role: 'Developer',
+      status: 'Active',
+      twoFactor: false,
+    }
+
+    vi.mocked(apiClient.post).mockRejectedValueOnce(new Error('Dev Mode Offline'))
+
+    const created = await userService.createUser(payload)
+    expect(created.name).toBe('Sarah Connor')
+    expect(created.initials).toBe('SC')
+    expect(created.id).toBeDefined()
+  })
+
+  it('updates existing user attributes correctly', async () => {
+    const updatePayload: UpdateUserPayload = {
+      role: 'Admin',
+      status: 'Suspended',
+    }
+
+    vi.mocked(apiClient.patch).mockRejectedValueOnce(new Error('Dev Mode Offline'))
+
+    const updated = await userService.updateUser('usr-1', updatePayload)
+    expect(updated.role).toBe('Admin')
+    expect(updated.status).toBe('Suspended')
+  })
+
+  it('deletes user by id', async () => {
+    vi.mocked(apiClient.delete).mockResolvedValueOnce({ data: { success: true } })
+
+    await expect(userService.deleteUser('usr-1')).resolves.not.toThrow()
+    expect(apiClient.delete).toHaveBeenCalledWith('/users/usr-1')
+  })
+})