send notice email to old email after change

Author: kentcdodds

app/routes/settings+/profile.change-email.index/index.tsx

@@ -16,7 +16,7 @@ import {
 	prepareVerification,
 	type VerifyFunctionArgs,
 } from '../../resources+/verify.tsx'
-import { EmailChangeEmail } from './email.server.tsx'
+import { EmailChangeEmail, EmailChangeNoticeEmail } from './email.server.tsx'
 
 export const newEmailAddressSessionKey = 'new-email-address'
 
@@ -107,14 +107,24 @@ export async function handleVerification({
 		]
 		return json({ status: 'error', submission } as const, { status: 400 })
 	}
-	await prisma.user.update({
+	const preUpdateUser = await prisma.user.findFirstOrThrow({
+		select: { email: true },
+		where: { id: submission.value.target },
+	})
+	const user = await prisma.user.update({
 		where: { id: submission.value.target },
-		select: { email: true, username: true },
+		select: { id: true, email: true, username: true },
 		data: { email: newEmail },
 	})
 
 	cookieSession.unset(newEmailAddressSessionKey)
 
+	void sendEmail({
+		to: preUpdateUser.email,
+		subject: 'Epic Stack email changed',
+		react: <EmailChangeNoticeEmail userId={user.id} />,
+	})
+
 	return redirectWithToast(
 		'/settings/profile',
 		{ title: 'Success', description: 'Your email has been changed.' },

tests/e2e/settings-profile.test.ts

@@ -1,5 +1,5 @@
 import { faker } from '@faker-js/faker'
-import { expect, insertNewUser, test } from '../playwright-utils.ts'
+import { expect, insertNewUser, test, waitFor } from '../playwright-utils.ts'
 import { createUser } from '../../tests/db-utils.ts'
 import { verifyUserPassword } from '~/utils/auth.server.ts'
 import { readEmail } from 'tests/mocks/utils.ts'
@@ -86,15 +86,17 @@ test('Users can update their profile photo', async ({ login, page }) => {
 })
 
 test('Users can change their email address', async ({ page, login }) => {
-	const user = await login()
+	const preUpdateUser = await login()
 	const newEmailAddress = faker.internet.email().toLowerCase()
-	expect(user.email).not.toEqual(newEmailAddress)
+	expect(preUpdateUser.email).not.toEqual(newEmailAddress)
 	await page.goto('/settings/profile')
 	await page.getByRole('link', { name: /change email/i }).click()
 	await page.getByRole('textbox', { name: /new email/i }).fill(newEmailAddress)
 	await page.getByRole('button', { name: /send confirmation/i }).click()
-	await expect(page.getByText(/check your email/i)).toBeVisible()
-	const email = await readEmail(newEmailAddress)
+	// await expect(page.getByText(/check your email/i)).toBeVisible()
+	const email = await waitFor(() => readEmail(newEmailAddress), {
+		errorMessage: 'Confirmation email was not sent',
+	})
 	invariant(email, 'Email was not sent')
 	const codeMatch = email.text.match(
 		/Here's your verification code: (?<code>\d+)/,
@@ -106,9 +108,13 @@ test('Users can change their email address', async ({ page, login }) => {
 	await expect(page.getByText(newEmailAddress)).toBeVisible()
 
 	const updatedUser = await prisma.user.findUnique({
-		where: { id: user.id },
+		where: { id: preUpdateUser.id },
 		select: { email: true },
 	})
 	invariant(updatedUser, 'Updated user not found')
 	expect(updatedUser.email).toBe(newEmailAddress)
+	const noticeEmail = await waitFor(() => readEmail(preUpdateUser.email), {
+		errorMessage: 'Notice email was not sent',
+	})
+	expect(noticeEmail.subject).toContain('changed')
 })

tests/playwright-utils.ts

@@ -109,6 +109,34 @@ export async function loginPage({
 	return user
 }
 
+/**
+ * This allows you to wait for something (like an email to be available).
+ *
+ * It calls the callback every 50ms until it returns a value (and does not throw
+ * an error). After the timeout, it will throw the last error that was thrown or
+ * throw the error message provided as a fallback
+ */
+export async function waitFor<ReturnValue>(
+	cb: () => ReturnValue | Promise<ReturnValue>,
+	{
+		errorMessage,
+		timeout = 5000,
+	}: { errorMessage?: string; timeout?: number } = {},
+) {
+	const endTime = Date.now() + timeout
+	let lastError: unknown = new Error(errorMessage)
+	while (Date.now() < endTime) {
+		try {
+			const response = await cb()
+			if (response) return response
+		} catch (e: unknown) {
+			lastError = e
+		}
+		await new Promise(r => setTimeout(r, 100))
+	}
+	throw lastError
+}
+
 test.afterEach(async () => {
 	type Delegate = {
 		deleteMany: (opts: {