+ 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. +
++ {error.status} {error.data} +
+ ), + statusHandlers, + unexpectedErrorHandler = error =>{getErrorMessage(error)}
, +}: { + defaultStatusHandler?: StatusHandler + statusHandlers?: Record
+ {location.pathname}
+
+
+
+
+ No worries, we'll send you reset instructions. +
++ Please enter your details. +
++ Please enter your details. +
++ Please enter your details. +
++ Hi, {data.resetPasswordUsername}. No worries. It happens all the time. +
+
+
+
+ Please enter your email. +
++ We've sent you a code to verify your email address. +
+ + ) + + const headings: Record+ Please enter your 2FA code to verify your identity. +
+ + ), + } + + const [form, fields] = useForm({ + id: 'verify-form', + constraint: getFieldsetConstraint(VerifySchema), + lastSubmission: actionData?.submission ?? data.submission, + onValidate({ formData }) { + return parse(formData, { schema: VerifySchema }) + }, + defaultValue: { + code: searchParams.get(codeQueryParam) ?? '', + type, + target: searchParams.get(targetQueryParam) ?? '', + redirectTo: searchParams.get(redirectToQueryParam) ?? '', + }, + }) + + return ( ++ Check the{' '} + + Getting Started + {' '} + guide file for how to get your project off the ground! +
+
+
+
+
+
+
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}. +
+Here are your current connections:
+You don't have any connections yet.
+ )} + ++ Disabling two factor authentication is not recommended. However, if + you would like to do so, click here: +
+
+
+
+ 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. +
+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. +
++ Joined {data.userJoinedDisplay} +
+ {isLoggedInUser ? ( + + ) : null} +No user with the username "{params.username}" exists
+ ), + }} + /> + ) +} diff --git a/app/routes/users+/$username_+/__note-editor.tsx b/app/routes/users+/$username_+/__note-editor.tsx new file mode 100644 index 0000000..e74ce75 --- /dev/null +++ b/app/routes/users+/$username_+/__note-editor.tsx @@ -0,0 +1,401 @@ +import { + conform, + list, + useFieldList, + useFieldset, + useForm, + type FieldConfig, +} from '@conform-to/react' +import { getFieldsetConstraint, parse } from '@conform-to/zod' +import { createId as cuid } from '@paralleldrive/cuid2' +import { type Note, type NoteImage } from '@prisma/client' +import { + unstable_createMemoryUploadHandler as createMemoryUploadHandler, + json, + unstable_parseMultipartFormData as parseMultipartFormData, + redirect, + type DataFunctionArgs, + type SerializeFrom, +} from '@remix-run/node' +import { Form, useFetcher } from '@remix-run/react' +import { useRef, useState } from 'react' +import { z } from 'zod' +import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx' +import { floatingToolbarClassName } from '#app/components/floating-toolbar.tsx' +import { ErrorList, Field, TextareaField } from '#app/components/forms.tsx' +import { Button } from '#app/components/ui/button.tsx' +import { Icon } from '#app/components/ui/icon.tsx' +import { Label } from '#app/components/ui/label.tsx' +import { StatusButton } from '#app/components/ui/status-button.tsx' +import { Textarea } from '#app/components/ui/textarea.tsx' +import { requireUserId } from '#app/utils/auth.server.ts' +import { prisma } from '#app/utils/db.server.ts' +import { cn, getNoteImgSrc } from '#app/utils/misc.tsx' + +const titleMinLength = 1 +const titleMaxLength = 100 +const contentMinLength = 1 +const contentMaxLength = 10000 + +const MAX_UPLOAD_SIZE = 1024 * 1024 * 3 // 3MB + +const ImageFieldsetSchema = z.object({ + id: z.string().optional(), + file: z + .instanceof(File) + .optional() + .refine(file => { + return !file || file.size <= MAX_UPLOAD_SIZE + }, 'File size must be less than 3MB'), + altText: z.string().optional(), +}) + +type ImageFieldset = z.infer