@bemaestro/saas-ui 0.0.2

package/src/SaasShell.vue

@@ -0,0 +1,741 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import {
+  type AuthLoginResult,
+  type MaestroClient,
+  type RuntimeSurface,
+  type RuntimeView,
+} from '@bemaestro/sdk/runtime'
+import { ViewRenderer } from '@bemaestro/views'
+import {
+  type AuthScreen,
+  parseAuthRoute,
+  pushAuthRoute,
+  readBrowserAuthRoute,
+} from './auth/auth-route.js'
+import AuthCard from './auth/AuthCard.vue'
+import SignInForm from './auth/SignInForm.vue'
+import SignUpForm from './auth/SignUpForm.vue'
+import ForgotPasswordForm from './auth/ForgotPasswordForm.vue'
+import ResetPasswordForm from './auth/ResetPasswordForm.vue'
+import VerifyEmailPanel from './auth/VerifyEmailPanel.vue'
+import AcceptInvitationPanel from './auth/AcceptInvitationPanel.vue'
+import SelectOrgPanel from './auth/SelectOrgPanel.vue'
+import CreateOrgPanel from './auth/CreateOrgPanel.vue'
+import {
+  clearSession,
+  createAuthenticatedClient,
+  persistSession,
+  readPersistedSession,
+  sessionFromLogin,
+  type SaasSession,
+} from './session.js'
+
+export type SaasAccountSection =
+  | 'profile'
+  | 'members'
+  | 'billing'
+  | 'plans'
+  | 'activity'
+  | 'notifications'
+  | 'messaging'
+
+type SessionGate = 'create-org' | 'select-org' | null
+
+const props = withDefaults(
+  defineProps<{
+    config: { baseUrl: string; app: string; appName?: string }
+    /** Prefer web/pwa surfaces (product); never admin_runtime. */
+    mode?: 'client' | 'web'
+  }>(),
+  { mode: 'client' },
+)
+
+const title = computed(() => props.config.appName ?? props.config.app)
+
+const initialRoute = readBrowserAuthRoute()
+const authScreen = ref<AuthScreen>(initialRoute.screen)
+const authToken = ref<string | null>(initialRoute.token)
+const authRedirect = ref<string | null>(initialRoute.redirect)
+const sessionGate = ref<SessionGate>(null)
+const bootError = ref<string | null>(null)
+const loading = ref(false)
+
+const client = shallowRef<MaestroClient | null>(null)
+const session = ref<SaasSession | null>(null)
+const surfaces = ref<RuntimeSurface[]>([])
+const activeSurfaceKey = ref<string | null>(null)
+const activeViewKey = ref<string | null>(null)
+const accountSection = ref<SaasAccountSection | null>(null)
+
+const activeSurface = computed(
+  () => surfaces.value.find((s) => s.key === activeSurfaceKey.value) ?? null,
+)
+const activeView = computed<RuntimeView | null>(
+  () => activeSurface.value?.views.find((v) => v.key === activeViewKey.value) ?? null,
+)
+
+const canManageMembers = computed(() =>
+  ['owner', 'admin'].includes(session.value?.role ?? ''),
+)
+const canManageBilling = computed(() =>
+  ['owner', 'admin'].includes(session.value?.role ?? ''),
+)
+
+const isTokenAuthScreen = computed(() =>
+  ['reset-password', 'verify-email', 'invitation'].includes(authScreen.value),
+)
+
+/** App chrome only when org context is ready and we are not on a token deep-link. */
+const showAppShell = computed(
+  () =>
+    Boolean(client.value && session.value?.orgId && !sessionGate.value) &&
+    !isTokenAuthScreen.value,
+)
+
+function applyRouteFromLocation() {
+  const route = readBrowserAuthRoute()
+  authScreen.value = route.screen
+  authToken.value = route.token
+  authRedirect.value = route.redirect
+}
+
+function navigateAuth(screen: AuthScreen, opts?: { token?: string | null; redirect?: string | null }) {
+  const token = opts?.token !== undefined ? opts.token : null
+  const redirect = opts?.redirect !== undefined ? opts.redirect : authRedirect.value
+  authScreen.value = screen
+  authToken.value = token
+  authRedirect.value = redirect
+  pushAuthRoute(screen, { token, redirect })
+}
+
+function preferredSurface(list: RuntimeSurface[]): RuntimeSurface | undefined {
+  return list.find((s) => s.delivery === 'web' || s.delivery === 'pwa') ?? list[0]
+}
+
+function selectRuntime(list: RuntimeSurface[]) {
+  surfaces.value = list
+  const surface = preferredSurface(list)
+  activeSurfaceKey.value = surface?.key ?? null
+  activeViewKey.value = surface?.views[0]?.key ?? null
+  accountSection.value = null
+}
+
+async function loadRuntime(active: MaestroClient) {
+  const runtime = await active.surfaces.runtime()
+  selectRuntime(runtime.data.surfaces)
+}
+
+function attachClient(tokens: { accessToken: string; refreshToken: string }, next: SaasSession) {
+  session.value = next
+  persistSession(tokens, next)
+  client.value = createAuthenticatedClient({
+    baseUrl: props.config.baseUrl,
+    app: props.config.app,
+    accessToken: tokens.accessToken,
+    refreshToken: tokens.refreshToken,
+    orgId: next.orgId,
+    onTokens: (fresh) => {
+      if (!session.value) return
+      persistSession(fresh, session.value)
+    },
+  })
+}
+
+function gateForSession(next: SaasSession, opts?: { forceSelectOrg?: boolean }): SessionGate {
+  if (next.orgs.length === 0) return 'create-org'
+  if (opts?.forceSelectOrg && next.orgs.length > 1) return 'select-org'
+  if (!next.orgId) {
+    return next.orgs.length > 1 ? 'select-org' : 'create-org'
+  }
+  return null
+}
+
+async function enterAuthenticated(
+  tokens: { accessToken: string; refreshToken: string },
+  next: SaasSession,
+  opts?: { forceSelectOrg?: boolean },
+) {
+  attachClient(tokens, next)
+  const gate = gateForSession(next, opts)
+  sessionGate.value = gate
+  if (gate) return
+
+  if (authRedirect.value) {
+    const redirectPath = authRedirect.value
+    authRedirect.value = null
+    const route = parseAuthRoute(redirectPath, '')
+    if (route.screen === 'invitation' && route.token) {
+      navigateAuth('invitation', { token: route.token })
+      return
+    }
+  }
+
+  if (client.value) await loadRuntime(client.value)
+  navigateAuth('sign-in')
+}
+
+async function onSignedIn(result: AuthLoginResult) {
+  bootError.value = null
+  loading.value = true
+  try {
+    const next = sessionFromLogin(result)
+    await enterAuthenticated(
+      { accessToken: result.accessToken, refreshToken: result.refreshToken },
+      next,
+      { forceSelectOrg: next.orgs.length > 1 },
+    )
+  } catch (e) {
+    bootError.value = e instanceof Error ? e.message : 'Sign-in failed'
+    clearSession()
+    client.value = null
+    session.value = null
+    sessionGate.value = null
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onOrgSelected(result: {
+  accessToken: string
+  refreshToken: string
+  orgId: string
+  role: string
+}) {
+  if (!session.value) return
+  loading.value = true
+  try {
+    const next: SaasSession = {
+      ...session.value,
+      orgId: result.orgId,
+      role: result.role,
+    }
+    await enterAuthenticated(
+      { accessToken: result.accessToken, refreshToken: result.refreshToken },
+      next,
+    )
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onOrgCreated(result: {
+  accessToken?: string
+  refreshToken?: string
+  orgId: string
+  orgName: string
+}) {
+  if (!session.value) return
+  loading.value = true
+  try {
+    const persisted = readPersistedSession()
+    const accessToken = result.accessToken ?? persisted.accessToken
+    const refreshToken = result.refreshToken ?? persisted.refreshToken
+    if (!accessToken || !refreshToken) {
+      throw new Error('Missing session tokens after org creation')
+    }
+    const next: SaasSession = {
+      ...session.value,
+      orgId: result.orgId,
+      role: 'owner',
+      orgs: [
+        ...session.value.orgs.filter((o) => o.orgId !== result.orgId),
+        { orgId: result.orgId, orgName: result.orgName, role: 'owner' },
+      ],
+    }
+    await enterAuthenticated({ accessToken, refreshToken }, next)
+  } catch (e) {
+    bootError.value = e instanceof Error ? e.message : 'Could not finish setup'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onInvitationAccepted(orgId: string) {
+  if (!client.value || !session.value) return
+  loading.value = true
+  try {
+    const result = await client.value.auth.switchOrg(orgId)
+    const membership = result.orgs.find((o) => o.orgId === orgId)
+    const mapped = sessionFromLogin(result)
+    await enterAuthenticated(
+      { accessToken: result.accessToken, refreshToken: result.refreshToken },
+      {
+        ...mapped,
+        orgId,
+        role: membership?.role ?? mapped.role,
+      },
+    )
+  } catch (e) {
+    bootError.value = e instanceof Error ? e.message : 'Could not open organization'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function signOut() {
+  const refresh = readPersistedSession().refreshToken
+  try {
+    if (refresh && client.value) await client.value.auth.logout(refresh)
+  } catch {
+    // best-effort
+  }
+  clearSession()
+  client.value = null
+  session.value = null
+  surfaces.value = []
+  activeSurfaceKey.value = null
+  activeViewKey.value = null
+  accountSection.value = null
+  sessionGate.value = null
+  navigateAuth('sign-in')
+}
+
+function openView(surfaceKey: string, viewKey: string) {
+  accountSection.value = null
+  activeSurfaceKey.value = surfaceKey
+  activeViewKey.value = viewKey
+}
+
+function openAccount(section: SaasAccountSection) {
+  accountSection.value = section
+}
+
+function onPopState() {
+  applyRouteFromLocation()
+}
+
+onMounted(async () => {
+  applyRouteFromLocation()
+  window.addEventListener('popstate', onPopState)
+
+  const persisted = readPersistedSession()
+  if (!persisted.session || !persisted.accessToken || !persisted.refreshToken) return
+
+  // Deep-link token screens take precedence over restoring into the app shell.
+  if (isTokenAuthScreen.value && authScreen.value !== 'invitation') return
+
+  loading.value = true
+  try {
+    const next = persisted.session
+    attachClient(
+      { accessToken: persisted.accessToken, refreshToken: persisted.refreshToken },
+      next,
+    )
+    if (authScreen.value === 'invitation' && authToken.value) {
+      sessionGate.value = null
+      return
+    }
+    const gate = gateForSession(next)
+    sessionGate.value = gate
+    if (!gate && client.value) {
+      await loadRuntime(client.value)
+    }
+  } catch (e) {
+    clearSession()
+    client.value = null
+    session.value = null
+    sessionGate.value = null
+    bootError.value = e instanceof Error ? e.message : 'Session expired'
+  } finally {
+    loading.value = false
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('popstate', onPopState)
+})
+
+// Members / billing data
+const members = ref<
+  Array<{ userId: string; email: string; name: string; role: string; status: string }>
+>([])
+const plans = ref<Array<Record<string, unknown>>>([])
+const usage = ref<Record<string, unknown> | null>(null)
+const activity = ref<Array<Record<string, unknown>>>([])
+const notifications = ref<
+  Array<{ id: string; title: string; body: string; readAt: string | null; createdAt: string }>
+>([])
+const panelError = ref<string | null>(null)
+const panelLoading = ref(false)
+
+async function loadAccountPanel() {
+  if (!client.value || !session.value?.orgId || !accountSection.value) return
+  panelError.value = null
+  panelLoading.value = true
+  const orgId = session.value.orgId
+  try {
+    if (accountSection.value === 'members') {
+      members.value = await client.value.orgs.listMembers(orgId)
+    } else if (accountSection.value === 'billing' || accountSection.value === 'plans') {
+      plans.value = await client.value.billing.listPlans()
+    } else if (accountSection.value === 'activity') {
+      const events = await client.value.events.list({ limit: 50 })
+      activity.value = events.data as unknown as Array<Record<string, unknown>>
+      usage.value = await client.value.billing.usage(orgId)
+    } else if (accountSection.value === 'notifications') {
+      const list = await client.value.notifications.list({ limit: 50 })
+      notifications.value = list.data
+    }
+  } catch (e) {
+    panelError.value = e instanceof Error ? e.message : 'Failed to load'
+  } finally {
+    panelLoading.value = false
+  }
+}
+
+watch(accountSection, () => {
+  void loadAccountPanel()
+})
+
+async function openPortal() {
+  if (!client.value || !session.value?.orgId) return
+  const { url } = await client.value.billing.portal(session.value.orgId)
+  window.location.href = url
+}
+
+async function startSubscribe(planKey: string) {
+  if (!client.value || !session.value?.orgId) return
+  const result = await client.value.billing.subscribe(session.value.orgId, planKey)
+  const checkoutUrl =
+    typeof result.checkoutUrl === 'string' ? result.checkoutUrl : null
+  if (checkoutUrl) window.location.href = checkoutUrl
+}
+
+async function markNotificationRead(id: string) {
+  if (!client.value) return
+  await client.value.notifications.markRead(id)
+  await loadAccountPanel()
+}
+
+const inviteEmail = ref('')
+const inviteRole = ref('member')
+const inviteMessage = ref<string | null>(null)
+
+async function sendInvite() {
+  if (!client.value || !session.value?.orgId || !inviteEmail.value) return
+  inviteMessage.value = null
+  try {
+    await client.value.orgs.inviteMember(session.value.orgId, {
+      email: inviteEmail.value,
+      role: inviteRole.value,
+    })
+    inviteMessage.value = `Invite sent to ${inviteEmail.value}`
+    inviteEmail.value = ''
+    await loadAccountPanel()
+  } catch (e) {
+    inviteMessage.value = e instanceof Error ? e.message : 'Invite failed'
+  }
+}
+
+const authCardTitle = computed(() => {
+  switch (authScreen.value) {
+    case 'sign-up':
+      return title.value
+    case 'forgot-password':
+      return 'Forgot password'
+    case 'reset-password':
+      return 'Reset password'
+    case 'verify-email':
+      return 'Verify email'
+    case 'invitation':
+      return "You've been invited"
+    default:
+      return title.value
+  }
+})
+
+const authCardSubtitle = computed(() => {
+  switch (authScreen.value) {
+    case 'sign-in':
+      return 'Sign in to your workspace'
+    case 'sign-up':
+      return 'Create your account'
+    case 'forgot-password':
+      return "Enter your email and we'll send a reset link if an account exists."
+    case 'reset-password':
+      return 'Choose a new password for your account.'
+    case 'verify-email':
+      return undefined
+    case 'invitation':
+      return undefined
+    default:
+      return undefined
+  }
+})
+</script>
+
+<template>
+  <!-- Post-login gates (create / select org) -->
+  <AuthCard
+    v-if="client && session && sessionGate === 'create-org'"
+    :title="title"
+    subtitle="One last step"
+  >
+    <CreateOrgPanel :client="client" @created="onOrgCreated" />
+    <p class="saas-auth-links">
+      <button type="button" class="saas-link" @click="signOut">Sign out</button>
+    </p>
+    <p v-if="bootError" class="saas-error">{{ bootError }}</p>
+  </AuthCard>
+
+  <AuthCard
+    v-else-if="client && session && sessionGate === 'select-org'"
+    :title="title"
+    subtitle="Select organization"
+  >
+    <SelectOrgPanel :client="client" :orgs="session.orgs" @selected="onOrgSelected" />
+    <p class="saas-auth-links">
+      <button type="button" class="saas-link" @click="signOut">Sign out</button>
+    </p>
+    <p v-if="bootError" class="saas-error">{{ bootError }}</p>
+  </AuthCard>
+
+  <!-- Unauthenticated / invitation (or authenticated accepting invite) -->
+  <AuthCard
+    v-else-if="!showAppShell"
+    :title="authCardTitle"
+    :subtitle="authCardSubtitle"
+  >
+    <p v-if="loading" class="saas-muted">Loading…</p>
+    <p v-else-if="bootError" class="saas-error">{{ bootError }}</p>
+
+    <SignInForm
+      v-else-if="authScreen === 'sign-in'"
+      :config="config"
+      @signed-in="onSignedIn"
+      @navigate="navigateAuth($event)"
+    />
+    <SignUpForm
+      v-else-if="authScreen === 'sign-up'"
+      :config="config"
+      @navigate="navigateAuth($event)"
+    />
+    <ForgotPasswordForm
+      v-else-if="authScreen === 'forgot-password'"
+      :config="config"
+      @navigate="navigateAuth($event)"
+    />
+    <ResetPasswordForm
+      v-else-if="authScreen === 'reset-password'"
+      :config="config"
+      :token="authToken"
+      @navigate="navigateAuth($event)"
+    />
+    <VerifyEmailPanel
+      v-else-if="authScreen === 'verify-email'"
+      :config="config"
+      :token="authToken"
+      @navigate="navigateAuth($event)"
+    />
+    <AcceptInvitationPanel
+      v-else-if="authScreen === 'invitation'"
+      :token="authToken"
+      :authenticated="Boolean(client && session)"
+      :client="client"
+      @navigate="(screen, redirect) => navigateAuth(screen, { redirect: redirect ?? null })"
+      @accepted="onInvitationAccepted"
+    />
+  </AuthCard>
+
+  <div v-else class="saas-app">
+    <aside class="saas-nav">
+      <div class="saas-brand">
+        <h2>{{ title }}</h2>
+        <p v-if="session" class="saas-muted">{{ session.user.name }}</p>
+      </div>
+
+      <template v-for="surface in surfaces" :key="surface.key">
+        <p class="saas-group">{{ surface.key }}</p>
+        <button
+          v-for="view in surface.views"
+          :key="view.key"
+          class="saas-nav-item"
+          :class="{
+            active: !accountSection && view.key === activeViewKey,
+          }"
+          @click="openView(surface.key, view.key)"
+        >
+          {{ view.title }}
+        </button>
+      </template>
+
+      <p class="saas-group">Account</p>
+      <button
+        class="saas-nav-item"
+        :class="{ active: accountSection === 'profile' }"
+        @click="openAccount('profile')"
+      >
+        Profile
+      </button>
+      <button
+        v-if="canManageMembers"
+        class="saas-nav-item"
+        :class="{ active: accountSection === 'members' }"
+        @click="openAccount('members')"
+      >
+        Members
+      </button>
+      <button
+        v-if="canManageBilling"
+        class="saas-nav-item"
+        :class="{ active: accountSection === 'plans' }"
+        @click="openAccount('plans')"
+      >
+        Plans
+      </button>
+      <button
+        v-if="canManageBilling"
+        class="saas-nav-item"
+        :class="{ active: accountSection === 'billing' }"
+        @click="openAccount('billing')"
+      >
+        Subscriptions
+      </button>
+      <button
+        class="saas-nav-item"
+        :class="{ active: accountSection === 'activity' }"
+        @click="openAccount('activity')"
+      >
+        Activity
+      </button>
+      <button
+        class="saas-nav-item"
+        :class="{ active: accountSection === 'notifications' }"
+        @click="openAccount('notifications')"
+      >
+        Notifications
+      </button>
+      <button
+        class="saas-nav-item"
+        :class="{ active: accountSection === 'messaging' }"
+        @click="openAccount('messaging')"
+      >
+        Messaging
+      </button>
+
+      <button class="saas-signout" type="button" @click="signOut">Sign out</button>
+    </aside>
+
+    <main class="saas-content">
+      <p v-if="loading" class="saas-muted">Loading…</p>
+
+      <template v-else-if="accountSection === 'profile' && session">
+        <h1>Profile</h1>
+        <dl class="saas-dl">
+          <dt>Name</dt>
+          <dd>{{ session.user.name }}</dd>
+          <dt>Email</dt>
+          <dd>{{ session.user.email }}</dd>
+          <dt>Organization</dt>
+          <dd>
+            {{ session.orgs.find((o) => o.orgId === session?.orgId)?.orgName ?? '—' }}
+            <span class="saas-muted">({{ session.role }})</span>
+          </dd>
+        </dl>
+      </template>
+
+      <template v-else-if="accountSection === 'members'">
+        <h1>Members</h1>
+        <p v-if="panelLoading" class="saas-muted">Loading…</p>
+        <p v-else-if="panelError" class="saas-error">{{ panelError }}</p>
+        <ul v-else class="saas-list">
+          <li v-for="m in members" :key="m.userId">
+            <strong>{{ m.name }}</strong> — {{ m.email }}
+            <span class="saas-muted">{{ m.role }} · {{ m.status }}</span>
+          </li>
+        </ul>
+        <form class="saas-invite" @submit.prevent="sendInvite">
+          <h2>Invite</h2>
+          <input v-model="inviteEmail" type="email" placeholder="colleague@example.com" required />
+          <select v-model="inviteRole">
+            <option value="member">member</option>
+            <option value="admin">admin</option>
+            <option value="viewer">viewer</option>
+          </select>
+          <button type="submit">Send invite</button>
+          <p v-if="inviteMessage" class="saas-muted">{{ inviteMessage }}</p>
+        </form>
+      </template>
+
+      <template v-else-if="accountSection === 'plans' || accountSection === 'billing'">
+        <h1>{{ accountSection === 'plans' ? 'Plans' : 'Subscriptions' }}</h1>
+        <p v-if="panelLoading" class="saas-muted">Loading…</p>
+        <p v-else-if="panelError" class="saas-error">{{ panelError }}</p>
+        <div v-else class="saas-plans">
+          <article v-for="plan in plans" :key="String(plan.key ?? plan.id)" class="saas-card">
+            <h3>{{ plan.name ?? plan.key }}</h3>
+            <p class="saas-muted">{{ plan.description ?? '' }}</p>
+            <button
+              v-if="accountSection === 'plans'"
+              type="button"
+              @click="startSubscribe(String(plan.key))"
+            >
+              Subscribe
+            </button>
+          </article>
+        </div>
+        <button
+          v-if="accountSection === 'billing'"
+          class="saas-portal"
+          type="button"
+          @click="openPortal"
+        >
+          Open billing portal
+        </button>
+      </template>
+
+      <template v-else-if="accountSection === 'activity'">
+        <h1>Activity</h1>
+        <p v-if="panelLoading" class="saas-muted">Loading…</p>
+        <p v-else-if="panelError" class="saas-error">{{ panelError }}</p>
+        <template v-else>
+          <h2>Usage</h2>
+          <pre class="saas-pre">{{ JSON.stringify(usage, null, 2) }}</pre>
+          <h2>Recent events</h2>
+          <ul class="saas-list">
+            <li v-for="(ev, i) in activity" :key="String(ev.id ?? i)">
+              <strong>{{ ev.action }}</strong>
+              <span class="saas-muted">{{ ev.createdAt }}</span>
+            </li>
+          </ul>
+        </template>
+      </template>
+
+      <template v-else-if="accountSection === 'notifications'">
+        <h1>Notifications</h1>
+        <p v-if="panelLoading" class="saas-muted">Loading…</p>
+        <p v-else-if="panelError" class="saas-error">{{ panelError }}</p>
+        <ul v-else class="saas-list">
+          <li v-for="n in notifications" :key="n.id">
+            <strong>{{ n.title }}</strong>
+            <p>{{ n.body }}</p>
+            <button
+              v-if="!n.readAt"
+              type="button"
+              @click="markNotificationRead(n.id)"
+            >
+              Mark read
+            </button>
+          </li>
+          <li v-if="notifications.length === 0" class="saas-muted">No notifications yet.</li>
+        </ul>
+      </template>
+
+      <template v-else-if="accountSection === 'messaging'">
+        <h1>Messaging</h1>
+        <p class="saas-muted">
+          Unified messaging (email / WhatsApp / SMS) ships with Core E5.5 (spec 14). This shell
+          reserves the product surface; use Notifications for in-app inbox today.
+        </p>
+      </template>
+
+      <ViewRenderer
+        v-else-if="activeView && client"
+        :view="activeView"
+        :client="client"
+      />
+      <p v-else class="saas-muted">Select a screen.</p>
+    </main>
+  </div>
+</template>