@bettertogether/community-engine-vue 0.1.6 → 0.2.2

package/src/router/index.js

@@ -1,185 +1,71 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
 import Home from '../pages/Home.vue'
 import Me from '../pages/Me.vue'
+import { communityRoutes } from './communityRoutes'
 
-// import store from '../store'
-
-// const isAuthenticated = store.getters['CommunityEngine/Authentication/isAuthenticated']
-// const isAdmin = store.getters['Authentication/isAdmin']
-
-// const ensureAuthenticated = (to, from, next) => {
-//   if (isAuthenticated) {
-//     next()
-//   } else {
-//     next({ name: 'Sign In', query: { redirect_to: to.fullPath } })
-//   }
-// }
-
-// const ensureAdmin = (to, from, next) => {
-//   ensureAuthenticated(to, from, next)
-
-//   if (isAdmin) {
-//     next()
-//   } else {
-//     next({ name: 'Home' })
-//   }
-// }
-
-// const documentTitle = 'Better Together'
-
-const setPageTitleAndMeta = (to, from, next) => {
-  // This goes through the matched routes from last to first,
-  // finding the closest route with a title.
-  // eg. if we have /some/deep/nested/route and /some, /deep, and
-  // /nested have titles, nested's will be chosen.
+const setPageTitleAndMeta = (to) => {
   const nearestWithTitle = to.matched.slice().reverse().find((r) => r.meta && r.meta.title)
-
-  // Find the nearest route element with meta tags.
   const nearestWithMeta = to.matched.slice().reverse().find((r) => r.meta && r.meta.metaTags)
 
-  // If a route with a title was found, set the document (page) title to that value.
-  if (nearestWithTitle) document.title = `${nearestWithTitle.meta.title}`
+  if (nearestWithTitle) document.title = nearestWithTitle.meta.title
 
-  // Remove any stale meta tags from the document using the key attribute we set below.
-  Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map((el) => el.parentNode.removeChild(el))
+  Array.from(document.querySelectorAll('[data-vue-router-controlled]')).forEach((el) => el.parentNode.removeChild(el))
 
-  // Skip rendering meta tags if there are none.
-  if (!nearestWithMeta) return next()
+  if (!nearestWithMeta) return
 
-  // Turn the meta tag definitions into actual elements in the head.
   nearestWithMeta.meta.metaTags.map((tagDef) => {
     const tag = document.createElement('meta')
-
-    Object.keys(tagDef).forEach((key) => {
-      tag.setAttribute(key, tagDef[key])
-    })
-
-    // We use this to track which meta tags we create, so we don't interfere with other ones.
+    Object.keys(tagDef).forEach((key) => tag.setAttribute(key, tagDef[key]))
     tag.setAttribute('data-vue-router-controlled', '')
-
     return tag
-  })
-  // Add the meta tags to the document head.
-    .forEach((tag) => document.head.appendChild(tag))
-
-  return next()
+  }).forEach((tag) => document.head.appendChild(tag))
 }
 
-Vue.use(VueRouter)
-
-const BtRoutes = [
+export const BtRoutes = [
   {
     path: '/',
     name: 'Home',
     component: Home,
-    meta: {
-      title: 'Home',
-      metaTags: [
-        {
-          name: 'description',
-          content: 'The home page of our community.',
-        },
-        {
-          property: 'og:description',
-          content: 'The home page of our community.',
-        },
-      ],
-    },
+    meta: { title: 'Home', metaTags: [{ name: 'description', content: 'The home page of our community.' }, { property: 'og:description', content: 'The home page of our community.' }] },
   },
   {
     path: '/me',
     name: 'Me',
     component: Me,
-    meta: {
-      title: 'Me',
-      metaTags: [
-        {
-          name: 'description',
-          content: 'My home page in our community.',
-        },
-        {
-          property: 'og:description',
-          content: 'My home page in our community.',
-        },
-      ],
-    },
-  },
-  {
-    path: '/users/sign-in',
-    name: 'Sign In',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "contact" */ '../pages/UserSignIn.vue'),
-  },
-  {
-    path: '/users/sign-up',
-    name: 'Sign Up',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "contact" */ '../pages/UserSignUp.vue'),
-  },
-  {
-    path: '/users/password/reset',
-    name: 'Reset Password',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "contact" */ '../pages/UserPasswordReset.vue'),
-    // beforeEnter: ifNotAuthenticated,
+    meta: { requiresAuth: true, title: 'Me', metaTags: [{ name: 'description', content: 'My home page in our community.' }] },
   },
