create-ej-app 25.0.0 → 27.0.0

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

@@ -0,0 +1,17 @@
+'use client'
+
+import { LayoutGrid } from 'lucide-react'
+import { PageHeading } from '~/components/page-heading'
+import { useOrganizationContext } from '../../_components/organization-context'
+
+export default function DashboardPage() {
+  const org = useOrganizationContext()
+
+  return (
+    <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

@@ -0,0 +1,31 @@
+import { notFound } from 'next/navigation'
+import { getOrganizationCached } from '../../actions/organizations'
+import { OrganizationContextProvider } from '../_components/organization-context'
+
+export default async function OrganizationLayout({
+  children,
+  params
+}: {
+  children: React.ReactNode
+  params: Promise<{ orgId: string }>
+}) {
+  const { orgId } = await params
+  const org = (await getOrganizationCached(orgId))?.data
+
+  if (!org) {
+    return notFound()
+  }
+
+  return (
+    <OrganizationContextProvider
+      value={{
+        id: org.id,
+        name: org.name,
+        role: org.role,
+        memberId: org.memberId
+      }}
+    >
+      {children}
+    </OrganizationContextProvider>
+  )
+}

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

@@ -0,0 +1,92 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Loader2 } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+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,
+  FieldDescription,
+  FieldError,
+  FieldLabel
+} from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import { useSafeActionMutation } from '~/lib/safe-action-client'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+import { emailValidation } from '~/lib/validations'
+
+const schema = z.object({
+  billingEmail: emailValidation
+})
+
+type Form = z.infer<typeof schema>
+
+export function BillingEmailForm({
+  orgId,
+  defaultBillingEmail
+}: {
+  orgId: string
+  defaultBillingEmail: string | null
+}) {
+  const router = useRouter()
+
+  const form = useForm<Form>({
+    resolver: zodResolver(schema),
+    defaultValues: { billingEmail: defaultBillingEmail ?? '' }
+  })
+
+  const save = useSafeActionMutation(updateBillingEmailAction, {
+    onSuccess: (_, values) => {
+      form.reset({ billingEmail: values.billingEmail })
+      toastSuccessMessage('Billing email updated')
+      router.refresh()
+    },
+    onError: error =>
+      toastActionError(error, 'The billing email was not saved. Try again.')
+  })
+
+  return (
+    <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={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

@@ -0,0 +1,357 @@
+'use client'
+
+import { Loader2 } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { transferOrganizationOwnershipAction } from '~/app/(app)/actions/organizations'
+import { Button } from '~/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '~/components/ui/dialog'
+import { Input } from '~/components/ui/input'
+import { Label } from '~/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  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 {
+  toastActionError,
+  toastErrorMessage,
+  toastSuccessMessage
+} from '~/lib/toast-message'
+
+type TransferTarget = {
+  memberId: string
+  name: string
+  email: string
+  role: string
+}
+
+export function DangerZone({
+  orgId,
+  orgName,
+  isOwner,
+  transferTargets
+}: {
+  orgId: string
+  orgName: string
+  isOwner: boolean
+  transferTargets: TransferTarget[]
+}) {
+  // The sole owner can't leave: ownership must first be handed to someone else.
+  const isSoleOwner =
+    isOwner && !transferTargets.some(target => target.role === 'owner')
+
+  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>
+        <p className="text-muted-foreground text-sm">
+          These actions are hard or impossible to undo.
+        </p>
+      </div>
+
+      {isOwner && transferTargets.length > 0 ? (
+        <TransferOwnershipRow orgId={orgId} transferTargets={transferTargets} />
+      ) : null}
+
+      <LeaveOrganizationRow
+        orgId={orgId}
+        orgName={orgName}
+        isSoleOwner={isSoleOwner}
+      />
+
+      {isOwner ? (
+        <DeleteOrganizationRow orgId={orgId} orgName={orgName} />
+      ) : null}
+    </section>
+  )
+}
+
+function Row({
+  title,
+  description,
+  children
+}: {
+  title: string
+  description: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="flex flex-col gap-3 border-t pt-6 sm:flex-row sm:items-center sm:justify-between">
+      <div className="space-y-0.5">
+        <p className="text-sm font-medium">{title}</p>
+        <p className="text-muted-foreground text-sm">{description}</p>
+      </div>
+      <div className="shrink-0">{children}</div>
+    </div>
+  )
+}
+
+function TransferOwnershipRow({
+  orgId,
+  transferTargets
+}: {
+  orgId: string
+  transferTargets: TransferTarget[]
+}) {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [targetId, setTargetId] = useState('')
+
+  const transferOwnership = useSafeActionMutation(
+    transferOrganizationOwnershipAction,
+    {
+      onSuccess: () => {
+        toastSuccessMessage('Ownership transferred')
+        setOpen(false)
+        router.refresh()
+      },
+      onError: error =>
+        toastActionError(error, 'Ownership was not transferred. Try again.')
+    }
+  )
+
+  function handleTransfer() {
+    if (!targetId) return
+
+    transferOwnership.mutate({
+      organizationId: orgId,
+      targetMemberId: targetId
+    })
+  }
+
+  return (
+    <Row
+      title="Transfer Ownership"
+      description="Make another member the owner. You become an admin."
+    >
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button variant="outline">Transfer</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Transfer Ownership</DialogTitle>
+            <DialogDescription>{OWNERSHIP_DEMOTION_NOTICE}</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-2 py-1">
+            <Label htmlFor="new-owner">New owner</Label>
+            <Select value={targetId} onValueChange={setTargetId}>
+              <SelectTrigger id="new-owner" className="w-full">
+                <SelectValue placeholder="Select a member" />
+              </SelectTrigger>
+              <SelectContent>
+                {transferTargets.map(target => (
+                  <SelectItem key={target.memberId} value={target.memberId}>
+                    {target.name} ({target.email})
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={transferOwnership.isPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleTransfer}
+              disabled={transferOwnership.isPending || !targetId}
+            >
+              {transferOwnership.isPending && (
+                <Loader2 className="animate-spin" />
+              )}
+              Transfer Ownership
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Row>
+  )
+}
+
+function LeaveOrganizationRow({
+  orgId,
+  orgName,
+  isSoleOwner
+}: {
+  orgId: string
+  orgName: string
+  isSoleOwner: boolean
+}) {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+
+  async function handleLeave() {
+    // Guard: the only owner must transfer ownership before leaving.
+    if (isSoleOwner) {
+      toastErrorMessage(
+        'Transfer ownership to another member before you leave this organization.'
+      )
+      return
+    }
+
+    setSubmitting(true)
+    const { error } = await organization.leave({ organizationId: orgId })
+
+    if (error) {
+      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"
+      description="Remove yourself from this organization."
+    >
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button variant="outline">Leave</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {isSoleOwner ? 'Transfer Ownership First' : `Leave ${orgName}`}
+            </DialogTitle>
+            <DialogDescription>
+              {isSoleOwner
+                ? "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>
+            <Button
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={submitting}
+            >
+              {isSoleOwner ? 'Close' : 'Cancel'}
+            </Button>
+            {!isSoleOwner ? (
+              <Button
+                variant="destructive"
+                onClick={handleLeave}
+                disabled={submitting}
+              >
+                {submitting && <Loader2 className="animate-spin" />}
+                Leave Organization
+              </Button>
+            ) : null}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Row>
+  )
+}
+
+function DeleteOrganizationRow({
+  orgId,
+  orgName
+}: {
+  orgId: string
+  orgName: string
+}) {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [confirmText, setConfirmText] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  async function handleDelete() {
+    setSubmitting(true)
+    const { error } = await organization.delete({ organizationId: orgId })
+
+    if (error) {
+      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"
+      description="Permanently delete this organization and all of its data."
+    >
+      <Dialog
+        open={open}
+        onOpenChange={next => {
+          setOpen(next)
+          if (!next) setConfirmText('')
+        }}
+      >
+        <DialogTrigger asChild>
+          <Button variant="destructive">Delete</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Delete {orgName}</DialogTitle>
+            <DialogDescription>
+              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 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}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={submitting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={submitting || confirmText !== orgName}
+            >
+              {submitting && <Loader2 className="animate-spin" />}
+              Delete Organization
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Row>
+  )
+}

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

@@ -0,0 +1,130 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Loader2 } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { updateOrganizationAction } from '~/app/(app)/actions/organizations'
+import { organizationDetailsSchema } from '~/app/(app)/actions/organizations.validation'
+import { FileUpload } from '~/components/file-upload'
+import { Button } from '~/components/ui/button'
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel
+} from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import { useSafeActionMutation } from '~/lib/safe-action-client'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+
+type Form = z.infer<typeof organizationDetailsSchema>
+
+export function GeneralSettingsForm({
+  orgId,
+  defaultName,
+  defaultSlug,
+  currentLogoKey,
+  currentLogoUrl
+}: {
+  orgId: string
+  defaultName: string
+  defaultSlug: string
+  /** Stored logo value, sent back unchanged when you keep the logo. */
+  currentLogoKey: string | null
+  /** Renderable URL for the stored logo, from `resolveImageUrl`. */
+  currentLogoUrl: string | null
+}) {
+  const router = useRouter()
+  const [logo, setLogo] = useState<string | null>(currentLogoKey)
+
+  const form = useForm<Form>({
+    resolver: zodResolver(organizationDetailsSchema),
+    defaultValues: { name: defaultName, slug: defaultSlug }
+  })
+
+  const save = useSafeActionMutation(updateOrganizationAction, {
+    onSuccess: (_, values) => {
+      toastSuccessMessage('Organization updated')
+      form.reset({ name: values.name, slug: values.slug })
+      router.refresh()
+    },
+    onError: error =>
+      toastActionError(error, 'Your changes were not saved. Try again.')
+  })
+
+  const logoChanged = logo !== currentLogoKey
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(values =>
+        save.mutate({ ...values, organizationId: orgId, logo: logo ?? '' })
+      )}
+      className="flex flex-col gap-6"
+    >
+      <Controller
+        control={form.control}
+        name="name"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor={field.name}>Organization name</FieldLabel>
+            <Input
+              id={field.name}
+              aria-invalid={fieldState.invalid}
+              {...field}
+            />
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
+          </Field>
+        )}
+      />
+
+      <Controller
+        control={form.control}
+        name="slug"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor={field.name}>Slug</FieldLabel>
+            <Input
+              id={field.name}
+              aria-invalid={fieldState.invalid}
+              {...field}
+            />
+            <FieldDescription>
+              Identifies the organization in links.
+            </FieldDescription>
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
+          </Field>
+        )}
+      />
+
+      <Field>
+        <FieldLabel>Logo</FieldLabel>
+        <div className="w-32">
+          <FileUpload
+            organizationId={orgId}
+            accept="image/*"
+            onClientUploadFinish={setLogo}
+            currentUrl={currentLogoUrl}
+            sizes="128px"
+          />
+        </div>
+      </Field>
+
+      <div>
+        <Button
+          type="submit"
+          disabled={save.isPending || (!form.formState.isDirty && !logoChanged)}
+        >
+          {save.isPending && <Loader2 className="animate-spin" />}
+          Save Changes
+        </Button>
+      </div>
+    </form>
+  )
+}