+ {type ? headings[type] : 'Invalid Verification Type'}
+
+
+
+
+
+
+
+
+
+
+
+
+```sh
+npx create-epic-app@latest
+```
+
+[](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. + ++ 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. +
++ +## Watch Kent's Introduction to The Epic Stack + +[](https://www.epicweb.dev/talks/the-epic-stack) + +["The Epic Stack" by Kent C. Dodds](https://www.epicweb.dev/talks/the-epic-stack) + +## Docs + +[Read the docs](https://github.com/epicweb-dev/epic-stack/blob/main/docs) +(please đ). + +## Support + +- đ 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) + +## Thanks + +You rock 𪨠diff --git a/app/assets/favicons/apple-touch-icon.png b/app/assets/favicons/apple-touch-icon.png new file mode 100644 index 0000000..8bf4632 Binary files /dev/null and b/app/assets/favicons/apple-touch-icon.png differ diff --git a/app/assets/favicons/favicon.svg b/app/assets/favicons/favicon.svg new file mode 100644 index 0000000..72be6f0 --- /dev/null +++ b/app/assets/favicons/favicon.svg @@ -0,0 +1,13 @@ + diff --git a/app/components/error-boundary.tsx b/app/components/error-boundary.tsx new file mode 100644 index 0000000..573b412 --- /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 0000000..41b5be0
--- /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 0000000..f396e9f
--- /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/progress-bar.tsx b/app/components/progress-bar.tsx
new file mode 100644
index 0000000..00737ae
--- /dev/null
+++ b/app/components/progress-bar.tsx
@@ -0,0 +1,63 @@
+import { useNavigation } from '@remix-run/react'
+import { useEffect, useRef, useState } from 'react'
+import { useSpinDelay } from 'spin-delay'
+import { cn } from '#app/utils/misc.tsx'
+import { Icon } from './ui/icon.tsx'
+
+function EpicProgress() {
+ const transition = useNavigation()
+ const busy = transition.state !== 'idle'
+ const delayedPending = useSpinDelay(busy, {
+ delay: 600,
+ minDuration: 400,
+ })
+ const ref = useRef
+ {
+ input.change(state.valueOf() ? checkedValue : '')
+ buttonProps.onCheckedChange?.(state)
+ }}
+ onFocus={(event) => {
+ input.focus()
+ buttonProps.onFocus?.(event)
+ }}
+ onBlur={(event) => {
+ input.blur()
+ buttonProps.onBlur?.(event)
+ }}
+ type="button"
+ />
+
+
+
+ {errorId ?
+
+
+ {delayedPending && (
+
+ )
+}
+
+export { EpicProgress }
diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
new file mode 100644
index 0000000..30c77d3
--- /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 0000000..8a8e537
--- /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
new file mode 100644
index 0000000..f4b2db3
--- /dev/null
+++ b/app/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+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/table.tsx b/app/components/ui/table.tsx
new file mode 100644
index 0000000..ba98722
--- /dev/null
+++ b/app/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "#app/utils/misc.tsx"
+
+const Table = React.forwardRef<
+ HTMLTableElement,
+ React.HTMLAttributes
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+
+
+
+
+
+
+
+
+
+
+
+ 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 0000000..0882304
--- /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')
+ await expect(response).toSendToast(
+ expect.objectContaining({
+ title: 'Already Connected',
+ description: expect.stringContaining(githubUser.profile.login),
+ }),
+ )
+})
+
+test('when a user exists with the same email, create connection and make session', async () => {
+ const githubUser = await insertGitHubUser()
+ const email = githubUser.primaryEmail.toLowerCase()
+ const { userId } = await setupUser({ ...createUser(), email })
+ const request = await setupRequest({ code: githubUser.code })
+ const response = await loader({ request, params: PARAMS, context: {} })
+
+ expect(response).toHaveRedirect('/')
+
+ await expect(response).toSendToast(
+ expect.objectContaining({
+ type: 'message',
+ description: expect.stringContaining(githubUser.profile.login),
+ }),
+ )
+
+ const connection = await prisma.connection.findFirst({
+ select: { id: true },
+ where: {
+ userId: userId,
+ providerId: githubUser.profile.id.toString(),
+ },
+ })
+ expect(
+ connection,
+ 'the connection was not created in the database',
+ ).toBeTruthy()
+
+ await expect(response).toHaveSessionForUser(userId)
+})
+
+test('gives an error if the account is already connected to another user', async () => {
+ const githubUser = await insertGitHubUser()
+ await prisma.user.create({
+ data: {
+ ...createUser(),
+ connections: {
+ create: {
+ providerName: GITHUB_PROVIDER_NAME,
+ providerId: githubUser.profile.id.toString(),
+ },
+ },
+ },
+ })
+ const session = await setupUser()
+ const request = await setupRequest({
+ sessionId: session.id,
+ code: githubUser.code,
+ })
+ const response = await loader({ request, params: PARAMS, context: {} })
+ expect(response).toHaveRedirect('/settings/profile/connections')
+ await expect(response).toSendToast(
+ expect.objectContaining({
+ title: 'Already Connected',
+ description: expect.stringContaining(
+ 'already connected to another account',
+ ),
+ }),
+ )
+})
+
+test('if a user is not logged in, but the connection exists, make a session', async () => {
+ const githubUser = await insertGitHubUser()
+ const { userId } = await setupUser()
+ await prisma.connection.create({
+ data: {
+ providerName: GITHUB_PROVIDER_NAME,
+ providerId: githubUser.profile.id.toString(),
+ userId,
+ },
+ })
+ const request = await setupRequest({ code: githubUser.code })
+ const response = await loader({ request, params: PARAMS, context: {} })
+ expect(response).toHaveRedirect('/')
+ await expect(response).toHaveSessionForUser(userId)
+})
+
+test('if a user is not logged in, but the connection exists and they have enabled 2FA, send them to verify their 2FA and do not make a session', async () => {
+ const githubUser = await insertGitHubUser()
+ const { userId } = await setupUser()
+ await prisma.connection.create({
+ data: {
+ providerName: GITHUB_PROVIDER_NAME,
+ providerId: githubUser.profile.id.toString(),
+ userId,
+ },
+ })
+ const { otp: _otp, ...config } = 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 0000000..2d7a730
--- /dev/null
+++ b/app/routes/_auth+/auth.$provider.callback.ts
@@ -0,0 +1,188 @@
+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 {
+ normalizeEmail,
+ normalizeUsername,
+} from '#app/utils/providers/provider.ts'
+import {
+ destroyRedirectToHeader,
+ getRedirectCookieValue,
+} from '#app/utils/redirect-cookie.server.ts'
+import {
+ createToastHeaders,
+ redirectWithToast,
+} from '#app/utils/toast.server.ts'
+import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { 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: normalizeEmail(profile.email),
+ username:
+ typeof profile.username === 'string'
+ ? normalizeUsername(profile.username)
+ : undefined,
+ })
+ verifySession.set(providerIdKey, profile.id)
+ const onboardingRedirect = [
+ `/onboarding/${providerName}`,
+ redirectTo ? new URLSearchParams({ redirectTo }) : null,
+ ]
+ .filter(Boolean)
+ .join('?')
+ return redirect(onboardingRedirect, {
+ headers: combineHeaders(
+ { 'set-cookie': await verifySessionStorage.commitSession(verifySession) },
+ destroyRedirectTo,
+ ),
+ })
+}
+
+async function makeSession(
+ {
+ request,
+ userId,
+ redirectTo,
+ }: { request: Request; userId: string; redirectTo?: string | null },
+ responseInit?: ResponseInit,
+) {
+ redirectTo ??= '/'
+ const session = await prisma.session.create({
+ select: { id: true, expirationDate: true, userId: true },
+ data: {
+ expirationDate: getSessionExpirationDate(),
+ userId,
+ },
+ })
+ return handleNewSession(
+ { request, session, redirectTo, remember: true },
+ { headers: combineHeaders(responseInit?.headers, destroyRedirectTo) },
+ )
+}
diff --git a/app/routes/_auth+/auth.$provider.ts b/app/routes/_auth+/auth.$provider.ts
new file mode 100644
index 0000000..7231920
--- /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 0000000..f863eeb
--- /dev/null
+++ b/app/routes/_auth+/forgot-password.tsx
@@ -0,0 +1,194 @@
+import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import * as E from '@react-email/components'
+import {
+ 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'
+
+export const handle: SEOHandle = {
+ getSitemapEntries: () => null,
+}
+
+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 0000000..826a72a
--- /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 0000000..9cbdc51
--- /dev/null
+++ b/app/routes/_auth+/onboarding_.$provider.tsx
@@ -0,0 +1,285 @@
+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 { connectionSessionStorage } from '#app/utils/connections.server'
+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 connectionSession = await connectionSessionStorage.getSession(
+ request.headers.get('cookie'),
+ )
+ const verifySession = await verifySessionStorage.getSession(
+ request.headers.get('cookie'),
+ )
+ const prefilledProfile = verifySession.get(prefilledProfileKey)
+
+ const formError = connectionSession.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 OnboardingProviderRoute() {
+ 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 0000000..1c25b4d
--- /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 0000000..38e4763
--- /dev/null
+++ b/app/routes/_auth+/reset-password.tsx
@@ -0,0 +1,141 @@
+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 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 handle: SEOHandle = {
+ getSitemapEntries: () => null,
+}
+
+export const resetPasswordUsernameSessionKey = 'resetPasswordUsername'
+
+const ResetPasswordSchema = PasswordAndConfirmPasswordSchema
+
+async function requireResetPasswordUsername(request: Request) {
+ await requireAnonymous(request)
+ const verifySession = await verifySessionStorage.getSession(
+ request.headers.get('cookie'),
+ )
+ const resetPasswordUsername = verifySession.get(
+ resetPasswordUsernameSessionKey,
+ )
+ if (typeof resetPasswordUsername !== 'string' || !resetPasswordUsername) {
+ throw redirect('/login')
+ }
+ return resetPasswordUsername
+}
+
+export async function loader({ request }: 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 ( +About page
+}
diff --git a/app/routes/_marketing+/index.tsx b/app/routes/_marketing+/index.tsx
new file mode 100644
index 0000000..0598ecb
--- /dev/null
+++ b/app/routes/_marketing+/index.tsx
@@ -0,0 +1,41 @@
+import { type MetaFunction } from '@remix-run/node'
+import { Link } from '@remix-run/react'
+
+export const meta: MetaFunction = () => [{ title: 'Epic Notes' }]
+
+export default function Index() {
+ return (
+
+
+ Faxdienst
+
+
+
+ Kunden-
+
+ dienst + + + + Liste + +
+ + dienst + + + + Liste + +
Privacy
+}
diff --git a/app/routes/_marketing+/support.tsx b/app/routes/_marketing+/support.tsx
new file mode 100644
index 0000000..ec9a242
--- /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 0000000..f155649
--- /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/_publicare+/dashboard_kunde.tsx b/app/routes/_publicare+/dashboard_kunde.tsx
new file mode 100644
index 0000000..98e7023
--- /dev/null
+++ b/app/routes/_publicare+/dashboard_kunde.tsx
@@ -0,0 +1,22 @@
+import {Link} from "@remix-run/react";
+
+export default function NeueBestellungPage() {
+
+ return (
+
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/dashboard_privatkunde.tsx b/app/routes/_publicare+/dashboard_privatkunde.tsx
new file mode 100644
index 0000000..7967f1c
--- /dev/null
+++ b/app/routes/_publicare+/dashboard_privatkunde.tsx
@@ -0,0 +1,16 @@
+import {Link} from "@remix-run/react";
+
+export default function NeueBestellungPage() {
+
+ return (
+ Neue Bestellung
+
+
+ Neuer Patient
+
+
+ Liste Bestellungen
+
+
+ Verwaltung
+
+
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/exampleData.tsx b/app/routes/_publicare+/exampleData.tsx
new file mode 100644
index 0000000..243fde2
--- /dev/null
+++ b/app/routes/_publicare+/exampleData.tsx
@@ -0,0 +1,106 @@
+import { subDays } from 'date-fns'
+
+export const exampleData = [
+ {
+ sender: 'max.mustermann@example.com',
+ source: 'Email',
+ title: 'Bestellung',
+ message: 'Vielen Dank fĂźr Ihre Nachricht',
+ received: subDays(new Date(), 10),
+ number: 1,
+ of: 2,
+ bereich: '',
+ bearbeiter: '',
+ status: 'Faxdienst',
+ kunde: '',
+ document: {
+ type: 'image',
+ src: '/demodata/e-rezept.png',
+ },
+ },
+ {
+ sender: 'max.mustermann@example.com',
+ source: 'Email',
+ title: 'Bestellung',
+ message: 'Vielen Dank fĂźr Ihre Nachricht',
+ received: subDays(new Date(), 10),
+ number: 2,
+ of: 2,
+ bereich: '',
+ bearbeiter: '',
+ status: 'Faxdienst',
+ kunde: '',
+ document: {
+ type: 'pdf',
+ src: '/demodata/prescription.pdf',
+ },
+ },
+ {
+ sender: 'max.mustermann@example.com',
+ source: 'Email',
+ title: 'Verortnungsschein Nachlieferung',
+ message: '',
+ number: 1,
+ of: 1,
+ bereich: 'StoMa',
+ bearbeiter: '',
+ status: 'Kundendienst',
+ kunde: '1234567',
+ received: subDays(new Date(), 9),
+ document: {
+ type: 'image',
+ src: '/demodata/rezept.png',
+ },
+ },
+ {
+ sender: '',
+ source: 'Webform',
+ title: '',
+ message: '',
+ number: 1,
+ of: 1,
+ bereich: 'Wunderversorgung',
+ bearbeiter: 'EK',
+ status: 'Kundendienst',
+ kunde: 'Neuanlage',
+ received: subDays(new Date(), 7),
+ document: {
+ type: 'image',
+ src: '/demodata/verordnung.jpg',
+ },
+ },
+ {
+ sender: '+43 66666 6666',
+ source: 'Fax',
+ title: 'New fax from ++437677620763550',
+ message: 'You got a new fax: ....',
+ number: 1,
+ of: 1,
+ bereich: 'Wundversorgung',
+ bearbeiter: 'SUFU',
+ status: 'Erledigt',
+ kunde: '1234567',
+ received: subDays(new Date(), 6),
+ document: {
+ type: 'image',
+ src: '/demodata/Verordnung_muster.webp',
+ },
+ },
+ {
+ sender: '',
+ source: 'Webform',
+ number: 1,
+ of: 1,
+ title: '',
+ message: '',
+ bereich: 'Sonstige',
+ bearbeiter: 'CM',
+ status: 'Erledigt',
+ kunde: '234567',
+ received: subDays(new Date(), 4),
+ document: {
+ type: 'image',
+ src: '/demodata/Verordnung_muster.webp',
+ },
+ },
+]
diff --git a/app/routes/_publicare+/faxdienst.tsx b/app/routes/_publicare+/faxdienst.tsx
new file mode 100644
index 0000000..e72b615
--- /dev/null
+++ b/app/routes/_publicare+/faxdienst.tsx
@@ -0,0 +1,185 @@
+import { useState } from 'react'
+import { Button } from '#app/components/ui/button.tsx'
+import { Field, TextareaField } from '#app/components/forms.tsx'
+import { Badge } from '#app/components/ui/badge.tsx'
+import { clsx } from 'clsx'
+
+import { exampleData } from './exampleData.tsx'
+
+export default function NeueBestellungPage() {
+ const assignableTo = [
+ 'AR',
+ 'AWO',
+ 'BL',
+ 'CH',
+ 'CM',
+ 'EK',
+ 'JU',
+ 'MAS',
+ 'NR',
+ 'SIST',
+ 'SKA',
+ 'SP',
+ 'STS',
+ 'SUFU',
+ 'SUL',
+ ]
+
+ const [currentIndex, setCurrentIndex] = useState(0)
+ const [bereich, setBereich] = useState('')
+ const [assignedTo, setAssignedTo] = useState('')
+ const [customer, setCustomer] = useState('Neuanlage')
+ const currentItem =
+ currentIndex <= exampleData.length ? exampleData[currentIndex] : null
+
+ function OptionButton(props: {
+ value: string
+ currentValue: string
+ setFn: (newValue: string) => void
+ }) {
+ const { value, currentValue, setFn } = props
+ return (
+
+ )
+ }
+
+ return (
+ Neue Bestellung
+
+
+ Liste Bestellungen
+
+
+
+ )
+}
diff --git a/app/routes/_publicare+/kundendienst.tsx b/app/routes/_publicare+/kundendienst.tsx
new file mode 100644
index 0000000..9ae04ff
--- /dev/null
+++ b/app/routes/_publicare+/kundendienst.tsx
@@ -0,0 +1,224 @@
+import { useState } from 'react'
+import { Button } from '#app/components/ui/button.tsx'
+import { Field, TextareaField } from '#app/components/forms.tsx'
+import { Badge } from '#app/components/ui/badge.tsx'
+import { clsx } from 'clsx'
+import { exampleData } from './exampleData.tsx'
+
+export default function NeueBestellungPage() {
+ const assignableTo = [
+ 'AR',
+ 'AWO',
+ 'BL',
+ 'CH',
+ 'CM',
+ 'EK',
+ 'JU',
+ 'MAS',
+ 'NR',
+ 'SIST',
+ 'SKA',
+ 'SP',
+ 'STS',
+ 'SUFU',
+ 'SUL',
+ ]
+
+ const bereiche = ['StoMa', 'Wundversorgung', 'Sonstige']
+ const customers = ['Neuanlage', 'Bestandskunde']
+ const kundenNr = ['1234567', '2345678', '3456789']
+
+ function getRandomNumber(max: number) {
+ return Math.floor(max * Math.random())
+ }
+
+ const [currentIndex, setCurrentIndex] = useState(0)
+ const [bereich, setBereich] = useState(
+ bereiche[getRandomNumber(bereiche.length)] || '',
+ )
+ const [assignedTo, setAssignedTo] = useState(
+ assignableTo[getRandomNumber(assignableTo.length)] || '',
+ )
+ const [customer, setCustomer] = useState(
+ customers[getRandomNumber(customers.length)] || '',
+ )
+ const currentItem =
+ currentIndex <= exampleData.length ? exampleData[currentIndex] : null
+
+ function showNextEntry() {
+ setCustomer(customers[getRandomNumber(customers.length)] || '')
+ setAssignedTo(assignableTo[getRandomNumber(assignableTo.length)] || '')
+ setBereich(bereiche[getRandomNumber(bereiche.length)] || '')
+ setCurrentIndex((oldIndex) => oldIndex + 1)
+ }
+
+ function OptionButton(props: {
+ value: string
+ currentValue: string
+ setFn: (newValue: string) => void
+ }) {
+ const { value, currentValue, setFn } = props
+ return (
+
+ )
+ }
+
+ return (
+
+ {!currentItem && (
+
+
+ Keine weiteren Anfragen zu bearbeiten
+
+ )}
+ {currentItem && (
+
+
+ )}
+
+ {currentItem.document?.type === 'pdf' && (
+
+ )}
+ {currentItem.document?.type === 'image' && (
+ 
+ )}
+ {!currentItem.document && Kein Dokument angehängt}
+
+
+
+
+ {currentItem.source}
+
+ Sender: {currentItem.sender || ''} +
+ Titel: {currentItem.title || ''} +
+ Dokument: {currentItem.number} / {currentItem.of} + + Originalnachricht + +
+ Erhalten am: {currentItem.received.toLocaleDateString()} +
+ Nachricht
+ Quelle:+ Sender: {currentItem.sender || ''} +
+ Titel: {currentItem.title || ''} +
+ Dokument: {currentItem.number} / {currentItem.of} + + Originalnachricht + +
+ Erhalten am: {currentItem.received.toLocaleDateString()} +
+
+ Faxdienst
+
+ Bereich:
+
+
+
+
+ Kundendienst-MA:
+
+
+
+ {assignableTo.map((short) => (
+
+
+ Kunde:
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/routes/_publicare+/liste.tsx b/app/routes/_publicare+/liste.tsx
new file mode 100644
index 0000000..1a8d63a
--- /dev/null
+++ b/app/routes/_publicare+/liste.tsx
@@ -0,0 +1,88 @@
+import {
+ Table,
+ TableRow,
+ TableBody,
+ TableHeader,
+ TableHead,
+ TableCell,
+} from '../../components/ui/table.tsx'
+import { exampleData } from '#app/routes/_publicare+/exampleData.tsx'
+import { Badge } from '#app/components/ui/badge.tsx'
+import { Field } from '#app/components/forms.tsx'
+import { useNavigate } from 'react-router'
+
+export default function () {
+ const navigate = useNavigate()
+ return (
+
+ {!currentItem && (
+
+
+ Keine weiteren Anfragen zu bearbeiten
+
+ )}
+ {currentItem && (
+
+
+ )}
+
+ {currentItem.document?.type === 'pdf' && (
+
+ )}
+ {currentItem.document?.type === 'image' && (
+
+ )}
+ {!currentItem.document && Kein Dokument angehängt}
+
+
+
+
+ {currentItem.source}
+
+ Sender: {currentItem.sender || ''} +
+ Titel: {currentItem.title || ''} +
+ Dokument: {currentItem.number} / {currentItem.of} + + Originalnachricht + +
+ Erhalten am: {currentItem.received.toLocaleDateString()} +
+ Nachricht
+ Quelle:+ Sender: {currentItem.sender || ''} +
+ Titel: {currentItem.title || ''} +
+ Dokument: {currentItem.number} / {currentItem.of} + + Originalnachricht + +
+ Erhalten am: {currentItem.received.toLocaleDateString()} +
+
+ Kundendienst:
+
+ Bereich:
+
+
+
+
+ Kundendienst-MA:
+
+
+
+ {assignableTo.map((short) => (
+
+
+ Kunde:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/routes/_publicare+/liste_bestellungen_kunde.tsx b/app/routes/_publicare+/liste_bestellungen_kunde.tsx
new file mode 100644
index 0000000..d809884
--- /dev/null
+++ b/app/routes/_publicare+/liste_bestellungen_kunde.tsx
@@ -0,0 +1,52 @@
+import {useNavigate} from "react-router";
+import {Table, TableBody, TableHead, TableRow, TableCell, TableHeader, TableCaption} from "#app/components/ui/table.tsx"
+import {Badge} from "#app/components/ui/badge.tsx";
+import {Icon} from "#app/components/ui/icon.tsx";
+import {VisuallyHidden} from "@radix-ui/react-visually-hidden";
+
+export default function() {
+
+ const navigate = useNavigate();
+ return (
+
+
+
+
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/liste_bestellungen_privatkunde.tsx b/app/routes/_publicare+/liste_bestellungen_privatkunde.tsx
new file mode 100644
index 0000000..d809884
--- /dev/null
+++ b/app/routes/_publicare+/liste_bestellungen_privatkunde.tsx
@@ -0,0 +1,52 @@
+import {useNavigate} from "react-router";
+import {Table, TableBody, TableHead, TableRow, TableCell, TableHeader, TableCaption} from "#app/components/ui/table.tsx"
+import {Badge} from "#app/components/ui/badge.tsx";
+import {Icon} from "#app/components/ui/icon.tsx";
+import {VisuallyHidden} from "@radix-ui/react-visually-hidden";
+
+export default function() {
+
+ const navigate = useNavigate();
+ return (
+
+ Bestellungen
+
+
+
+
+
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/neue_bestellung.tsx b/app/routes/_publicare+/neue_bestellung.tsx
new file mode 100644
index 0000000..69b26cc
--- /dev/null
+++ b/app/routes/_publicare+/neue_bestellung.tsx
@@ -0,0 +1,27 @@
+import {useNavigate} from "react-router";
+
+export default function NeueBestellungPage() {
+
+ const navigate = useNavigate();
+ return (
+
+ Bestellungen
+
+
+
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/neuer_patient.tsx b/app/routes/_publicare+/neuer_patient.tsx
new file mode 100644
index 0000000..f03b33f
--- /dev/null
+++ b/app/routes/_publicare+/neuer_patient.tsx
@@ -0,0 +1,25 @@
+import {useNavigate} from "react-router";
+
+export default function NeueBestellungPage() {
+
+ const navigate = useNavigate();
+ return (
+
+ Neuer Patient
+
+
+
+
+ Name
+
+
+ Sozialversicherungsnr.
+
+
+
+
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/registrierung.tsx b/app/routes/_publicare+/registrierung.tsx
new file mode 100644
index 0000000..d353f0f
--- /dev/null
+++ b/app/routes/_publicare+/registrierung.tsx
@@ -0,0 +1,29 @@
+import {useNavigate} from "react-router";
+
+export default function() {
+
+ const navigate = useNavigate();
+
+
+ return (
+
+ Neue Bestellung
+
+
+
+
+ Patient auswählen
+
+
+ Verordnung
+
+
+
+
+
+
+ )
+ ;
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/registrierung_step_2.tsx b/app/routes/_publicare+/registrierung_step_2.tsx
new file mode 100644
index 0000000..ca34c79
--- /dev/null
+++ b/app/routes/_publicare+/registrierung_step_2.tsx
@@ -0,0 +1,25 @@
+import {Link} from "@remix-run/react";
+
+export default function() {
+
+ return (
+
+ Registrierung
+
+
+
+
+ Name
+
+
+ Email/Telefon
+
+
+
+
+
+
+ )
+ ;
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/registrierung_step_3_organisation.tsx b/app/routes/_publicare+/registrierung_step_3_organisation.tsx
new file mode 100644
index 0000000..4f5a184
--- /dev/null
+++ b/app/routes/_publicare+/registrierung_step_3_organisation.tsx
@@ -0,0 +1,28 @@
+import {useNavigate} from "react-router";
+import {Link} from "@remix-run/react";
+
+export default function () {
+
+ const navigate = useNavigate();
+ return (
+
+ Registrierung
+
+
+
+
+
+ Option 1: Ich bestelle fĂźr mich selbst bzw. einen AngehĂśrigen
+
+
+
+
+ Option 2: Ich bin Angestellter und bestelle stellvertretend fĂźr unsere Kunden
+
+
+
+
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/registrierung_step_3_privat.tsx b/app/routes/_publicare+/registrierung_step_3_privat.tsx
new file mode 100644
index 0000000..f2db501
--- /dev/null
+++ b/app/routes/_publicare+/registrierung_step_3_privat.tsx
@@ -0,0 +1,33 @@
+import {useNavigate} from "react-router";
+
+export default function () {
+
+ const navigate = useNavigate();
+ return (
+
+ Organisation
+
+
+
+
+
+ Bestehende Organisation auswählen
+
+
+ oder
+
+
+ Neue Organisation anlegen
+
+
+
+
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/registrierung_step_4_neue_organisation.tsx b/app/routes/_publicare+/registrierung_step_4_neue_organisation.tsx
new file mode 100644
index 0000000..97615e8
--- /dev/null
+++ b/app/routes/_publicare+/registrierung_step_4_neue_organisation.tsx
@@ -0,0 +1,36 @@
+import {useNavigate} from "react-router";
+
+export default function () {
+
+ const navigate = useNavigate();
+ return (
+
+ Daten eingeben
+
+
+
+
+ Name
+
+
+ Sozialversicherungsnr.
+
+
+ Hausarzt
+
+
+ Telefonnr.
+
+
+
+
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/registrierung_step_4_zuordnung_organisation.tsx b/app/routes/_publicare+/registrierung_step_4_zuordnung_organisation.tsx
new file mode 100644
index 0000000..728380b
--- /dev/null
+++ b/app/routes/_publicare+/registrierung_step_4_zuordnung_organisation.tsx
@@ -0,0 +1,19 @@
+import {useNavigate} from "react-router";
+
+export default function () {
+
+ const navigate = useNavigate();
+ return (
+
+ Neues Unternehmen
+
+
+
+
+ Name
+
+
+ Adresse
+
+
+ PLZ/Ort
+
+
+ Telefonnr.
+
+
+ E-Mail
+
+
+
+
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/app/routes/_publicare+/website.tsx b/app/routes/_publicare+/website.tsx
new file mode 100644
index 0000000..c91c344
--- /dev/null
+++ b/app/routes/_publicare+/website.tsx
@@ -0,0 +1,27 @@
+import {Link} from "@remix-run/react";
+
+export default function() {
+ return (
+
+ Zuordnung Organisation
+
+
+
+
+ Wir haben den Administrator der Organisation verständigt. Sobald er ihre Teilnahme freigibt erhalten sie eine Benachrichtigung.
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/app/routes/_seo+/robots[.]txt.ts b/app/routes/_seo+/robots[.]txt.ts
new file mode 100644
index 0000000..94280a1
--- /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 0000000..a3ebb26
--- /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 { build: ServerBuild }
+ return generateSitemap(request, serverBuild.build.routes, {
+ siteUrl: getDomainUrl(request),
+ headers: {
+ 'Cache-Control': `public, max-age=${60 * 5}`,
+ },
+ })
+}
diff --git a/app/routes/admin+/cache.tsx b/app/routes/admin+/cache.tsx
new file mode 100644
index 0000000..741e858
--- /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
+
+
+
+ Schritt 1 â Rezept/Verordnungsschein besorgen
+Damit wir sie mit Produkten beliefern dĂźrfen, benĂśtigen wir ein gĂźltiges Rezept bzw. einen gĂźltigen Verordnungsschein. Ihr behandelnder Arzt im Krankenhaus oder im niedergelassenen Bereich (Praktischer Arzt, Facharzt) stellt ein Rezept / einen Verordnungschein Ăźber die von ihnen benĂśtigten Hilfsmittel aus.
+Hat ihre Krankenkasse eine Dauerverordnung genehmigt, so reicht ein Anruf, ein Fax oder eine Email an unseren Kundendienst, um eine Lieferung der von ihnen benĂśtigten Hilfsmittel zu veranlassen.
+
+
+ Schritt 2 â Zusendung des Rezeptes/Verordnungsscheines
++ Das Rezept oder den Verordnungschein bitte Ăźber unser Online-Formular, per Email (bestellung@publicare.at), per Fax (07229 70560-60) oder per Post an uns senden. +
++ Fßr ihre Bestellung reicht ein Fax oder Email des Rezeptes bzw. des Verordnungscheines aus. Fßr die Abrechnung mit den Krankenkassen benÜtigen wir allerdings zusätzlich das Original. +
++ Ihrer Lieferung liegt standardmäĂig ein kostenloser RĂźckumschlag bei, in dem sie uns ihr Originalrezept portofrei zuschicken kĂśnnen. Bedenken sie bitte, dass die Zustellung eines Rezeptes/Verordnungscheines bis zu drei Werktagen dauern kann. +
+
+
+ )
+}
+
+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 0000000..2b793d0 --- /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 0000000..39bcb07 --- /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 0000000..a9c8f80 --- /dev/null +++ b/app/routes/admin+/cache_.sqlite.server.ts @@ -0,0 +1,58 @@ +import { json, redirect, type ActionFunctionArgs } from '@remix-run/node' +import { z } from 'zod' +import { cache } from '#app/utils/cache.server.ts' +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 }), + }) +} + +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/admin+/cache_.sqlite.tsx b/app/routes/admin+/cache_.sqlite.tsx new file mode 100644 index 0000000..e469891 --- /dev/null +++ b/app/routes/admin+/cache_.sqlite.tsx @@ -0,0 +1 @@ +export { action } from './cache_.sqlite.server.ts' diff --git a/app/routes/me.tsx b/app/routes/me.tsx new file mode 100644 index 0000000..28eb14c --- /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/resources+/download-user-data.tsx b/app/routes/resources+/download-user-data.tsx new file mode 100644 index 0000000..edd8df4 --- /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 0000000..435a247 --- /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 0000000..7c4b84c --- /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+/theme-switch.tsx b/app/routes/resources+/theme-switch.tsx new file mode 100644 index 0000000..5ea2aea --- /dev/null +++ b/app/routes/resources+/theme-switch.tsx @@ -0,0 +1,131 @@ +import { useForm, getFormProps } from '@conform-to/react' +import { parseWithZod } from '@conform-to/zod' +import { invariantResponse } from '@epic-web/invariant' +import { json, type ActionFunctionArgs } from '@remix-run/node' +import { redirect, useFetcher, useFetchers } from '@remix-run/react' +import { ServerOnly } from 'remix-utils/server-only' +import { z } from 'zod' +import { Icon } from '#app/components/ui/icon.tsx' +import { useHints } from '#app/utils/client-hints.tsx' +import { useRequestInfo } from '#app/utils/request-info.ts' +import { type Theme, setTheme } from '#app/utils/theme.server.ts' + +const ThemeFormSchema = z.object({ + theme: z.enum(['system', 'light', 'dark']), + // this is useful for progressive enhancement + redirectTo: z.string().optional(), +}) + +export async function action({ request }: ActionFunctionArgs) { + const formData = await request.formData() + const submission = parseWithZod(formData, { + schema: ThemeFormSchema, + }) + + invariantResponse(submission.status === 'success', 'Invalid theme received') + + const { theme, redirectTo } = submission.value + + const responseInit = { + headers: { 'set-cookie': setTheme(theme) }, + } + if (redirectTo) { + return redirect(redirectTo, responseInit) + } else { + return json({ result: submission.reply() }, responseInit) + } +} + +export function ThemeSwitch({ + userPreference, +}: { + userPreference?: Theme | null +}) { + const fetcher = useFetcher
+
+
+
+ Epic Notes Email Change
+
+
+
+
+ Your Epic Notes email has been changed
+
+
+
+
+
+
+ )
+}
diff --git a/app/routes/settings+/profile.connections.tsx b/app/routes/settings+/profile.connections.tsx
new file mode 100644
index 0000000..91c4795
--- /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 0000000..380cfa2
--- /dev/null
+++ b/app/routes/settings+/profile.index.tsx
@@ -0,0 +1,363 @@
+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 0000000..afdf7af
--- /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 0000000..711aa90
--- /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 0000000..f153099
--- /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 0000000..e080dda
--- /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 0000000..7f5dfd1
--- /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 0000000..c9d32dc
--- /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 0000000..8b1796c --- /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
+
+
+