+  { path: '/users/sign-in', name: 'Sign In', component: () => import('../pages/UserSignIn.vue') },
+  { path: '/users/sign-up', name: 'Sign Up', component: () => import('../pages/UserSignUp.vue') },
+  { path: '/users/password/reset', name: 'Reset Password', component: () => import('../pages/UserPasswordReset.vue') },
   {
     path: '/users/password/new',
     name: 'New Password',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "contact" */ '../pages/UserPasswordNew.vue'),
+    component: () => import('../pages/UserPasswordNew.vue'),
     props: (route) => ({ resetPasswordToken: route.query.reset_password_token }),
-    // beforeEnter: ifNotAuthenticated,
-  },
-  {
-    path: '/users/confirmation/resend',
-    name: 'Resend Account Confirmation',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "contact" */ '../pages/UserResendConfirmation.vue'),
-    // beforeEnter: ifNotAuthenticated,
   },
+  { path: '/users/confirmation/resend', name: 'Resend Account Confirmation', component: () => import('../pages/UserResendConfirmation.vue') },
   {
     path: '/users/confirmation',
     name: 'Account Confirmation',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "contact" */ '../pages/UserResendConfirmation.vue'),
+    component: () => import('../pages/UserResendConfirmation.vue'),
     props: (route) => ({ confirmationToken: route.query.confirmation_token }),
-    // beforeEnter: ifNotAuthenticated,
-  },
-  {
-    path: '*',
-    name: 'Error404',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "contact" */ '../pages/Error404.vue'),
   },
+  { path: '/communities', name: 'Communities', component: () => import('../pages/Communities.vue') },
+  { path: '/:pathMatch(.*)*', name: 'Error404', component: () => import('../pages/Error404.vue') },
 ]
 
-const routes = BtRoutes
-
-const BtRouter = new VueRouter({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes,
+const BtRouter = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [...BtRoutes, ...communityRoutes],
 })
 
-// This callback runs before every route change, including on page load.
-BtRouter.beforeEach(setPageTitleAndMeta)
-
-export { BtRoutes }
+BtRouter.beforeEach((to) => {
+  setPageTitleAndMeta(to)
+  const auth = useAuthStore()
+  if (to.meta.requiresAuth && !auth.isAuthenticated) {
+    return { name: 'Sign In', query: { redirect_to: to.fullPath } }
+  }
+})
 
 export default BtRouter

package/src/slot-registry.js

@@ -0,0 +1,15 @@
+const _registry = {}
+
+export function registerSlotInjection({ target, slot, component, props = {} }) {
+  const key = `${target}:${slot}`
+  if (!_registry[key]) _registry[key] = []
+  _registry[key].push({ component, props })
+}
+
+export function getSlotInjections(target, slot) {
+  return _registry[`${target}:${slot}`] ?? []
+}
+
+export function clearSlotRegistry() {
+  Object.keys(_registry).forEach((k) => delete _registry[k])
+}

package/src/stores/auth.js

