improve verification

Author: kentcdodds

app/routes/recipients+/__editor.server.tsx

@@ -95,7 +95,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
 export async function usertRecipientAction({
 	formData,
 	userId,
-	request,
 	recipient,
 }: Pick<RecipientActionArgs, 'formData' | 'request' | 'userId'> & {
 	recipient: RecipientActionArgs['recipient'] | null
@@ -128,7 +127,6 @@ export async function usertRecipientAction({
 
 	if (recipientId) {
 		invariantResponse(recipient, 'Recipient not found')
-		const verified = phoneNumber === recipient?.phoneNumber
 		const updatedRecipient = await prisma.recipient.update({
 			select: { id: true },
 			where: { id: recipientId },
@@ -143,14 +141,10 @@ export async function usertRecipientAction({
 				timeZone,
 			},
 		})
-		if (verified) {
-			return redirect(`/recipients/${updatedRecipient.id}`)
-		} else {
-			return sendVerificationAction({ formData, userId, request, recipient })
-		}
+		return redirect(`/recipients/${updatedRecipient.id}`)
 	} else {
-		recipient = await prisma.recipient.create({
-			select: { id: true, name: true, phoneNumber: true, verified: true },
+		const newRecipient = await prisma.recipient.create({
+			select: { id: true },
 			data: {
 				name,
 				phoneNumber,
@@ -161,7 +155,12 @@ export async function usertRecipientAction({
 			},
 		})
 
-		return sendVerificationAction({ formData, userId, request, recipient })
+		return redirectWithToast(`/recipients/${newRecipient.id}/edit`, {
+			type: 'success',
+			title: 'Recipient created',
+			description:
+				'Your recipient has been created. You must verify them before sending messages.',
+		})
 	}
 }
 

app/routes/recipients+/__editor.tsx

@@ -52,6 +52,7 @@ export function RecipientEditor({
 }) {
 	const actionData = useActionData<typeof usertRecipientAction>()
 	const isPending = useIsPending()
+	const needsVerification = recipient?.verified === false
 
 	const [form, fields] = useForm({
 		id: 'recipient-editor',
@@ -67,9 +68,21 @@ export function RecipientEditor({
 	return (
 		<div className="absolute inset-0">
 			<div className="flex justify-end gap-2 p-6">
-				{recipient && !recipient.verified ? <VerifyForm /> : null}
+				{needsVerification ? <VerifyForm /> : null}
 				{recipient?.id ? <DeleteRecipient id={recipient.id} /> : null}
 			</div>
+			{needsVerification ? (
+				<div className="px-6">
+					<strong className="font-bold text-destructive">
+						Verification required
+					</strong>
+					<p>
+						When you click "Verify" above, it will send a text message with a
+						verification code to {recipient?.phoneNumber} (their phone number).
+						You will be required to enter their code in the next step.
+					</p>
+				</div>
+			) : null}
 			<Form
 				method="POST"
 				className="flex h-full flex-col gap-y-4 overflow-y-auto overflow-x-hidden px-10 pb-28 pt-12"