@bemaestro/saas-ui 0.0.2

package/src/auth/AcceptInvitationPanel.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import type { MaestroClient } from '@bemaestro/sdk/runtime'
+import { errorMessage } from './use-anon-client.js'
+
+const props = defineProps<{
+  token: string | null
+  authenticated: boolean
+  client: MaestroClient | null
+}>()
+
+const emit = defineEmits<{
+  navigate: [screen: 'sign-in' | 'sign-up', redirect?: string]
+  accepted: [orgId: string]
+}>()
+
+type State = 'idle' | 'accepting' | 'success' | 'error'
+const state = ref<State>('idle')
+const errorText = ref('')
+
+async function accept() {
+  if (!props.token || !props.client) return
+  state.value = 'accepting'
+  errorText.value = ''
+  try {
+    const result = await props.client.orgs.acceptInvitation(props.token)
+    state.value = 'success'
+    emit('accepted', result.orgId)
+  } catch (e) {
+    state.value = 'error'
+    errorText.value = errorMessage(e, 'This invitation is invalid or has expired.')
+  }
+}
+
+function invitationRedirect(): string {
+  return props.token ? `/invitations/${encodeURIComponent(props.token)}` : '/sign-in'
+}
+
+onMounted(() => {
+  if (props.authenticated && props.client && props.token) {
+    void accept()
+  }
+})
+
+watch(
+  () => [props.authenticated, props.client, props.token] as const,
+  ([authenticated, client, token]) => {
+    if (authenticated && client && token && state.value === 'idle') {
+      void accept()
+    }
+  },
+)
+</script>
+
+<template>
+  <div class="saas-auth-form">
+    <template v-if="!authenticated">
+      <p class="saas-muted">
+        Sign in or create an account with the invited email address to accept this invitation.
+      </p>
+      <button type="button" @click="emit('navigate', 'sign-in', invitationRedirect())">
+        Sign in
+      </button>
+      <button type="button" class="saas-btn-secondary" @click="emit('navigate', 'sign-up', invitationRedirect())">
+        Create account
+      </button>
+    </template>
+    <template v-else>
+      <p v-if="state === 'accepting' || state === 'idle'" class="saas-muted">
+        Joining organization…
+      </p>
+      <p v-else-if="state === 'success'">You've joined the organization.</p>
+      <p v-else class="saas-error">{{ errorText }}</p>
+    </template>
+  </div>
+</template>

package/src/auth/AuthCard.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  subtitle?: string
+}>()
+</script>
+
+<template>
+  <div class="saas-login">
+    <h1>{{ title }}</h1>
+    <p v-if="subtitle" class="saas-muted">{{ subtitle }}</p>
+    <slot />
+  </div>
+</template>

