create-ej-app 26.0.0 → 28.0.0

package/template/saas-starter/src/app/(app)/actions/organizations.ts

@@ -0,0 +1,230 @@
+'use server'
+
+import { and, desc, eq, ne } from 'drizzle-orm'
+import { cache } from 'react'
+import { z } from 'zod'
+import { db } from '~/db'
+import { membersTable, organizationsTable, usersTable } from '~/db/schema'
+import { AppError, AppErrorCode, rethrowUniqueViolation } from '~/lib/errors'
+import {
+  assertCanManageOrganization,
+  assertRole
+} from '~/lib/organization-access'
+import { authActionClient, withWideEvent } from '~/lib/safe-action'
+import {
+  assertOwnedR2Key,
+  assertPersistableImageValue,
+  confirmUpload,
+  deleteOwnedFileQuietly,
+  isR2Key,
+  resolveImageUrl
+} from '~/lib/storage'
+import { stringValidation } from '~/lib/validations'
+import { updateOrganizationSchema } from './organizations.validation'
+
+/** Every organization the caller belongs to, newest membership first. */
+export const getOrganizations = authActionClient.action(
+  withWideEvent('getOrganizations', async ({ ctx: { user } }) => {
+    const rows = await db
+      .select({
+        id: organizationsTable.id,
+        name: organizationsTable.name,
+        slug: organizationsTable.slug,
+        logo: organizationsTable.logo,
+        role: membersTable.role,
+        memberId: membersTable.id
+      })
+      .from(membersTable)
+      .innerJoin(
+        organizationsTable,
+        eq(membersTable.organizationId, organizationsTable.id)
+      )
+      .where(eq(membersTable.userId, user.id))
+      .orderBy(desc(membersTable.createdAt))
+
+    return rows.map(row => ({ ...row, logoUrl: resolveImageUrl(row.logo) }))
+  })
+)
+
+/** Per-request cache, so layouts and pages share one query. */
+export const getOrganizationsCached = cache(getOrganizations)
+
+/**
+ * One organization with the caller's role in it. Returns no data when the
+ * caller is not a member, so pages can respond with `notFound()`.
+ */
+export const getOrganization = authActionClient
+  .inputSchema(stringValidation)
+  .action(
+    withWideEvent(
+      'getOrganization',
+      async ({ parsedInput: organizationId, ctx: { user } }) => {
+        const [row] = await db
+          .select({
+            id: organizationsTable.id,
+            name: organizationsTable.name,
+            slug: organizationsTable.slug,
+            logo: organizationsTable.logo,
+            role: membersTable.role,
+            memberId: membersTable.id
+          })
+          .from(membersTable)
+          .innerJoin(
+            organizationsTable,
+            eq(membersTable.organizationId, organizationsTable.id)
+          )
+          .where(
+            and(
+              eq(membersTable.organizationId, organizationId),
+              eq(membersTable.userId, user.id)
+            )
+          )
+
+        return row ? { ...row, logoUrl: resolveImageUrl(row.logo) } : null
+      }
+    )
+  )
+
+export const getOrganizationCached = cache(getOrganization)
+
+/**
+ * Saves the organization's name, slug, and logo. The logo must be an upload
+ * this organization owns (or a data URL while R2 is off); the replaced file
+ * is deleted.
+ */
+export const updateOrganizationAction = authActionClient
+  .inputSchema(updateOrganizationSchema)
+  .action(
+    withWideEvent(
+      'updateOrganizationAction',
+      async ({ parsedInput, ctx: { user } }) => {
+        const { organizationId } = parsedInput
+        await assertCanManageOrganization(organizationId, user.id)
+
+        const org = await db.query.organizationsTable.findFirst({
+          where: eq(organizationsTable.id, organizationId),
+          columns: { logo: true }
+        })
+
+        if (!org) {
+          throw new AppError(AppErrorCode.NOT_FOUND, 'Organization not found.')
+        }
+
+        const logo = parsedInput.logo || null
+        const logoChanged = logo !== org.logo
+        // An unchanged logo is already stored, even a data URL saved before R2
+        // was configured, so only a new value has to pass the storage rules.
+        if (logoChanged) assertPersistableImageValue(logo)
+
+        // Check ownership before saving, and delete the old file only after
+        // the save succeeds, so a failed save never loses the current logo.
+        if (logoChanged && isR2Key(logo)) {
+          await assertOwnedR2Key(logo, organizationId)
+        }
+
+        await db
+          .update(organizationsTable)
+          .set({ name: parsedInput.name, slug: parsedInput.slug, logo })
+          .where(eq(organizationsTable.id, organizationId))
+          .catch(error =>
+            rethrowUniqueViolation(
+              error,
+              'Another organization already uses this slug. Choose a different one.'
+            )
+          )
+
+        if (logoChanged && isR2Key(logo)) {
+          await confirmUpload(logo, organizationId, org.logo)
+        } else if (logoChanged && org.logo) {
+          await deleteOwnedFileQuietly(org.logo, organizationId)
+        }
+
+        return true
+      }
+    )
+  )
+
+/** Members the owner can hand ownership to: everyone except themselves. */
+export const getTransferTargets = authActionClient
+  .inputSchema(stringValidation)
+  .action(
+    withWideEvent(
+      'getTransferTargets',
+      async ({ parsedInput: organizationId, ctx: { user } }) => {
+        const owner = await assertRole(organizationId, user.id, ['owner'])
+
+        return db
+          .select({
+            memberId: membersTable.id,
+            name: usersTable.name,
+            email: usersTable.email,
+            role: membersTable.role
+          })
+          .from(membersTable)
+          .innerJoin(usersTable, eq(membersTable.userId, usersTable.id))
+          .where(
+            and(
+              eq(membersTable.organizationId, organizationId),
+              ne(membersTable.id, owner.id)
+            )
+          )
+          .orderBy(usersTable.name)
+      }
+    )
+  )
+
+/** Makes another member the owner. The current owner becomes an admin. */
+export const transferOrganizationOwnershipAction = authActionClient
+  .inputSchema(
+    z.object({
+      organizationId: stringValidation,
+      targetMemberId: stringValidation
+    })
+  )
+  .action(
+    withWideEvent(
+      'transferOrganizationOwnershipAction',
+      async ({
+        parsedInput: { organizationId, targetMemberId },
+        ctx: { user }
+      }) => {
+        const owner = await assertRole(organizationId, user.id, ['owner'])
+
+        if (targetMemberId === owner.id) {
+          throw new AppError(
+            AppErrorCode.BAD_REQUEST,
+            'You already own this organization. Choose another member.'
+          )
+        }
+
+        const target = await db.query.membersTable.findFirst({
+          where: and(
+            eq(membersTable.id, targetMemberId),
+            eq(membersTable.organizationId, organizationId)
+          ),
+          columns: { id: true }
+        })
+
+        if (!target) {
+          throw new AppError(
+            AppErrorCode.NOT_FOUND,
+            'That member is no longer in this organization. Refresh and choose again.'
+          )
+        }
+
+        await db.transaction(async tx => {
+          await tx
+            .update(membersTable)
+            .set({ role: 'owner' })
+            .where(eq(membersTable.id, target.id))
+
+          await tx
+            .update(membersTable)
+            .set({ role: 'admin' })
+            .where(eq(membersTable.id, owner.id))
+        })
+
+        return true
+      }
+    )
+  )