@@ -0,0 +1,134 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import axios from 'axios'
+import BtApiAuth from '../endpoints/BtApiAuth'
+
+const TOKEN_TTL_MS = 24 * 60 * 60 * 1000  // 24h — JWT access token default lifetime
+
+export const useAuthStore = defineStore('btAuth', () => {
+  const currentUser = ref({})
+  const token = ref('')
+  const status = ref('')
+  const refreshToken = ref(null)
+  const tokenIssuedAt = ref(null)
+
+  const isAuthenticated = computed(() => !!token.value)
+  const authStatus = computed(() => status.value)
+  const authToken = computed(() => token.value)
+  const tokenIsExpired = computed(() =>
+    !!(tokenIssuedAt.value &&
+    Date.now() - new Date(tokenIssuedAt.value).getTime() > TOKEN_TTL_MS)
+  )
+  const canSync = computed(() => !!token.value && !tokenIsExpired.value)
+  // Local DB is always readable regardless of auth state
+  const hasLocalAccess = computed(() => true)
+
+  function _setAxiosAuth(t) {
+    if (t) axios.defaults.headers.common.Authorization = t
+    else delete axios.defaults.headers.common.Authorization
+  }
+
+  async function signIn(params) {
+    status.value = 'loading'
+    try {
+      const { data, headers } = await BtApiAuth.post('sign-in', params)
+      token.value = headers.authorization
+      currentUser.value = data
+      status.value = 'success'
+      tokenIssuedAt.value = new Date().toISOString()
+      if (headers['x-refresh-token']) refreshToken.value = headers['x-refresh-token']
+      else if (data.refresh_token) refreshToken.value = data.refresh_token
+      _setAxiosAuth(token.value)
+      return data
+    } catch (err) {
+      status.value = 'error'
+      currentUser.value = {}
+      token.value = ''
+      _setAxiosAuth(null)
+      throw err
+    }
+  }
+
+  async function signOut() {
+    try {
+      const { data } = await BtApiAuth.delete('sign-out')
+      return data
+    } catch (err) {
+      status.value = 'error'
+      throw err
+    } finally {
+      status.value = ''
+      currentUser.value = {}
+      token.value = ''
+      refreshToken.value = null
+      tokenIssuedAt.value = null
+      _setAxiosAuth(null)
+    }
+  }
+
+  // Receptacle for JWT refresh — CE Rails refresh endpoint pending (Deck #955).
+  // When implemented: POST /bt/api/auth/refresh with refreshToken,
+  // then set token + tokenIssuedAt on success, or dispatch 'auth:needs-reauth' on failure.
+  async function refreshTokenIfNeeded() {
+    if (canSync.value) return
+    if (!refreshToken.value) return
+    // eslint-disable-next-line no-console
+    console.warn('[btAuth] refreshTokenIfNeeded: refresh endpoint not yet implemented')
+  }
+
+  async function signUp(params) {
+    const { data } = await BtApiAuth.post('sign-up', {
+      ...params,
+      confirmation_url: `${window.location.origin}/users/confirmation`,
+    })
+    return data
+  }
+
+  async function resendConfirmation(params) {
+    const { data } = await BtApiAuth.post('confirmation', {
+      ...params,
+      confirmation_url: `${window.location.origin}/users/confirmation`,
+    })
+    return data
+  }
+
+  async function sendConfirmation(params) {
+    const { data } = await BtApiAuth.get('confirmation', { params })
+    return data
+  }
+
+  async function resetPassword(params) {
+    const { data } = await BtApiAuth.post('password', {
+      ...params,
+      new_password_url: `${window.location.origin}/users/password/new`,
+    })
+    return data
+  }
+
+  async function newPassword(params) {
+    const { data } = await BtApiAuth.put('password', params)
+    return data
+  }
+
+  return {
+    currentUser,
+    token,
+    status,
+    refreshToken,
+    tokenIssuedAt,
+    isAuthenticated,
+    authStatus,
+    authToken,
+    tokenIsExpired,
+    canSync,
+    hasLocalAccess,
+    signIn,
+    signOut,
+    signUp,
+    resendConfirmation,
+    sendConfirmation,
+    resetPassword,
+    newPassword,
+    refreshTokenIfNeeded,
+  }
+}, { persist: true })

package/src/stores/communities.js

