+ {type ? headings[type] : 'Invalid Verification Type'}
+
+
+
+
+
+
+
+
+
+ + {error.status} {error.data} +
+ ), + statusHandlers, + unexpectedErrorHandler = (error) =>{getErrorMessage(error)}
, +}: { + defaultStatusHandler?: StatusHandler + statusHandlers?: Record
+ {isResponse
+ ? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
+ error,
+ params,
+ })
+ : unexpectedErrorHandler(error)}
+
+ )
+}
diff --git a/demo/the-epic-stack/app/components/floating-toolbar.tsx b/demo/the-epic-stack/app/components/floating-toolbar.tsx
new file mode 100644
index 000000000..5e0e82364
--- /dev/null
+++ b/demo/the-epic-stack/app/components/floating-toolbar.tsx
@@ -0,0 +1,2 @@
+export const floatingToolbarClassName =
+ 'absolute bottom-3 inset-x-3 flex items-center gap-2 rounded-lg bg-muted/80 p-4 pl-5 shadow-xl shadow-accent backdrop-blur-xs md:gap-4 md:pl-7 justify-end'
diff --git a/demo/the-epic-stack/app/components/forms.tsx b/demo/the-epic-stack/app/components/forms.tsx
new file mode 100644
index 000000000..abaabf7ef
--- /dev/null
+++ b/demo/the-epic-stack/app/components/forms.tsx
@@ -0,0 +1,202 @@
+import { useInputControl } from '@conform-to/react'
+import { REGEXP_ONLY_DIGITS_AND_CHARS, type OTPInputProps } from 'input-otp'
+import React, { useId } from 'react'
+import { Checkbox, type CheckboxProps } from './ui/checkbox.tsx'
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSeparator,
+ InputOTPSlot,
+} from './ui/input-otp.tsx'
+import { Input } from './ui/input.tsx'
+import { Label } from './ui/label.tsx'
+import { Textarea } from './ui/textarea.tsx'
+
+export type ListOfErrors = Array-
+ {errorsToRender.map((e) => (
+
- + {e} + + ))} +
+
+
+
+ )
+}
+
+export function OTPField({
+ labelProps,
+ inputProps,
+ errors,
+ className,
+}: {
+ labelProps: React.LabelHTMLAttributes
+ {errorId ?
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export function TextareaField({
+ labelProps,
+ textareaProps,
+ errors,
+ className,
+}: {
+ labelProps: React.LabelHTMLAttributes
+ {errorId ?
+
+
+
+
+ )
+}
+
+export function CheckboxField({
+ labelProps,
+ buttonProps,
+ errors,
+ className,
+}: {
+ labelProps: React.ComponentProps<'label'>
+ buttonProps: CheckboxProps & {
+ name: string
+ form: string
+ value?: string
+ }
+ errors?: ListOfErrors
+ className?: string
+}) {
+ const { key, defaultChecked, ...checkboxProps } = buttonProps
+ const fallbackId = useId()
+ const checkedValue = buttonProps.value ?? 'on'
+ const input = useInputControl({
+ key,
+ name: buttonProps.name,
+ formId: buttonProps.form,
+ initialValue: defaultChecked ? checkedValue : undefined,
+ })
+ const id = buttonProps.id ?? fallbackId
+ const errorId = errors?.length ? `${id}-error` : undefined
+
+ return (
+
+ {errorId ?
+
+
+ )
+}
diff --git a/demo/the-epic-stack/app/components/progress-bar.tsx b/demo/the-epic-stack/app/components/progress-bar.tsx
new file mode 100644
index 000000000..f99a6986a
--- /dev/null
+++ b/demo/the-epic-stack/app/components/progress-bar.tsx
@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from 'react'
+import { useNavigation } from 'react-router'
+import { useSpinDelay } from 'spin-delay'
+import { cn } from '#app/utils/misc.tsx'
+import { Icon } from './ui/icon.tsx'
+
+function EpicProgress() {
+ const transition = useNavigation()
+ const busy = transition.state !== 'idle'
+ const delayedPending = useSpinDelay(busy, {
+ delay: 600,
+ minDuration: 400,
+ })
+ const ref = useRef
+ {
+ input.change(state.valueOf() ? checkedValue : '')
+ buttonProps.onCheckedChange?.(state)
+ }}
+ onFocus={(event) => {
+ input.focus()
+ buttonProps.onFocus?.(event)
+ }}
+ onBlur={(event) => {
+ input.blur()
+ buttonProps.onBlur?.(event)
+ }}
+ type="button"
+ />
+
+
+
+ {errorId ?
+
+
+ {delayedPending && (
+
+ )
+}
+
+export { EpicProgress }
diff --git a/demo/the-epic-stack/app/components/search-bar.tsx b/demo/the-epic-stack/app/components/search-bar.tsx
new file mode 100644
index 000000000..db7af73f0
--- /dev/null
+++ b/demo/the-epic-stack/app/components/search-bar.tsx
@@ -0,0 +1,63 @@
+import { useId } from 'react'
+import { Form, useSearchParams, useSubmit } from 'react-router'
+import { useDebounce, useIsPending } from '#app/utils/misc.tsx'
+import { Icon } from './ui/icon.tsx'
+import { Input } from './ui/input.tsx'
+import { Label } from './ui/label.tsx'
+import { StatusButton } from './ui/status-button.tsx'
+
+export function SearchBar({
+ status,
+ autoFocus = false,
+ autoSubmit = false,
+}: {
+ status: 'idle' | 'pending' | 'success' | 'error'
+ autoFocus?: boolean
+ autoSubmit?: boolean
+}) {
+ const id = useId()
+ const [searchParams] = useSearchParams()
+ const submit = useSubmit()
+ const isSubmitting = useIsPending({
+ formMethod: 'GET',
+ formAction: '/users',
+ })
+
+ const handleFormChange = useDebounce(async (form: HTMLFormElement) => {
+ await submit(form)
+ }, 400)
+
+ return (
+
+ )
+}
diff --git a/demo/the-epic-stack/app/components/spacer.tsx b/demo/the-epic-stack/app/components/spacer.tsx
new file mode 100644
index 000000000..8a8e5372d
--- /dev/null
+++ b/demo/the-epic-stack/app/components/spacer.tsx
@@ -0,0 +1,57 @@
+export function Spacer({
+ size,
+}: {
+ /**
+ * The size of the space
+ *
+ * 4xs: h-4 (16px)
+ *
+ * 3xs: h-8 (32px)
+ *
+ * 2xs: h-12 (48px)
+ *
+ * xs: h-16 (64px)
+ *
+ * sm: h-20 (80px)
+ *
+ * md: h-24 (96px)
+ *
+ * lg: h-28 (112px)
+ *
+ * xl: h-32 (128px)
+ *
+ * 2xl: h-36 (144px)
+ *
+ * 3xl: h-40 (160px)
+ *
+ * 4xl: h-44 (176px)
+ */
+ size:
+ | '4xs'
+ | '3xs'
+ | '2xs'
+ | 'xs'
+ | 'sm'
+ | 'md'
+ | 'lg'
+ | 'xl'
+ | '2xl'
+ | '3xl'
+ | '4xl'
+}) {
+ const options: Record
+
+ )}
+
+ {char}
+ {hasFakeCaret && (
+
+ )
+}
+
+const InputOTPSeparator = (props: React.ComponentProps<'div'>) => (
+
+)
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/demo/the-epic-stack/app/components/ui/input.tsx b/demo/the-epic-stack/app/components/ui/input.tsx
new file mode 100644
index 000000000..0396829d5
--- /dev/null
+++ b/demo/the-epic-stack/app/components/ui/input.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+import { cn } from '#app/utils/misc.tsx'
+
+const Input = ({
+ className,
+ type,
+ ...props
+}: React.ComponentProps<'input'>) => {
+ return (
+
+ )
+}
+
+export { Input }
diff --git a/demo/the-epic-stack/app/components/ui/label.tsx b/demo/the-epic-stack/app/components/ui/label.tsx
new file mode 100644
index 000000000..1669cf84f
--- /dev/null
+++ b/demo/the-epic-stack/app/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '#app/utils/misc.tsx'
+
+const labelVariants = cva(
+ 'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+)
+
+const Label = ({
+ className,
+ ...props
+}: React.ComponentProps
+
+
+ )}
+
+
+ ) : null,
+ success: (
+
+
+ ),
+ error: (
+
+
+ ),
+ idle: null,
+ }[status]
+
+ return (
+
+ )
+}
+StatusButton.displayName = 'Button'
diff --git a/demo/the-epic-stack/app/components/ui/textarea.tsx b/demo/the-epic-stack/app/components/ui/textarea.tsx
new file mode 100644
index 000000000..0acaa96c1
--- /dev/null
+++ b/demo/the-epic-stack/app/components/ui/textarea.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+import { cn } from '#app/utils/misc.tsx'
+
+const Textarea = ({
+ className,
+ ...props
+}: React.ComponentProps<'textarea'>) => {
+ return (
+
+ )
+}
+
+export { Textarea }
diff --git a/demo/the-epic-stack/app/components/ui/tooltip.tsx b/demo/the-epic-stack/app/components/ui/tooltip.tsx
new file mode 100644
index 000000000..0b6510aa6
--- /dev/null
+++ b/demo/the-epic-stack/app/components/ui/tooltip.tsx
@@ -0,0 +1,42 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import * as React from 'react'
+
+import { cn } from '#app/utils/misc.tsx'
+
+function TooltipProvider(
+ props: React.ComponentProps
+
+
+
+
+
+
+
+
+
+
+
+ Back to home
+
+
+ ),
+ }}
+ />
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/_auth+/auth.$provider.callback.test.ts b/demo/the-epic-stack/app/routes/_auth+/auth.$provider.callback.test.ts
new file mode 100644
index 000000000..643e4534c
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_auth+/auth.$provider.callback.test.ts
@@ -0,0 +1,265 @@
+import { invariant } from '@epic-web/invariant'
+import { faker } from '@faker-js/faker'
+import { SetCookie } from '@mjackson/headers'
+import { http } from 'msw'
+import { afterEach, expect, test } from 'vitest'
+import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'
+import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'
+import { GITHUB_PROVIDER_NAME } from '#app/utils/connections.tsx'
+import { prisma } from '#app/utils/db.server.ts'
+import { authSessionStorage } from '#app/utils/session.server.ts'
+import { generateTOTP } from '#app/utils/totp.server.ts'
+import { createUser } from '#tests/db-utils.ts'
+import { insertGitHubUser, deleteGitHubUsers } from '#tests/mocks/github.ts'
+import { server } from '#tests/mocks/index.ts'
+import { consoleError } from '#tests/setup/setup-test-env.ts'
+import { BASE_URL, convertSetCookieToCookie } from '#tests/utils.ts'
+import { loader } from './auth.$provider.callback.ts'
+
+const ROUTE_PATH = '/auth/github/callback'
+const PARAMS = { provider: 'github' }
+
+afterEach(async () => {
+ await deleteGitHubUsers()
+})
+
+test('a new user goes to onboarding', async () => {
+ const request = await setupRequest()
+ const response = await loader({ request, params: PARAMS, context: {} }).catch(
+ (e) => e,
+ )
+ expect(response).toHaveRedirect('/onboarding/github')
+})
+
+test('when auth fails, send the user to login with a toast', async () => {
+ consoleError.mockImplementation(() => {})
+ server.use(
+ http.post('https://github.com/login/oauth/access_token', async () => {
+ return new Response(null, { status: 400 })
+ }),
+ )
+ const request = await setupRequest()
+ const response = await loader({ request, params: PARAMS, context: {} }).catch(
+ (e) => e,
+ )
+ invariant(response instanceof Response, 'response should be a Response')
+ expect(response).toHaveRedirect('/login')
+ await expect(response).toSendToast(
+ expect.objectContaining({
+ title: 'Auth Failed',
+ type: 'error',
+ }),
+ )
+ expect(consoleError).toHaveBeenCalledTimes(1)
+})
+
+test('when a user is logged in, it creates the connection', async () => {
+ const githubUser = await insertGitHubUser()
+ const session = await setupUser()
+ const request = await setupRequest({
+ sessionId: session.id,
+ code: githubUser.code,
+ })
+ const response = await loader({ request, params: PARAMS, context: {} })
+ expect(response).toHaveRedirect('/settings/profile/connections')
+ await expect(response).toSendToast(
+ expect.objectContaining({
+ title: 'Connected',
+ type: 'success',
+ description: expect.stringContaining(githubUser.profile.login),
+ }),
+ )
+ const connection = await prisma.connection.findFirst({
+ select: { id: true },
+ where: {
+ userId: session.userId,
+ providerId: githubUser.profile.id.toString(),
+ },
+ })
+ expect(
+ connection,
+ 'the connection was not created in the database',
+ ).toBeTruthy()
+})
+
+test(`when a user is logged in and has already connected, it doesn't do anything and just redirects the user back to the connections page`, async () => {
+ const session = await setupUser()
+ const githubUser = await insertGitHubUser()
+ await prisma.connection.create({
+ data: {
+ providerName: GITHUB_PROVIDER_NAME,
+ userId: session.userId,
+ providerId: githubUser.profile.id.toString(),
+ },
+ })
+ const request = await setupRequest({
+ sessionId: session.id,
+ code: githubUser.code,
+ })
+ const response = await loader({ request, params: PARAMS, context: {} })
+ expect(response).toHaveRedirect('/settings/profile/connections')
+ await expect(response).toSendToast(
+ expect.objectContaining({
+ title: 'Already Connected',
+ description: expect.stringContaining(githubUser.profile.login),
+ }),
+ )
+})
+
+test('when a user exists with the same email, create connection and make session', async () => {
+ const githubUser = await insertGitHubUser()
+ const email = githubUser.primaryEmail.toLowerCase()
+ const { userId } = await setupUser({ ...createUser(), email })
+ const request = await setupRequest({ code: githubUser.code })
+ const response = await loader({ request, params: PARAMS, context: {} })
+
+ expect(response).toHaveRedirect('/')
+
+ await expect(response).toSendToast(
+ expect.objectContaining({
+ type: 'message',
+ description: expect.stringContaining(githubUser.profile.login),
+ }),
+ )
+
+ const connection = await prisma.connection.findFirst({
+ select: { id: true },
+ where: {
+ userId: userId,
+ providerId: githubUser.profile.id.toString(),
+ },
+ })
+ expect(
+ connection,
+ 'the connection was not created in the database',
+ ).toBeTruthy()
+
+ await expect(response).toHaveSessionForUser(userId)
+})
+
+test('gives an error if the account is already connected to another user', async () => {
+ const githubUser = await insertGitHubUser()
+ await prisma.user.create({
+ data: {
+ ...createUser(),
+ connections: {
+ create: {
+ providerName: GITHUB_PROVIDER_NAME,
+ providerId: githubUser.profile.id.toString(),
+ },
+ },
+ },
+ })
+ const session = await setupUser()
+ const request = await setupRequest({
+ sessionId: session.id,
+ code: githubUser.code,
+ })
+ const response = await loader({ request, params: PARAMS, context: {} })
+ expect(response).toHaveRedirect('/settings/profile/connections')
+ await expect(response).toSendToast(
+ expect.objectContaining({
+ title: 'Already Connected',
+ description: expect.stringContaining(
+ 'already connected to another account',
+ ),
+ }),
+ )
+})
+
+test('if a user is not logged in, but the connection exists, make a session', async () => {
+ const githubUser = await insertGitHubUser()
+ const { userId } = await setupUser()
+ await prisma.connection.create({
+ data: {
+ providerName: GITHUB_PROVIDER_NAME,
+ providerId: githubUser.profile.id.toString(),
+ userId,
+ },
+ })
+ const request = await setupRequest({ code: githubUser.code })
+ const response = await loader({ request, params: PARAMS, context: {} })
+ expect(response).toHaveRedirect('/')
+ await expect(response).toHaveSessionForUser(userId)
+})
+
+test('if a user is not logged in, but the connection exists and they have enabled 2FA, send them to verify their 2FA and do not make a session', async () => {
+ const githubUser = await insertGitHubUser()
+ const { userId } = await setupUser()
+ await prisma.connection.create({
+ data: {
+ providerName: GITHUB_PROVIDER_NAME,
+ providerId: githubUser.profile.id.toString(),
+ userId,
+ },
+ })
+ const { otp: _otp, ...config } = await generateTOTP()
+ await prisma.verification.create({
+ data: {
+ type: twoFAVerificationType,
+ target: userId,
+ ...config,
+ },
+ })
+ const request = await setupRequest({ code: githubUser.code })
+ const response = await loader({ request, params: PARAMS, context: {} })
+ const searchParams = new URLSearchParams({
+ type: twoFAVerificationType,
+ target: userId,
+ redirectTo: '/',
+ })
+ expect(response).toHaveRedirect(`/verify?${searchParams}`)
+})
+
+async function setupRequest({
+ sessionId,
+ code = faker.string.uuid(),
+}: { sessionId?: string; code?: string } = {}) {
+ const url = new URL(ROUTE_PATH, BASE_URL)
+ const state = faker.string.uuid()
+ url.searchParams.set('state', state)
+ url.searchParams.set('code', code)
+ const authSession = await authSessionStorage.getSession()
+ if (sessionId) authSession.set(sessionKey, sessionId)
+ const setSessionCookieHeader =
+ await authSessionStorage.commitSession(authSession)
+ const searchParams = new URLSearchParams({ code, state })
+ let authCookie = new SetCookie({
+ name: 'github',
+ value: searchParams.toString(),
+ path: '/',
+ sameSite: 'Lax',
+ httpOnly: true,
+ maxAge: 60 * 10,
+ secure: process.env.NODE_ENV === 'production' || undefined,
+ })
+ const request = new Request(url.toString(), {
+ method: 'GET',
+ headers: {
+ cookie: [
+ authCookie.toString(),
+ convertSetCookieToCookie(setSessionCookieHeader),
+ ].join('; '),
+ },
+ })
+ return request
+}
+
+async function setupUser(userData = createUser()) {
+ const session = await prisma.session.create({
+ data: {
+ expirationDate: getSessionExpirationDate(),
+ user: {
+ create: {
+ ...userData,
+ },
+ },
+ },
+ select: {
+ id: true,
+ userId: true,
+ },
+ })
+
+ return session
+}
diff --git a/demo/the-epic-stack/app/routes/_auth+/auth.$provider.callback.ts b/demo/the-epic-stack/app/routes/_auth+/auth.$provider.callback.ts
new file mode 100644
index 000000000..cc124ac85
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_auth+/auth.$provider.callback.ts
@@ -0,0 +1,200 @@
+import { redirect } from 'react-router'
+import {
+ authenticator,
+ getSessionExpirationDate,
+ getUserId,
+} from '#app/utils/auth.server.ts'
+import { ProviderNameSchema, providerLabels } from '#app/utils/connections.tsx'
+import { prisma } from '#app/utils/db.server.ts'
+import { ensurePrimary } from '#app/utils/litefs.server.ts'
+import { combineHeaders } from '#app/utils/misc.tsx'
+import {
+ normalizeEmail,
+ normalizeUsername,
+} from '#app/utils/providers/provider.ts'
+import {
+ destroyRedirectToHeader,
+ getRedirectCookieValue,
+} from '#app/utils/redirect-cookie.server.ts'
+import {
+ createToastHeaders,
+ redirectWithToast,
+} from '#app/utils/toast.server.ts'
+import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { type Route } from './+types/auth.$provider.callback.ts'
+import { handleNewSession } from './login.server.ts'
+import { onboardingEmailSessionKey } from './onboarding.tsx'
+import { prefilledProfileKey, providerIdKey } from './onboarding_.$provider.tsx'
+
+const destroyRedirectTo = { 'set-cookie': destroyRedirectToHeader }
+
+export async function loader({ request, params }: Route.LoaderArgs) {
+ // this loader performs mutations, so we need to make sure we're on the
+ // primary instance to avoid writing to a read-only replica
+ await ensurePrimary()
+
+ const providerName = ProviderNameSchema.parse(params.provider)
+ const redirectTo = getRedirectCookieValue(request)
+ const label = providerLabels[providerName]
+
+ const authResult = await authenticator
+ .authenticate(providerName, request)
+ .then(
+ (data) =>
+ ({
+ success: true,
+ data,
+ }) as const,
+ (error) =>
+ ({
+ success: false,
+ error,
+ }) as const,
+ )
+
+ if (!authResult.success) {
+ console.error(authResult.error)
+ throw await redirectWithToast(
+ '/login',
+ {
+ title: 'Auth Failed',
+ description: `There was an error authenticating with ${label}.`,
+ type: 'error',
+ },
+ { headers: destroyRedirectTo },
+ )
+ }
+
+ const { data: profile } = authResult
+
+ const existingConnection = await prisma.connection.findUnique({
+ select: { userId: true },
+ where: {
+ providerName_providerId: {
+ providerName,
+ providerId: String(profile.id),
+ },
+ },
+ })
+
+ const userId = await getUserId(request)
+
+ if (existingConnection && userId) {
+ if (existingConnection.userId === userId) {
+ return redirectWithToast(
+ '/settings/profile/connections',
+ {
+ title: 'Already Connected',
+ description: `Your "${profile.username}" ${label} account is already connected.`,
+ },
+ { headers: destroyRedirectTo },
+ )
+ } else {
+ return redirectWithToast(
+ '/settings/profile/connections',
+ {
+ title: 'Already Connected',
+ description: `The "${profile.username}" ${label} account is already connected to another account.`,
+ },
+ { headers: destroyRedirectTo },
+ )
+ }
+ }
+
+ // If we're already logged in, then link the account
+ if (userId) {
+ await prisma.connection.create({
+ data: {
+ providerName,
+ providerId: String(profile.id),
+ userId,
+ },
+ })
+ return redirectWithToast(
+ '/settings/profile/connections',
+ {
+ title: 'Connected',
+ type: 'success',
+ description: `Your "${profile.username}" ${label} account has been connected.`,
+ },
+ { headers: destroyRedirectTo },
+ )
+ }
+
+ // Connection exists already? Make a new session
+ if (existingConnection) {
+ return makeSession({ request, userId: existingConnection.userId })
+ }
+
+ // if the email matches a user in the db, then link the account and
+ // make a new session
+ const user = await prisma.user.findUnique({
+ select: { id: true },
+ where: { email: profile.email.toLowerCase() },
+ })
+ if (user) {
+ await prisma.connection.create({
+ data: {
+ providerName,
+ providerId: String(profile.id),
+ userId: user.id,
+ },
+ })
+ return makeSession(
+ { request, userId: user.id },
+ {
+ headers: await createToastHeaders({
+ title: 'Connected',
+ description: `Your "${profile.username}" ${label} account has been connected.`,
+ }),
+ },
+ )
+ }
+
+ // this is a new user, so let's get them onboarded
+ const verifySession = await verifySessionStorage.getSession()
+ verifySession.set(onboardingEmailSessionKey, profile.email)
+ verifySession.set(prefilledProfileKey, {
+ ...profile,
+ email: normalizeEmail(profile.email),
+ username:
+ typeof profile.username === 'string'
+ ? normalizeUsername(profile.username)
+ : undefined,
+ })
+ verifySession.set(providerIdKey, profile.id)
+ const onboardingRedirect = [
+ `/onboarding/${providerName}`,
+ redirectTo ? new URLSearchParams({ redirectTo }) : null,
+ ]
+ .filter(Boolean)
+ .join('?')
+ return redirect(onboardingRedirect, {
+ headers: combineHeaders(
+ { 'set-cookie': await verifySessionStorage.commitSession(verifySession) },
+ destroyRedirectTo,
+ ),
+ })
+}
+
+async function makeSession(
+ {
+ request,
+ userId,
+ redirectTo,
+ }: { request: Request; userId: string; redirectTo?: string | null },
+ responseInit?: ResponseInit,
+) {
+ redirectTo ??= '/'
+ const session = await prisma.session.create({
+ select: { id: true, expirationDate: true, userId: true },
+ data: {
+ expirationDate: getSessionExpirationDate(),
+ userId,
+ },
+ })
+ return handleNewSession(
+ { request, session, redirectTo, remember: true },
+ { headers: combineHeaders(responseInit?.headers, destroyRedirectTo) },
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/_auth+/auth_.$provider.ts b/demo/the-epic-stack/app/routes/_auth+/auth_.$provider.ts
new file mode 100644
index 000000000..b604005e6
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_auth+/auth_.$provider.ts
@@ -0,0 +1,34 @@
+import { redirect } from 'react-router'
+import { authenticator } from '#app/utils/auth.server.ts'
+import { handleMockAction } from '#app/utils/connections.server.ts'
+import { ProviderNameSchema } from '#app/utils/connections.tsx'
+import { getReferrerRoute } from '#app/utils/misc.tsx'
+import { getRedirectCookieHeader } from '#app/utils/redirect-cookie.server.ts'
+import { type Route } from './+types/auth_.$provider.ts'
+
+export async function loader() {
+ return redirect('/login')
+}
+
+export async function action({ request, params }: Route.ActionArgs) {
+ const providerName = ProviderNameSchema.parse(params.provider)
+
+ try {
+ await handleMockAction(providerName, request)
+ return await authenticator.authenticate(providerName, request)
+ } catch (error: unknown) {
+ if (error instanceof Response) {
+ const formData = await request.formData()
+ const rawRedirectTo = formData.get('redirectTo')
+ const redirectTo =
+ typeof rawRedirectTo === 'string'
+ ? rawRedirectTo
+ : getReferrerRoute(request)
+ const redirectToCookie = getRedirectCookieHeader(redirectTo)
+ if (redirectToCookie) {
+ error.headers.append('set-cookie', redirectToCookie)
+ }
+ }
+ throw error
+ }
+}
diff --git a/demo/the-epic-stack/app/routes/_auth+/forgot-password.tsx b/demo/the-epic-stack/app/routes/_auth+/forgot-password.tsx
new file mode 100644
index 000000000..58eb47159
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_auth+/forgot-password.tsx
@@ -0,0 +1,189 @@
+import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import * as E from '@react-email/components'
+import { data, redirect, Link, useFetcher } from 'react-router'
+import { HoneypotInputs } from 'remix-utils/honeypot/react'
+import { z } from 'zod'
+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
+import { ErrorList, Field } from '#app/components/forms.tsx'
+import { StatusButton } from '#app/components/ui/status-button.tsx'
+import { prisma } from '#app/utils/db.server.ts'
+import { sendEmail } from '#app/utils/email.server.ts'
+import { checkHoneypot } from '#app/utils/honeypot.server.ts'
+import { EmailSchema, UsernameSchema } from '#app/utils/user-validation.ts'
+import { type Route } from './+types/forgot-password.ts'
+import { prepareVerification } from './verify.server.ts'
+
+export const handle: SEOHandle = {
+ getSitemapEntries: () => null,
+}
+
+const ForgotPasswordSchema = z.object({
+ usernameOrEmail: z.union([EmailSchema, UsernameSchema]),
+})
+
+export async function action({ request }: Route.ActionArgs) {
+ const formData = await request.formData()
+ await checkHoneypot(formData)
+ const submission = await parseWithZod(formData, {
+ schema: ForgotPasswordSchema.superRefine(async (data, ctx) => {
+ const user = await prisma.user.findFirst({
+ where: {
+ OR: [
+ { email: data.usernameOrEmail },
+ { username: data.usernameOrEmail },
+ ],
+ },
+ select: { id: true },
+ })
+ if (!user) {
+ ctx.addIssue({
+ path: ['usernameOrEmail'],
+ code: z.ZodIssueCode.custom,
+ message: 'No user exists with this username or email',
+ })
+ return
+ }
+ }),
+ async: true,
+ })
+ if (submission.status !== 'success') {
+ return data(
+ { result: submission.reply() },
+ { status: submission.status === 'error' ? 400 : 200 },
+ )
+ }
+ const { usernameOrEmail } = submission.value
+
+ const user = await prisma.user.findFirstOrThrow({
+ where: { OR: [{ email: usernameOrEmail }, { username: usernameOrEmail }] },
+ select: { email: true, username: true },
+ })
+
+ const { verifyUrl, redirectTo, otp } = await prepareVerification({
+ period: 10 * 60,
+ request,
+ type: 'reset-password',
+ target: usernameOrEmail,
+ })
+
+ const response = await sendEmail({
+ to: user.email,
+ subject: `Epic Notes Password Reset`,
+ react: (
+
+
+
+ We can't find this page:
+
+ {location.pathname}
+
+
+ Epic Notes Password Reset
+
+
+
+
+
+ )
+}
+
+export function ErrorBoundary() {
+ return
+
+
+
+ Forgot Password
++ No worries, we'll send you reset instructions. +
+
+
+
+
+ Back to Login
+
+
+
+
+
+
+ Recover password
+
+
+
+
+ )
+}
+
+const VerificationResponseSchema = z.discriminatedUnion('status', [
+ z.object({
+ status: z.literal('success'),
+ location: z.string(),
+ }),
+ z.object({
+ status: z.literal('error'),
+ error: z.string(),
+ }),
+])
+
+function PasskeyLogin({
+ redirectTo,
+ remember,
+}: {
+ redirectTo: string | null
+ remember: boolean
+}) {
+ const [isPending] = useTransition()
+ const [error, setError] = useState
+
+
+
+ Welcome back!
++ Please enter your details. +
+
+
+
+
+
+
+
+ +
+
+ +
-
+ {providerNames.map((providerName) => (
+
-
+
+
+ ))}
+
+ New here?
+
+ Create an account
+
+
+
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/_auth+/onboarding_.$provider.server.ts b/demo/the-epic-stack/app/routes/_auth+/onboarding_.$provider.server.ts
new file mode 100644
index 000000000..502ef8078
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_auth+/onboarding_.$provider.server.ts
@@ -0,0 +1,19 @@
+import { invariant } from '@epic-web/invariant'
+import { redirect } from 'react-router'
+import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { onboardingEmailSessionKey } from './onboarding.tsx'
+import { type VerifyFunctionArgs } from './verify.server.ts'
+
+export async function handleVerification({ submission }: VerifyFunctionArgs) {
+ invariant(
+ submission.status === 'success',
+ 'Submission should be successful by now',
+ )
+ const verifySession = await verifySessionStorage.getSession()
+ verifySession.set(onboardingEmailSessionKey, submission.value.target)
+ return redirect('/onboarding', {
+ headers: {
+ 'set-cookie': await verifySessionStorage.commitSession(verifySession),
+ },
+ })
+}
diff --git a/demo/the-epic-stack/app/routes/_auth+/onboarding_.$provider.tsx b/demo/the-epic-stack/app/routes/_auth+/onboarding_.$provider.tsx
new file mode 100644
index 000000000..65aeafa00
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_auth+/onboarding_.$provider.tsx
@@ -0,0 +1,271 @@
+import {
+ getFormProps,
+ getInputProps,
+ useForm,
+ type SubmissionResult,
+} from '@conform-to/react'
+import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import {
+ redirect,
+ data,
+ type Params,
+ Form,
+ useSearchParams,
+} from 'react-router'
+import { safeRedirect } from 'remix-utils/safe-redirect'
+import { z } from 'zod'
+import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
+import { Spacer } from '#app/components/spacer.tsx'
+import { StatusButton } from '#app/components/ui/status-button.tsx'
+import {
+ sessionKey,
+ signupWithConnection,
+ requireAnonymous,
+} from '#app/utils/auth.server.ts'
+import { ProviderNameSchema } from '#app/utils/connections.tsx'
+import { prisma } from '#app/utils/db.server.ts'
+import { useIsPending } from '#app/utils/misc.tsx'
+import { authSessionStorage } from '#app/utils/session.server.ts'
+import { redirectWithToast } from '#app/utils/toast.server.ts'
+import { NameSchema, UsernameSchema } from '#app/utils/user-validation.ts'
+import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { type Route } from './+types/onboarding_.$provider.ts'
+import { onboardingEmailSessionKey } from './onboarding'
+
+export const providerIdKey = 'providerId'
+export const prefilledProfileKey = 'prefilledProfile'
+
+const SignupFormSchema = z.object({
+ imageUrl: z.string().optional(),
+ username: UsernameSchema,
+ name: NameSchema,
+ agreeToTermsOfServiceAndPrivacyPolicy: z.boolean({
+ required_error: 'You must agree to the terms of service and privacy policy',
+ }),
+ remember: z.boolean().optional(),
+ redirectTo: z.string().optional(),
+})
+
+async function requireData({
+ request,
+ params,
+}: {
+ request: Request
+ params: Params
+}) {
+ await requireAnonymous(request)
+ const verifySession = await verifySessionStorage.getSession(
+ request.headers.get('cookie'),
+ )
+ const email = verifySession.get(onboardingEmailSessionKey)
+ const providerId = verifySession.get(providerIdKey)
+ const result = z
+ .object({
+ email: z.string(),
+ providerName: ProviderNameSchema,
+ providerId: z.string().or(z.number()),
+ })
+ .safeParse({ email, providerName: params.provider, providerId })
+ if (result.success) {
+ return result.data
+ } else {
+ console.error(result.error)
+ throw redirect('/signup')
+ }
+}
+
+export async function loader({ request, params }: Route.LoaderArgs) {
+ const { email } = await requireData({ request, params })
+
+ const verifySession = await verifySessionStorage.getSession(
+ request.headers.get('cookie'),
+ )
+ const prefilledProfile = verifySession.get(prefilledProfileKey)
+
+ return {
+ email,
+ status: 'idle',
+ submission: {
+ initialValue: prefilledProfile ?? {},
+ } as SubmissionResult,
+ }
+}
+
+export async function action({ request, params }: Route.ActionArgs) {
+ const { email, providerId, providerName } = await requireData({
+ request,
+ params,
+ })
+ const formData = await request.formData()
+ const verifySession = await verifySessionStorage.getSession(
+ request.headers.get('cookie'),
+ )
+
+ const submission = await parseWithZod(formData, {
+ schema: SignupFormSchema.superRefine(async (data, ctx) => {
+ const existingUser = await prisma.user.findUnique({
+ where: { username: data.username },
+ select: { id: true },
+ })
+ if (existingUser) {
+ ctx.addIssue({
+ path: ['username'],
+ code: z.ZodIssueCode.custom,
+ message: 'A user already exists with this username',
+ })
+ return
+ }
+ }).transform(async (data) => {
+ const session = await signupWithConnection({
+ ...data,
+ email,
+ providerId: String(providerId),
+ providerName,
+ })
+ return { ...data, session }
+ }),
+ async: true,
+ })
+
+ if (submission.status !== 'success') {
+ return data(
+ { result: submission.reply() },
+ { status: submission.status === 'error' ? 400 : 200 },
+ )
+ }
+
+ const { session, remember, redirectTo } = submission.value
+
+ const authSession = await authSessionStorage.getSession(
+ request.headers.get('cookie'),
+ )
+ authSession.set(sessionKey, session.id)
+ const headers = new Headers()
+ headers.append(
+ 'set-cookie',
+ await authSessionStorage.commitSession(authSession, {
+ expires: remember ? session.expirationDate : undefined,
+ }),
+ )
+ headers.append(
+ 'set-cookie',
+ await verifySessionStorage.destroySession(verifySession),
+ )
+
+ return redirectWithToast(
+ safeRedirect(redirectTo),
+ { title: 'Welcome', description: 'Thanks for signing up!' },
+ { headers },
+ )
+}
+
+export const meta: Route.MetaFunction = () => {
+ return [{ title: 'Setup Epic Notes Account' }]
+}
+
+export default function OnboardingProviderRoute({
+ loaderData,
+ actionData,
+}: Route.ComponentProps) {
+ const isPending = useIsPending()
+ const [searchParams] = useSearchParams()
+ const redirectTo = searchParams.get('redirectTo')
+
+ const [form, fields] = useForm({
+ id: 'onboarding-provider-form',
+ constraint: getZodConstraint(SignupFormSchema),
+ lastResult: actionData?.result ?? loaderData.submission,
+ onValidate({ formData }) {
+ return parseWithZod(formData, { schema: SignupFormSchema })
+ },
+ shouldRevalidate: 'onBlur',
+ })
+
+ return (
+
+
+
+
+ Welcome aboard {loaderData.email}!
++ Please enter your details. +
+
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/_auth+/reset-password.server.ts b/demo/the-epic-stack/app/routes/_auth+/reset-password.server.ts
new file mode 100644
index 000000000..f5b2d5072
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_auth+/reset-password.server.ts
@@ -0,0 +1,34 @@
+import { invariant } from '@epic-web/invariant'
+import { data, redirect } from 'react-router'
+import { prisma } from '#app/utils/db.server.ts'
+import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { resetPasswordUsernameSessionKey } from './reset-password.tsx'
+import { type VerifyFunctionArgs } from './verify.server.ts'
+
+export async function handleVerification({ submission }: VerifyFunctionArgs) {
+ invariant(
+ submission.status === 'success',
+ 'Submission should be successful by now',
+ )
+ const target = submission.value.target
+ const user = await prisma.user.findFirst({
+ where: { OR: [{ email: target }, { username: target }] },
+ select: { email: true, username: true },
+ })
+ // we don't want to say the user is not found if the email is not found
+ // because that would allow an attacker to check if an email is registered
+ if (!user) {
+ return data(
+ { result: submission.reply({ fieldErrors: { code: ['Invalid code'] } }) },
+ { status: 400 },
+ )
+ }
+
+ const verifySession = await verifySessionStorage.getSession()
+ verifySession.set(resetPasswordUsernameSessionKey, user.username)
+ return redirect('/reset-password', {
+ headers: {
+ 'set-cookie': await verifySessionStorage.commitSession(verifySession),
+ },
+ })
+}
diff --git a/demo/the-epic-stack/app/routes/_auth+/reset-password.tsx b/demo/the-epic-stack/app/routes/_auth+/reset-password.tsx
new file mode 100644
index 000000000..1280e1b7c
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_auth+/reset-password.tsx
@@ -0,0 +1,151 @@
+import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { data, redirect, Form } from 'react-router'
+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
+import { ErrorList, Field } from '#app/components/forms.tsx'
+import { StatusButton } from '#app/components/ui/status-button.tsx'
+import {
+ checkIsCommonPassword,
+ requireAnonymous,
+ resetUserPassword,
+} from '#app/utils/auth.server.ts'
+import { useIsPending } from '#app/utils/misc.tsx'
+import { PasswordAndConfirmPasswordSchema } from '#app/utils/user-validation.ts'
+import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { type Route } from './+types/reset-password.ts'
+
+export const handle: SEOHandle = {
+ getSitemapEntries: () => null,
+}
+
+export const resetPasswordUsernameSessionKey = 'resetPasswordUsername'
+
+const ResetPasswordSchema = PasswordAndConfirmPasswordSchema
+
+async function requireResetPasswordUsername(request: Request) {
+ await requireAnonymous(request)
+ const verifySession = await verifySessionStorage.getSession(
+ request.headers.get('cookie'),
+ )
+ const resetPasswordUsername = verifySession.get(
+ resetPasswordUsernameSessionKey,
+ )
+ if (typeof resetPasswordUsername !== 'string' || !resetPasswordUsername) {
+ throw redirect('/login')
+ }
+ return resetPasswordUsername
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+ const resetPasswordUsername = await requireResetPasswordUsername(request)
+ return { resetPasswordUsername }
+}
+
+export async function action({ request }: Route.ActionArgs) {
+ const resetPasswordUsername = await requireResetPasswordUsername(request)
+ const formData = await request.formData()
+ const submission = await parseWithZod(formData, {
+ schema: ResetPasswordSchema.superRefine(async ({ password }, ctx) => {
+ const isCommonPassword = await checkIsCommonPassword(password)
+ if (isCommonPassword) {
+ ctx.addIssue({
+ path: ['password'],
+ code: 'custom',
+ message: 'Password is too common',
+ })
+ }
+ }),
+ async: true,
+ })
+ if (submission.status !== 'success') {
+ return data(
+ { result: submission.reply() },
+ { status: submission.status === 'error' ? 400 : 200 },
+ )
+ }
+ const { password } = submission.value
+
+ await resetUserPassword({ username: resetPasswordUsername, password })
+ const verifySession = await verifySessionStorage.getSession()
+ return redirect('/login', {
+ headers: {
+ 'set-cookie': await verifySessionStorage.destroySession(verifySession),
+ },
+ })
+}
+
+export const meta: Route.MetaFunction = () => {
+ return [{ title: 'Reset Password | Epic Notes' }]
+}
+
+export default function ResetPasswordPage({
+ loaderData,
+ actionData,
+}: Route.ComponentProps) {
+ const isPending = useIsPending()
+
+ const [form, fields] = useForm({
+ id: 'reset-password',
+ constraint: getZodConstraint(ResetPasswordSchema),
+ lastResult: actionData?.result,
+ onValidate({ formData }) {
+ return parseWithZod(formData, { schema: ResetPasswordSchema })
+ },
+ shouldRevalidate: 'onBlur',
+ })
+
+ return (
+
+
+
+
+ Welcome aboard {loaderData.email}!
++ Please enter your details. +
+
+
+ )
+}
+
+export function ErrorBoundary() {
+ return
+
+ Password Reset
++ Hi, {loaderData.resetPasswordUsername}. No worries. It happens all the + time. +
+
+
+
+
+ Welcome to Epic Notes!
+
+
+
+
+
+ )
+}
+
+export function ErrorBoundary() {
+ return
+
+ Let's start your journey!
++ Please enter your email. +
+
+
+
+ -
+ {providerNames.map((providerName) => (
+ <>
+
-
+
+
+
+ ))}
+
+
Check your email
++ We've sent you a code to verify your email address. +
+ + ) + + const headings: RecordCheck your 2FA app
++ Please enter your 2FA code to verify your identity. +
+ + ), + } + + const [form, fields] = useForm({ + id: 'verify-form', + constraint: getZodConstraint(VerifySchema), + lastResult: actionData?.result, + onValidate({ formData }) { + return parseWithZod(formData, { schema: VerifySchema }) + }, + defaultValue: { + code: searchParams.get(codeQueryParam), + type: type, + target: searchParams.get(targetQueryParam), + redirectTo: searchParams.get(redirectToQueryParam), + }, + }) + + return ( +About page
+}
diff --git a/demo/the-epic-stack/app/routes/_marketing+/index.tsx b/demo/the-epic-stack/app/routes/_marketing+/index.tsx
new file mode 100644
index 000000000..17486deb4
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/index.tsx
@@ -0,0 +1,32 @@
+import { LocaleSwitcher } from 'lingo.dev/react/client'
+import { type Route } from './+types/index.ts'
+
+export const meta: Route.MetaFunction = () => [{ title: 'Epic Notes' }]
+
+export default function Index() {
+ return (
+
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/docker.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/docker.svg
new file mode 100644
index 000000000..b39ecde8b
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/docker.svg
@@ -0,0 +1,47 @@
+
+
+
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/eslint.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/eslint.svg
new file mode 100644
index 000000000..dd535a890
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/eslint.svg
@@ -0,0 +1,17 @@
+
+
+
+
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/faker.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/faker.svg
new file mode 100644
index 000000000..e290a835b
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/faker.svg
@@ -0,0 +1,736 @@
+
+
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/fly.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/fly.svg
new file mode 100644
index 000000000..9dbf3c76e
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/fly.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/github.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/github.svg
new file mode 100644
index 000000000..37fa923df
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/github.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/logos.ts b/demo/the-epic-stack/app/routes/_marketing+/logos/logos.ts
new file mode 100644
index 000000000..7d77e8a8f
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/logos.ts
@@ -0,0 +1,173 @@
+import docker from './docker.svg'
+import eslint from './eslint.svg'
+import fakerJS from './faker.svg'
+import fly from './fly.svg'
+import github from './github.svg'
+import msw from './msw.svg'
+import playwright from './playwright.svg'
+import prettier from './prettier.svg'
+import prisma from './prisma.svg'
+import radixUI from './radix.svg'
+import reactEmail from './react-email.svg'
+import remix from './remix.svg'
+import resend from './resend.svg'
+import sentry from './sentry.svg'
+import shadcnUI from './shadcn-ui.svg'
+import sqlite from './sqlite.svg'
+import tailwind from './tailwind.svg'
+import testingLibrary from './testing-library.png'
+import typescript from './typescript.svg'
+import vitest from './vitest.svg'
+import zod from './zod.svg'
+
+export { default as stars } from './stars.jpg'
+
+export const logos = [
+ {
+ src: remix,
+ alt: 'Remix',
+ href: 'https://remix.run',
+ column: 1,
+ row: 1,
+ },
+ {
+ src: fly,
+ alt: 'Fly.io',
+ href: 'https://fly.io',
+ column: 1,
+ row: 2,
+ },
+ {
+ src: sqlite,
+ alt: 'SQLite',
+ href: 'https://sqlite.org',
+ column: 1,
+ row: 3,
+ },
+ {
+ src: prisma,
+ alt: 'Prisma',
+ href: 'https://prisma.io',
+ column: 2,
+ row: 2,
+ },
+ {
+ src: zod,
+ alt: 'Zod',
+ href: 'https://zod.dev/',
+ column: 2,
+ row: 3,
+ },
+ {
+ src: github,
+ alt: 'GitHub',
+ href: 'https://github.com',
+ column: 2,
+ row: 4,
+ },
+ {
+ src: resend,
+ alt: 'Resend',
+ href: 'https://resend.com',
+ column: 2,
+ row: 5,
+ },
+ {
+ src: reactEmail,
+ alt: 'React Email',
+ href: 'https://react.email',
+ column: 2,
+ row: 6,
+ },
+ {
+ src: tailwind,
+ alt: 'Tailwind CSS',
+ href: 'https://tailwindcss.com',
+ column: 3,
+ row: 3,
+ },
+ {
+ src: radixUI,
+ alt: 'Radix UI',
+ href: 'https://www.radix-ui.com/',
+ column: 3,
+ row: 4,
+ },
+ {
+ src: shadcnUI,
+ alt: 'shadcn/ui',
+ href: 'https://ui.shadcn.com/',
+ column: 3,
+ row: 5,
+ },
+ {
+ src: playwright,
+ alt: 'Playwright',
+ href: 'https://playwright.dev/',
+ column: 4,
+ row: 1,
+ },
+ {
+ src: msw,
+ alt: 'MSW',
+ href: 'https://mswjs.io',
+ column: 4,
+ row: 2,
+ },
+ {
+ src: fakerJS,
+ alt: 'Faker.js',
+ href: 'https://fakerjs.dev/',
+ column: 4,
+ row: 3,
+ },
+ {
+ src: vitest,
+ alt: 'Vitest',
+ href: 'https://vitest.dev',
+ column: 4,
+ row: 4,
+ },
+ {
+ src: testingLibrary,
+ alt: 'Testing Library',
+ href: 'https://testing-library.com',
+ column: 4,
+ row: 5,
+ },
+ {
+ src: docker,
+ alt: 'Docker',
+ href: 'https://www.docker.com',
+ column: 4,
+ row: 6,
+ },
+ {
+ src: typescript,
+ alt: 'TypeScript',
+ href: 'https://typescriptlang.org',
+ column: 5,
+ row: 2,
+ },
+ {
+ src: prettier,
+ alt: 'Prettier',
+ href: 'https://prettier.io',
+ column: 5,
+ row: 3,
+ },
+ {
+ src: eslint,
+ alt: 'ESLint',
+ href: 'https://eslint.org',
+ column: 5,
+ row: 4,
+ },
+ {
+ src: sentry,
+ alt: 'Sentry',
+ href: 'https://sentry.io',
+ column: 5,
+ row: 5,
+ },
+]
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/msw.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/msw.svg
new file mode 100644
index 000000000..f5de6fb2b
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/msw.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/playwright.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/playwright.svg
new file mode 100644
index 000000000..7b3ca7d6c
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/playwright.svg
@@ -0,0 +1,9 @@
+
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/prettier.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/prettier.svg
new file mode 100644
index 000000000..f4d0b669c
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/prettier.svg
@@ -0,0 +1,76 @@
+
+
\ No newline at end of file
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/prisma.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/prisma.svg
new file mode 100644
index 000000000..17a388603
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/prisma.svg
@@ -0,0 +1,9 @@
+
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/radix.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/radix.svg
new file mode 100644
index 000000000..a74829985
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/radix.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/react-email.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/react-email.svg
new file mode 100644
index 000000000..51a26989f
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/react-email.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/remix.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/remix.svg
new file mode 100644
index 000000000..2f4a5abcb
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/remix.svg
@@ -0,0 +1,25 @@
+
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/resend.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/resend.svg
new file mode 100644
index 000000000..1227dc533
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/resend.svg
@@ -0,0 +1,31 @@
+
\ No newline at end of file
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/sentry.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/sentry.svg
new file mode 100644
index 000000000..3ebb3bb05
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/sentry.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/shadcn-ui.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/shadcn-ui.svg
new file mode 100644
index 000000000..2780f68e1
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/shadcn-ui.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/sqlite.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/sqlite.svg
new file mode 100644
index 000000000..424e0abbe
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/sqlite.svg
@@ -0,0 +1,67 @@
+
+
+
+
\ No newline at end of file
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/stars.jpg b/demo/the-epic-stack/app/routes/_marketing+/logos/stars.jpg
new file mode 100644
index 000000000..c725b8acf
Binary files /dev/null and b/demo/the-epic-stack/app/routes/_marketing+/logos/stars.jpg differ
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/tailwind.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/tailwind.svg
new file mode 100644
index 000000000..6a9ab499b
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/tailwind.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/testing-library.png b/demo/the-epic-stack/app/routes/_marketing+/logos/testing-library.png
new file mode 100644
index 000000000..6febb2a5d
Binary files /dev/null and b/demo/the-epic-stack/app/routes/_marketing+/logos/testing-library.png differ
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/typescript.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/typescript.svg
new file mode 100644
index 000000000..339da0b63
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/typescript.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/vitest.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/vitest.svg
new file mode 100644
index 000000000..fd9daaf61
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/vitest.svg
@@ -0,0 +1,5 @@
+
diff --git a/demo/the-epic-stack/app/routes/_marketing+/logos/zod.svg b/demo/the-epic-stack/app/routes/_marketing+/logos/zod.svg
new file mode 100644
index 000000000..0595f511b
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/logos/zod.svg
@@ -0,0 +1,46 @@
+
+
+
diff --git a/demo/the-epic-stack/app/routes/_marketing+/privacy.tsx b/demo/the-epic-stack/app/routes/_marketing+/privacy.tsx
new file mode 100644
index 000000000..b6d65309e
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/privacy.tsx
@@ -0,0 +1,3 @@
+export default function PrivacyRoute() {
+ return
+
+ Hello, world!
++ This is an example app that demonstrates how{' '} + Lingo.dev Compiler can be{' '} + used to localize apps built with{' '} + + The Epic Stack + + . +
++ To switch between locales, use the following dropdown: +
+
+
+ Privacy
+}
diff --git a/demo/the-epic-stack/app/routes/_marketing+/support.tsx b/demo/the-epic-stack/app/routes/_marketing+/support.tsx
new file mode 100644
index 000000000..ec9a2420b
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/support.tsx
@@ -0,0 +1,3 @@
+export default function SupportRoute() {
+ return Support
+}
diff --git a/demo/the-epic-stack/app/routes/_marketing+/tos.tsx b/demo/the-epic-stack/app/routes/_marketing+/tos.tsx
new file mode 100644
index 000000000..998f867b2
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_marketing+/tos.tsx
@@ -0,0 +1,3 @@
+export default function TermsOfServiceRoute() {
+ return Terms of service
+}
diff --git a/demo/the-epic-stack/app/routes/_seo+/robots[.]txt.ts b/demo/the-epic-stack/app/routes/_seo+/robots[.]txt.ts
new file mode 100644
index 000000000..314f8ff87
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_seo+/robots[.]txt.ts
@@ -0,0 +1,9 @@
+import { generateRobotsTxt } from '@nasa-gcn/remix-seo'
+import { getDomainUrl } from '#app/utils/misc.tsx'
+import { type Route } from './+types/robots[.]txt.ts'
+
+export function loader({ request }: Route.LoaderArgs) {
+ return generateRobotsTxt([
+ { type: 'sitemap', value: `${getDomainUrl(request)}/sitemap.xml` },
+ ])
+}
diff --git a/demo/the-epic-stack/app/routes/_seo+/sitemap[.]xml.ts b/demo/the-epic-stack/app/routes/_seo+/sitemap[.]xml.ts
new file mode 100644
index 000000000..04d37c31e
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/_seo+/sitemap[.]xml.ts
@@ -0,0 +1,17 @@
+import { generateSitemap } from '@nasa-gcn/remix-seo'
+import { type ServerBuild } from 'react-router'
+import { getDomainUrl } from '#app/utils/misc.tsx'
+import { type Route } from './+types/sitemap[.]xml.ts'
+
+export async function loader({ request, context }: Route.LoaderArgs) {
+ const serverBuild = (await context.serverBuild) as { build: ServerBuild }
+
+ // TODO: This is typeerror is coming up since of the remix-run/server-runtime package. We might need to remove/update that one.
+ // @ts-expect-error
+ return generateSitemap(request, serverBuild.build.routes, {
+ siteUrl: getDomainUrl(request),
+ headers: {
+ 'Cache-Control': `public, max-age=${60 * 5}`,
+ },
+ })
+}
diff --git a/demo/the-epic-stack/app/routes/admin+/cache.tsx b/demo/the-epic-stack/app/routes/admin+/cache.tsx
new file mode 100644
index 000000000..04150fb48
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/admin+/cache.tsx
@@ -0,0 +1,244 @@
+import { invariantResponse } from '@epic-web/invariant'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import {
+ redirect,
+ Form,
+ Link,
+ useFetcher,
+ useSearchParams,
+ useSubmit,
+} from 'react-router'
+import { GeneralErrorBoundary } from '#app/components/error-boundary'
+import { Field } from '#app/components/forms.tsx'
+import { Spacer } from '#app/components/spacer.tsx'
+import { Button } from '#app/components/ui/button.tsx'
+import {
+ cache,
+ getAllCacheKeys,
+ lruCache,
+ searchCacheKeys,
+} from '#app/utils/cache.server.ts'
+import {
+ ensureInstance,
+ getAllInstances,
+ getInstanceInfo,
+} from '#app/utils/litefs.server.ts'
+import { useDebounce, useDoubleCheck } from '#app/utils/misc.tsx'
+import { requireUserWithRole } from '#app/utils/permissions.server.ts'
+import { type Route } from './+types/cache.ts'
+
+export const handle: SEOHandle = {
+ getSitemapEntries: () => null,
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+ await requireUserWithRole(request, 'admin')
+ const searchParams = new URL(request.url).searchParams
+ const query = searchParams.get('query')
+ if (query === '') {
+ searchParams.delete('query')
+ return redirect(`/admin/cache?${searchParams.toString()}`)
+ }
+ const limit = Number(searchParams.get('limit') ?? 100)
+
+ const currentInstanceInfo = await getInstanceInfo()
+ const instance =
+ searchParams.get('instance') ?? currentInstanceInfo.currentInstance
+ const instances = await getAllInstances()
+ await ensureInstance(instance)
+
+ let cacheKeys: { sqlite: Array
+
+ )
+}
+
+function CacheKeyRow({
+ cacheKey,
+ instance,
+ type,
+}: {
+ cacheKey: string
+ instance?: string
+ type: 'sqlite' | 'lru'
+}) {
+ const fetcher = useFetcherCache Admin
+
+
+ LRU Cache:
+ {loaderData.cacheKeys.lru.map((key) => ( +
+
+ SQLite Cache:
+ {loaderData.cacheKeys.sqlite.map((key) => ( +
+
+
+
+
+
+
+
+ {cacheKey}
+
+
+ )
+}
+
+export function ErrorBoundary() {
+ return (
+ You are not allowed to do that: {error?.data.message}
+ ), + }} + /> + ) +} diff --git a/demo/the-epic-stack/app/routes/admin+/cache_.lru.$cacheKey.ts b/demo/the-epic-stack/app/routes/admin+/cache_.lru.$cacheKey.ts new file mode 100644 index 000000000..7534705a1 --- /dev/null +++ b/demo/the-epic-stack/app/routes/admin+/cache_.lru.$cacheKey.ts @@ -0,0 +1,31 @@ +import { invariantResponse } from '@epic-web/invariant' +import { lruCache } from '#app/utils/cache.server.ts' +import { + getAllInstances, + getInstanceInfo, + ensureInstance, +} from '#app/utils/litefs.server.ts' +import { requireUserWithRole } from '#app/utils/permissions.server.ts' +import { type Route } from './+types/cache_.lru.$cacheKey.ts' + +export async function loader({ request, params }: Route.LoaderArgs) { + await requireUserWithRole(request, 'admin') + const searchParams = new URL(request.url).searchParams + const currentInstanceInfo = await getInstanceInfo() + const allInstances = await getAllInstances() + const instance = + searchParams.get('instance') ?? currentInstanceInfo.currentInstance + await ensureInstance(instance) + + const { cacheKey } = params + invariantResponse(cacheKey, 'cacheKey is required') + return { + instance: { + hostname: instance, + region: allInstances[instance], + isPrimary: currentInstanceInfo.primaryInstance === instance, + }, + cacheKey, + value: lruCache.get(cacheKey), + } +} diff --git a/demo/the-epic-stack/app/routes/admin+/cache_.sqlite.$cacheKey.ts b/demo/the-epic-stack/app/routes/admin+/cache_.sqlite.$cacheKey.ts new file mode 100644 index 000000000..9aeb3e047 --- /dev/null +++ b/demo/the-epic-stack/app/routes/admin+/cache_.sqlite.$cacheKey.ts @@ -0,0 +1,31 @@ +import { invariantResponse } from '@epic-web/invariant' +import { cache } from '#app/utils/cache.server.ts' +import { + getAllInstances, + getInstanceInfo, + ensureInstance, +} from '#app/utils/litefs.server.ts' +import { requireUserWithRole } from '#app/utils/permissions.server.ts' +import { type Route } from './+types/cache_.sqlite.$cacheKey.ts' + +export async function loader({ request, params }: Route.LoaderArgs) { + await requireUserWithRole(request, 'admin') + const searchParams = new URL(request.url).searchParams + const currentInstanceInfo = await getInstanceInfo() + const allInstances = await getAllInstances() + const instance = + searchParams.get('instance') ?? currentInstanceInfo.currentInstance + await ensureInstance(instance) + + const { cacheKey } = params + invariantResponse(cacheKey, 'cacheKey is required') + return { + instance: { + hostname: instance, + region: allInstances[instance], + isPrimary: currentInstanceInfo.primaryInstance === instance, + }, + cacheKey, + value: cache.get(cacheKey), + } +} diff --git a/demo/the-epic-stack/app/routes/admin+/cache_.sqlite.server.ts b/demo/the-epic-stack/app/routes/admin+/cache_.sqlite.server.ts new file mode 100644 index 000000000..04746fc15 --- /dev/null +++ b/demo/the-epic-stack/app/routes/admin+/cache_.sqlite.server.ts @@ -0,0 +1,59 @@ +import { redirect } from 'react-router' +import { z } from 'zod' +import { cache } from '#app/utils/cache.server.ts' +import { + getInstanceInfo, + getInternalInstanceDomain, +} from '#app/utils/litefs.server' +import { type Route } from './+types/cache_.sqlite.ts' + +export async function updatePrimaryCacheValue({ + key, + cacheValue, +}: { + key: string + cacheValue: any +}) { + const { currentIsPrimary, primaryInstance } = await getInstanceInfo() + if (currentIsPrimary) { + throw new Error( + `updatePrimaryCacheValue should not be called on the primary instance (${primaryInstance})}`, + ) + } + const domain = getInternalInstanceDomain(primaryInstance) + const token = process.env.INTERNAL_COMMAND_TOKEN + return fetch(`${domain}/admin/cache/sqlite`, { + method: 'POST', + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ key, cacheValue }), + }) +} + +export async function action({ request }: Route.ActionArgs) { + const { currentIsPrimary, primaryInstance } = await getInstanceInfo() + if (!currentIsPrimary) { + throw new Error( + `${request.url} should only be called on the primary instance (${primaryInstance})}`, + ) + } + const token = process.env.INTERNAL_COMMAND_TOKEN + const isAuthorized = + request.headers.get('Authorization') === `Bearer ${token}` + if (!isAuthorized) { + // nah, you can't be here... + return redirect('https://www.youtube.com/watch?v=dQw4w9WgXcQ') + } + const { key, cacheValue } = z + .object({ key: z.string(), cacheValue: z.unknown().optional() }) + .parse(await request.json()) + if (cacheValue === undefined) { + await cache.delete(key) + } else { + // @ts-expect-error - we don't reliably know the type of cacheValue + await cache.set(key, cacheValue) + } + return { success: true } +} diff --git a/demo/the-epic-stack/app/routes/admin+/cache_.sqlite.tsx b/demo/the-epic-stack/app/routes/admin+/cache_.sqlite.tsx new file mode 100644 index 000000000..e46989117 --- /dev/null +++ b/demo/the-epic-stack/app/routes/admin+/cache_.sqlite.tsx @@ -0,0 +1 @@ +export { action } from './cache_.sqlite.server.ts' diff --git a/demo/the-epic-stack/app/routes/me.tsx b/demo/the-epic-stack/app/routes/me.tsx new file mode 100644 index 000000000..f7188b56d --- /dev/null +++ b/demo/the-epic-stack/app/routes/me.tsx @@ -0,0 +1,19 @@ +import { redirect } from 'react-router' +import { requireUserId, logout } from '#app/utils/auth.server.ts' +import { prisma } from '#app/utils/db.server.ts' +import { type Route } from './+types/me.ts' + +export async function loader({ request }: Route.LoaderArgs) { + const userId = await requireUserId(request) + const user = await prisma.user.findUnique({ where: { id: userId } }) + if (!user) { + const requestUrl = new URL(request.url) + const loginParams = new URLSearchParams([ + ['redirectTo', `${requestUrl.pathname}${requestUrl.search}`], + ]) + const redirectTo = `/login?${loginParams}` + await logout({ request, redirectTo }) + return redirect(redirectTo) + } + return redirect(`/users/${user.username}`) +} diff --git a/demo/the-epic-stack/app/routes/resources+/download-user-data.tsx b/demo/the-epic-stack/app/routes/resources+/download-user-data.tsx new file mode 100644 index 000000000..b9fa4d78a --- /dev/null +++ b/demo/the-epic-stack/app/routes/resources+/download-user-data.tsx @@ -0,0 +1,62 @@ +import { requireUserId } from '#app/utils/auth.server.ts' +import { prisma } from '#app/utils/db.server.ts' +import { getDomainUrl, getNoteImgSrc, getUserImgSrc } from '#app/utils/misc.tsx' +import { type Route } from './+types/download-user-data.ts' + +export async function loader({ request }: Route.LoaderArgs) { + const userId = await requireUserId(request) + const user = await prisma.user.findUniqueOrThrow({ + where: { id: userId }, + // this is one of the *few* instances where you can use "include" because + // the goal is to literally get *everything*. Normally you should be + // explicit with "select". We're using select for images because we don't + // want to send back the entire blob of the image. We'll send a URL they can + // use to download it instead. + include: { + image: { + select: { + id: true, + createdAt: true, + updatedAt: true, + objectKey: true, + }, + }, + notes: { + include: { + images: { + select: { + id: true, + createdAt: true, + updatedAt: true, + objectKey: true, + }, + }, + }, + }, + password: false, // <-- intentionally omit password + sessions: true, + roles: true, + }, + }) + + const domain = getDomainUrl(request) + + return Response.json({ + user: { + ...user, + image: user.image + ? { + ...user.image, + url: domain + getUserImgSrc(user.image.objectKey), + } + : null, + notes: user.notes.map((note) => ({ + ...note, + images: note.images.map((image) => ({ + ...image, + url: domain + getNoteImgSrc(image.objectKey), + })), + })), + }, + }) +} diff --git a/demo/the-epic-stack/app/routes/resources+/healthcheck.tsx b/demo/the-epic-stack/app/routes/resources+/healthcheck.tsx new file mode 100644 index 000000000..e38230ec6 --- /dev/null +++ b/demo/the-epic-stack/app/routes/resources+/healthcheck.tsx @@ -0,0 +1,26 @@ +// learn more: https://fly.io/docs/reference/configuration/#services-http_checks +import { prisma } from '#app/utils/db.server.ts' +import { type Route } from './+types/healthcheck.ts' + +export async function loader({ request }: Route.LoaderArgs) { + const host = + request.headers.get('X-Forwarded-Host') ?? request.headers.get('host') + + try { + // if we can connect to the database and make a simple query + // and make a HEAD request to ourselves, then we're good. + await Promise.all([ + prisma.user.count(), + fetch(`${new URL(request.url).protocol}${host}`, { + method: 'HEAD', + headers: { 'X-Healthcheck': 'true' }, + }).then((r) => { + if (!r.ok) return Promise.reject(r) + }), + ]) + return new Response('OK') + } catch (error: unknown) { + console.log('healthcheck β', { error }) + return new Response('ERROR', { status: 500 }) + } +} diff --git a/demo/the-epic-stack/app/routes/resources+/images.tsx b/demo/the-epic-stack/app/routes/resources+/images.tsx new file mode 100644 index 000000000..766e925d9 --- /dev/null +++ b/demo/the-epic-stack/app/routes/resources+/images.tsx @@ -0,0 +1,80 @@ +import { promises as fs, constants } from 'node:fs' +import { invariantResponse } from '@epic-web/invariant' +import { getImgResponse } from 'openimg/node' +import { getDomainUrl } from '#app/utils/misc.tsx' +import { getSignedGetRequestInfo } from '#app/utils/storage.server.ts' +import { type Route } from './+types/images' + +let cacheDir: string | null = null + +async function getCacheDir() { + if (cacheDir) return cacheDir + + let dir = './tests/fixtures/openimg' + if (process.env.NODE_ENV === 'production') { + const isAccessible = await fs + .access('/data', constants.W_OK) + .then(() => true) + .catch(() => false) + + if (isAccessible) { + dir = '/data/images' + } + } + + return (cacheDir = dir) +} + +export async function loader({ request }: Route.LoaderArgs) { + const url = new URL(request.url) + const searchParams = url.searchParams + + const headers = new Headers() + headers.set('Cache-Control', 'public, max-age=31536000, immutable') + + const objectKey = searchParams.get('objectKey') + + return getImgResponse(request, { + headers, + allowlistedOrigins: [ + getDomainUrl(request), + process.env.AWS_ENDPOINT_URL_S3, + ].filter(Boolean), + cacheFolder: await getCacheDir(), + getImgSource: () => { + if (objectKey) { + const { url: signedUrl, headers: signedHeaders } = + getSignedGetRequestInfo(objectKey) + return { + type: 'fetch', + url: signedUrl, + headers: signedHeaders, + } + } + + const src = searchParams.get('src') + invariantResponse(src, 'src query parameter is required', { status: 400 }) + + if (URL.canParse(src)) { + // Fetch image from external URL; will be matched against allowlist + return { + type: 'fetch', + url: src, + } + } + // Retrieve image from filesystem (public folder) + if (src.startsWith('/assets')) { + // Files managed by Vite + return { + type: 'fs', + path: '.' + src, + } + } + // Fallback to files in public folder + return { + type: 'fs', + path: './public' + src, + } + }, + }) +} diff --git a/demo/the-epic-stack/app/routes/resources+/theme-switch.tsx b/demo/the-epic-stack/app/routes/resources+/theme-switch.tsx new file mode 100644 index 000000000..e466824b2 --- /dev/null +++ b/demo/the-epic-stack/app/routes/resources+/theme-switch.tsx @@ -0,0 +1,143 @@ +import { useForm, getFormProps } from '@conform-to/react' +import { parseWithZod } from '@conform-to/zod' +import { invariantResponse } from '@epic-web/invariant' +import { data, redirect, useFetcher, useFetchers } from 'react-router' +import { ServerOnly } from 'remix-utils/server-only' +import { z } from 'zod' +import { Icon } from '#app/components/ui/icon.tsx' +import { useHints, useOptionalHints } from '#app/utils/client-hints.tsx' +import { + useOptionalRequestInfo, + useRequestInfo, +} from '#app/utils/request-info.ts' +import { type Theme, setTheme } from '#app/utils/theme.server.ts' +import { type Route } from './+types/theme-switch.ts' +const ThemeFormSchema = z.object({ + theme: z.enum(['system', 'light', 'dark']), + // this is useful for progressive enhancement + redirectTo: z.string().optional(), +}) + +export async function action({ request }: Route.ActionArgs) { + const formData = await request.formData() + const submission = parseWithZod(formData, { + schema: ThemeFormSchema, + }) + + invariantResponse(submission.status === 'success', 'Invalid theme received') + + const { theme, redirectTo } = submission.value + + const responseInit = { + headers: { 'set-cookie': setTheme(theme) }, + } + if (redirectTo) { + return redirect(redirectTo, responseInit) + } else { + return data({ result: submission.reply() }, responseInit) + } +} + +export function ThemeSwitch({ + userPreference, +}: { + userPreference?: Theme | null +}) { + const fetcher = useFetcher
+
+
+
+ Epic Notes Email Change
+
+
+
+
+ Your Epic Notes email has been changed
+
+
+
+
+
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/settings+/profile.connections.tsx b/demo/the-epic-stack/app/routes/settings+/profile.connections.tsx
new file mode 100644
index 000000000..38104eb2f
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/settings+/profile.connections.tsx
@@ -0,0 +1,212 @@
+import { invariantResponse } from '@epic-web/invariant'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { useState } from 'react'
+import { data, useFetcher } from 'react-router'
+import { Icon } from '#app/components/ui/icon.tsx'
+import { StatusButton } from '#app/components/ui/status-button.tsx'
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '#app/components/ui/tooltip.tsx'
+import { requireUserId } from '#app/utils/auth.server.ts'
+import { resolveConnectionData } from '#app/utils/connections.server.ts'
+import {
+ ProviderConnectionForm,
+ type ProviderName,
+ ProviderNameSchema,
+ providerIcons,
+ providerNames,
+} from '#app/utils/connections.tsx'
+import { prisma } from '#app/utils/db.server.ts'
+import { pipeHeaders } from '#app/utils/headers.server.js'
+import { makeTimings } from '#app/utils/timing.server.ts'
+import { createToastHeaders } from '#app/utils/toast.server.ts'
+import { type Route } from './+types/profile.connections.ts'
+import { type BreadcrumbHandle } from './profile.tsx'
+
+export const handle: BreadcrumbHandle & SEOHandle = {
+ breadcrumb: Change Email
+You will receive an email at the new email address to confirm.
++ An email notice will also be sent to your old address{' '} + {loaderData.user.email}. +
+
+
+
+
+ {loaderData.connections.length ? (
+
+ )
+}
+
+function Connection({
+ connection,
+ canDelete,
+}: {
+ connection: Route.ComponentProps['loaderData']['connections'][number]
+ canDelete: boolean
+}) {
+ const deleteFetcher = useFetcher
+
+ ) : (
+ Here are your current connections:
+-
+ {loaderData.connections.map((c) => (
+
-
+
+
+ ))}
+
You don't have any connections yet.
+ )} +
+ {providerNames.map((providerName) => (
+
+
+
+ {icon}
+
+ {connection.link ? (
+
+ {connection.displayName}
+
+ ) : (
+ connection.displayName
+ )}{' '}
+ ({connection.createdAtFormatted})
+
+
+ {canDelete ? (
+
+
+
+
+
+
+
+
+ Disconnect this account
+
+
+
+ ) : (
+
+
+ setInfoOpen(true)}>
+
+
+ You cannot delete your last connection unless you have a password.
+
+
+
+ )}
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/settings+/profile.index.tsx b/demo/the-epic-stack/app/routes/settings+/profile.index.tsx
new file mode 100644
index 000000000..d68a7a7d0
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/settings+/profile.index.tsx
@@ -0,0 +1,371 @@
+import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { invariantResponse } from '@epic-web/invariant'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { Img } from 'openimg/react'
+import { data, Link, useFetcher } from 'react-router'
+import { z } from 'zod'
+import { ErrorList, Field } from '#app/components/forms.tsx'
+import { Button } from '#app/components/ui/button.tsx'
+import { Icon } from '#app/components/ui/icon.tsx'
+import { StatusButton } from '#app/components/ui/status-button.tsx'
+import { requireUserId, sessionKey } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { getUserImgSrc, useDoubleCheck } from '#app/utils/misc.tsx'
+import { authSessionStorage } from '#app/utils/session.server.ts'
+import { redirectWithToast } from '#app/utils/toast.server.ts'
+import { NameSchema, UsernameSchema } from '#app/utils/user-validation.ts'
+import { type Route } from './+types/profile.index.ts'
+import { twoFAVerificationType } from './profile.two-factor.tsx'
+
+export const handle: SEOHandle = {
+ getSitemapEntries: () => null,
+}
+
+const ProfileFormSchema = z.object({
+ name: NameSchema.nullable().default(null),
+ username: UsernameSchema,
+})
+
+export async function loader({ request }: Route.LoaderArgs) {
+ const userId = await requireUserId(request)
+ const user = await prisma.user.findUniqueOrThrow({
+ where: { id: userId },
+ select: {
+ id: true,
+ name: true,
+ username: true,
+ email: true,
+ image: {
+ select: { objectKey: true },
+ },
+ _count: {
+ select: {
+ sessions: {
+ where: {
+ expirationDate: { gt: new Date() },
+ },
+ },
+ },
+ },
+ },
+ })
+
+ const twoFactorVerification = await prisma.verification.findUnique({
+ select: { id: true },
+ where: { target_type: { type: twoFAVerificationType, target: userId } },
+ })
+
+ const password = await prisma.password.findUnique({
+ select: { userId: true },
+ where: { userId },
+ })
+
+ return {
+ user,
+ hasPassword: Boolean(password),
+ isTwoFactorEnabled: Boolean(twoFactorVerification),
+ }
+}
+
+type ProfileActionArgs = {
+ request: Request
+ userId: string
+ formData: FormData
+}
+const profileUpdateActionIntent = 'update-profile'
+const signOutOfSessionsActionIntent = 'sign-out-of-sessions'
+const deleteDataActionIntent = 'delete-data'
+
+export async function action({ request }: Route.ActionArgs) {
+ const userId = await requireUserId(request)
+ const formData = await request.formData()
+ const intent = formData.get('intent')
+ switch (intent) {
+ case profileUpdateActionIntent: {
+ return profileUpdateAction({ request, userId, formData })
+ }
+ case signOutOfSessionsActionIntent: {
+ return signOutOfSessionsAction({ request, userId, formData })
+ }
+ case deleteDataActionIntent: {
+ return deleteDataAction({ request, userId, formData })
+ }
+ default: {
+ throw new Response(`Invalid intent "${intent}"`, { status: 400 })
+ }
+ }
+}
+
+export default function EditUserProfile({ loaderData }: Route.ComponentProps) {
+ return (
+
+
+ )
+}
+
+async function profileUpdateAction({ userId, formData }: ProfileActionArgs) {
+ const submission = await parseWithZod(formData, {
+ async: true,
+ schema: ProfileFormSchema.superRefine(async ({ username }, ctx) => {
+ const existingUsername = await prisma.user.findUnique({
+ where: { username },
+ select: { id: true },
+ })
+ if (existingUsername && existingUsername.id !== userId) {
+ ctx.addIssue({
+ path: ['username'],
+ code: z.ZodIssueCode.custom,
+ message: 'A user already exists with this username',
+ })
+ }
+ }),
+ })
+ if (submission.status !== 'success') {
+ return data(
+ { result: submission.reply() },
+ { status: submission.status === 'error' ? 400 : 200 },
+ )
+ }
+
+ const { username, name } = submission.value
+
+ await prisma.user.update({
+ select: { username: true },
+ where: { id: userId },
+ data: {
+ name: name,
+ username: username,
+ },
+ })
+
+ return {
+ result: submission.reply(),
+ }
+}
+
+function UpdateProfile({
+ loaderData,
+}: {
+ loaderData: Route.ComponentProps['loaderData']
+}) {
+ const fetcher = useFetcher
+
+
+ })
+
+
+
+
+
+
+
+ Change email from {loaderData.user.email}
+
+
+
+
+
+ {loaderData.isTwoFactorEnabled ? (
+ 2FA is enabled
+ ) : (
+ Enable 2FA
+ )}
+
+
+
+
+
+ {loaderData.hasPassword ? 'Change Password' : 'Create a Password'}
+
+
+
+
+
+ Manage connections
+
+
+
+
+ Manage passkeys
+
+
+
+
+ Download your data
+
+
+
+
+
+
+
+ Save changes
+
+
+
+ {otherSessionsCount ? (
+
+
+
+ {dc.doubleCheck
+ ? `Are you sure?`
+ : `Sign out of ${otherSessionsCount} other sessions`}
+
+
+
+ ) : (
+ This is your only session
+ )}
+
+ )
+}
+
+async function deleteDataAction({ userId }: ProfileActionArgs) {
+ await prisma.user.delete({ where: { id: userId } })
+ return redirectWithToast('/', {
+ type: 'success',
+ title: 'Data Deleted',
+ description: 'All of your data has been deleted',
+ })
+}
+
+function DeleteData() {
+ const dc = useDoubleCheck()
+
+ const fetcher = useFetcher
+
+
+
+ {dc.doubleCheck ? `Are you sure?` : `Delete all your data`}
+
+
+
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/settings+/profile.passkeys.tsx b/demo/the-epic-stack/app/routes/settings+/profile.passkeys.tsx
new file mode 100644
index 000000000..31b3dde2a
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/settings+/profile.passkeys.tsx
@@ -0,0 +1,191 @@
+import { startRegistration } from '@simplewebauthn/browser'
+import { formatDistanceToNow } from 'date-fns'
+import { useState } from 'react'
+import { Form, useRevalidator } from 'react-router'
+import { z } from 'zod'
+import { Button } from '#app/components/ui/button.tsx'
+import { Icon } from '#app/components/ui/icon.tsx'
+import { requireUserId } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { type Route } from './+types/profile.passkeys.ts'
+
+export const handle = {
+ breadcrumb:
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/settings+/profile.password.tsx b/demo/the-epic-stack/app/routes/settings+/profile.password.tsx
new file mode 100644
index 000000000..750349667
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/settings+/profile.password.tsx
@@ -0,0 +1,182 @@
+import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { data, redirect, Form, Link } from 'react-router'
+import { z } from 'zod'
+import { ErrorList, Field } from '#app/components/forms.tsx'
+import { Button } from '#app/components/ui/button.tsx'
+import { Icon } from '#app/components/ui/icon.tsx'
+import { StatusButton } from '#app/components/ui/status-button.tsx'
+import {
+ checkIsCommonPassword,
+ getPasswordHash,
+ requireUserId,
+ verifyUserPassword,
+} from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { useIsPending } from '#app/utils/misc.tsx'
+import { redirectWithToast } from '#app/utils/toast.server.ts'
+import { PasswordSchema } from '#app/utils/user-validation.ts'
+import { type Route } from './+types/profile.password.ts'
+import { type BreadcrumbHandle } from './profile.tsx'
+
+export const handle: BreadcrumbHandle & SEOHandle = {
+ breadcrumb:
+
+
+ {error ? (
+ Passkeys
+ +
+ {error}
+
+ ) : null}
+
+ {loaderData.passkeys.length ? (
+ -
+ {loaderData.passkeys.map((passkey) => (
+
-
+ ++ +++
+ + {passkey.deviceType === 'platform' + ? 'Device' + : 'Security Key'} + + + Registered {formatDistanceToNow(new Date(passkey.createdAt))}{' '} + ago ++
+ ))}
+
+ No passkeys registered yet
+
+ )}
+
+
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/settings+/profile.tsx b/demo/the-epic-stack/app/routes/settings+/profile.tsx
new file mode 100644
index 000000000..f7ab8fcf0
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/settings+/profile.tsx
@@ -0,0 +1,82 @@
+import { invariantResponse } from '@epic-web/invariant'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { Link, Outlet, useMatches } from 'react-router'
+import { z } from 'zod'
+import { Spacer } from '#app/components/spacer.tsx'
+import { Icon } from '#app/components/ui/icon.tsx'
+import { requireUserId } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { cn } from '#app/utils/misc.tsx'
+import { useUser } from '#app/utils/user.ts'
+import { type Route } from './+types/profile.ts'
+
+export const BreadcrumbHandle = z.object({ breadcrumb: z.any() })
+export type BreadcrumbHandle = z.infer
+
+
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/settings+/profile.two-factor.disable.tsx b/demo/the-epic-stack/app/routes/settings+/profile.two-factor.disable.tsx
new file mode 100644
index 000000000..ed559241f
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/settings+/profile.two-factor.disable.tsx
@@ -0,0 +1,62 @@
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { useFetcher } from 'react-router'
+import { Icon } from '#app/components/ui/icon.tsx'
+import { StatusButton } from '#app/components/ui/status-button.tsx'
+import { requireRecentVerification } from '#app/routes/_auth+/verify.server.ts'
+import { requireUserId } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { useDoubleCheck } from '#app/utils/misc.tsx'
+import { redirectWithToast } from '#app/utils/toast.server.ts'
+import { type Route } from './+types/profile.two-factor.disable.ts'
+import { type BreadcrumbHandle } from './profile.tsx'
+import { twoFAVerificationType } from './profile.two-factor.tsx'
+
+export const handle: BreadcrumbHandle & SEOHandle = {
+ breadcrumb:
+
+ -
+
- + + Profile + + + {breadcrumbs.map((breadcrumb, i, arr) => ( +
-
+
+ {breadcrumb} + +
+ ))}
+
+
+
+ {dc.doubleCheck ? 'Are you sure?' : 'Disable 2FA'}
+
+
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/settings+/profile.two-factor.index.tsx b/demo/the-epic-stack/app/routes/settings+/profile.two-factor.index.tsx
new file mode 100644
index 000000000..7e0f8df51
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/settings+/profile.two-factor.index.tsx
@@ -0,0 +1,90 @@
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { redirect, Link, useFetcher } from 'react-router'
+import { Icon } from '#app/components/ui/icon.tsx'
+import { StatusButton } from '#app/components/ui/status-button.tsx'
+import { requireUserId } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { generateTOTP } from '#app/utils/totp.server.ts'
+import { type Route } from './+types/profile.two-factor.index.ts'
+import { twoFAVerificationType } from './profile.two-factor.tsx'
+import { twoFAVerifyVerificationType } from './profile.two-factor.verify.tsx'
+
+export const handle: SEOHandle = {
+ getSitemapEntries: () => null,
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+ const userId = await requireUserId(request)
+ const verification = await prisma.verification.findUnique({
+ where: { target_type: { type: twoFAVerificationType, target: userId } },
+ select: { id: true },
+ })
+ return { is2FAEnabled: Boolean(verification) }
+}
+
+export async function action({ request }: Route.ActionArgs) {
+ const userId = await requireUserId(request)
+ const { otp: _otp, ...config } = await generateTOTP()
+ const verificationData = {
+ ...config,
+ type: twoFAVerifyVerificationType,
+ target: userId,
+ }
+ await prisma.verification.upsert({
+ where: {
+ target_type: { target: userId, type: twoFAVerifyVerificationType },
+ },
+ create: verificationData,
+ update: verificationData,
+ })
+ return redirect('/settings/profile/two-factor/verify')
+}
+
+export default function TwoFactorRoute({ loaderData }: Route.ComponentProps) {
+ const enable2FAFetcher = useFetcher+ Disabling two factor authentication is not recommended. However, if + you would like to do so, click here: +
+
+ {loaderData.is2FAEnabled ? (
+ <>
+ Disable 2FA
+
+
+ ) : (
+ <>
+
+
+ Enable 2FA
+
+
+
+ )}
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/settings+/profile.two-factor.tsx b/demo/the-epic-stack/app/routes/settings+/profile.two-factor.tsx
new file mode 100644
index 000000000..0a5f2fa9b
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/settings+/profile.two-factor.tsx
@@ -0,0 +1,16 @@
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { Outlet } from 'react-router'
+import { Icon } from '#app/components/ui/icon.tsx'
+import { type VerificationTypes } from '#app/routes/_auth+/verify.tsx'
+import { type BreadcrumbHandle } from './profile.tsx'
+
+export const handle: BreadcrumbHandle & SEOHandle = {
+ breadcrumb:
+
+
+ Two factor authentication adds an extra layer of security to your + account. You will need to enter a code from an authenticator app + like{' '} + + 1Password + {' '} + to log in. +
+
+
+ )
+}
diff --git a/demo/the-epic-stack/app/routes/users+/$username.test.tsx b/demo/the-epic-stack/app/routes/users+/$username.test.tsx
new file mode 100644
index 000000000..b0784bd2c
--- /dev/null
+++ b/demo/the-epic-stack/app/routes/users+/$username.test.tsx
@@ -0,0 +1,97 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { faker } from '@faker-js/faker'
+import { render, screen } from '@testing-library/react'
+import { createRoutesStub } from 'react-router'
+import setCookieParser from 'set-cookie-parser'
+import { test } from 'vitest'
+import { loader as rootLoader } from '#app/root.tsx'
+import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { authSessionStorage } from '#app/utils/session.server.ts'
+import { createUser, getUserImages } from '#tests/db-utils.ts'
+import { default as UsernameRoute, loader } from './$username.tsx'
+
+test('The user profile when not logged in as self', async () => {
+ const userImages = await getUserImages()
+ const userImage =
+ userImages[faker.number.int({ min: 0, max: userImages.length - 1 })]
+ const user = await prisma.user.create({
+ select: { id: true, username: true, name: true },
+ data: { ...createUser(), image: { create: userImage } },
+ })
+ const App = createRoutesStub([
+ {
+ path: '/users/:username',
+ Component: UsernameRoute,
+ loader,
+ HydrateFallback: () =>
+ 
+
+ Scan this QR code with your authenticator app.
++ If you cannot scan the QR code, you can manually add this account to + your authenticator app using this code: +
+
+
+
+ {loaderData.otpUri}
+
+ + Once you've added the account, enter the code from your authenticator + app below. Once you enable 2FA, you will need to enter a code from + your authenticator app every time you log in or perform important + actions. Do not lose access to your authenticator app, or you will + lose access to your account. +
+
+
+
+ Loading...
,
+ },
+ ])
+
+ const routeUrl = `/users/${user.username}`
+ render(Loading...
,
+ children: [
+ {
+ path: 'users/:username',
+ Component: UsernameRoute,
+ loader: async (args) => {
+ // add the cookie header to the request
+ args.request.headers.set('cookie', cookieHeader)
+ return loader(args)
+ },
+ },
+ ],
+ },
+ ])
+
+ const routeUrl = `/users/${user.username}`
+ render(
+
+ )
+}
+
+export const meta: Route.MetaFunction = ({ data, params }) => {
+ const displayName = data?.user.name ?? params.username
+ return [
+ { title: `${displayName} | Epic Notes` },
+ {
+ name: 'description',
+ content: `Profile of ${displayName} on Epic Notes`,
+ },
+ ]
+}
+
+export function ErrorBoundary() {
+ return (
+
+
+
+
+
+
+
+
+ })
+
+
+
+
+
+ {userDisplayName}
++ Joined {data.userJoinedDisplay} +
+ {isLoggedInUser ? ( + + ) : null} +
+ {isLoggedInUser ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+ No user with the username "{params.username}" exists
+ ), + }} + /> + ) +} diff --git a/demo/the-epic-stack/app/routes/users+/$username_+/__note-editor.server.tsx b/demo/the-epic-stack/app/routes/users+/$username_+/__note-editor.server.tsx new file mode 100644 index 000000000..4ac8a5830 --- /dev/null +++ b/demo/the-epic-stack/app/routes/users+/$username_+/__note-editor.server.tsx @@ -0,0 +1,131 @@ +import { parseWithZod } from '@conform-to/zod' +import { parseFormData } from '@mjackson/form-data-parser' +import { createId as cuid } from '@paralleldrive/cuid2' +import { data, redirect, type ActionFunctionArgs } from 'react-router' +import { z } from 'zod' +import { requireUserId } from '#app/utils/auth.server.ts' +import { prisma } from '#app/utils/db.server.ts' +import { uploadNoteImage } from '#app/utils/storage.server.ts' +import { + MAX_UPLOAD_SIZE, + NoteEditorSchema, + type ImageFieldset, +} from './__note-editor' + +function imageHasFile( + image: ImageFieldset, +): image is ImageFieldset & { file: NonNullable
+
+
+
+
+ )
+}
+
+function ImageChooser({
+ meta,
+ objectKey,
+}: {
+ meta: FieldMetadata
+
+
+ Submit
+
+
+