package/template/saas-starter/src/app/(app)/actions/organizations.validation.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod'
+import {
+  imageUrlValidation,
+  slugValidation,
+  stringValidation
+} from '~/lib/validations'
+
+export const organizationDetailsSchema = z.object({
+  name: stringValidation,
+  slug: slugValidation
+})
+
+export const updateOrganizationSchema = organizationDetailsSchema.extend({
+  organizationId: stringValidation,
+  /** Empty string clears the logo. */
+  logo: imageUrlValidation
+})

package/template/saas-starter/src/app/(app)/app/[orgId]/dashboard/page.tsx

@@ -4,17 +4,14 @@ import { LayoutGrid } from 'lucide-react'
 import { PageHeading } from '~/components/page-heading'
 import { useOrganizationContext } from '../../_components/organization-context'
 
-export default function Page() {
+export default function DashboardPage() {
   const org = useOrganizationContext()
 
   return (
-    <div className="space-y-6">
-      <PageHeading
-        title={org.name}
-        description="Your organization's home base."
-        icon={LayoutGrid}
-      />
-      Hello, World!
-    </div>
+    <PageHeading
+      title={org.name}
+      description="Your organization's home. Build your product here."
+      icon={LayoutGrid}
+    />
   )
 }

package/template/saas-starter/src/app/(app)/app/[orgId]/layout.tsx

@@ -1,8 +1,8 @@
-import { redirect } from 'next/navigation'
-import { getUserOrganizationsCached } from '~/lib/organization-access'
+import { notFound } from 'next/navigation'
+import { getOrganizationCached } from '../../actions/organizations'
 import { OrganizationContextProvider } from '../_components/organization-context'
 
-export default async function Layout({
+export default async function OrganizationLayout({
   children,
   params
 }: {
@@ -10,12 +10,10 @@ export default async function Layout({
   params: Promise<{ orgId: string }>
 }) {
   const { orgId } = await params
-
-  const organizations = await getUserOrganizationsCached()
-  const org = organizations.find(o => o.id === orgId)
+  const org = (await getOrganizationCached(orgId))?.data
 
   if (!org) {
-    return redirect('/app')
+    return notFound()
   }
 
   return (
@@ -24,8 +22,7 @@ export default async function Layout({
         id: org.id,
         name: org.name,
         role: org.role,
-        memberId: org.memberId,
-        userId: org.userId
+        memberId: org.memberId
       }}
     >
       {children}

package/template/saas-starter/src/app/(app)/app/[orgId]/settings/_components/billing-email-form.tsx

@@ -3,20 +3,19 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Loader2 } from 'lucide-react'
 import { useRouter } from 'next/navigation'
-import { useForm } from 'react-hook-form'
+import { Controller, useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { updateBillingEmailAction } from '~/app/(app)/actions/billing'
 import { Button } from '~/components/ui/button'
 import {
   Field,
-  FieldContent,
   FieldDescription,
   FieldError,
-  FieldTitle
+  FieldLabel
 } from '~/components/ui/field'
 import { Input } from '~/components/ui/input'
 import { useSafeActionMutation } from '~/lib/safe-action-client'
-import { toastErrorMessage, toastSuccessMessage } from '~/lib/toast-message'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
 import { emailValidation } from '~/lib/validations'
 
 const schema = z.object({
@@ -33,66 +32,59 @@ export function BillingEmailForm({
   defaultBillingEmail: string | null
 }) {
   const router = useRouter()
-  const { mutateAsync: updateBillingEmail } = useSafeActionMutation(
-    updateBillingEmailAction
-  )
 
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isDirty, isSubmitting }
-  } = useForm<Form>({
+  const form = useForm<Form>({
     resolver: zodResolver(schema),
     defaultValues: { billingEmail: defaultBillingEmail ?? '' }
   })
 
-  async function onSubmit(values: Form) {
-    try {
-      await updateBillingEmail({
-        organizationId: orgId,
-        billingEmail: values.billingEmail
-      })
-      reset({ billingEmail: values.billingEmail })
+  const save = useSafeActionMutation(updateBillingEmailAction, {
+    onSuccess: (_, values) => {
+      form.reset({ billingEmail: values.billingEmail })
       toastSuccessMessage('Billing email updated')
       router.refresh()
-    } catch (error) {
-      toastErrorMessage(
-        error instanceof Error
-          ? error.message
-          : 'Failed to update billing email'
-      )
-    }
-  }
+    },
+    onError: error =>
+      toastActionError(error, 'The billing email was not saved. Try again.')
+  })
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
-      <Field orientation="vertical">
-        <FieldContent>
-          <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
-            Billing email
-          </FieldTitle>
-          <Input
-            type="email"
-            placeholder="billing@company.com"
-            {...register('billingEmail')}
-            aria-invalid={!!errors.billingEmail}
-          />
-          <FieldDescription className="mt-1.5 text-[13px]">
-            Invoices and receipts are sent here. Required before purchasing a
-            plan.
-          </FieldDescription>
-          <FieldError
-            errors={[errors.billingEmail]}
-            className="mt-1.5 text-[13px]"
-          />
-        </FieldContent>
-      </Field>
+    <form
+      onSubmit={form.handleSubmit(values =>
+        save.mutate({ organizationId: orgId, ...values })
+      )}
+      className="flex flex-col gap-6"
+    >
+      <Controller
+        control={form.control}
+        name="billingEmail"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor={field.name}>Billing email</FieldLabel>
+            <Input
+              id={field.name}
+              type="email"
+              placeholder="billing@example.com"
+              aria-invalid={fieldState.invalid}
+              {...field}
+            />
+            <FieldDescription>
+              Required before you choose a paid plan.
+            </FieldDescription>
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
+          </Field>
+        )}
+      />
 
       <div>
-        <Button type="submit" disabled={isSubmitting || !isDirty}>
-          {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          Save billing email
+        <Button
+          type="submit"
+          disabled={save.isPending || !form.formState.isDirty}
+        >
+          {save.isPending && <Loader2 className="animate-spin" />}
+          Save Billing Email
         </Button>
       </div>
     </form>

package/template/saas-starter/src/app/(app)/app/[orgId]/settings/_components/danger-zone.tsx

@@ -3,7 +3,7 @@
 import { Loader2 } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
-import { transferOrganizationOwnershipAction } from '~/app/(app)/actions/organization'
+import { transferOrganizationOwnershipAction } from '~/app/(app)/actions/organizations'
 import { Button } from '~/components/ui/button'
 import {
   Dialog,
@@ -24,8 +24,13 @@ import {
   SelectValue
 } from '~/components/ui/select'
 import { organization } from '~/lib/auth-client'
+import { OWNERSHIP_DEMOTION_NOTICE } from '~/lib/rbac'
 import { useSafeActionMutation } from '~/lib/safe-action-client'
-import { toastErrorMessage, toastSuccessMessage } from '~/lib/toast-message'
+import {
+  toastActionError,
+  toastErrorMessage,
+  toastSuccessMessage
+} from '~/lib/toast-message'
 
 type TransferTarget = {
   memberId: string
@@ -52,18 +57,14 @@ export function DangerZone({
   return (
     <section className="border-destructive/30 space-y-6 rounded-lg border p-6">
       <div>
-        <h2 className="text-destructive text-lg font-semibold">Danger zone</h2>
+        <h2 className="text-destructive text-lg font-semibold">Danger Zone</h2>
         <p className="text-muted-foreground text-sm">
-          These actions are irreversible. Proceed with care.
+          These actions are hard or impossible to undo.
         </p>
       </div>
 
       {isOwner && transferTargets.length > 0 ? (
-        <TransferOwnershipRow
-          orgId={orgId}
-          isOwner={isOwner}
-          transferTargets={transferTargets}
-        />
+        <TransferOwnershipRow orgId={orgId} transferTargets={transferTargets} />
       ) : null}
 
       <LeaveOrganizationRow
@@ -101,11 +102,9 @@ function Row({
 
 function TransferOwnershipRow({
   orgId,
-  isOwner,
   transferTargets
 }: {
   orgId: string
-  isOwner: boolean
   transferTargets: TransferTarget[]
 }) {
   const router = useRouter()
@@ -120,17 +119,12 @@ function TransferOwnershipRow({
         setOpen(false)
         router.refresh()
       },
-      onError: error => {
-        toastErrorMessage(error.message ?? 'Failed to transfer ownership')
-      }
+      onError: error =>
+        toastActionError(error, 'Ownership was not transferred. Try again.')
     }
   )
 
   function handleTransfer() {
-    if (!isOwner) {
-      toastErrorMessage('Only the organization owner can transfer ownership.')
-      return
-    }
     if (!targetId) return
 
     transferOwnership.mutate({
@@ -141,8 +135,8 @@ function TransferOwnershipRow({
 
   return (
     <Row
-      title="Transfer ownership"
-      description="Make another member the owner. You'll become an admin."
+      title="Transfer Ownership"
+      description="Make another member the owner. You become an admin."
     >
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>
@@ -150,17 +144,14 @@ function TransferOwnershipRow({
         </DialogTrigger>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>Transfer ownership</DialogTitle>
-            <DialogDescription>
-              Select the member who should become the new owner. You&apos;ll be
-              demoted to admin.
-            </DialogDescription>
+            <DialogTitle>Transfer Ownership</DialogTitle>
+            <DialogDescription>{OWNERSHIP_DEMOTION_NOTICE}</DialogDescription>
           </DialogHeader>
 
           <div className="space-y-2 py-1">
-            <Label>New owner</Label>
+            <Label htmlFor="new-owner">New owner</Label>
             <Select value={targetId} onValueChange={setTargetId}>
-              <SelectTrigger className="w-full">
+              <SelectTrigger id="new-owner" className="w-full">
                 <SelectValue placeholder="Select a member" />
               </SelectTrigger>
               <SelectContent>
@@ -186,9 +177,9 @@ function TransferOwnershipRow({
               disabled={transferOwnership.isPending || !targetId}
             >
               {transferOwnership.isPending && (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                <Loader2 className="animate-spin" />
               )}
-              Transfer ownership
+              Transfer Ownership
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -214,7 +205,7 @@ function LeaveOrganizationRow({
     // Guard: the only owner must transfer ownership before leaving.
     if (isSoleOwner) {
       toastErrorMessage(
-        'Transfer ownership to another member before leaving this organization.'
+        'Transfer ownership to another member before you leave this organization.'
       )
       return
     }
@@ -223,18 +214,20 @@ function LeaveOrganizationRow({
     const { error } = await organization.leave({ organizationId: orgId })
 
     if (error) {
-      toastErrorMessage(error.message ?? 'Failed to leave organization')
+      toastActionError(error, 'You are still a member. Try again.')
       setSubmitting(false)
       return
     }
 
     toastSuccessMessage(`You left ${orgName}`)
     router.push('/app')
+    // Re-render the app layout so the sidebar drops the organization.
+    router.refresh()
   }
 
   return (
     <Row
-      title="Leave organization"
+      title="Leave Organization"
       description="Remove yourself from this organization."
     >
       <Dialog open={open} onOpenChange={setOpen}>
@@ -244,12 +237,12 @@ function LeaveOrganizationRow({
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>
-              {isSoleOwner ? 'Transfer ownership first' : `Leave ${orgName}?`}
+              {isSoleOwner ? 'Transfer Ownership First' : `Leave ${orgName}`}
             </DialogTitle>
             <DialogDescription>
               {isSoleOwner
-                ? "You're the only owner of this organization. Make another member the owner before you leave - or delete the organization instead."
-                : "You'll lose access to this organization. An owner or admin will need to invite you back."}
+                ? "You're the only owner. Make another member the owner before you leave, or delete the organization instead."
+                : 'You lose access to this organization. An owner or admin must invite you to return.'}
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
@@ -266,10 +259,8 @@ function LeaveOrganizationRow({
                 onClick={handleLeave}
                 disabled={submitting}
               >
-                {submitting && (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                )}
-                Leave organization
+                {submitting && <Loader2 className="animate-spin" />}
+                Leave Organization
               </Button>
             ) : null}
           </DialogFooter>
@@ -296,18 +287,19 @@ function DeleteOrganizationRow({
     const { error } = await organization.delete({ organizationId: orgId })
 
     if (error) {
-      toastErrorMessage(error.message ?? 'Failed to delete organization')
+      toastActionError(error, 'The organization was not deleted. Try again.')
       setSubmitting(false)
       return
     }
 
     toastSuccessMessage(`${orgName} deleted`)
     router.push('/app')
+    router.refresh()
   }
 
   return (
     <Row
-      title="Delete organization"
+      title="Delete Organization"
       description="Permanently delete this organization and all of its data."
     >
       <Dialog
@@ -322,18 +314,19 @@ function DeleteOrganizationRow({
         </DialogTrigger>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>Delete {orgName}?</DialogTitle>
+            <DialogTitle>Delete {orgName}</DialogTitle>
             <DialogDescription>
-              This cannot be undone. All members, invitations and data for this
-              organization will be permanently removed.
+              This permanently removes every member, invitation, and file, and
+              cancels the subscription. You cannot undo it.
             </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-2 py-1">
-            <Label>
+            <Label htmlFor="confirm-delete">
               Type <span className="font-semibold">{orgName}</span> to confirm
             </Label>
             <Input
+              id="confirm-delete"
               value={confirmText}
               onChange={e => setConfirmText(e.target.value)}
               placeholder={orgName}
@@ -353,8 +346,8 @@ function DeleteOrganizationRow({
               onClick={handleDelete}
               disabled={submitting || confirmText !== orgName}
             >
-              {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              Delete organization
+              {submitting && <Loader2 className="animate-spin" />}
+              Delete Organization
             </Button>
           </DialogFooter>
         </DialogContent>