@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import BtApiV1 from '../endpoints/BtApiV1'
+
+const PLATFORM_COMMUNITY = {
+  id: 0,
+  name: 'Better Together',
+  description: 'A community building platform',
+  customization: {
+    backgroundColor: '#343a40 !important',
+    coverImageUrl: '',
+    coverImagePositionY: 'center',
+    imageUrl: '',
+  },
+}
+
+export const useCommunityStore = defineStore('btCommunities', () => {
+  const communities = ref([])
+  const activeCommunity = ref({ ...PLATFORM_COMMUNITY })
+
+  const customization = computed(() => activeCommunity.value.customization)
+  const coverImageUrl = computed(() => activeCommunity.value.customization.coverImageUrl)
+  const coverImagePositionY = computed(() => activeCommunity.value.customization.coverImagePositionY)
+
+  function setCoverImageUrl(url) {
+    activeCommunity.value.customization.coverImageUrl = url
+  }
+
+  function setCustomizationOptions(options) {
+    activeCommunity.value.customization = {
+      ...PLATFORM_COMMUNITY.customization,
+      ...options,
+    }
+  }
+
+  async function getCommunities(params) {
+    const { data } = await BtApiV1.findAll('communities', { params })
+    communities.value = data
+    return data
+  }
+
+  async function postCommunity(params) {
+    const { data } = await BtApiV1.create('community', params)
+    communities.value.unshift(data)
+    return data
+  }
+
+  return {
+    communities,
+    activeCommunity,
+    customization,
+    coverImageUrl,
+    coverImagePositionY,
+    setCoverImageUrl,
+    setCustomizationOptions,
+    getCommunities,
+    postCommunity,
+  }
+}, { persist: true })

package/src/stores/index.js

@@ -0,0 +1,5 @@
+export { useAuthStore } from './auth'
+export { useCommunityStore } from './communities'
+export { useMenuStore } from './menus'
+export { usePeopleStore } from './people'
+export { useSyncStore } from './sync'

package/src/stores/menus.js

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useMenuStore = defineStore('btMenus', () => {
+  const headerMenuItems = ref([
+    { id: 0, path: '/', label: 'Home', title: 'Home', url: '#', external: false, sortOrder: 0 },
+  ])
+
+  function setHeaderMenuItems(items) {
+    headerMenuItems.value = items
+  }
+
+  return { headerMenuItems, setHeaderMenuItems }
+}, { persist: false })

package/src/stores/people.js

@@ -0,0 +1,48 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import axios from 'axios'
+
+export const usePeopleStore = defineStore('btPeople', () => {
+  const currentPerson = ref({})
+  const me = ref({})
+
+  const hasCurrentPerson = computed(() => Object.keys(currentPerson.value).length > 0)
+  const hasMe = computed(() => Object.keys(me.value).length > 0)
+  const currentPersonChanged = computed(
+    () => JSON.stringify(currentPerson.value) !== JSON.stringify(me.value),
+  )
+
+  async function getMe() {
+    const response = await axios.get(
+      `${import.meta.env.VITE_BETTER_TOGETHER_API_URI}/api/v1/people/me`,
+    )
+    const person = response.status === 200 ? response.data : {}
+    currentPerson.value = { ...person }
+    me.value = { ...person }
+    return response
+  }
+
+  async function postPerson(params) {
+    const { data } = await axios.post(
+      `${import.meta.env.VITE_BETTER_TOGETHER_API_URI}/api/v1/people/me`,
+      params,
+    )
+    currentPerson.value = data
+    return data
+  }
+
+  function clearCurrentPerson() {
+    currentPerson.value = {}
+  }
+
+  return {
+    currentPerson,
+    me,
+    hasCurrentPerson,
+    hasMe,
+    currentPersonChanged,
+    getMe,
+    postPerson,
+    clearCurrentPerson,
+  }
+}, { persist: true })

package/src/stores/sync.js

