@stacksjs/defaults 0.70.207 → 0.70.208

package/functions/auth.ts

@@ -0,0 +1,208 @@
+import type { Ref } from '@stacksjs/stx'
+import type { AuthUser, ErrorResponse, LoginError, LoginResponse, MeResponse, RegisterError, RegisterResponse, UserData } from '../types/dashboard'
+import { useStorage } from '@stacksjs/browser'
+import { ref } from '@stacksjs/stx'
+
+const token = useStorage('token', '')
+const user = useStorage<UserData | null>('user', null, undefined, {
+
+  serializer: {
+    read: (v: string): UserData | null => {
+      try {
+        return v ? (JSON.parse(v) as UserData | null) : null
+      }
+      catch {
+        return null
+      }
+    },
+    write: (v: UserData | null): string => JSON.stringify(v),
+  },
+})
+
+const baseUrl = process.env.VITE_API_URL || `http://localhost:${process.env.PORT_API || '3008'}`
+
+// Create singleton state
+const isAuthenticated = ref(false)
+
+export interface AuthComposable {
+  isAuthenticated: Ref<boolean>
+  user: { value: UserData | null }
+  login: (user: AuthUser) => Promise<LoginResponse | LoginError>
+  register: (user: AuthUser) => Promise<RegisterResponse | RegisterError>
+  fetchAuthUser: () => Promise<UserData | null>
+  checkAuthentication: () => Promise<boolean>
+  logout: () => void
+  getToken: () => string | null
+  token: { value: string | null }
+}
+
+export function useAuth(): AuthComposable {
+  async function fetchAuthUser(): Promise<UserData | null> {
+    try {
+      if (!token.value) {
+        isAuthenticated.value = false
+        user.value = null
+        return null
+      }
+
+      const response = await fetch(`${baseUrl}/me`, {
+        headers: {
+          Authorization: `Bearer ${token.value}`,
+          Accept: 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        isAuthenticated.value = false
+        user.value = null
+        return null
+      }
+
+      const data = await response.json() as MeResponse
+
+      user.value = data
+      isAuthenticated.value = true
+
+      return data
+    }
+    catch (error) {
+      console.error('Error fetching user:', error)
+      isAuthenticated.value = false
+      user.value = null
+      return null
+    }
+  }
+
+  async function checkAuthentication(): Promise<boolean> {
+    try {
+      const userData = await fetchAuthUser()
+      return userData !== null
+    }
+    catch (error) {
+      console.error('Error checking authentication:', error)
+      return false
+    }
+  }
+
+  async function register(user: AuthUser): Promise<RegisterResponse | RegisterError> {
+    const url = `${baseUrl}/register`
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(user),
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json() as RegisterError
+      return errorData
+    }
+
+    const data = await response.json() as RegisterResponse | RegisterError
+
+    if (isRegisterError(data)) {
+      return data
+    }
+
+    if (isRegisterResponse(data)) {
+      token.value = data.token
+      return data
+    }
+
+    return data
+  }
+
+  function isRegisterError(data: RegisterResponse | RegisterError): data is RegisterError {
+    return 'errors' in data
+  }
+
+  function isRegisterResponse(data: RegisterResponse | RegisterError): data is RegisterResponse {
+    return 'token' in data && 'user' in data
+  }
+
+  async function login(user: AuthUser): Promise<LoginResponse | LoginError> {
+    try {
+      const url = `${baseUrl}/login`
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(user),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json() as ErrorResponse
+        throw new Error(errorData.message || `HTTP error! status: ${response.status}`)
+      }
+
+      const data = await response.json() as LoginResponse
+
+      token.value = data.token
+
+      return data
+    }
+    catch (error) {
+      return error as LoginError
+    }
+  }
+
+  async function logout() {
+    try {
+      if (token.value) {
+        await fetch(`${baseUrl}/logout`, {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${token.value}`,
+            Accept: 'application/json',
+          },
+        })
+      }
+    }
+    catch (error) {
+      console.error('Error during logout:', error)
+    }
+    finally {
+      token.value = ''
+      user.value = null
+      isAuthenticated.value = false
+    }
+  }
+
+  return {
+    user,
+    isAuthenticated,
+    token,
+    getToken: () => token.value,
+    register,
+    login,
+    logout,
+    fetchAuthUser,
+    checkAuthentication,
+  }
+}
+
+// Strict auth guard middleware
+// Usage: call in setup() of page/component, or in router beforeEach
+// Pass { guest: true } for guest-only pages
+export function authGuard(options: { guest?: boolean } = {}): void {
+  const guest = options.guest ?? false
+  const { isAuthenticated } = useAuth()
+
+  // Guard against SSR — window is only available in the browser
+  if (typeof window === 'undefined') return
+
+  if (guest) {
+    // Guest-only page: block if authenticated
+    if (isAuthenticated.value) {
+      window.location.replace('/')
+    }
+    return
+  }
+
+  // Auth-only page: block if not authenticated
+  if (!isAuthenticated.value) {
+    window.location.replace('/login')
+  }
+}

package/functions/billing/payments.ts

@@ -0,0 +1,149 @@
+import { confirmCardSetup, confirmPayment, loadCardElement, loadPaymentElement } from '@stacksjs/browser'
+
+export function useBillable() {
+  // Resolved per call, not at module scope: `usePaymentStore` is a browser
+  // auto-import, so calling it while the module is being evaluated throws
+  // "usePaymentStore is not defined" the moment anything imports this file
+  // server-side, which the generated auto-import manifest does.
+  const paymentStore = usePaymentStore()
+
+  function convertUnixTimestampToDate(timestamp: number): string {
+    // Create a Date object from the Unix timestamp
+    const date = new Date(timestamp * 1000) // Multiply by 1000 to convert to milliseconds
+
+    // Define arrays for month names
+    const monthNames = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ]
+
+    // Extract day, month, and year
+    const day = date.getDate()
+    const month = monthNames[date.getMonth()]
+    const year = date.getFullYear()
+
+    // Return the formatted string in "Month Day, Year" format
+    return `${month} ${day}, ${year}`
+  }
+
+  function formatTimestampDate(timestamp: string): string {
+    const date = new Date(timestamp)
+
+    const monthNames = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ]
+
+    // Extract day, month, and year
+    const day = date.getDate()
+    const month = monthNames[date.getMonth()]
+    const year = date.getFullYear()
+
+    // Return the formatted string in "Month Day, Year" format
+    return `${month} ${day}, ${year}`
+  }
+
+  async function loadCardForm(clientSecret: string): Promise<boolean> {
+    const isCreated = await loadCardElement(clientSecret)
+
+    return isCreated
+  }
+
+  async function loadPaymentForm(clientSecret: string): Promise<boolean> {
+    const isCreated = await loadPaymentElement(clientSecret)
+
+    return isCreated
+  }
+
+  async function handleAddPaymentMethod(clientSecret: string, elements: any) {
+    try {
+      const { error, setupIntent } = await confirmCardSetup(clientSecret, elements)
+
+      if (error) {
+        console.error(error.message)
+      }
+      else {
+        await paymentStore.storePaymentMethod(setupIntent.payment_method)
+
+        if (!paymentStore.hasPaymentMethods) {
+          await paymentStore.setUserDefaultPaymentMethod(setupIntent.payment_method)
+        }
+      }
+    }
+    catch (err) {
+      console.error('Error processing payment:', err)
+      // Handle any unexpected errors
+    }
+  }
+
+  async function handlePayment(elements: any) {
+    try {
+      await confirmPayment(elements)
+    }
+    catch (err) {
+      console.error('Error processing payment:', err)
+      // Handle any unexpected errors
+    }
+  }
+
+  function isEmpty(object: any) {
+    return !object // Checks for null or undefined
+      || (typeof object === 'object'
+        && Object.keys(object).length === 0)
+  }
+
+  const updatingPlanState = computed(() => {
+    return !isEmpty(paymentStore.getCurrentPlan) && paymentStore.getPlanState
+  })
+
+  const showCurrentPlan = computed(() => {
+    return !isEmpty(paymentStore.getCurrentPlan) && !paymentStore.getPlanState
+  })
+
+  const showPlans = computed(() => {
+    return isEmpty(paymentStore.getCurrentPlan)
+  })
+
+  function editPlan() {
+    paymentStore.openPlans()
+  }
+
+  function cancelEditPlan() {
+    paymentStore.closePlans()
+  }
+
+  return {
+    loadCardForm,
+    loadPaymentForm,
+    handleAddPaymentMethod,
+    handlePayment,
+    isEmpty,
+    convertUnixTimestampToDate,
+    formatTimestampDate,
+    editPlan,
+    updatingPlanState,
+    showCurrentPlan,
+    cancelEditPlan,
+    showPlans,
+  }
+}

package/functions/blog.ts

@@ -0,0 +1,120 @@
+/**
+ * Markdown blog admin client.
+ *
+ * Talks to `/api/dashboard/blog`, which reads and writes `content/blog/*.md` —
+ * the same files BunPress renders at `/blog`. Saving here changes a file in the
+ * repo, so the dashboard is an editor for git-tracked content, not a database UI.
+ *
+ * Deliberately dependency-free: no `@stacksjs/stx`, no `@stacksjs/browser`, no
+ * signals. The stx client bundler marks those packages external and strips the
+ * import when it inlines this module into a page's setup function, which leaves
+ * the identifiers undefined at runtime. Reactive state therefore lives in the
+ * PAGE's `<script client>` block, where the runtime injects `state`/`derived`,
+ * and this module stays a plain async transport that returns data or throws.
+ *
+ * Server side: storage/framework/core/actions/src/blog-admin.ts
+ */
+
+export interface BlogPost {
+  slug: string
+  title: string
+  description: string
+  date: string
+  author: string
+  authorBio: string
+  poster: string
+  featured: boolean
+  draft: boolean
+  body: string
+  wordCount: number
+  readingTime: number
+  updatedAt: string
+}
+
+export type BlogPostDraft = Omit<BlogPost, 'wordCount' | 'readingTime' | 'updatedAt'>
+
+const api = '/api/dashboard/blog'
+
+/**
+ * Headers for an unsafe (write) request.
+ *
+ * CSRF protection is default-on for POST/PATCH/DELETE and uses a stateless
+ * double-submit cookie: the server seeds a non-HttpOnly `X-CSRF-Token` cookie on
+ * safe responses, and the client has to echo it back in the matching header. The
+ * list request on page load is what seeds the cookie, so by the time an author
+ * can save, the token is there. See defaults/app/Middleware/Csrf.ts.
+ */
+function writeHeaders(): Record<string, string> {
+  const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+  const match = document.cookie.match(/(?:^|;\s*)X-CSRF-Token=([^;]*)/)
+
+  if (match)
+    headers['X-CSRF-Token'] = decodeURIComponent(match[1])
+
+  return headers
+}
+
+/**
+ * Throws with the API's own message when there is one.
+ *
+ * The blog endpoints answer a rejected write with `{ message }` (slug taken,
+ * bad date, ...). Surfacing that beats a bare status code, since it is the text
+ * the author needs in order to fix the post.
+ */
+async function unwrap<T>(response: Response): Promise<T> {
+  if (response.ok)
+    return await response.json() as T
+
+  let message = `Request failed with status ${response.status}`
+
+  try {
+    const body = await response.json() as { message?: string }
+    if (body?.message)
+      message = body.message
+  }
+  catch {
+    // Non-JSON error body; the status-code message stands.
+  }
+
+  throw new Error(message)
+}
+
+export interface BlogListResponse {
+  posts: BlogPost[]
+  publishedCount: number
+  draftCount: number
+  featuredCount: number
+}
+
+/** Every post on disk, drafts included. Bodies are omitted from the list. */
+export async function fetchBlogPosts(): Promise<BlogListResponse> {
+  const body = await unwrap<BlogListResponse>(await fetch(api))
+
+  if (!Array.isArray(body?.posts))
+    throw new TypeError('The blog API returned an unexpected shape.')
+
+  return body
+}
+
+/** One post including its markdown body, which the list omits. */
+export async function fetchBlogPost(slug: string): Promise<BlogPost> {
+  return await unwrap<BlogPost>(await fetch(`${api}/${encodeURIComponent(slug)}`))
+}
+
+/** Creates a post, or updates the one at `originalSlug`. */
+export async function saveBlogPost(post: BlogPostDraft, originalSlug = ''): Promise<BlogPost> {
+  const isUpdate = !!originalSlug
+
+  return await unwrap<BlogPost>(await fetch(isUpdate ? `${api}/${encodeURIComponent(originalSlug)}` : api, {
+    method: isUpdate ? 'PATCH' : 'POST',
+    headers: writeHeaders(),
+    body: JSON.stringify(post),
+  }))
+}
+
+export async function deleteBlogPost(slug: string): Promise<void> {
+  await unwrap<{ message: string }>(await fetch(`${api}/${encodeURIComponent(slug)}`, {
+    method: 'DELETE',
+    headers: writeHeaders(),
+  }))
+}

package/functions/cms/categorizables.ts

@@ -0,0 +1,107 @@
+import type { Categorizables } from '../../types/defaults'
+import { useFetch, useStorage } from '@stacksjs/browser'
+
+// Create a persistent categories array using STX useStorage
+const categorizables = useStorage<Categorizables[]>('categorizables', [])
+
+const baseURL = process.env.VITE_API_URL || `http://localhost:${process.env.PORT_API || '3008'}`
+
+// Basic fetch function to get all categories
+async function fetchCategorizables(): Promise<Categorizables[]> {
+  const { error, data } = await useFetch(`${baseURL}/cms/categories`).get().json()
+
+  const categorizableJson = data.value as Categorizables[]
+  if (error.value) {
+    console.error('Error fetching categorizables:', error.value)
+    return []
+  }
+
+  // Ensure data is an array before assigning
+  if (Array.isArray(categorizableJson)) {
+    categorizables.value = categorizableJson
+    return categorizableJson
+  }
+  else {
+    console.error('Expected array of categorizables but received:', typeof categorizableJson)
+    return []
+  }
+}
+
+async function createCategorizable(categorizable: Partial<Categorizables>) {
+  const { error, data } = await useFetch(`${baseURL}/cms/categories`)
+    .post(JSON.stringify({
+      ...categorizable,
+      name: categorizable.name,
+      description: categorizable.description,
+      is_active: categorizable.is_active,
+      categorizable_type: categorizable.categorizable_type,
+    }))
+    .json()
+
+  if (error.value) {
+    console.error('Error creating categorizable:', error.value)
+    return null
+  }
+
+  const newCategorizable = data.value as Categorizables
+  if (newCategorizable) {
+    categorizables.value.push(newCategorizable)
+    return newCategorizable
+  }
+  return null
+}
+
+async function updateCategorizable(id: number, categorizable: Partial<Categorizables>) {
+  const { error, data } = await useFetch(`${baseURL}/cms/categories/${id}`)
+    .patch(JSON.stringify({
+      ...categorizable,
+      name: categorizable.name,
+      description: categorizable.description,
+      is_active: categorizable.is_active,
+    }))
+    .json()
+
+  if (error.value) {
+    console.error('Error updating categorizable:', error.value)
+    return null
+  }
+
+  const updatedCategorizable = data.value as Categorizables
+  if (updatedCategorizable) {
+    const index = categorizables.value.findIndex(c => c.id === id)
+    if (index !== -1) {
+      categorizables.value[index] = updatedCategorizable
+    }
+    return updatedCategorizable
+  }
+  return null
+}
+
+async function deleteCategorizable(id: number) {
+  const { error } = await useFetch(`${baseURL}/cms/categories/${id}`)
+    .delete()
+    .json()
+
+  if (error.value) {
+    console.error('Error deleting categorizable:', error.value)
+    return false
+  }
+
+  const index = categorizables.value.findIndex(c => c.id === id)
+  if (index !== -1) {
+    categorizables.value.splice(index, 1)
+  }
+
+  return true
+}
+
+// Export the composable
+export function useCategorizables() {
+  return {
+    categorizables,
+    fetchCategorizables,
+    createCategorizable,
+    updateCategorizable,
+    deleteCategorizable,
+  }
+}

package/functions/cms/pages.ts

@@ -0,0 +1,108 @@
+import type { Pages } from '../../types/defaults'
+import { useFetch, useStorage } from '@stacksjs/browser'
+
+// Create a persistent pages array using STX useStorage
+const pages = useStorage<Pages[]>('pages', [])
+
+const baseURL = process.env.VITE_API_URL || `http://localhost:${process.env.PORT_API || '3008'}`
+
+// Basic fetch function to get all pages
+async function fetchPages() {
+  const { error, data } = await useFetch(`${baseURL}/cms/pages`).get().json()
+
+  const pagesJson = data.value as Pages[]
+  if (error.value) {
+    console.error('Error fetching pages:', error.value)
+    return []
+  }
+
+  // Ensure data is an array before assigning
+  if (Array.isArray(data.value)) {
+    pages.value = pagesJson
+    return data.value
+  }
+  else {
+    console.error('Expected array of pages but received:', typeof data.value)
+    return []
+  }
+}
+
+async function createPage(page: Partial<Pages>) {
+  const { error, data } = await useFetch(`${baseURL}/cms/pages`)
+    .post(JSON.stringify({
+      ...page,
+      title: page.title,
+      template: page.template,
+      views: page.views || 0,
+      conversions: page.conversions || 0,
+    }))
+    .json()
+
+  if (error.value) {
+    console.error('Error creating page:', error.value)
+    return null
+  }
+
+  const newPage = data.value as Pages
+  if (newPage) {
+    pages.value.push(newPage)
+    return newPage
+  }
+  return null
+}
+
+async function updatePage(id: number, page: Partial<Pages>) {
+  const { error, data } = await useFetch(`${baseURL}/cms/pages/${id}`)
+    .patch(JSON.stringify({
+      ...page,
+      title: page.title,
+      template: page.template,
+      views: page.views,
+      conversions: page.conversions,
+    }))
+    .json()
+
+  if (error.value) {
+    console.error('Error updating page:', error.value)
+    return null
+  }
+
+  const updatedPage = data.value as Pages
+  if (updatedPage) {
+    const index = pages.value.findIndex(p => p.id === id)
+    if (index !== -1) {
+      pages.value[index] = updatedPage
+    }
+    return updatedPage
+  }
+  return null
+}
+
+async function deletePage(id: number) {
+  const { error } = await useFetch(`${baseURL}/cms/pages/${id}`)
+    .delete()
+    .json()
+
+  if (error.value) {
+    console.error('Error deleting page:', error.value)
+    return false
+  }
+
+  const index = pages.value.findIndex(p => p.id === id)
+  if (index !== -1) {
+    pages.value.splice(index, 1)
+  }
+
+  return true
+}
+
+// Export the composable
+export function usePages() {
+  return {
+    pages,
+    fetchPages,
+    createPage,
+    updatePage,
+    deletePage,
+  }
+}