package/src/auth/CreateOrgPanel.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { MaestroClient } from '@bemaestro/sdk/runtime'
+import { errorMessage } from './use-anon-client.js'
+
+const props = defineProps<{
+  client: MaestroClient
+}>()
+
+const emit = defineEmits<{
+  created: [
+    result: {
+      accessToken?: string
+      refreshToken?: string
+      orgId: string
+      orgName: string
+    },
+  ]
+}>()
+
+const name = ref('')
+const error = ref<string | null>(null)
+const loading = ref(false)
+
+async function submit() {
+  error.value = null
+  if (!name.value.trim()) {
+    error.value = 'Organization name is required.'
+    return
+  }
+  loading.value = true
+  try {
+    const result = await props.client.orgs.create(name.value.trim())
+    const org = result.org as { id?: string; name?: string }
+    const orgId = org.id
+    if (!orgId) {
+      throw new Error('Organization was created but no id was returned')
+    }
+    emit('created', {
+      accessToken: result.accessToken,
+      refreshToken: result.refreshToken,
+      orgId,
+      orgName: typeof org.name === 'string' ? org.name : name.value.trim(),
+    })
+  } catch (e) {
+    error.value = errorMessage(e, 'Could not create organization')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <form class="saas-auth-form" @submit.prevent="submit">
+    <p class="saas-muted">
+      Every workspace lives inside an organization — create one to finish setting up your account.
+    </p>
+    <input
+      v-model="name"
+      type="text"
+      placeholder="Organization name"
+      autocomplete="organization"
+      required
+    />
+    <button type="submit" :disabled="loading">
+      {{ loading ? 'Creating…' : 'Create organization' }}
+    </button>
+    <p v-if="error" class="saas-error">{{ error }}</p>
+  </form>
+</template>

package/src/auth/ForgotPasswordForm.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { createAnonClient, type SaasShellConfig } from './use-anon-client.js'
+
+const props = defineProps<{
+  config: SaasShellConfig
+}>()
+
+const emit = defineEmits<{
+  navigate: [screen: 'sign-in' | 'sign-up']
+}>()
+
+const email = ref('')
+const loading = ref(false)
+const message = ref<string | null>(null)
+
+async function submit() {
+  loading.value = true
+  message.value = null
+  try {
+    await createAnonClient(props.config).auth.forgotPassword(email.value)
+  } catch {
+    // Always-success client message — no user enumeration.
+  } finally {
+    message.value = `If an account exists, a reset link was sent to ${email.value}`
+    email.value = ''
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <form class="saas-auth-form" @submit.prevent="submit">
+    <input
+      v-model="email"
+      type="email"
+      placeholder="Email"
+      autocomplete="email"
+      required
+    />
+    <button type="submit" :disabled="loading">
+      {{ loading ? 'Sending…' : 'Continue' }}
+    </button>
+    <p v-if="message" class="saas-muted">{{ message }}</p>
+    <p class="saas-auth-links">
+      <button type="button" class="saas-link" @click="emit('navigate', 'sign-in')">
+        Back to sign in
+      </button>
+      <span class="saas-muted">·</span>
+      <button type="button" class="saas-link" @click="emit('navigate', 'sign-up')">
+        Create account
+      </button>
+    </p>
+  </form>
+</template>

package/src/auth/ResetPasswordForm.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { createAnonClient, errorMessage, type SaasShellConfig } from './use-anon-client.js'
+
+const props = defineProps<{
+  config: SaasShellConfig
+  token: string | null
+}>()
+
+const emit = defineEmits<{
+  navigate: [screen: 'sign-in' | 'forgot-password']
+}>()
+
+const password = ref('')
+const confirmPassword = ref('')
+const error = ref<string | null>(null)
+const loading = ref(false)
+const success = ref(false)
+
+async function submit() {
+  error.value = null
+  if (!props.token) {
+    error.value = 'This reset link is missing or malformed.'
+    return
+  }
+  if (password.value.length < 8) {
+    error.value = 'Password must be at least 8 characters.'
+    return
+  }
+  if (password.value !== confirmPassword.value) {
+    error.value = "Passwords don't match."
+    return
+  }
+  loading.value = true
+  try {
+    await createAnonClient(props.config).auth.resetPassword({
+      token: props.token,
+      password: password.value,
+    })
+    success.value = true
+  } catch (e) {
+    error.value = errorMessage(e, 'This reset link is invalid or has expired.')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div v-if="success" class="saas-auth-form">
+    <p>
+      Password updated. All active sessions were signed out — please sign in again.
+    </p>
+    <p class="saas-auth-links">
+      <button type="button" class="saas-link" @click="emit('navigate', 'sign-in')">
+        Back to sign in
+      </button>
+    </p>
+  </div>
+  <form v-else class="saas-auth-form" @submit.prevent="submit">
+    <p v-if="!token" class="saas-error">This reset link is missing or malformed.</p>
+    <template v-else>
+      <input
+        v-model="password"
+        type="password"
+        placeholder="New password"
+        autocomplete="new-password"
+        required
+        minlength="8"
+      />
+      <input
+        v-model="confirmPassword"
+        type="password"
+        placeholder="Confirm new password"
+        autocomplete="new-password"
+        required
+      />
+      <button type="submit" :disabled="loading">
+        {{ loading ? 'Updating…' : 'Reset password' }}
+      </button>
+    </template>
+    <p v-if="error" class="saas-error">{{ error }}</p>
+    <p class="saas-auth-links">
+      <button type="button" class="saas-link" @click="emit('navigate', 'forgot-password')">
+        Request a new link
+      </button>
+      <span class="saas-muted">·</span>
+      <button type="button" class="saas-link" @click="emit('navigate', 'sign-in')">
+        Sign in
+      </button>
+    </p>
+  </form>
+</template>

package/src/auth/SelectOrgPanel.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { MaestroClient } from '@bemaestro/sdk/runtime'
+import type { SaasOrgMembership } from '../session.js'
+import { errorMessage } from './use-anon-client.js'
+
+const props = defineProps<{
+  client: MaestroClient
+  orgs: SaasOrgMembership[]
+}>()
+
+const emit = defineEmits<{
+  selected: [
+    result: {
+      accessToken: string
+      refreshToken: string
+      orgId: string
+      role: string
+    },
+  ]
+}>()
+
+const error = ref<string | null>(null)
+const loadingId = ref<string | null>(null)
+
+async function select(orgId: string) {
+  error.value = null
+  loadingId.value = orgId
+  try {
+    const result = await props.client.auth.switchOrg(orgId)
+    const membership = result.orgs.find((o) => o.orgId === orgId)
+    emit('selected', {
+      accessToken: result.accessToken,
+      refreshToken: result.refreshToken,
+      orgId,
+      role: membership?.role ?? 'member',
+    })
+  } catch (e) {
+    error.value = errorMessage(e, 'Could not switch organization')
+  } finally {
+    loadingId.value = null
+  }
+}
+</script>
+
+<template>
+  <div class="saas-auth-form">
+    <p class="saas-muted">Choose which organization to open.</p>
+    <ul class="saas-list">
+      <li v-for="org in orgs" :key="org.orgId">
+        <button
+          type="button"
+          class="saas-org-pick"
+          :disabled="loadingId !== null"
+          @click="select(org.orgId)"
+        >
+          <strong>{{ org.orgName }}</strong>
+          <span class="saas-muted">{{ org.role }}</span>
+          <span v-if="loadingId === org.orgId" class="saas-muted">Opening…</span>
+        </button>
+      </li>
+    </ul>
+    <p v-if="error" class="saas-error">{{ error }}</p>
+  </div>
+</template>

package/src/auth/SignInForm.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MaestroHttpError } from '@bemaestro/sdk/runtime'
+import { createAnonClient, errorCode, errorMessage, type SaasShellConfig } from './use-anon-client.js'
+
+const props = defineProps<{
+  config: SaasShellConfig
+}>()
+
+const emit = defineEmits<{
+  signedIn: [
+    result: {
+      accessToken: string
+      refreshToken: string
+      user: { id: string; email: string; name: string }
+      orgs: Array<{
+        orgId: string
+        orgName: string
+        orgStatus: string
+        role: string
+        membershipStatus: string
+      }>
+    },
+  ]
+  navigate: [screen: 'sign-up' | 'forgot-password']
+}>()
+
+const email = ref('')
+const password = ref('')
+const error = ref<string | null>(null)
+const loading = ref(false)
+
+async function submit() {
+  error.value = null
+  loading.value = true
+  try {
+    const result = await createAnonClient(props.config).auth.login({
+      email: email.value,
+      password: password.value,
+    })
+    emit('signedIn', result)
+  } catch (e) {
+    const code = errorCode(e)
+    if (code === 'EMAIL_UNVERIFIED') {
+      error.value =
+        'Email verification required. Check your inbox for the verification link before signing in.'
+    } else if (e instanceof MaestroHttpError && e.status === 429) {
+      error.value = 'Too many failed attempts. Please wait a few minutes and try again.'
+    } else {
+      error.value = errorMessage(e, 'Sign-in failed')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <form class="saas-auth-form" @submit.prevent="submit">
+    <input
+      v-model="email"
+      type="email"
+      placeholder="Email"
+      autocomplete="username"
+      required
+    />
+    <input
+      v-model="password"
+      type="password"
+      placeholder="Password"
+      autocomplete="current-password"
+      required
+    />
+    <button type="submit" :disabled="loading">
+      {{ loading ? 'Signing in…' : 'Sign in' }}
+    </button>
+    <p v-if="error" class="saas-error">{{ error }}</p>
+    <p class="saas-auth-links">
+      <button type="button" class="saas-link" @click="emit('navigate', 'forgot-password')">
+        Forgot password?
+      </button>
+      <span class="saas-muted">·</span>
+      <button type="button" class="saas-link" @click="emit('navigate', 'sign-up')">
+        Create account
+      </button>
+    </p>
+  </form>
+</template>

package/src/auth/SignUpForm.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { createAnonClient, errorMessage, type SaasShellConfig } from './use-anon-client.js'
+
+const props = defineProps<{
+  config: SaasShellConfig
+}>()
+
+const emit = defineEmits<{
+  registered: [email: string]
+  navigate: [screen: 'sign-in']
+}>()
+
+const name = ref('')
+const email = ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const error = ref<string | null>(null)
+const loading = ref(false)
+const doneEmail = ref<string | null>(null)
+
+async function submit() {
+  error.value = null
+  if (password.value.length < 8) {
+    error.value = 'Password must be at least 8 characters.'
+    return
+  }
+  if (password.value !== confirmPassword.value) {
+    error.value = "Passwords don't match."
+    return
+  }
+  loading.value = true
+  try {
+    await createAnonClient(props.config).auth.register({
+      email: email.value,
+      password: password.value,
+      name: name.value,
+    })
+    doneEmail.value = email.value
+    emit('registered', email.value)
+  } catch (e) {
+    error.value = errorMessage(e, 'Could not create account')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div v-if="doneEmail" class="saas-auth-form">
+    <p>
+      Check your email — we sent a verification link to
+      <strong>{{ doneEmail }}</strong>.
+    </p>
+    <p class="saas-auth-links">
+      <button type="button" class="saas-link" @click="emit('navigate', 'sign-in')">
+        Back to sign in
+      </button>
+    </p>
+  </div>
+  <form v-else class="saas-auth-form" @submit.prevent="submit">
+    <input
+      v-model="name"
+      type="text"
+      placeholder="Name"
+      autocomplete="name"
+      required
+    />
+    <input
+      v-model="email"
+      type="email"
+      placeholder="Email"
+      autocomplete="email"
+      required
+    />
+    <input
+      v-model="password"
+      type="password"
+      placeholder="Password (min 8 characters)"
+      autocomplete="new-password"
+      required
+      minlength="8"
+    />
+    <input
+      v-model="confirmPassword"
+      type="password"
+      placeholder="Confirm password"
+      autocomplete="new-password"
+      required
+    />
+    <button type="submit" :disabled="loading">
+      {{ loading ? 'Creating…' : 'Create account' }}
+    </button>
+    <p v-if="error" class="saas-error">{{ error }}</p>
+    <p class="saas-auth-links">
+      <span class="saas-muted">Already have an account?</span>
+      <button type="button" class="saas-link" @click="emit('navigate', 'sign-in')">
+        Sign in
+      </button>
+    </p>
+  </form>
+</template>

package/src/auth/VerifyEmailPanel.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { createAnonClient, errorMessage, type SaasShellConfig } from './use-anon-client.js'
+
+const props = defineProps<{
+  config: SaasShellConfig
+  token: string | null
+}>()
+
+const emit = defineEmits<{
+  navigate: [screen: 'sign-in']
+}>()
+
+type State = 'verifying' | 'success' | 'error'
+const state = ref<State>('verifying')
+const errorMessageText = ref('')
+
+onMounted(async () => {
+  if (!props.token) {
+    state.value = 'error'
+    errorMessageText.value = 'This verification link is missing or malformed.'
+    return
+  }
+  try {
+    await createAnonClient(props.config).auth.verifyEmail(props.token)
+    state.value = 'success'
+  } catch (e) {
+    state.value = 'error'
+    errorMessageText.value = errorMessage(
+      e,
+      'This verification link is invalid or has expired.',
+    )
+  }
+})
+</script>
+
+<template>
+  <div class="saas-auth-form">
+    <p v-if="state === 'verifying'" class="saas-muted">Confirming your email address…</p>
+    <p v-else-if="state === 'success'">Your email has been verified. You can sign in now.</p>
+    <p v-else class="saas-error">{{ errorMessageText }}</p>
+    <p v-if="state !== 'verifying'" class="saas-auth-links">
+      <button type="button" class="saas-link" @click="emit('navigate', 'sign-in')">
+        Back to sign in
+      </button>
+    </p>
+  </div>
+</template>