@@ -0,0 +1,93 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { getDb } from '../db/client'
+
+// All tables that carry _sync_status (excludes _schema_versions)
+const SYNC_TABLES = [
+  'people', 'communities', 'posts', 'events',
+  'conversations', 'messages', 'notifications',
+  'navigation_areas', 'navigation_items',
+  'person_community_memberships', 'uploads',
+]
+
+export const useSyncStore = defineStore('btSync', () => {
+  const online = ref(navigator.onLine)
+  const pendingCount = ref(0)
+  const syncing = ref(false)
+  const electricConnected = ref(false)
+
+  const statusLabel = computed(() => {
+    if (!online.value) return 'offline'
+    if (syncing.value || pendingCount.value > 0) return 'syncing'
+    return 'synced'
+  })
+
+  function setOnline(val) {
+    online.value = val
+  }
+
+  function setPendingCount(n) {
+    pendingCount.value = n
+  }
+
+  function setSyncing(val) {
+    syncing.value = val
+  }
+
+  function setConnected(val) {
+    electricConnected.value = !!val
+  }
+
+  async function markPendingAsNeedsAuth() {
+    const db = await getDb()
+    for (const table of SYNC_TABLES) {
+      try {
+        await db.exec(
+          `UPDATE ${table} SET _sync_status = 'needs-auth' WHERE _sync_status = 'local'`
+        )
+      } catch { /* table may not exist yet */ }
+    }
+  }
+
+  async function drainSyncQueue() {
+    // Placeholder — full sync requires ElectricSQL shapes (pending CE Rails sidecar).
+    // Counts pending items across all tables and updates pendingCount for UI feedback.
+    if (!online.value) return
+    setSyncing(true)
+    const db = await getDb()
+    let total = 0
+    for (const table of SYNC_TABLES) {
+      try {
+        const { rows } = await db.query(
+          `SELECT COUNT(*) AS n FROM ${table} WHERE _sync_status IN ('local', 'needs-auth')`
+        )
+        total += rows[0]?.n ?? 0
+      } catch { /* table may not exist yet */ }
+    }
+    setPendingCount(total)
+    setSyncing(false)
+  }
+
+  function initNetworkListeners() {
+    window.addEventListener('online', async () => {
+      online.value = true
+      await drainSyncQueue()
+    })
+    window.addEventListener('offline', () => { online.value = false })
+  }
+
+  return {
+    online,
+    pendingCount,
+    syncing,
+    electricConnected,
+    statusLabel,
+    setOnline,
+    setPendingCount,
+    setSyncing,
+    setConnected,
+    markPendingAsNeedsAuth,
+    drainSyncQueue,
+    initNetworkListeners,
+  }
+})

package/src/stylesheets/sync-indicators.scss

@@ -0,0 +1,34 @@
+// Sync status colour tokens
+$sync-local:       #f59e0b;  // amber  — local only, not yet synced
+$sync-syncing:     #3b82f6;  // blue   — in flight
+$sync-synced:      #10b981;  // green  — confirmed on server
+$sync-conflict:    #ef4444;  // red    — conflict detected
+$sync-needs-auth:  #f59e0b;  // amber  — needs sign-in to sync (same family as local)
+
+// Sync badge sizes
+$sync-badge-size: 8px;
+$sync-badge-size-lg: 12px;
+
+// App-wide sync bar
+$sync-bar-height: 3px;
+$sync-bar-height-offline: 28px;
+
+// Animation
+@keyframes sync-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes sync-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.5; }
+}
+
+// Mixin for status dot
+@mixin sync-dot($color) {
+  width: $sync-badge-size;
+  height: $sync-badge-size;
+  border-radius: 50%;
+  background-color: $color;
+  display: inline-block;
+}

package/.env.sample

@@ -1 +0,0 @@
-VUE_APP_BETTER_TOGETHER_API_URI=http://localhost:3000

package/.eslintrc.js

@@ -1,51 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-  },
-  extends: [
-    'eslint:recommended',
-    // 'plugin:vue/essential',
-    'airbnb-base',
-    'plugin:vue/recommended',
-  ],
-  globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
-  },
-  parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module',
-    parser: 'babel-eslint',
-  },
-  plugins: [
-    'vue',
-  ],
-  rules: {
-    indent: [
-      'error',
-      2,
-    ],
-    'linebreak-style': [
-      'error',
-      'unix',
-    ],
-    quotes: [
-      'error',
-      'single',
-    ],
-    semi: [
-      'error',
-      'never',
-    ],
-    'no-param-reassign': [
-      'error',
-      {
-        props: true,
-        ignorePropertyModificationsFor: [
-          'currentState',
-        ],
-      },
-    ],
-  },
-}