+ {type ? headings[type] : 'Invalid Verification Type'}
+
+
+
+
+
+
+
+
+
+ - ๐๏ธ Remix SaaS -
- -
-
-
- A Lightweight, Feature-Rich, and Production-Ready Remix Stack for your next SaaS application. -
-
+
```sh
-npx create-remix-saas@latest
+npx create-epic-app@latest
```
-## [Live Demo](https://remix-saas.fly.dev)
+[](https://www.epicweb.dev/epic-stack)
+
+[The Epic Stack](https://www.epicweb.dev/epic-stack)
+
+The Epic Stack ๐
+ + Ditch analysis paralysis and start shipping Epic Web apps. +- Live Demo - ยท - Documentation - ยท - Twitter + This is an opinionated project starter and reference that allows teams to + ship their ideas to production faster and on a more stable foundation based + on the experience of Kent C. Dodds and + contributors.
-[](https://remix-saas.fly.dev) +## Watch Kent's Introduction to The Epic Stack -We've created a simple demo that displays all template-provided features. Psst! Give the site a few seconds to load! _(It's running on a free tier!)_ +[](https://www.epicweb.dev/talks/the-epic-stack) -> [!NOTE] -> Remix SaaS is an Open Source Template that shares common bits of code with: [Indie Stack](https://github.com/remix-run/indie-stack), [Epic Stack](https://github.com/epicweb-dev/epic-stack), [Supa Stripe Stack](https://github.com/rphlmr/supa-stripe-stack), and some other amazing Open Source Remix resources. Check them out, please! +["The Epic Stack" by Kent C. Dodds](https://www.epicweb.dev/talks/the-epic-stack) -## Getting Started +## Docs -Please, read the [Getting Started Documentation](https://github.com/dev-xo/remix-saas/tree/main/docs#remix-saas-documentation) to successfully initialize your **Remix SaaS** Template. +[Read the docs](https://github.com/epicweb-dev/epic-stack/blob/main/docs) +(please ๐). ## Support -If you found **Remix SaaS** helpful, consider supporting it with a โญ [Star](https://github.com/dev-xo/remix-saas). It helps the repository grow and provides the required motivation to continue maintaining the project. Thank you! +- ๐ Join the + [discussion on GitHub](https://github.com/epicweb-dev/epic-stack/discussions) + and the [KCD Community on Discord](https://kcd.im/discord). +- ๐ก Create an + [idea discussion](https://github.com/epicweb-dev/epic-stack/discussions/new?category=ideas) + for suggestions. +- ๐ Open a [GitHub issue](https://github.com/epicweb-dev/epic-stack/issues) to + report a bug. + +## Branding + +Want to talk about the Epic Stack in a blog post or talk? Great! Here are some +assets you can use in your material: +[EpicWeb.dev/brand](https://epicweb.dev/brand) -## Acknowledgments +## Thanks -Special thanks to [@mw10013](https://github.com/mw10013) who has been part of the Remix SaaS development. +You rock ๐ชจ diff --git a/app/components/error-boundary.tsx b/app/components/error-boundary.tsx new file mode 100644 index 00000000..715b8c8e --- /dev/null +++ b/app/components/error-boundary.tsx @@ -0,0 +1,46 @@ +import { + type ErrorResponse, + isRouteErrorResponse, + useParams, + useRouteError, +} from '@remix-run/react' +import { captureRemixErrorBoundaryError } from '@sentry/remix' +import { getErrorMessage } from '#app/utils/misc.tsx' + +type StatusHandler = (info: { + error: ErrorResponse + params: Record
+ {error.status} {error.data} +
+ ), + statusHandlers, + unexpectedErrorHandler = error =>{getErrorMessage(error)}
, +}: { + defaultStatusHandler?: StatusHandler + statusHandlers?: Record
+ {isRouteErrorResponse(error)
+ ? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
+ error,
+ params,
+ })
+ : unexpectedErrorHandler(error)}
+
+ )
+}
diff --git a/app/components/floating-toolbar.tsx b/app/components/floating-toolbar.tsx
new file mode 100644
index 00000000..41b5be03
--- /dev/null
+++ b/app/components/floating-toolbar.tsx
@@ -0,0 +1,2 @@
+export const floatingToolbarClassName =
+ 'absolute bottom-3 left-3 right-3 flex items-center gap-2 rounded-lg bg-muted/80 p-4 pl-5 shadow-xl shadow-accent backdrop-blur-sm md:gap-4 md:pl-7 justify-end'
diff --git a/app/components/forms.tsx b/app/components/forms.tsx
new file mode 100644
index 00000000..232f4760
--- /dev/null
+++ b/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: JSX.IntrinsicElements['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/app/components/header.tsx b/app/components/header.tsx
deleted file mode 100644
index 0f0ebcd4..00000000
--- a/app/components/header.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useLocation } from '@remix-run/react'
-import { ROUTE_PATH as DASHBOARD_PATH } from '#app/routes/dashboard+/_layout'
-import { ROUTE_PATH as BILLING_PATH } from '#app/routes/dashboard+/settings.billing'
-import { ROUTE_PATH as SETTINGS_PATH } from '#app/routes/dashboard+/settings'
-import { ROUTE_PATH as ADMIN_PATH } from '#app/routes/admin+/_layout'
-
-export function Header() {
- const location = useLocation()
- const allowedLocations = [DASHBOARD_PATH, BILLING_PATH, SETTINGS_PATH, ADMIN_PATH]
-
- const headerTitle = () => {
- if (location.pathname === DASHBOARD_PATH) return 'Dashboard'
- if (location.pathname === BILLING_PATH) return 'Billing'
- if (location.pathname === SETTINGS_PATH) return 'Settings'
- if (location.pathname === ADMIN_PATH) return 'Admin'
- }
- const headerDescription = () => {
- if (location.pathname === DASHBOARD_PATH)
- return 'Manage your Apps and view your usage.'
- if (location.pathname === SETTINGS_PATH) return 'Manage your account settings.'
- if (location.pathname === BILLING_PATH)
- return 'Manage billing and your subscription plan.'
- if (location.pathname === ADMIN_PATH) return 'Your admin dashboard.'
- }
-
- if (!allowedLocations.includes(location.pathname as (typeof allowedLocations)[number]))
- return null
-
- return (
-
+ {
+ 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 ?
+
-
-
-
- {headerTitle()}
-{headerDescription()}
-- {error.status} {error.status} {error.data} -
- ), - unexpectedErrorHandler = (error) =>{getErrorMessage(error)}
, -}: GenericErrorBoundaryProps) { - const params = useParams() - const error = useRouteError() - - if (typeof document !== 'undefined') { - console.error(error) - } - - return ( -
- {isRouteErrorResponse(error)
- ? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
- error,
- params,
- })
- : unexpectedErrorHandler(error)}
-
- )
-}
-
-export function getErrorMessage(err: unknown) {
- if (typeof err === 'string') return err
- if (
- err &&
- typeof err === 'object' &&
- 'message' in err &&
- typeof err.message === 'string'
- ) {
- return err.message
- }
- console.error('Unable to get error message for error:', err)
- return 'Unknown error'
-}
diff --git a/app/components/misc/language-switcher.tsx b/app/components/misc/language-switcher.tsx
deleted file mode 100644
index 7901f1fe..00000000
--- a/app/components/misc/language-switcher.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useNavigate } from '@remix-run/react'
-import { useTranslation } from 'react-i18next'
-import { Languages } from 'lucide-react'
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
-} from '#app/components/ui/select'
-
-export function LanguageSwitcher() {
- const navigate = useNavigate()
- const pathname = location.pathname.replace(/\/$/, '')
-
- const { i18n } = useTranslation()
- const language = i18n.resolvedLanguage
-
- const langs = [
- { text: 'English', value: 'en' },
- { text: 'Spanish', value: 'es' },
- ]
- const formatLanguage = (lng: string) => {
- return langs.find((lang) => lang.value === lng)?.text
- }
-
- return (
-
- )
-}
diff --git a/app/components/misc/theme-switcher.tsx b/app/components/misc/theme-switcher.tsx
deleted file mode 100644
index 47795b70..00000000
--- a/app/components/misc/theme-switcher.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import type { Theme, ThemeExtended } from '#app/utils/hooks/use-theme'
-import { useSubmit, useFetcher } from '@remix-run/react'
-import { Sun, Moon, Monitor } from 'lucide-react'
-import { useOptimisticThemeMode } from '#app/utils/hooks/use-theme'
-import { cn } from '#app/utils/misc'
-import { ROUTE_PATH as THEME_PATH } from '#app/routes/resources+/update-theme'
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
-} from '#app/components/ui/select'
-
-export function ThemeSwitcher({
- userPreference,
- triggerClass,
-}: {
- userPreference?: Theme | null
- triggerClass?: string
-}) {
- const submit = useSubmit()
- const optimisticMode = useOptimisticThemeMode()
- const mode = optimisticMode ?? userPreference ?? 'system'
- const themes: ThemeExtended[] = ['light', 'dark', 'system']
-
- return (
-
- )
-}
-
-export function ThemeSwitcherHome() {
- const fetcher = useFetcher({ key: 'theme-fetcher' })
- const themes: ThemeExtended[] = ['light', 'dark', 'system']
-
- return (
-
+
+ {delayedPending && (
+
+ )
+}
+
+export { EpicProgress }
diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
new file mode 100644
index 00000000..816950ea
--- /dev/null
+++ b/app/components/search-bar.tsx
@@ -0,0 +1,63 @@
+import { Form, useSearchParams, useSubmit } from '@remix-run/react'
+import { useId } from 'react'
+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((form: HTMLFormElement) => {
+ submit(form)
+ }, 400)
+
+ return (
+
+ )
+}
diff --git a/app/components/spacer.tsx b/app/components/spacer.tsx
new file mode 100644
index 00000000..8a8e5372
--- /dev/null
+++ b/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 && (
+
+ )
+})
+InputOTPSlot.displayName = 'InputOTPSlot'
+
+const InputOTPSeparator = React.forwardRef<
+ React.ElementRef<'div'>,
+ React.ComponentPropsWithoutRef<'div'>
+>(({ ...props }, ref) => (
+
+
+
+ )}
+
+ -
+
+))
+InputOTPSeparator.displayName = 'InputOTPSeparator'
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
index f0b60ee8..18801dca 100644
--- a/app/components/ui/input.tsx
+++ b/app/components/ui/input.tsx
@@ -1,23 +1,24 @@
import * as React from 'react'
-import { cn } from '#app/utils/misc'
+import { cn } from '#app/utils/misc.tsx'
-export interface InputProps extends React.InputHTMLAttributes
+
+ ) : null,
+ success: (
+
+
+ ),
+ error: (
+
+
+ ),
+ idle: null,
+ }[status]
+
+ return (
+
+ )
+})
+StatusButton.displayName = 'Button'
diff --git a/app/components/ui/switch.tsx b/app/components/ui/switch.tsx
deleted file mode 100644
index 7c6eda63..00000000
--- a/app/components/ui/switch.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react'
-import * as SwitchPrimitives from '@radix-ui/react-switch'
-
-import { cn } from '#app/utils/misc'
-
-const Switch = React.forwardRef<
- React.ElementRef
-
- {code}
-
- -
- - We hope you enjoy the new features! -
-
- - But don't worry, we'll not charge you anything. -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You are not allowed to do that: {error?.data.message}
- ), - }} - /> -
-
- ),
- }}
- />
- )
+ const location = useLocation()
+ return (
+
-
-
-
-
-
- Return to Home
-
- Whoops!
-- Nothing here yet! -
-
+ Back to home
+
+
+ ),
+ }}
+ />
+ )
}
diff --git a/app/routes/_auth+/auth.$provider.callback.test.ts b/app/routes/_auth+/auth.$provider.callback.test.ts
new file mode 100644
index 00000000..c6b44803
--- /dev/null
+++ b/app/routes/_auth+/auth.$provider.callback.test.ts
@@ -0,0 +1,259 @@
+import { invariant } from '@epic-web/invariant'
+import { faker } from '@faker-js/faker'
+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 { connectionSessionStorage } from '#app/utils/connections.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('error', { 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')
+ 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 } = 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 connectionSession = await connectionSessionStorage.getSession()
+ connectionSession.set('oauth2:state', state)
+ const authSession = await authSessionStorage.getSession()
+ if (sessionId) authSession.set(sessionKey, sessionId)
+ const setSessionCookieHeader =
+ await authSessionStorage.commitSession(authSession)
+ const setConnectionSessionCookieHeader =
+ await connectionSessionStorage.commitSession(connectionSession)
+ const request = new Request(url.toString(), {
+ method: 'GET',
+ headers: {
+ cookie: [
+ convertSetCookieToCookie(setConnectionSessionCookieHeader),
+ 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/app/routes/_auth+/auth.$provider.callback.ts b/app/routes/_auth+/auth.$provider.callback.ts
new file mode 100644
index 00000000..a8c21d26
--- /dev/null
+++ b/app/routes/_auth+/auth.$provider.callback.ts
@@ -0,0 +1,181 @@
+import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
+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 {
+ 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 { 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 }: LoaderFunctionArgs) {
+ // 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, { throwOnError: true })
+ .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: 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: 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: 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: profile.email.toLowerCase(),
+ username: profile.username?.replace(/[^a-zA-Z0-9_]/g, '_').toLowerCase(),
+ })
+ 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/app/routes/_auth+/auth.$provider.ts b/app/routes/_auth+/auth.$provider.ts
new file mode 100644
index 00000000..7231920c
--- /dev/null
+++ b/app/routes/_auth+/auth.$provider.ts
@@ -0,0 +1,33 @@
+import { redirect, type ActionFunctionArgs } from '@remix-run/node'
+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'
+
+export async function loader() {
+ return redirect('/login')
+}
+
+export async function action({ request, params }: ActionFunctionArgs) {
+ 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/app/routes/_auth+/forgot-password.tsx b/app/routes/_auth+/forgot-password.tsx
new file mode 100644
index 00000000..26ec3a4b
--- /dev/null
+++ b/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 * as E from '@react-email/components'
+import {
+ json,
+ redirect,
+ type ActionFunctionArgs,
+ type MetaFunction,
+} from '@remix-run/node'
+import { Link, useFetcher } from '@remix-run/react'
+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 { prepareVerification } from './verify.server.ts'
+
+const ForgotPasswordSchema = z.object({
+ usernameOrEmail: z.union([EmailSchema, UsernameSchema]),
+})
+
+export async function action({ request }: ActionFunctionArgs) {
+ const formData = await request.formData()
+ 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 json(
+ { 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
+
+
+
+
+ )
+}
+
+export const meta: MetaFunction = () => {
+ return [{ title: 'Login to Epic Notes' }]
+}
+
+export function ErrorBoundary() {
+ return
+
+
+
+ Welcome back!
++ Please enter your details. +
+
+
+
+
+
+ -
+ {providerNames.map(providerName => (
+
-
+
+
+ ))}
+
+ New here?
+
+ Create an account
+
+
+
+
+ )
+}
diff --git a/app/routes/_auth+/onboarding_.$provider.server.ts b/app/routes/_auth+/onboarding_.$provider.server.ts
new file mode 100644
index 00000000..826a72a8
--- /dev/null
+++ b/app/routes/_auth+/onboarding_.$provider.server.ts
@@ -0,0 +1,19 @@
+import { invariant } from '@epic-web/invariant'
+import { redirect } from '@remix-run/node'
+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/app/routes/_auth+/onboarding_.$provider.tsx b/app/routes/_auth+/onboarding_.$provider.tsx
new file mode 100644
index 00000000..5e24f7c4
--- /dev/null
+++ b/app/routes/_auth+/onboarding_.$provider.tsx
@@ -0,0 +1,284 @@
+import {
+ getFormProps,
+ getInputProps,
+ useForm,
+ type SubmissionResult,
+} from '@conform-to/react'
+import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import {
+ redirect,
+ json,
+ type ActionFunctionArgs,
+ type LoaderFunctionArgs,
+ type MetaFunction,
+} from '@remix-run/node'
+import {
+ type Params,
+ Form,
+ useActionData,
+ useLoaderData,
+ useSearchParams,
+} from '@remix-run/react'
+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 {
+ authenticator,
+ 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 { 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(),
+ })
+ .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 }: LoaderFunctionArgs) {
+ const { email } = await requireData({ request, params })
+ const authSession = await authSessionStorage.getSession(
+ request.headers.get('cookie'),
+ )
+ const verifySession = await verifySessionStorage.getSession(
+ request.headers.get('cookie'),
+ )
+ const prefilledProfile = verifySession.get(prefilledProfileKey)
+
+ const formError = authSession.get(authenticator.sessionErrorKey)
+ const hasError = typeof formError === 'string'
+
+ return json({
+ email,
+ status: 'idle',
+ submission: {
+ status: hasError ? 'error' : undefined,
+ initialValue: prefilledProfile ?? {},
+ error: { '': hasError ? [formError] : [] },
+ } as SubmissionResult,
+ })
+}
+
+export async function action({ request, params }: ActionFunctionArgs) {
+ 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,
+ providerName,
+ })
+ return { ...data, session }
+ }),
+ async: true,
+ })
+
+ if (submission.status !== 'success') {
+ return json(
+ { 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: MetaFunction = () => {
+ return [{ title: 'Setup Epic Notes Account' }]
+}
+
+export default function SignupRoute() {
+ const data = useLoaderData
+
+
+
+ Welcome aboard {data.email}!
++ Please enter your details. +
+
+
+ )
+}
diff --git a/app/routes/_auth+/reset-password.server.ts b/app/routes/_auth+/reset-password.server.ts
new file mode 100644
index 00000000..1c25b4dc
--- /dev/null
+++ b/app/routes/_auth+/reset-password.server.ts
@@ -0,0 +1,34 @@
+import { invariant } from '@epic-web/invariant'
+import { json, redirect } from '@remix-run/node'
+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 json(
+ { 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/app/routes/_auth+/reset-password.tsx b/app/routes/_auth+/reset-password.tsx
new file mode 100644
index 00000000..9a9b4259
--- /dev/null
+++ b/app/routes/_auth+/reset-password.tsx
@@ -0,0 +1,136 @@
+import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import {
+ json,
+ redirect,
+ type ActionFunctionArgs,
+ type LoaderFunctionArgs,
+ type MetaFunction,
+} from '@remix-run/node'
+import { Form, useActionData, useLoaderData } from '@remix-run/react'
+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 { 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'
+
+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 }: LoaderFunctionArgs) {
+ const resetPasswordUsername = await requireResetPasswordUsername(request)
+ return json({ resetPasswordUsername })
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+ const resetPasswordUsername = await requireResetPasswordUsername(request)
+ const formData = await request.formData()
+ const submission = parseWithZod(formData, {
+ schema: ResetPasswordSchema,
+ })
+ if (submission.status !== 'success') {
+ return json(
+ { 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: MetaFunction = () => {
+ return [{ title: 'Reset Password | Epic Notes' }]
+}
+
+export default function ResetPasswordPage() {
+ const data = useLoaderData
+
+
+
+ Welcome aboard {data.email}!
++ Please enter your details. +
+
+
+ )
+}
+
+export function ErrorBoundary() {
+ return
+
+ Password Reset
++ Hi, {data.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 ( +
- {/* Navigation */}
- 
-
-
-
- )
-}
diff --git a/app/routes/_home+/_layout.tsx b/app/routes/_home+/_layout.tsx
deleted file mode 100644
index 98dc1578..00000000
--- a/app/routes/_home+/_layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Outlet } from '@remix-run/react'
-import { json } from '@remix-run/node'
-
-export const ROUTE_PATH = '/' as const
-
-export async function loader() {
- return json({})
-}
-
-export default function Home() {
- return
-
-
-
- {/* Content */}
-
-
-
-
-
-
- {user ? 'Dashboard' : 'Get Started'}
-
-
-
-
-
- {/* Footer */}
-
-
- {/* Background */}
-
-
-
-
- - Sovoli -
-
- Launch in days with a modern{' '}
- Production-Ready Stack
-
Stripe integration. Vite-powered.
- Open Source.
-
-
- Get Started
-
-
- Explore Documentation
-
-
-
-
-
-
- - Production Ready. Build - your app on a solid, scalable, well-tested foundation. -
- - Get Started - -
-
-
- - Ready to Ship.{' '} - Deployments ready with a single command. -
- - Explore Documentation - -
-
-
-
-
-
-
-
-
-
- - Proudly Open Source -
-- Remix SaaS is a fully Open Source project. -
- - - Square Us on GitHub - -About page
+}
diff --git a/app/routes/_marketing+/index.tsx b/app/routes/_marketing+/index.tsx
new file mode 100644
index 00000000..85e42f19
--- /dev/null
+++ b/app/routes/_marketing+/index.tsx
@@ -0,0 +1,101 @@
+import { type MetaFunction } from '@remix-run/node'
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '#app/components/ui/tooltip.tsx'
+import { cn } from '#app/utils/misc.tsx'
+import { logos } from './logos/logos.ts'
+
+export const meta: MetaFunction = () => [{ title: 'Epic Notes' }]
+
+// Tailwind Grid cell classes lookup
+const columnClasses: Record<(typeof logos)[number]['column'], string> = {
+ 1: 'xl:col-start-1',
+ 2: 'xl:col-start-2',
+ 3: 'xl:col-start-3',
+ 4: 'xl:col-start-4',
+ 5: 'xl:col-start-5',
+}
+const rowClasses: Record<(typeof logos)[number]['row'], string> = {
+ 1: 'xl:row-start-1',
+ 2: 'xl:row-start-2',
+ 3: 'xl:row-start-3',
+ 4: 'xl:row-start-4',
+ 5: 'xl:row-start-5',
+ 6: 'xl:row-start-6',
+}
+
+export default function Index() {
+ return (
+
+
+
+
+
+
+
+ + The Epic Stack +
++ Check the{' '} + + Getting Started guide + {' '} + file for how to get your project off the ground! +
+-
+
-
+
+ ++ + ++ +
{logo.alt} +
+ ))}
+
Privacy
+}
diff --git a/app/routes/_marketing+/support.tsx b/app/routes/_marketing+/support.tsx
new file mode 100644
index 00000000..ec9a2420
--- /dev/null
+++ b/app/routes/_marketing+/support.tsx
@@ -0,0 +1,3 @@
+export default function SupportRoute() {
+ return Support
+}
diff --git a/app/routes/_marketing+/tailwind-preset.ts b/app/routes/_marketing+/tailwind-preset.ts
new file mode 100644
index 00000000..f1556493
--- /dev/null
+++ b/app/routes/_marketing+/tailwind-preset.ts
@@ -0,0 +1,27 @@
+import { type Config } from 'tailwindcss'
+
+export const marketingPreset = {
+ theme: {
+ extend: {
+ keyframes: {
+ 'roll-reveal': {
+ from: { transform: 'rotate(12deg) scale(0)', opacity: '0' },
+ to: { transform: 'rotate(0deg) scale(1)', opacity: '1' },
+ },
+ 'slide-left': {
+ from: { transform: 'translateX(20px)', opacity: '0' },
+ to: { transform: 'translateX(0px)', opacity: '1' },
+ },
+ 'slide-top': {
+ from: { transform: 'translateY(20px)', opacity: '0' },
+ to: { transform: 'translateY(0px)', opacity: '1' },
+ },
+ },
+ animation: {
+ 'roll-reveal': 'roll-reveal 0.4s cubic-bezier(.22,1.28,.54,.99)',
+ 'slide-left': 'slide-left 0.3s ease-out',
+ 'slide-top': 'slide-top 0.3s ease-out',
+ },
+ },
+ },
+} satisfies OmitTerms of service
+}
diff --git a/app/routes/_seo+/robots[.]txt.ts b/app/routes/_seo+/robots[.]txt.ts
new file mode 100644
index 00000000..94280a18
--- /dev/null
+++ b/app/routes/_seo+/robots[.]txt.ts
@@ -0,0 +1,9 @@
+import { generateRobotsTxt } from '@nasa-gcn/remix-seo'
+import { type LoaderFunctionArgs } from '@remix-run/node'
+import { getDomainUrl } from '#app/utils/misc.tsx'
+
+export function loader({ request }: LoaderFunctionArgs) {
+ return generateRobotsTxt([
+ { type: 'sitemap', value: `${getDomainUrl(request)}/sitemap.xml` },
+ ])
+}
diff --git a/app/routes/_seo+/sitemap[.]xml.ts b/app/routes/_seo+/sitemap[.]xml.ts
new file mode 100644
index 00000000..22721c36
--- /dev/null
+++ b/app/routes/_seo+/sitemap[.]xml.ts
@@ -0,0 +1,13 @@
+import { generateSitemap } from '@nasa-gcn/remix-seo'
+import { type ServerBuild, type LoaderFunctionArgs } from '@remix-run/node'
+import { getDomainUrl } from '#app/utils/misc.tsx'
+
+export async function loader({ request, context }: LoaderFunctionArgs) {
+ const serverBuild = (await context.serverBuild) as ServerBuild
+ return generateSitemap(request, serverBuild.routes, {
+ siteUrl: getDomainUrl(request),
+ headers: {
+ 'Cache-Control': `public, max-age=${60 * 5}`,
+ },
+ })
+}
diff --git a/app/routes/admin+/_index.tsx b/app/routes/admin+/_index.tsx
deleted file mode 100644
index 4d208eb9..00000000
--- a/app/routes/admin+/_index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { LoaderFunctionArgs } from '@remix-run/node'
-import { json } from '@remix-run/node'
-import { requireUserWithRole } from '#app/utils/permissions.server'
-
-export async function loader({ request }: LoaderFunctionArgs) {
- const user = await requireUserWithRole(request, 'admin')
- return json({ user } as const)
-}
-
-export default function AdminIndex() {
- return (
-
-
- )
-}
diff --git a/app/routes/admin+/_layout.tsx b/app/routes/admin+/_layout.tsx
deleted file mode 100644
index 6003e962..00000000
--- a/app/routes/admin+/_layout.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/node'
-import { useLoaderData } from '@remix-run/react'
-import { json } from '@remix-run/node'
-import { ShoppingBasket, ExternalLink } from 'lucide-react'
-import { requireUserWithRole } from '#app/utils/permissions.server'
-import { prisma } from '#app/utils/db.server'
-import { cn } from '#app/utils/misc.js'
-import { siteConfig } from '#app/utils/constants/brand'
-import { buttonVariants } from '#app/components/ui/button'
-import { Navigation } from '#app/components/navigation'
-import { Header } from '#app/components/header'
-
-export const ROUTE_PATH = '/admin' as const
-
-export const meta: MetaFunction = () => {
- return [{ title: `${siteConfig.siteTitle} - Admin` }]
-}
-
-export async function loader({ request }: LoaderFunctionArgs) {
- const user = await requireUserWithRole(request, 'admin')
- const subscription = await prisma.subscription.findUnique({
- where: { userId: user.id },
- })
- return json({ user, subscription } as const)
-}
-
-export default function Admin() {
- const { user, subscription } = useLoaderDataGet Started
-- Explore the Admin Panel and get started with your first app. -
-
-
- )
-}
diff --git a/app/routes/admin+/cache.tsx b/app/routes/admin+/cache.tsx
new file mode 100644
index 00000000..047f7891
--- /dev/null
+++ b/app/routes/admin+/cache.tsx
@@ -0,0 +1,249 @@
+import { invariantResponse } from '@epic-web/invariant'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import {
+ json,
+ redirect,
+ type LoaderFunctionArgs,
+ type ActionFunctionArgs,
+} from '@remix-run/node'
+import {
+ Form,
+ Link,
+ useFetcher,
+ useLoaderData,
+ useSearchParams,
+ useSubmit,
+} from '@remix-run/react'
+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'
+
+export const handle: SEOHandle = {
+ getSitemapEntries: () => null,
+}
+
+export async function loader({ request }: LoaderFunctionArgs) {
+ 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
-
-
-
-
-
-
-
-
-
- Customers
-- Simple admin panel to manage your products and sales. -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Track your Sales
-- This is a simple Demo that you could use to manage your products and - sales. -
-
+
+ )
+}
+
+function CacheKeyRow({
+ cacheKey,
+ instance,
+ type,
+}: {
+ cacheKey: string
+ instance?: string
+ type: 'sqlite' | 'lru'
+}) {
+ const fetcher = useFetcherCache Admin
+
+
+ LRU Cache:
+ {data.cacheKeys.lru.map(key => ( +
+
+ SQLite Cache:
+ {data.cacheKeys.sqlite.map(key => ( +
+
+
+
+
+
+
+
+ {cacheKey}
+
+
+ )
+}
+
+export function ErrorBoundary() {
+ return (
+ You are not allowed to do that: {error?.data.message}
+ ), + }} + /> + ) +} diff --git a/app/routes/admin+/cache_.lru.$cacheKey.ts b/app/routes/admin+/cache_.lru.$cacheKey.ts new file mode 100644 index 00000000..2b793d09 --- /dev/null +++ b/app/routes/admin+/cache_.lru.$cacheKey.ts @@ -0,0 +1,31 @@ +import { invariantResponse } from '@epic-web/invariant' +import { json, type LoaderFunctionArgs } from '@remix-run/node' +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' + +export async function loader({ request, params }: LoaderFunctionArgs) { + 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 json({ + instance: { + hostname: instance, + region: allInstances[instance], + isPrimary: currentInstanceInfo.primaryInstance === instance, + }, + cacheKey, + value: lruCache.get(cacheKey), + }) +} diff --git a/app/routes/admin+/cache_.sqlite.$cacheKey.ts b/app/routes/admin+/cache_.sqlite.$cacheKey.ts new file mode 100644 index 00000000..39bcb077 --- /dev/null +++ b/app/routes/admin+/cache_.sqlite.$cacheKey.ts @@ -0,0 +1,31 @@ +import { invariantResponse } from '@epic-web/invariant' +import { json, type LoaderFunctionArgs } from '@remix-run/node' +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' + +export async function loader({ request, params }: LoaderFunctionArgs) { + 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 json({ + instance: { + hostname: instance, + region: allInstances[instance], + isPrimary: currentInstanceInfo.primaryInstance === instance, + }, + cacheKey, + value: cache.get(cacheKey), + }) +} diff --git a/app/routes/admin+/cache_.sqlite.server.ts b/app/routes/admin+/cache_.sqlite.server.ts new file mode 100644 index 00000000..314f9300 --- /dev/null +++ b/app/routes/admin+/cache_.sqlite.server.ts @@ -0,0 +1,29 @@ +import { + getInstanceInfo, + getInternalInstanceDomain, +} from '#app/utils/litefs.server' + +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 }), + }) +} diff --git a/app/routes/admin+/cache_.sqlite.tsx b/app/routes/admin+/cache_.sqlite.tsx new file mode 100644 index 00000000..68b48ac7 --- /dev/null +++ b/app/routes/admin+/cache_.sqlite.tsx @@ -0,0 +1,30 @@ +import { json, redirect, type ActionFunctionArgs } from '@remix-run/node' +import { z } from 'zod' +import { cache } from '#app/utils/cache.server.ts' +import { getInstanceInfo } from '#app/utils/litefs.server' + +export async function action({ request }: ActionFunctionArgs) { + 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 json({ success: true }) +} diff --git a/app/routes/api+/webhook.ts b/app/routes/api+/webhook.ts deleted file mode 100644 index 42013dfc..00000000 --- a/app/routes/api+/webhook.ts +++ /dev/null @@ -1,177 +0,0 @@ -import type { ActionFunctionArgs } from '@remix-run/node' -import { z } from 'zod' -import { stripe } from '#app/modules/stripe/stripe.server' -import { PLANS } from '#app/modules/stripe/plans' -import { prisma } from '#app/utils/db.server' -import { - sendSubscriptionSuccessEmail, - sendSubscriptionErrorEmail, -} from '#app/modules/email/templates/subscription-email' -import { ERRORS } from '#app/utils/constants/errors' - -export const ROUTE_PATH = '/api/webhook' as const - -/** - * Gets and constructs a Stripe event signature. - * - * @throws An error if Stripe signature is missing or if event construction fails. - * @returns The Stripe event object. - */ -async function getStripeEvent(request: Request) { - if (!process.env.STRIPE_WEBHOOK_ENDPOINT) { - throw new Error(`Stripe - ${ERRORS.ENVS_NOT_INITIALIZED}`) - } - - try { - const signature = request.headers.get('Stripe-Signature') - if (!signature) throw new Error(ERRORS.STRIPE_MISSING_SIGNATURE) - const payload = await request.text() - const event = stripe.webhooks.constructEvent( - payload, - signature, - process.env.STRIPE_WEBHOOK_ENDPOINT, - ) - return event - } catch (err: unknown) { - console.log(err) - throw new Error(ERRORS.STRIPE_SOMETHING_WENT_WRONG) - } -} - -export async function action({ request }: ActionFunctionArgs) { - const event = await getStripeEvent(request) - - try { - switch (event.type) { - /** - * Occurs when a Checkout Session has been successfully completed. - */ - case 'checkout.session.completed': { - const session = event.data.object - - const { customer: customerId, subscription: subscriptionId } = z - .object({ customer: z.string(), subscription: z.string() }) - .parse(session) - - const user = await prisma.user.findUnique({ where: { customerId } }) - if (!user) throw new Error(ERRORS.SOMETHING_WENT_WRONG) - - const subscription = await stripe.subscriptions.retrieve(subscriptionId) - await prisma.subscription.update({ - where: { userId: user.id }, - data: { - id: subscription.id, - userId: user.id, - planId: String(subscription.items.data[0].plan.product), - priceId: String(subscription.items.data[0].price.id), - interval: String(subscription.items.data[0].plan.interval), - status: subscription.status, - currentPeriodStart: subscription.current_period_start, - currentPeriodEnd: subscription.current_period_end, - cancelAtPeriodEnd: subscription.cancel_at_period_end, - }, - }) - - await sendSubscriptionSuccessEmail({ email: user.email, subscriptionId }) - - // Cancel free subscription. โ User upgraded to a paid plan. - // Not required, but it's a good practice to keep just a single active plan. - const subscriptions = ( - await stripe.subscriptions.list({ customer: customerId }) - ).data.map((sub) => sub.items) - - if (subscriptions.length > 1) { - const freeSubscription = subscriptions.find((sub) => - sub.data.some((item) => item.price.product === PLANS.FREE), - ) - if (freeSubscription) { - await stripe.subscriptions.cancel(freeSubscription?.data[0].subscription) - } - } - - return new Response(null) - } - - /** - * Occurs when a Stripe subscription has been updated. - * E.g. when a user upgrades or downgrades their plan. - */ - case 'customer.subscription.updated': { - const subscription = event.data.object - const { customer: customerId } = z - .object({ customer: z.string() }) - .parse(subscription) - - const user = await prisma.user.findUnique({ where: { customerId } }) - if (!user) throw new Error(ERRORS.SOMETHING_WENT_WRONG) - - await prisma.subscription.update({ - where: { userId: user.id }, - data: { - id: subscription.id, - userId: user.id, - planId: String(subscription.items.data[0].plan.product), - priceId: String(subscription.items.data[0].price.id), - interval: String(subscription.items.data[0].plan.interval), - status: subscription.status, - currentPeriodStart: subscription.current_period_start, - currentPeriodEnd: subscription.current_period_end, - cancelAtPeriodEnd: subscription.cancel_at_period_end, - }, - }) - - return new Response(null) - } - - /** - * Occurs whenever a customerโs subscription ends. - */ - case 'customer.subscription.deleted': { - const subscription = event.data.object - const { id } = z.object({ id: z.string() }).parse(subscription) - - const dbSubscription = await prisma.subscription.findUnique({ - where: { id }, - }) - if (dbSubscription) - await prisma.subscription.delete({ where: { id: dbSubscription.id } }) - - return new Response(null) - } - } - } catch (err: unknown) { - switch (event.type) { - case 'checkout.session.completed': { - const session = event.data.object - - const { customer: customerId, subscription: subscriptionId } = z - .object({ customer: z.string(), subscription: z.string() }) - .parse(session) - - const user = await prisma.user.findUnique({ where: { customerId } }) - if (!user) throw new Error(ERRORS.STRIPE_SOMETHING_WENT_WRONG) - - await sendSubscriptionErrorEmail({ email: user.email, subscriptionId }) - return new Response(null) - } - - case 'customer.subscription.updated': { - const subscription = event.data.object - - const { id: subscriptionId, customer: customerId } = z - .object({ id: z.string(), customer: z.string() }) - .parse(subscription) - - const user = await prisma.user.findUnique({ where: { customerId } }) - if (!user) throw new Error(ERRORS.STRIPE_SOMETHING_WENT_WRONG) - - await sendSubscriptionErrorEmail({ email: user.email, subscriptionId }) - return new Response(null) - } - } - - throw err - } - - return new Response(null) -} diff --git a/app/routes/auth+/$provider.callback.tsx b/app/routes/auth+/$provider.callback.tsx deleted file mode 100644 index 60ae3c83..00000000 --- a/app/routes/auth+/$provider.callback.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { LoaderFunctionArgs } from '@remix-run/node' -import { authenticator } from '#app/modules/auth/auth.server' -import { ROUTE_PATH as LOGIN_PATH } from '#app/routes/auth+/login' -import { ROUTE_PATH as DASHBOARD_PATH } from '#app/routes/dashboard+/_layout' - -export const ROUTE_PATH = '/auth/:provider/callback' as const - -export async function loader({ request, params }: LoaderFunctionArgs) { - if (typeof params.provider !== 'string') throw new Error('Invalid provider.') - - return authenticator.authenticate(params.provider, request, { - successRedirect: LOGIN_PATH, - failureRedirect: DASHBOARD_PATH, - }) -} diff --git a/app/routes/auth+/$provider.tsx b/app/routes/auth+/$provider.tsx deleted file mode 100644 index d63a3aee..00000000 --- a/app/routes/auth+/$provider.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { ActionFunctionArgs } from '@remix-run/node' -import { redirect } from '@remix-run/node' -import { authenticator } from '#app/modules/auth/auth.server' -import { ROUTE_PATH as LOGIN_PATH } from '#app/routes/auth+/login' - -export const ROUTE_PATH = '/auth/:provider' as const - -export async function loader() { - return redirect(LOGIN_PATH) -} - -export async function action({ request, params }: ActionFunctionArgs) { - if (typeof params.provider !== 'string') throw new Error('Invalid provider.') - return authenticator.authenticate(params.provider, request) -} diff --git a/app/routes/auth+/_layout.tsx b/app/routes/auth+/_layout.tsx deleted file mode 100644 index 42df27a9..00000000 --- a/app/routes/auth+/_layout.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import type { LoaderFunctionArgs } from '@remix-run/node' -import { Link, Outlet } from '@remix-run/react' -import { json, redirect } from '@remix-run/node' -import { authenticator } from '#app/modules/auth/auth.server' -import { getDomainPathname } from '#app/utils/misc.server' -import { ROUTE_PATH as HOME_PATH } from '#app/routes/_home+/_layout' -import { ROUTE_PATH as LOGIN_PATH } from '#app/routes/auth+/login' -import { ROUTE_PATH as DASHBOARD_PATH } from '#app/routes/dashboard+/_layout' -import { Logo } from '#app/components/logo' - -export const ROUTE_PATH = '/auth' as const - -export async function loader({ request }: LoaderFunctionArgs) { - await authenticator.isAuthenticated(request, { - successRedirect: DASHBOARD_PATH, - }) - const pathname = getDomainPathname(request) - if (pathname === ROUTE_PATH) return redirect(LOGIN_PATH) - return json({}) -} - -const QUOTES = [ - { - quote: 'There is nothing impossible to they who will try.', - author: 'Alexander the Great', - }, - { - quote: 'The only way to do great work is to love what you do.', - author: 'Steve Jobs', - }, - { - quote: 'The best way to predict the future is to create it.', - author: 'Peter Drucker', - }, - { - quote: 'The only limit to our realization of tomorrow will be our doubts of today.', - author: 'Franklin D. Roosevelt', - }, - { - quote: 'The only thing we have to fear is fear itself.', - author: 'Franklin D. Roosevelt', - }, -] - -export default function Layout() { - const randomQuote = QUOTES[Math.floor(Math.random() * QUOTES.length)] - - return ( -
-
- )
-}
diff --git a/app/routes/auth+/login.tsx b/app/routes/auth+/login.tsx
deleted file mode 100644
index a85a6707..00000000
--- a/app/routes/auth+/login.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import type {
- MetaFunction,
- LoaderFunctionArgs,
- ActionFunctionArgs,
-} from '@remix-run/node'
-import { useRef, useEffect } from 'react'
-import { Form, useLoaderData } from '@remix-run/react'
-import { json } from '@remix-run/node'
-import { useHydrated } from 'remix-utils/use-hydrated'
-import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
-import { HoneypotInputs } from 'remix-utils/honeypot/react'
-import { z } from 'zod'
-import { getZodConstraint, parseWithZod } from '@conform-to/zod'
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
-import { Loader2 } from 'lucide-react'
-import { authenticator } from '#app/modules/auth/auth.server'
-import { getSession, commitSession } from '#app/modules/auth/auth-session.server'
-import { validateCSRF } from '#app/utils/csrf.server'
-import { checkHoneypot } from '#app/utils/honeypot.server'
-import { useIsPending } from '#app/utils/misc'
-import { siteConfig } from '#app/utils/constants/brand'
-import { Input } from '#app/components/ui/input'
-import { Button } from '#app/components/ui/button'
-import { ROUTE_PATH as DASHBOARD_PATH } from '#app/routes/dashboard+/_layout'
-import { ROUTE_PATH as AUTH_VERIFY_PATH } from '#app/routes/auth+/verify'
-
-export const ROUTE_PATH = '/auth/login' as const
-
-export const LoginSchema = z.object({
- email: z.string().max(256).email('Email address is not valid.'),
-})
-
-export const meta: MetaFunction = () => {
- return [{ title: `${siteConfig.siteTitle} - Login` }]
-}
-
-export async function loader({ request }: LoaderFunctionArgs) {
- await authenticator.isAuthenticated(request, {
- successRedirect: DASHBOARD_PATH,
- })
-
- const cookie = await getSession(request.headers.get('Cookie'))
- const authEmail = cookie.get('auth:email')
- const authError = cookie.get(authenticator.sessionErrorKey)
-
- return json({ authEmail, authError } as const, {
- headers: {
- 'Set-Cookie': await commitSession(cookie),
- },
- })
-}
-
-export async function action({ request }: ActionFunctionArgs) {
- const url = new URL(request.url)
- const pathname = url.pathname
-
- const clonedRequest = request.clone()
- const formData = await clonedRequest.formData()
- await validateCSRF(formData, clonedRequest.headers)
- checkHoneypot(formData)
-
- await authenticator.authenticate('TOTP', request, {
- successRedirect: AUTH_VERIFY_PATH,
- failureRedirect: pathname,
- })
-}
-
-export default function Login() {
- const { authEmail, authError } = useLoaderData
-
-
-
-
-
-
-
-
- {randomQuote.quote}
-- {randomQuote.author}
-
-
-
-
- )
-}
diff --git a/app/routes/auth+/logout.tsx b/app/routes/auth+/logout.tsx
deleted file mode 100644
index e632951d..00000000
--- a/app/routes/auth+/logout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node'
-import { authenticator } from '#app/modules/auth/auth.server'
-
-export const ROUTE_PATH = '/auth/logout' as const
-
-export async function loader({ request }: LoaderFunctionArgs) {
- return authenticator.logout(request, { redirectTo: '/' })
-}
-
-export async function action({ request }: ActionFunctionArgs) {
- return authenticator.logout(request, { redirectTo: '/' })
-}
diff --git a/app/routes/auth+/magic-link.tsx b/app/routes/auth+/magic-link.tsx
deleted file mode 100644
index 1045dde6..00000000
--- a/app/routes/auth+/magic-link.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { LoaderFunctionArgs } from '@remix-run/node'
-import { authenticator } from '#app/modules/auth/auth.server'
-
-import { ROUTE_PATH as DASHBOARD_PATH } from '#app/routes/dashboard+/_layout'
-import { ROUTE_PATH as LOGIN_PATH } from '#app/routes/auth+/login'
-
-export const ROUTE_PATH = '/auth/magic-link' as const
-
-export async function loader({ request }: LoaderFunctionArgs) {
- return authenticator.authenticate('TOTP', request, {
- successRedirect: DASHBOARD_PATH,
- failureRedirect: LOGIN_PATH,
- })
-}
diff --git a/app/routes/auth+/verify.tsx b/app/routes/auth+/verify.tsx
deleted file mode 100644
index a4c45299..00000000
--- a/app/routes/auth+/verify.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import type {
- MetaFunction,
- LoaderFunctionArgs,
- ActionFunctionArgs,
-} from '@remix-run/node'
-import { useRef, useEffect } from 'react'
-import { Form, useLoaderData } from '@remix-run/react'
-import { json, redirect } from '@remix-run/node'
-import { useHydrated } from 'remix-utils/use-hydrated'
-import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
-import { HoneypotInputs } from 'remix-utils/honeypot/react'
-import { z } from 'zod'
-import { getZodConstraint, parseWithZod } from '@conform-to/zod'
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
-import { authenticator } from '#app/modules/auth/auth.server'
-import { getSession, commitSession } from '#app/modules/auth/auth-session.server'
-import { validateCSRF } from '#app/utils/csrf.server'
-import { checkHoneypot } from '#app/utils/honeypot.server'
-import { siteConfig } from '#app/utils/constants/brand'
-import { ROUTE_PATH as DASHBOARD_PATH } from '#app/routes/dashboard+/_layout'
-import { Input } from '#app/components/ui/input'
-import { Button } from '#app/components/ui/button'
-
-export const ROUTE_PATH = '/auth/verify' as const
-
-export const VerifyLoginSchema = z.object({
- code: z.string().min(6, 'Code must be at least 6 characters.'),
-})
-
-export const meta: MetaFunction = () => {
- return [{ title: `${siteConfig.siteTitle} - Verify` }]
-}
-
-export async function loader({ request }: LoaderFunctionArgs) {
- await authenticator.isAuthenticated(request, {
- successRedirect: DASHBOARD_PATH,
- })
-
- const cookie = await getSession(request.headers.get('Cookie'))
- const authEmail = cookie.get('auth:email')
- const authError = cookie.get(authenticator.sessionErrorKey)
-
- if (!authEmail) return redirect('/auth/login')
-
- return json({ authEmail, authError } as const, {
- headers: {
- 'Set-Cookie': await commitSession(cookie),
- },
- })
-}
-
-export async function action({ request }: ActionFunctionArgs) {
- const url = new URL(request.url)
- const pathname = url.pathname
-
- const clonedRequest = request.clone()
- const formData = await clonedRequest.formData()
- await validateCSRF(formData, clonedRequest.headers)
- checkHoneypot(formData)
-
- await authenticator.authenticate('TOTP', request, {
- successRedirect: pathname,
- failureRedirect: pathname,
- })
-}
-
-export default function Verify() {
- const { authEmail, authError } = useLoaderData
-
-
-
-
- - Continue to Remix SaaS -
-- Welcome back! Please log in to continue. -
-
-
-
- Or continue with
-
-
-
-
-
- - By clicking continue, you agree to our{' '} - - Terms of Service - {' '} - and{' '} - - Privacy Policy. - -
-
-
- )
-}
diff --git a/app/routes/dashboard+/_index.tsx b/app/routes/dashboard+/_index.tsx
deleted file mode 100644
index d5f4f711..00000000
--- a/app/routes/dashboard+/_index.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/node'
-import { json } from '@remix-run/node'
-import { Plus, ExternalLink } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { requireUser } from '#app/modules/auth/auth.server'
-import { prisma } from '#app/utils/db.server'
-import { cn } from '#app/utils/misc.js'
-import { siteConfig } from '#app/utils/constants/brand'
-import { buttonVariants } from '#app/components/ui/button'
-
-export const meta: MetaFunction = () => {
- return [{ title: `${siteConfig.siteTitle} - Dashboard` }]
-}
-
-export async function loader({ request }: LoaderFunctionArgs) {
- const user = await requireUser(request)
- const subscription = await prisma.subscription.findUnique({
- where: { userId: user.id },
- })
- return json({ user, subscription } as const)
-}
-
-export default function DashboardIndex() {
- const { t } = useTranslation()
-
- return (
-
-
-
-
-
- {/* Request New Code. */}
- {/* Email is already in session, input it's not required. */}
-
- Check your inbox!
-
- We've just emailed you a temporary password.
-
- Please enter it below.
-
-
- )
-}
diff --git a/app/routes/dashboard+/_layout.tsx b/app/routes/dashboard+/_layout.tsx
deleted file mode 100644
index e04df1ba..00000000
--- a/app/routes/dashboard+/_layout.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { LoaderFunctionArgs } from '@remix-run/node'
-import { Outlet, useLoaderData } from '@remix-run/react'
-import { json, redirect } from '@remix-run/node'
-import { requireUser } from '#app/modules/auth/auth.server'
-import { prisma } from '#app/utils/db.server'
-import { ROUTE_PATH as ONBOARDING_USERNAME_PATH } from '#app/routes/onboarding+/username'
-import { Navigation } from '#app/components/navigation'
-import { Header } from '#app/components/header'
-
-export const ROUTE_PATH = '/dashboard' as const
-
-export async function loader({ request }: LoaderFunctionArgs) {
- const user = await requireUser(request)
- if (!user.username) return redirect(ONBOARDING_USERNAME_PATH)
- const subscription = await prisma.subscription.findUnique({
- where: { userId: user.id },
- })
-
- return json({ user, subscription } as const)
-}
-
-export default function Dashboard() {
- const { user, subscription } = useLoaderData
-
-
-
-
-
-
-
- Get Started
-- Explore the Dashboard and get started with your first app. -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {t('title')}
-- {t('description')} -
- - TIP: Try changing the language! - -
-
- )
-}
diff --git a/app/routes/dashboard+/checkout.tsx b/app/routes/dashboard+/checkout.tsx
deleted file mode 100644
index b61f55d6..00000000
--- a/app/routes/dashboard+/checkout.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/node'
-import { useState } from 'react'
-import { Link, useLoaderData, useRevalidator } from '@remix-run/react'
-import { json, redirect } from '@remix-run/node'
-import { Loader2, BadgeCheck, AlertTriangle, ExternalLink } from 'lucide-react'
-import { requireSessionUser } from '#app/modules/auth/auth.server'
-import { PLANS } from '#app/modules/stripe/plans'
-import { prisma } from '#app/utils/db.server'
-import { useInterval } from '#app/utils/hooks/use-interval'
-import { siteConfig } from '#app/utils/constants/brand'
-import { ROUTE_PATH as DASHBOARD_PATH } from '#app/routes/dashboard+/_layout'
-import { buttonVariants } from '#app/components/ui/button'
-
-export const ROUTE_PATH = '/dashboard/checkout'
-
-export const meta: MetaFunction = () => {
- return [{ title: `${siteConfig.siteTitle} - Checkout` }]
-}
-
-export async function loader({ request }: LoaderFunctionArgs) {
- const sessionUser = await requireSessionUser(request)
- const subscription = await prisma.subscription.findUnique({
- where: { userId: sessionUser.id },
- })
- if (!subscription) return redirect(DASHBOARD_PATH)
-
- return json({ isFreePlan: subscription.planId === PLANS.FREE } as const)
-}
-
-export default function DashboardCheckout() {
- const { isFreePlan } = useLoaderData
-
- )
-}
diff --git a/app/routes/dashboard+/settings.billing.tsx b/app/routes/dashboard+/settings.billing.tsx
deleted file mode 100644
index 7365069c..00000000
--- a/app/routes/dashboard+/settings.billing.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import type {
- MetaFunction,
- LoaderFunctionArgs,
- ActionFunctionArgs,
-} from '@remix-run/node'
-import type { Interval, Plan } from '#app/modules/stripe/plans'
-import { useState } from 'react'
-import { Form, useLoaderData } from '@remix-run/react'
-import { json, redirect } from '@remix-run/node'
-import { requireSessionUser } from '#app/modules/auth/auth.server'
-import { PLANS, PRICING_PLANS, INTERVALS, CURRENCIES } from '#app/modules/stripe/plans'
-import {
- createSubscriptionCheckout,
- createCustomerPortal,
-} from '#app/modules/stripe/queries.server'
-import { prisma } from '#app/utils/db.server'
-import { getLocaleCurrency } from '#app/utils/misc.server'
-import { INTENTS } from '#app/utils/constants/misc'
-import { ROUTE_PATH as LOGIN_PATH } from '#app/routes/auth+/login'
-import { Switch } from '#app/components/ui/switch'
-import { Button } from '#app/components/ui/button'
-
-export const ROUTE_PATH = '/dashboard/settings/billing' as const
-
-export const meta: MetaFunction = () => {
- return [{ title: 'Remix SaaS - Billing' }]
-}
-
-export async function loader({ request }: LoaderFunctionArgs) {
- const sessionUser = await requireSessionUser(request, {
- redirectTo: LOGIN_PATH,
- })
-
- const subscription = await prisma.subscription.findUnique({
- where: { userId: sessionUser.id },
- })
- const currency = getLocaleCurrency(request)
-
- return json({ subscription, currency } as const)
-}
-
-export async function action({ request }: ActionFunctionArgs) {
- const sessionUser = await requireSessionUser(request, {
- redirectTo: LOGIN_PATH,
- })
-
- const formData = await request.formData()
- const intent = formData.get(INTENTS.INTENT)
-
- if (intent === INTENTS.SUBSCRIPTION_CREATE_CHECKOUT) {
- const planId = String(formData.get('planId'))
- const planInterval = String(formData.get('planInterval'))
- const checkoutUrl = await createSubscriptionCheckout({
- userId: sessionUser.id,
- planId,
- planInterval,
- request,
- })
- if (!checkoutUrl) return json({ success: false } as const)
- return redirect(checkoutUrl)
- }
- if (intent === INTENTS.SUBSCRIPTION_CREATE_CUSTOMER_PORTAL) {
- const customerPortalUrl = await createCustomerPortal({
- userId: sessionUser.id,
- })
- if (!customerPortalUrl) return json({ success: false } as const)
- return redirect(customerPortalUrl)
- }
-
- return json({})
-}
-
-export default function DashboardBilling() {
- const { subscription, currency } = useLoaderData
-
-
-
-
-
-
-
- - Completing your Checkout -
-- We are completing your checkout, please wait ... -
-
-
-
-
-
-
-
-
-
-
- {isFreePlan && retries < 3 && (
-
-
-
- - {isFreePlan && retries < 3 && 'Completing your checkout ...'} - {!isFreePlan && 'Checkout completed!'} - {isFreePlan && - retries === 3 && - "Something went wrong, but don't worry, you will not be charged."} -
-
-
-
- Return to Dashboard
-
-
-
-
-
-
- )
-}
diff --git a/app/routes/dashboard+/settings.index.tsx b/app/routes/dashboard+/settings.index.tsx
deleted file mode 100644
index 0f6984ae..00000000
--- a/app/routes/dashboard+/settings.index.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node'
-import { useRef, useState } from 'react'
-import { Form, useFetcher, useLoaderData, useActionData } from '@remix-run/react'
-import { json, redirect } from '@remix-run/node'
-import { z } from 'zod'
-import { getZodConstraint, parseWithZod } from '@conform-to/zod'
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
-import { Upload } from 'lucide-react'
-import { requireUser } from '#app/modules/auth/auth.server'
-import { getSession, destroySession } from '#app/modules/auth/auth-session.server'
-import { prisma } from '#app/utils/db.server'
-import { createToastHeaders } from '#app/utils/toast.server'
-import { useDoubleCheck } from '#app/utils/hooks/use-double-check'
-import { getUserImgSrc } from '#app/utils/misc'
-import { ERRORS } from '#app/utils/constants/errors'
-import { INTENTS } from '#app/utils/constants/misc'
-import { ROUTE_PATH as HOME_PATH } from '#app/routes/_home+/_layout'
-import { Input } from '#app/components/ui/input'
-import { Button } from '#app/components/ui/button'
-import {
- type action as uploadImageAction,
- ROUTE_PATH as UPLOAD_IMAGE_PATH,
- ImageSchema,
-} from '#app/routes/resources+/upload-image'
-import { ROUTE_PATH as RESET_IMAGE_PATH } from '#app/routes/resources+/reset-image'
-
-export const UsernameSchema = z.object({
- username: z
- .string()
- .min(3)
- .max(20)
- .toLowerCase()
- .trim()
- .regex(/^[a-zA-Z0-9]+$/, 'Username may only contain alphanumeric characters.'),
-})
-
-export async function loader({ request }: LoaderFunctionArgs) {
- const user = await requireUser(request)
- return json({ user })
-}
-
-export async function action({ request }: ActionFunctionArgs) {
- const user = await requireUser(request)
- const formData = await request.clone().formData()
- const intent = formData.get(INTENTS.INTENT)
-
- if (intent === INTENTS.USER_UPDATE_USERNAME) {
- const submission = parseWithZod(formData, { schema: UsernameSchema })
- if (submission.status !== 'success') {
- return json(submission.reply(), {
- status: submission.status === 'error' ? 400 : 200,
- })
- }
-
- const { username } = submission.value
- const isUsernameTaken = await prisma.user.findUnique({ where: { username } })
-
- if (isUsernameTaken) {
- return json(
- submission.reply({
- fieldErrors: {
- username: [ERRORS.ONBOARDING_USERNAME_ALREADY_EXISTS],
- },
- }),
- )
- }
-
- await prisma.user.update({ where: { id: user.id }, data: { username } })
- return json(submission.reply({ fieldErrors: {} }), {
- headers: await createToastHeaders({
- title: 'Success!',
- description: 'Username updated successfully.',
- }),
- })
- }
-
- if (intent === INTENTS.USER_DELETE_ACCOUNT) {
- await prisma.user.delete({ where: { id: user.id } })
- return redirect(HOME_PATH, {
- headers: {
- 'Set-Cookie': await destroySession(
- await getSession(request.headers.get('Cookie')),
- ),
- },
- })
- }
-
- throw new Error(`Invalid intent: ${intent}`)
-}
-
-export default function DashboardSettings() {
- const { user } = useLoaderData
-
-
- {/* Plans */}
- This is a demo app.
-- Remix SaaS is a demo app that uses Stripe test environment. You can find a list - of test card numbers on the{' '} - - Stripe docs - - . -
-
-
-
- {/* Manage Subscription */}
-
-
-
- {subscription?.planId === PLANS.FREE && (
- Plan
-- You are currently on the{' '} - - {subscription - ? subscription.planId?.charAt(0).toUpperCase() + - subscription.planId.slice(1) - : 'Free'} - - plan. -
-
- {Object.values(PRICING_PLANS).map((plan) => (
-
- )}
-
- {subscription && subscription.planId !== PLANS.FREE && (
- setSelectedPlanId(plan.id)}
- onKeyDown={(e) => {
- if (e.key === 'Enter') setSelectedPlanId(plan.id)
- }}>
-
- ))}
-
-
-
- {/* Billing Switch */}
- {plan.id !== PLANS.FREE && (
-
-
- {plan.name}
-
- {plan.id !== PLANS.FREE && (
-
- {currency === CURRENCIES.USD ? '$' : 'โฌ'}{' '}
- {selectedPlanInterval === INTERVALS.MONTH
- ? plan.prices[INTERVALS.MONTH][currency] / 100
- : plan.prices[INTERVALS.YEAR][currency] / 100}{' '}
- / {selectedPlanInterval === INTERVALS.MONTH ? 'month' : 'year'}
-
- )}
-
- - {plan.description} -
-
-
-
- setSelectedPlanInterval((prev) =>
- prev === INTERVALS.MONTH ? INTERVALS.YEAR : INTERVALS.MONTH,
- )
- }
- />
-
- )}
-
-
- )}
-
-
-
-
-
-
-
- {subscription.planId.charAt(0).toUpperCase() +
- subscription.planId.slice(1)}
-
-
- - {subscription.cancelAtPeriodEnd === true ? ( - - Expires - - ) : ( - - Renews - - )} - on:{' '} - {new Date(subscription.currentPeriodEnd * 1000).toLocaleDateString( - 'en-US', - )} - . -
-- {PRICING_PLANS[PLANS.PRO].description} -
-
-
- - You will not be charged for testing the subscription upgrade. -
- {subscription?.planId === PLANS.FREE && ( - - )} -
-
-
-
-
- Manage Subscription
-- Update your payment method, billing address, and more. -
-
-
- - You will be redirected to the Stripe Customer Portal. -
- -
- {/* Avatar */}
- setImageSrc(null)}
- {...getFormProps(avatarForm)}
- className="flex w-full flex-col items-start rounded-lg border border-border bg-card">
-
-
- {/* Username */}
-
-
- {/* Delete Account */}
-
- )
-}
diff --git a/app/routes/dashboard+/settings.tsx b/app/routes/dashboard+/settings.tsx
deleted file mode 100644
index af6fc495..00000000
--- a/app/routes/dashboard+/settings.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/node'
-import { Link, Outlet, useLocation } from '@remix-run/react'
-import { json } from '@remix-run/node'
-import { z } from 'zod'
-import { requireUser } from '#app/modules/auth/auth.server'
-import { cn } from '#app/utils/misc'
-import { ROUTE_PATH as BILLING_PATH } from '#app/routes/dashboard+/settings.billing'
-import { buttonVariants } from '#app/components/ui/button'
-
-export const ROUTE_PATH = '/dashboard/settings' as const
-
-export const UsernameSchema = z.object({
- username: z
- .string()
- .min(3)
- .max(20)
- .toLowerCase()
- .trim()
- .regex(/^[a-zA-Z0-9]+$/, 'Username may only contain alphanumeric characters.'),
-})
-
-export const meta: MetaFunction = () => {
- return [{ title: 'Settings' }]
-}
-
-export async function loader({ request }: LoaderFunctionArgs) {
- const user = await requireUser(request)
- return json({ user })
-}
-
-export default function DashboardSettings() {
- const location = useLocation()
- const isSettingsPath = location.pathname === ROUTE_PATH
- const isBillingPath = location.pathname === BILLING_PATH
-
- return (
-
-
-
-
-
- {
- const file = e.currentTarget.files?.[0]
- if (file) {
- const form = e.currentTarget.form
- if (!form) return
- const reader = new FileReader()
- reader.onload = (readerEvent) => {
- setImageSrc(readerEvent.target?.result?.toString() ?? null)
- uploadImageFetcher.submit(form)
- }
- reader.readAsDataURL(file)
- }
- }}
- />
- Your Avatar
-- This is your avatar. It will be displayed on your profile. -
-
-
- - Click on the avatar to upload a custom one from your files. -
- {user.image?.id && !avatarFields.imageFile.errors && ( - - )} - {avatarFields.imageFile.errors && ( -- {avatarFields.imageFile.errors.join(' ')} -
- )} -
-
-
-
- Delete Account
-- Permanently delete your Remix SaaS account, all of your projects, links and - their respective stats. -
-
-
- - This action cannot be undone, proceed with caution. -
- -
-
- )
-}
diff --git a/app/routes/me.tsx b/app/routes/me.tsx
new file mode 100644
index 00000000..28eb14c8
--- /dev/null
+++ b/app/routes/me.tsx
@@ -0,0 +1,18 @@
+import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
+import { requireUserId, logout } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+ 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/app/routes/onboarding+/_layout.tsx b/app/routes/onboarding+/_layout.tsx
deleted file mode 100644
index 93c665a7..00000000
--- a/app/routes/onboarding+/_layout.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { LoaderFunctionArgs } from '@remix-run/node'
-import { Outlet } from '@remix-run/react'
-import { json, redirect } from '@remix-run/node'
-import { requireUser } from '#app/modules/auth/auth.server'
-import { getDomainPathname } from '#app/utils/misc.server'
-import { ROUTE_PATH as DASHBOARD_PATH } from '#app/routes/dashboard+/_layout'
-import { ROUTE_PATH as ONBOARDING_USERNAME_PATH } from '#app/routes/onboarding+/username'
-import { Logo } from '#app/components/logo'
-
-export const ROUTE_PATH = '/onboarding' as const
-
-export async function loader({ request }: LoaderFunctionArgs) {
- const user = await requireUser(request)
-
- const pathname = getDomainPathname(request)
- const isOnboardingPathname = pathname === ROUTE_PATH
- const isOnboardingUsernamePathname = pathname === ONBOARDING_USERNAME_PATH
-
- if (isOnboardingPathname) return redirect(DASHBOARD_PATH)
- if (user.username && isOnboardingUsernamePathname) return redirect(DASHBOARD_PATH)
-
- return json({})
-}
-
-export default function Onboarding() {
- return (
-
-
-
-
-
- General
-
-
-
-
- Billing
-
-
-
-
-
-
- )
-}
diff --git a/app/routes/onboarding+/username.tsx b/app/routes/onboarding+/username.tsx
deleted file mode 100644
index 37c40498..00000000
--- a/app/routes/onboarding+/username.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import type {
- MetaFunction,
- LoaderFunctionArgs,
- ActionFunctionArgs,
-} from '@remix-run/node'
-import { useRef, useEffect } from 'react'
-import { Form, useActionData } from '@remix-run/react'
-import { json, redirect } from '@remix-run/node'
-import { useHydrated } from 'remix-utils/use-hydrated'
-import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
-import { HoneypotInputs } from 'remix-utils/honeypot/react'
-import { z } from 'zod'
-import { getZodConstraint, parseWithZod } from '@conform-to/zod'
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
-import { Loader2 } from 'lucide-react'
-import { requireSessionUser } from '#app/modules/auth/auth.server'
-import {
- createCustomer,
- createFreeSubscription,
-} from '#app/modules/stripe/queries.server'
-import { prisma } from '#app/utils/db.server'
-import { validateCSRF } from '#app/utils/csrf.server'
-import { checkHoneypot } from '#app/utils/honeypot.server'
-import { useIsPending } from '#app/utils/misc'
-import { ERRORS } from '#app/utils/constants/errors'
-import { ROUTE_PATH as LOGIN_PATH } from '#app/routes/auth+/login'
-import { Input } from '#app/components/ui/input'
-import { Button } from '#app/components/ui/button'
-import { ROUTE_PATH as DASHBOARD_PATH } from '#app/routes/dashboard+/_layout'
-
-export const ROUTE_PATH = '/onboarding/username' as const
-
-export const UsernameSchema = z.object({
- username: z
- .string()
- .min(3)
- .max(20)
- .toLowerCase()
- .trim()
- .regex(/^[a-zA-Z0-9]+$/, 'Username may only contain alphanumeric characters.'),
-})
-
-export const meta: MetaFunction = () => {
- return [{ title: 'Remix SaaS - Username' }]
-}
-
-export async function loader({ request }: LoaderFunctionArgs) {
- await requireSessionUser(request, { redirectTo: LOGIN_PATH })
- return json({})
-}
-
-export async function action({ request }: ActionFunctionArgs) {
- const sessionUser = await requireSessionUser(request, {
- redirectTo: LOGIN_PATH,
- })
-
- const clonedRequest = request.clone()
- const formData = await clonedRequest.formData()
- await validateCSRF(formData, clonedRequest.headers)
- checkHoneypot(formData)
-
- const submission = parseWithZod(formData, { schema: UsernameSchema })
- if (submission.status !== 'success') {
- return json(submission.reply(), { status: submission.status === 'error' ? 400 : 200 })
- }
-
- const { username } = submission.value
- const isUsernameTaken = await prisma.user.findUnique({ where: { username } })
-
- if (isUsernameTaken) {
- return json(
- submission.reply({
- fieldErrors: {
- username: [ERRORS.ONBOARDING_USERNAME_ALREADY_EXISTS],
- },
- }),
- )
- }
- await prisma.user.update({ where: { id: sessionUser.id }, data: { username } })
- await createCustomer({ userId: sessionUser.id })
- const subscription = await prisma.subscription.findUnique({
- where: { userId: sessionUser.id },
- })
- if (!subscription) await createFreeSubscription({ userId: sessionUser.id, request })
-
- return redirect(DASHBOARD_PATH)
-}
-
-export default function OnboardingUsername() {
- const lastResult = useActionData
-
-
-
-
-
-
-
- )
-}
diff --git a/app/routes/resources+/download-user-data.tsx b/app/routes/resources+/download-user-data.tsx
new file mode 100644
index 00000000..a3d12e23
--- /dev/null
+++ b/app/routes/resources+/download-user-data.tsx
@@ -0,0 +1,62 @@
+import { json, type LoaderFunctionArgs } from '@remix-run/node'
+import { requireUserId } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { getDomainUrl } from '#app/utils/misc.tsx'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+ 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,
+ contentType: true,
+ },
+ },
+ notes: {
+ include: {
+ images: {
+ select: {
+ id: true,
+ createdAt: true,
+ updatedAt: true,
+ contentType: true,
+ },
+ },
+ },
+ },
+ password: false, // <-- intentionally omit password
+ sessions: true,
+ roles: true,
+ },
+ })
+
+ const domain = getDomainUrl(request)
+
+ return json({
+ user: {
+ ...user,
+ image: user.image
+ ? {
+ ...user.image,
+ url: `${domain}/resources/user-images/${user.image.id}`,
+ }
+ : null,
+ notes: user.notes.map(note => ({
+ ...note,
+ images: note.images.map(image => ({
+ ...image,
+ url: `${domain}/resources/note-images/${image.id}`,
+ })),
+ })),
+ },
+ })
+}
diff --git a/app/routes/resources+/healthcheck.tsx b/app/routes/resources+/healthcheck.tsx
new file mode 100644
index 00000000..b00574cd
--- /dev/null
+++ b/app/routes/resources+/healthcheck.tsx
@@ -0,0 +1,26 @@
+// learn more: https://fly.io/docs/reference/configuration/#services-http_checks
+import { type LoaderFunctionArgs } from '@remix-run/node'
+import { prisma } from '#app/utils/db.server.ts'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+ 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/app/routes/resources+/note-images.$imageId.tsx b/app/routes/resources+/note-images.$imageId.tsx
new file mode 100644
index 00000000..7c4b84ca
--- /dev/null
+++ b/app/routes/resources+/note-images.$imageId.tsx
@@ -0,0 +1,22 @@
+import { invariantResponse } from '@epic-web/invariant'
+import { type LoaderFunctionArgs } from '@remix-run/node'
+import { prisma } from '#app/utils/db.server.ts'
+
+export async function loader({ params }: LoaderFunctionArgs) {
+ invariantResponse(params.imageId, 'Image ID is required', { status: 400 })
+ const image = await prisma.noteImage.findUnique({
+ where: { id: params.imageId },
+ select: { contentType: true, blob: true },
+ })
+
+ invariantResponse(image, 'Not found', { status: 404 })
+
+ return new Response(image.blob, {
+ headers: {
+ 'Content-Type': image.contentType,
+ 'Content-Length': Buffer.byteLength(image.blob).toString(),
+ 'Content-Disposition': `inline; filename="${params.imageId}"`,
+ 'Cache-Control': 'public, max-age=31536000, immutable',
+ },
+ })
+}
diff --git a/app/routes/resources+/reset-image.ts b/app/routes/resources+/reset-image.ts
deleted file mode 100644
index 6db0e23f..00000000
--- a/app/routes/resources+/reset-image.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ActionFunctionArgs } from '@remix-run/router'
-import { requireUser } from '#app/modules/auth/auth.server'
-import { prisma } from '#app/utils/db.server.js'
-
-export const ROUTE_PATH = '/resources/reset-image' as const
-
-export async function action({ request }: ActionFunctionArgs) {
- const user = await requireUser(request)
- await prisma.userImage.deleteMany({ where: { userId: user.id } })
- return null
-}
diff --git a/app/routes/resources+/update-theme.ts b/app/routes/resources+/update-theme.ts
deleted file mode 100644
index f37a9489..00000000
--- a/app/routes/resources+/update-theme.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { ActionFunctionArgs } from '@remix-run/node'
-import { redirect } from '@remix-run/node'
-import { safeRedirect } from 'remix-utils/safe-redirect'
-import { ThemeSchema, setTheme } from '#app/utils/hooks/use-theme'
-
-export const ROUTE_PATH = '/resources/update-theme' as const
-
-export async function action({ request }: ActionFunctionArgs) {
- const formData = Object.fromEntries(await request.formData())
- const { theme, redirectTo } = ThemeSchema.parse(formData)
-
- const responseInit = {
- headers: { 'Set-Cookie': setTheme(theme) },
- }
-
- if (redirectTo) {
- return redirect(safeRedirect(redirectTo), responseInit)
- } else {
- return new Response(null, responseInit)
- }
-}
diff --git a/app/routes/resources+/upload-image.ts b/app/routes/resources+/upload-image.ts
deleted file mode 100644
index 60c3eab2..00000000
--- a/app/routes/resources+/upload-image.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { ActionFunctionArgs } from '@remix-run/router'
-import {
- json,
- unstable_createMemoryUploadHandler,
- unstable_parseMultipartFormData,
- MaxPartSizeExceededError,
-} from '@remix-run/node'
-import { z } from 'zod'
-import { parseWithZod } from '@conform-to/zod'
-import { type SubmissionResult } from '@conform-to/react'
-import { requireUser } from '#app/modules/auth/auth.server'
-import { prisma } from '#app/utils/db.server.js'
-import { createToastHeaders } from '#app/utils/toast.server'
-
-export const ROUTE_PATH = '/resources/upload-image' as const
-export const MAX_FILE_SIZE = 1024 * 1024 * 3 // 3MB
-
-export const ImageSchema = z.object({
- imageFile: z.instanceof(File).refine((file) => file.size > 0, 'Image is required.'),
-})
-
-export async function action({ request }: ActionFunctionArgs) {
- try {
- const user = await requireUser(request)
-
- const formData = await unstable_parseMultipartFormData(
- request,
- unstable_createMemoryUploadHandler({ maxPartSize: MAX_FILE_SIZE }),
- )
- const submission = await parseWithZod(formData, {
- schema: ImageSchema.transform(async (data) => {
- return {
- image: {
- contentType: data.imageFile.type,
- blob: Buffer.from(await data.imageFile.arrayBuffer()),
- },
- }
- }),
- async: true,
- })
- if (submission.status !== 'success') {
- return json(submission.reply(), {
- status: submission.status === 'error' ? 400 : 200,
- })
- }
-
- const { image } = submission.value
- await prisma.$transaction(async ($prisma) => {
- await $prisma.userImage.deleteMany({ where: { userId: user.id } })
- await $prisma.user.update({
- where: { id: user.id },
- data: { image: { create: image } },
- })
- })
-
- return json(submission.reply({ fieldErrors: {} }), {
- headers: await createToastHeaders({
- title: 'Success!',
- description: 'Image uploaded successfully.',
- }),
- })
- } catch (error: unknown) {
- if (error instanceof MaxPartSizeExceededError) {
- const result: SubmissionResult = {
- initialValue: {},
- status: 'error',
- error: {
- imageFile: ['Image size must be less than 3MB.'],
- },
- state: {
- validated: {
- imageFile: true,
- },
- },
- }
- return json(result, { status: 400 })
- } else throw error
- }
-}
diff --git a/app/routes/resources+/user-images.$imageId.ts b/app/routes/resources+/user-images.$imageId.ts
deleted file mode 100644
index 382273e4..00000000
--- a/app/routes/resources+/user-images.$imageId.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { LoaderFunctionArgs } from '@remix-run/node'
-import { prisma } from '#app/utils/db.server'
-
-export async function loader({ params }: LoaderFunctionArgs) {
- if (!params.imageId) {
- throw new Response('Image ID is required', { status: 400 })
- }
- const image = await prisma.userImage.findUnique({
- where: { id: params.imageId },
- select: { contentType: true, blob: true },
- })
- if (!image) {
- throw new Response('Not found', { status: 404 })
- }
-
- return new Response(image.blob, {
- headers: {
- 'Content-Type': image.contentType,
- 'Content-Length': Buffer.byteLength(image.blob).toString(),
- 'Content-Disposition': `inline; filename="${params.imageId}"`,
- 'Cache-Control': 'public, max-age=31536000, immutable',
- },
- })
-}
diff --git a/app/routes/resources+/user-images.$imageId.tsx b/app/routes/resources+/user-images.$imageId.tsx
new file mode 100644
index 00000000..19a12af6
--- /dev/null
+++ b/app/routes/resources+/user-images.$imageId.tsx
@@ -0,0 +1,22 @@
+import { invariantResponse } from '@epic-web/invariant'
+import { type LoaderFunctionArgs } from '@remix-run/node'
+import { prisma } from '#app/utils/db.server.ts'
+
+export async function loader({ params }: LoaderFunctionArgs) {
+ invariantResponse(params.imageId, 'Image ID is required', { status: 400 })
+ const image = await prisma.userImage.findUnique({
+ where: { id: params.imageId },
+ select: { contentType: true, blob: true },
+ })
+
+ invariantResponse(image, 'Not found', { status: 404 })
+
+ return new Response(image.blob, {
+ headers: {
+ 'Content-Type': image.contentType,
+ 'Content-Length': Buffer.byteLength(image.blob).toString(),
+ 'Content-Disposition': `inline; filename="${params.imageId}"`,
+ 'Cache-Control': 'public, max-age=31536000, immutable',
+ },
+ })
+}
diff --git a/app/routes/settings+/profile.change-email.server.tsx b/app/routes/settings+/profile.change-email.server.tsx
new file mode 100644
index 00000000..0a0eebc0
--- /dev/null
+++ b/app/routes/settings+/profile.change-email.server.tsx
@@ -0,0 +1,124 @@
+import { invariant } from '@epic-web/invariant'
+import * as E from '@react-email/components'
+import { json } from '@remix-run/node'
+import {
+ requireRecentVerification,
+ type VerifyFunctionArgs,
+} from '#app/routes/_auth+/verify.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { sendEmail } from '#app/utils/email.server.ts'
+import { redirectWithToast } from '#app/utils/toast.server.ts'
+import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { newEmailAddressSessionKey } from './profile.change-email'
+
+export async function handleVerification({
+ request,
+ submission,
+}: VerifyFunctionArgs) {
+ await requireRecentVerification(request)
+ invariant(
+ submission.status === 'success',
+ 'Submission should be successful by now',
+ )
+
+ const verifySession = await verifySessionStorage.getSession(
+ request.headers.get('cookie'),
+ )
+ const newEmail = verifySession.get(newEmailAddressSessionKey)
+ if (!newEmail) {
+ return json(
+ {
+ result: submission.reply({
+ formErrors: [
+ 'You must submit the code on the same device that requested the email change.',
+ ],
+ }),
+ },
+ { status: 400 },
+ )
+ }
+ const preUpdateUser = await prisma.user.findFirstOrThrow({
+ select: { email: true },
+ where: { id: submission.value.target },
+ })
+ const user = await prisma.user.update({
+ where: { id: submission.value.target },
+ select: { id: true, email: true, username: true },
+ data: { email: newEmail },
+ })
+
+ void sendEmail({
+ to: preUpdateUser.email,
+ subject: 'Epic Stack email changed',
+ react:
- ๐
-
-
-
-
- Welcome!
-- Let's get started by choosing a username. -
-- You can update your username at any time from your account settings. -
-
+ Epic Notes Email Change
+
+
+
+
+ Your Epic Notes email has been changed
+
+
+
+
+
+
+ )
+}
diff --git a/app/routes/settings+/profile.connections.tsx b/app/routes/settings+/profile.connections.tsx
new file mode 100644
index 00000000..e15cf6d5
--- /dev/null
+++ b/app/routes/settings+/profile.connections.tsx
@@ -0,0 +1,224 @@
+import { invariantResponse } from '@epic-web/invariant'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import {
+ json,
+ type LoaderFunctionArgs,
+ type ActionFunctionArgs,
+ type SerializeFrom,
+ type HeadersFunction,
+} from '@remix-run/node'
+import { useFetcher, useLoaderData } from '@remix-run/react'
+import { useState } from 'react'
+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 { makeTimings } from '#app/utils/timing.server.ts'
+import { createToastHeaders } from '#app/utils/toast.server.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 {data.user.email}. +
+
+
+
+
+ {data.connections.length ? (
+
+ )
+}
+
+function Connection({
+ connection,
+ canDelete,
+}: {
+ connection: SerializeFrom
+
+ ) : (
+ Here are your current connections:
+-
+ {data.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/app/routes/settings+/profile.index.tsx b/app/routes/settings+/profile.index.tsx
new file mode 100644
index 00000000..1d3b2af2
--- /dev/null
+++ b/app/routes/settings+/profile.index.tsx
@@ -0,0 +1,361 @@
+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 {
+ json,
+ type LoaderFunctionArgs,
+ type ActionFunctionArgs,
+} from '@remix-run/node'
+import { Link, useFetcher, useLoaderData } from '@remix-run/react'
+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 { twoFAVerificationType } from './profile.two-factor.tsx'
+
+export const handle: SEOHandle = {
+ getSitemapEntries: () => null,
+}
+
+const ProfileFormSchema = z.object({
+ name: NameSchema.optional(),
+ username: UsernameSchema,
+})
+
+export async function loader({ request }: LoaderFunctionArgs) {
+ 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: { id: 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 json({
+ 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 }: ActionFunctionArgs) {
+ 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() {
+ const data = useLoaderData
+
+ )
+}
+
+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 json(
+ { result: submission.reply() },
+ { status: submission.status === 'error' ? 400 : 200 },
+ )
+ }
+
+ const data = submission.value
+
+ await prisma.user.update({
+ select: { username: true },
+ where: { id: userId },
+ data: {
+ name: data.name,
+ username: data.username,
+ },
+ })
+
+ return json({
+ result: submission.reply(),
+ })
+}
+
+function UpdateProfile() {
+ const data = useLoaderData
+
+
+ })
+
+
+
+
+
+
+
+ Change email from {data.user.email}
+
+
+
+
+
+ {data.isTwoFactorEnabled ? (
+ 2FA is enabled
+ ) : (
+ Enable 2FA
+ )}
+
+
+
+
+
+ {data.hasPassword ? 'Change Password' : 'Create a Password'}
+
+
+
+
+
+ Manage connections
+
+
+
+
+ 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/app/routes/settings+/profile.password.tsx b/app/routes/settings+/profile.password.tsx
new file mode 100644
index 00000000..50f3f444
--- /dev/null
+++ b/app/routes/settings+/profile.password.tsx
@@ -0,0 +1,177 @@
+import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import {
+ json,
+ redirect,
+ type LoaderFunctionArgs,
+ type ActionFunctionArgs,
+} from '@remix-run/node'
+import { Form, Link, useActionData } from '@remix-run/react'
+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 {
+ 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 BreadcrumbHandle } from './profile.tsx'
+
+export const handle: BreadcrumbHandle & SEOHandle = {
+ breadcrumb:
+
+
+ )
+}
diff --git a/app/routes/settings+/profile.tsx b/app/routes/settings+/profile.tsx
new file mode 100644
index 00000000..ae4c4a77
--- /dev/null
+++ b/app/routes/settings+/profile.tsx
@@ -0,0 +1,80 @@
+import { invariantResponse } from '@epic-web/invariant'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { json, type LoaderFunctionArgs } from '@remix-run/node'
+import { Link, Outlet, useMatches } from '@remix-run/react'
+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'
+
+export const BreadcrumbHandle = z.object({ breadcrumb: z.any() })
+export type BreadcrumbHandle = z.infer
+
+
+
+ )
+}
diff --git a/app/routes/settings+/profile.two-factor.disable.tsx b/app/routes/settings+/profile.two-factor.disable.tsx
new file mode 100644
index 00000000..f1530991
--- /dev/null
+++ b/app/routes/settings+/profile.two-factor.disable.tsx
@@ -0,0 +1,66 @@
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import {
+ json,
+ type LoaderFunctionArgs,
+ type ActionFunctionArgs,
+} from '@remix-run/node'
+import { useFetcher } from '@remix-run/react'
+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 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/app/routes/settings+/profile.two-factor.index.tsx b/app/routes/settings+/profile.two-factor.index.tsx
new file mode 100644
index 00000000..e080ddaa
--- /dev/null
+++ b/app/routes/settings+/profile.two-factor.index.tsx
@@ -0,0 +1,96 @@
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import {
+ json,
+ redirect,
+ type LoaderFunctionArgs,
+ type ActionFunctionArgs,
+} from '@remix-run/node'
+import { Link, useFetcher, useLoaderData } from '@remix-run/react'
+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 { 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 }: LoaderFunctionArgs) {
+ const userId = await requireUserId(request)
+ const verification = await prisma.verification.findUnique({
+ where: { target_type: { type: twoFAVerificationType, target: userId } },
+ select: { id: true },
+ })
+ return json({ is2FAEnabled: Boolean(verification) })
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+ const userId = await requireUserId(request)
+ const { otp: _otp, ...config } = 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() {
+ const data = useLoaderData+ Disabling two factor authentication is not recommended. However, if + you would like to do so, click here: +
+
+ {data.is2FAEnabled ? (
+ <>
+ Disable 2FA
+
+
+ ) : (
+ <>
+
+
+ Enable 2FA
+
+
+
+ )}
+
+ )
+}
diff --git a/app/routes/settings+/profile.two-factor.tsx b/app/routes/settings+/profile.two-factor.tsx
new file mode 100644
index 00000000..7f5dfd19
--- /dev/null
+++ b/app/routes/settings+/profile.two-factor.tsx
@@ -0,0 +1,16 @@
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { Outlet } from '@remix-run/react'
+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/app/routes/users+/$username.test.tsx b/app/routes/users+/$username.test.tsx
new file mode 100644
index 00000000..d0c47a67
--- /dev/null
+++ b/app/routes/users+/$username.test.tsx
@@ -0,0 +1,95 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { faker } from '@faker-js/faker'
+import { createRemixStub } from '@remix-run/testing'
+import { render, screen } from '@testing-library/react'
+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 = createRemixStub([
+ {
+ path: '/users/:username',
+ Component: UsernameRoute,
+ loader,
+ },
+ ])
+
+ const routeUrl = `/users/${user.username}`
+ render(
+ 
+
+ 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: +
+
+
+
+ {data.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. +
+
+
+
+
+
+ )
+}
+
+export const meta: MetaFunction
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {userDisplayName}
++ Joined {data.userJoinedDisplay} +
+ {isLoggedInUser ? ( + + ) : null} +
+ {isLoggedInUser ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+ No user with the username "{params.username}" exists
+ ), + }} + /> + ) +} diff --git a/app/routes/users+/$username_+/__note-editor.server.tsx b/app/routes/users+/$username_+/__note-editor.server.tsx new file mode 100644 index 00000000..6b16253d --- /dev/null +++ b/app/routes/users+/$username_+/__note-editor.server.tsx @@ -0,0 +1,131 @@ +import { parseWithZod } from '@conform-to/zod' +import { createId as cuid } from '@paralleldrive/cuid2' +import { + unstable_createMemoryUploadHandler as createMemoryUploadHandler, + json, + unstable_parseMultipartFormData as parseMultipartFormData, + redirect, + type ActionFunctionArgs, +} from '@remix-run/node' +import { z } from 'zod' +import { requireUserId } from '#app/utils/auth.server.ts' +import { prisma } from '#app/utils/db.server.ts' +import { + MAX_UPLOAD_SIZE, + NoteEditorSchema, + type ImageFieldset, +} from './__note-editor' + +function imageHasFile( + image: ImageFieldset, +): image is ImageFieldset & { file: NonNullable
+
+
+
+
+ )
+}
+
+function ImageChooser({ meta }: { meta: FieldMetadata
+
+
+ Submit
+
+
+