@plutocms/supabase 0.11.3 → 0.12.0

package/app/components/access/LinkModal.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+// Shows an invite link for a user that already exists. Opened with useOverlay
+// from the Users page.
+defineProps<{
+  link: string
+}>()
+
+const emit = defineEmits<{ close: [value: boolean] }>()
+const { t } = usePlutoI18n()
+</script>
+
+<template>
+  <UModal
+    :title="t('supabase.access.link.title')"
+    :close="{ onClick: () => emit('close', false) }"
+  >
+    <template #body>
+      <AccessLinkField :link="link" />
+    </template>
+
+    <template #footer>
+      <div class="flex w-full justify-end">
+        <UButton color="neutral" variant="outline" @click="emit('close', false)">
+          {{ t('pluto.common.close') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/access/RevokeModal.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+// Confirms and removes the roles of one user. The account stays: only the
+// admin access goes. Opened with useOverlay from the Users page.
+import type { AccessUser } from '../../../shared/types/access'
+import { userDisplayName } from '../../utils/access-ui'
+
+const props = defineProps<{
+  user: AccessUser
+  /** True when the user is the signed-in admin. */
+  self: boolean
+}>()
+
+const emit = defineEmits<{ close: [revoked: boolean] }>()
+
+const { t } = usePlutoI18n()
+const toast = useToast()
+const errorText = usePlutoErrorText()
+const permissions = usePlutoPermissions()
+
+const working = ref(false)
+
+async function revoke() {
+  if (working.value) {
+    return
+  }
+
+  working.value = true
+
+  try {
+    await $fetch(`/api/access/users/${props.user.id}/roles`, { method: 'DELETE' })
+
+    toast.add({
+      title: t('supabase.access.toasts.revoked'),
+      color: 'success',
+      icon: 'lucide:circle-check',
+    })
+
+    if (props.self) {
+      await permissions.load()
+    }
+
+    emit('close', true)
+  } catch (error) {
+    toast.add({
+      title: t('supabase.access.toasts.failed'),
+      description: errorText(error),
+      color: 'error',
+      icon: 'lucide:circle-x',
+    })
+  } finally {
+    working.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal
+    :title="t('supabase.access.revoke.title')"
+    :description="t('supabase.access.revoke.body', { name: userDisplayName(user) })"
+    :close="{ onClick: () => emit('close', false) }"
+  >
+    <template #body>
+      <UAlert
+        v-if="self"
+        :description="t('supabase.access.revoke.self')"
+        color="warning"
+        variant="subtle"
+        icon="lucide:triangle-alert"
+      />
+    </template>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton color="neutral" variant="outline" @click="emit('close', false)">
+          {{ t('pluto.common.cancel') }}
+        </UButton>
+        <UButton :loading="working" color="error" icon="lucide:user-x" @click="revoke">
+          {{ t('supabase.access.revoke.confirm') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/access/RoleSlideover.vue

@@ -0,0 +1,251 @@
+<script setup lang="ts">
+// Creates or edits a role. The `admin` role opens read-only: it has full
+// access and the server refuses to change it. Capabilities show as one group
+// of checkboxes for each layer, and an "Other" group for a string that no
+// layer declares.
+import type { AccessRole } from '../../../shared/types/access'
+import {
+  ADMIN_ROLE_KEY,
+  isValidRoleKey,
+  ROLE_KEY_MAX,
+  slugifyRoleKey,
+} from '../../utils/access-ui'
+
+const props = defineProps<{
+  /** The role to edit. Null creates a new role. */
+  role: AccessRole | null
+}>()
+
+const emit = defineEmits<{ saved: [] }>()
+
+const open = defineModel<boolean>('open', { required: true })
+
+const { t } = usePlutoI18n()
+const toast = useToast()
+const errorText = usePlutoErrorText()
+const { groupsFor } = usePlutoCapabilities()
+
+type CapabilityGroup = ReturnType<typeof groupsFor>[number]
+
+const label = ref('')
+const key = ref('')
+const keyTouched = ref(false)
+const description = ref('')
+const selected = ref<string[]>([])
+const saving = ref(false)
+const submitted = ref(false)
+
+const creating = computed(() => props.role === null)
+const fullAccess = computed(() => props.role?.key === ADMIN_ROLE_KEY)
+
+const title = computed(() => {
+  if (creating.value) {
+    return t('supabase.access.role.titleCreate')
+  }
+
+  return fullAccess.value
+    ? t('supabase.access.role.titleView')
+    : t('supabase.access.role.titleEdit')
+})
+
+// A fresh form each time the slideover opens.
+watch(
+  () => [open.value, props.role?.key] as const,
+  ([isOpen]) => {
+    if (!isOpen) {
+      return
+    }
+
+    label.value = props.role?.label ?? ''
+    key.value = props.role?.key ?? ''
+    keyTouched.value = false
+    description.value = props.role?.description ?? ''
+    selected.value = [...(props.role?.capabilities ?? [])]
+    submitted.value = false
+  },
+  { immediate: true }
+)
+
+// The key follows the name until the admin edits the key.
+watch(label, (value) => {
+  if (creating.value && !keyTouched.value) {
+    key.value = slugifyRoleKey(value)
+  }
+})
+
+const groups = computed<CapabilityGroup[]>(() =>
+  groupsFor(props.role?.capabilities ?? [])
+)
+
+function groupItems(group: CapabilityGroup) {
+  return group.items.map((item) => ({
+    label: item.label,
+    value: item.key,
+    description: item.description,
+  }))
+}
+
+function groupValue(group: CapabilityGroup): string[] {
+  const keys = new Set(group.items.map((item) => item.key))
+
+  return selected.value.filter((value) => keys.has(value))
+}
+
+function setGroup(group: CapabilityGroup, value: string[]) {
+  const keys = new Set(group.items.map((item) => item.key))
+
+  selected.value = [...selected.value.filter((current) => !keys.has(current)), ...value]
+}
+
+const keyError = computed(() =>
+  creating.value && submitted.value && !isValidRoleKey(key.value)
+    ? t('supabase.access.role.keyInvalid')
+    : undefined
+)
+const capabilitiesError = computed(() =>
+  submitted.value && selected.value.length === 0
+    ? t('supabase.access.role.capabilitiesRequired')
+    : undefined
+)
+
+async function save() {
+  submitted.value = true
+
+  if (
+    saving.value
+    || fullAccess.value
+    || !label.value.trim()
+    || keyError.value
+    || capabilitiesError.value
+  ) {
+    return
+  }
+
+  saving.value = true
+
+  const body = {
+    label: label.value.trim(),
+    description: description.value.trim(),
+    capabilities: selected.value,
+  }
+
+  try {
+    if (creating.value) {
+      await $fetch('/api/access/roles', {
+        method: 'POST',
+        body: { ...body, key: key.value },
+      })
+    } else {
+      await $fetch(`/api/access/roles/${props.role!.key}`, { method: 'PUT', body })
+    }
+
+    toast.add({
+      title: creating.value
+        ? t('supabase.access.toasts.roleCreated')
+        : t('supabase.access.toasts.roleSaved'),
+      color: 'success',
+      icon: 'lucide:circle-check',
+    })
+    emit('saved')
+    open.value = false
+  } catch (error) {
+    toast.add({
+      title: t('supabase.access.toasts.failed'),
+      description: errorText(error),
+      color: 'error',
+      icon: 'lucide:circle-x',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <USlideover
+    v-model:open="open"
+    :title="title"
+    :description="t('supabase.access.role.description')"
+  >
+    <template #body>
+      <UAlert
+        v-if="fullAccess"
+        :title="t('supabase.access.roles.fullAccess')"
+        :description="t('supabase.access.role.fullAccessNote')"
+        color="neutral"
+        variant="subtle"
+        icon="lucide:shield-check"
+      />
+
+      <form v-else class="flex flex-col gap-y-5" @submit.prevent="save">
+        <UFormField
+          :label="t('supabase.access.role.label')"
+          :error="submitted && !label.trim() ? t('supabase.access.errors.invalidLabel') : undefined"
+          required
+        >
+          <UInput
+            v-model="label"
+            :placeholder="t('supabase.access.role.labelPlaceholder')"
+            autocomplete="off"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField
+          v-if="creating"
+          :label="t('supabase.access.role.key')"
+          :help="t('supabase.access.role.keyHint')"
+          :error="keyError"
+          required
+        >
+          <UInput
+            v-model="key"
+            :maxlength="ROLE_KEY_MAX"
+            autocomplete="off"
+            class="w-full font-mono"
+            @input="keyTouched = true"
+          />
+        </UFormField>
+
+        <UFormField :label="t('supabase.access.role.about')">
+          <UTextarea
+            v-model="description"
+            :rows="2"
+            :placeholder="t('supabase.access.role.aboutPlaceholder')"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField
+          :label="t('supabase.access.role.capabilities')"
+          :error="capabilitiesError"
+          required
+        >
+          <div class="flex flex-col gap-y-4">
+            <div v-for="group in groups" :key="group.id" class="flex flex-col gap-y-2">
+              <h3 class="text-highlighted text-sm font-semibold">{{ group.label }}</h3>
+              <UCheckboxGroup
+                :model-value="groupValue(group)"
+                :items="groupItems(group)"
+                @update:model-value="setGroup(group, $event as string[])"
+              />
+            </div>
+          </div>
+        </UFormField>
+
+        <button type="submit" class="hidden" tabindex="-1" aria-hidden="true" />
+      </form>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton color="neutral" variant="outline" @click="open = false">
+          {{ fullAccess ? t('pluto.common.close') : t('pluto.common.cancel') }}
+        </UButton>
+        <UButton v-if="!fullAccess" :loading="saving" icon="lucide:save" @click="save">
+          {{ t('supabase.access.role.save') }}
+        </UButton>
+      </div>
+    </template>
+  </USlideover>
+</template>

package/app/components/mail/AuthEmailsPanel.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+// The "Supabase sign-in emails" section of the Email settings page. It is a
+// `mailPanels` entry. Sign-up, password reset and magic link emails go through
+// Supabase's mailer, not through Pluto mail. This guide shows how to send them
+// through Resend. The core page draws the card and the title.
+import {
+  RESEND_SMTP,
+  RESEND_SUPABASE_INTEGRATION_URL,
+  supabaseDashboardLinks,
+  supabaseProjectRef,
+} from '../../utils/supabase-project'
+
+const { t } = usePlutoI18n()
+
+const projectRef = computed(() => supabaseProjectRef(useRuntimeConfig().public.supabase?.url))
+const links = computed(() => (projectRef.value ? supabaseDashboardLinks(projectRef.value) : null))
+
+const smtpRows = computed(() => [
+  { key: 'host', label: t('supabase.mail.authEmails.host'), value: RESEND_SMTP.host, copy: RESEND_SMTP.host },
+  { key: 'port', label: t('supabase.mail.authEmails.port'), value: RESEND_SMTP.port, copy: RESEND_SMTP.port },
+  { key: 'username', label: t('supabase.mail.authEmails.username'), value: RESEND_SMTP.username, copy: RESEND_SMTP.username },
+  // The password is the API key. Pluto never shows it, so there is nothing to copy.
+  { key: 'password', label: t('supabase.mail.authEmails.password'), value: t('supabase.mail.authEmails.passwordValue'), copy: null },
+])
+
+const dashboardLinks = computed(() =>
+  links.value
+    ? [
+        { key: 'smtp', label: t('supabase.mail.authEmails.dashboardSmtp'), to: links.value.smtp, icon: 'lucide:mail' },
+        { key: 'templates', label: t('supabase.mail.authEmails.dashboardTemplates'), to: links.value.templates, icon: 'lucide:layout-template' },
+        { key: 'rateLimits', label: t('supabase.mail.authEmails.dashboardRateLimits'), to: links.value.rateLimits, icon: 'lucide:gauge' },
+        { key: 'project', label: t('supabase.mail.authEmails.dashboardHome'), to: links.value.project, icon: 'lucide:external-link' },
+      ]
+    : []
+)
+</script>
+
+<template>
+  <div class="flex flex-col gap-y-5">
+    <p class="text-muted text-sm">{{ t('supabase.mail.authEmails.intro') }}</p>
+
+    <section class="flex flex-col gap-y-2">
+      <h3 class="text-highlighted text-sm font-semibold">{{ t('supabase.mail.authEmails.resendTitle') }}</h3>
+      <p class="text-muted text-sm">{{ t('supabase.mail.authEmails.resendBody') }}</p>
+      <div>
+        <UButton
+          :to="RESEND_SUPABASE_INTEGRATION_URL"
+          target="_blank"
+          rel="noopener noreferrer"
+          icon="lucide:external-link"
+          color="neutral"
+          variant="outline"
+        >
+          {{ t('supabase.mail.authEmails.resendLink') }}
+        </UButton>
+      </div>
+    </section>
+
+    <section class="flex flex-col gap-y-2">
+      <h3 class="text-highlighted text-sm font-semibold">{{ t('supabase.mail.authEmails.manualTitle') }}</h3>
+      <p class="text-muted text-sm">{{ t('supabase.mail.authEmails.manualBody') }}</p>
+
+      <ul class="border-default bg-elevated/50 divide-default divide-y rounded-md border">
+        <li v-for="row in smtpRows" :key="row.key" class="flex items-center gap-3 px-3 py-2">
+          <span class="text-muted w-24 shrink-0 text-sm">{{ row.label }}</span>
+          <code class="min-w-0 flex-1 overflow-x-auto text-sm whitespace-nowrap">{{ row.value }}</code>
+          <AccessCopyButton
+            v-if="row.copy"
+            :text="row.copy"
+            :label="t('supabase.mail.authEmails.copyValue', { label: row.label })"
+          />
+        </li>
+      </ul>
+    </section>
+
+    <section class="flex flex-col gap-y-2">
+      <h3 class="text-highlighted text-sm font-semibold">{{ t('supabase.mail.authEmails.dashboardTitle') }}</h3>
+
+      <div v-if="dashboardLinks.length > 0" class="flex flex-wrap gap-2">
+        <UButton
+          v-for="link in dashboardLinks"
+          :key="link.key"
+          :to="link.to"
+          :icon="link.icon"
+          target="_blank"
+          rel="noopener noreferrer"
+          color="neutral"
+          variant="outline"
+          size="sm"
+        >
+          {{ link.label }}
+        </UButton>
+      </div>
+      <p v-else class="text-muted text-sm">{{ t('supabase.mail.authEmails.noProject') }}</p>
+
+      <p v-if="dashboardLinks.length > 0" class="text-muted text-xs">
+        {{ t('supabase.mail.authEmails.dashboardNote') }}
+      </p>
+    </section>
+
+    <UAlert
+      :description="t('supabase.mail.authEmails.rateLimitHint')"
+      color="neutral"
+      variant="subtle"
+      icon="lucide:info"
+    />
+  </div>
+</template>

package/app/pages/admin/(auth)/accept-invite.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { parseInviteLink } from '../../../utils/invite-link'
+
+definePageMeta({
+  layout: 'auth',
+})
+
+const { t } = usePlutoI18n()
+
+useHead({
+  title: () => t('supabase.auth.invite.pageTitle'),
+})
+
+const route = useRoute()
+const supabase = useSupabaseClient()
+const auth = usePlutoAuth()
+
+// The link decides the state. `checking` shows while the page reads it.
+const state = ref<'checking' | 'ready' | 'expired' | 'invalid'>('checking')
+
+// Read the link in the browser. The link tokens must not reach the server.
+onMounted(async () => {
+  const link = parseInviteLink(
+    route.query as Record<string, string | string[] | null | undefined>,
+    window.location.hash
+  )
+
+  // Remove the tokens from the address bar and from the history.
+  history.replaceState(history.state, '', window.location.pathname)
+
+  if (link.kind === 'otp') {
+    const { error } = await supabase.auth.verifyOtp({
+      type: link.type,
+      token_hash: link.tokenHash,
+    })
+    state.value = error ? 'expired' : 'ready'
+
+    return
+  }
+
+  if (link.kind === 'session') {
+    const { error } = await supabase.auth.setSession({
+      access_token: link.accessToken,
+      refresh_token: link.refreshToken,
+    })
+    state.value = error ? 'invalid' : 'ready'
+
+    return
+  }
+
+  if (link.kind === 'error') {
+    state.value = 'expired'
+
+    return
+  }
+
+  const { data } = await supabase.auth.getSession()
+  state.value = data.session ? 'ready' : 'invalid'
+})
+
+const { isSubmitting, updatePassword } = useAuth()
+
+const form = ref({
+  password: '',
+  confirm_password: '',
+})
+
+const passwordMatch = computed(
+  () => form.value.password === form.value.confirm_password
+)
+
+async function submitForm() {
+  if (!passwordMatch.value) {
+    return
+  }
+
+  const result = await updatePassword(form.value.password)
+
+  if (result.success) {
+    // Read the session again, so the admin shell sees the signed-in user.
+    await auth.driver.value?.refresh?.()
+    await navigateTo('/admin/home')
+  }
+}
+</script>
+
+<template>
+  <PlutoAdminAuthCard
+    :title="state === 'ready' ? t('supabase.auth.invite.title') : t('supabase.auth.invite.pageTitle')"
+    :description="state === 'ready' ? t('supabase.auth.invite.description') : undefined"
+  >
+    <div v-if="state === 'checking'" class="flex items-center justify-center py-10">
+      <UIcon name="lucide:loader-circle" class="size-6 animate-spin text-muted" />
+    </div>
+
+    <div v-else-if="state !== 'ready'" class="space-y-6 py-10 text-center">
+      <span class="text-5xl">
+        <UIcon name="lucide:link-2-off" class="inline-block" />
+      </span>
+
+      <p>
+        {{ state === 'expired' ? t('supabase.auth.invite.expired') : t('supabase.auth.invite.invalid') }}
+      </p>
+
+      <div class="flex items-center justify-center">
+        <UButton to="/admin/login" color="primary" icon="lucide:log-in">
+          {{ t('supabase.auth.backToLogin') }}
+        </UButton>
+      </div>
+    </div>
+
+    <form v-else @submit.prevent="submitForm">
+      <div class="flex flex-col gap-y-6">
+        <UFormField :label="t('supabase.auth.fields.password')">
+          <UInput
+            v-model="form.password"
+            placeholder="••••"
+            type="password"
+            class="w-full"
+            autocomplete="new-password"
+            required
+          />
+        </UFormField>
+
+        <UFormField
+          :error="
+            form.confirm_password && !passwordMatch
+              ? t('supabase.auth.passwordMismatch')
+              : undefined
+          "
+          :label="t('supabase.auth.fields.confirmPassword')"
+        >
+          <UInput
+            v-model="form.confirm_password"
+            placeholder="••••"
+            type="password"
+            class="w-full"
+            autocomplete="new-password"
+            required
+          />
+        </UFormField>
+
+        <UButton
+          :loading="isSubmitting"
+          :disabled="!passwordMatch || !form.password"
+          type="submit"
+          icon="lucide:lock-keyhole"
+          class="w-full justify-center"
+        >
+          {{ t('supabase.auth.invite.submit') }}
+        </UButton>
+      </div>
+    </form>
+  </PlutoAdminAuthCard>
+</template>