Use flash message for errors on password reset page

Author: mjackson

demos/bookstore/app/auth.test.ts

@@ -135,4 +135,71 @@ describe('auth handlers', () => {
     assertContains(html, 'Invalid email or password')
     assertContains(html, 'returnTo=' + encodeURIComponent('/checkout'))
   })
+
+  it('POST /reset-password with mismatched passwords redirects back with error', async () => {
+    // First, request a password reset to get a token
+    let forgotPasswordResponse = await router.fetch('https://remix.run/forgot-password', {
+      method: 'POST',
+      body: new URLSearchParams({
+        email: '[email protected]',
+      }),
+    })
+
+    let html = await forgotPasswordResponse.text()
+    // Extract token from the reset link in the demo response
+    let tokenMatch = html.match(/\/reset-password\/([^"]+)/)
+    assert.ok(tokenMatch, 'Expected to find reset token in response')
+    let token = tokenMatch[1]
+
+    // Try to reset password with mismatched passwords
+    let response = await router.fetch(`https://remix.run/reset-password/${token}`, {
+      method: 'POST',
+      body: new URLSearchParams({
+        password: 'newpassword123',
+        confirmPassword: 'differentpassword',
+      }),
+      redirect: 'manual',
+    })
+
+    assert.equal(response.status, 302)
+    assert.equal(response.headers.get('Location'), `/reset-password/${token}`)
+
+    // Follow redirect to see the error message
+    let sessionCookie = getSessionCookie(response)
+    let followUpResponse = await router.fetch(`https://remix.run/reset-password/${token}`, {
+      headers: {
+        Cookie: `session=${sessionCookie}`,
+      },
+    })
+
+    let errorHtml = await followUpResponse.text()
+    assertContains(errorHtml, 'Passwords do not match')
+  })
+
+  it('POST /reset-password with invalid token redirects back with error', async () => {
+    let invalidToken = 'invalid-token-12345'
+
+    let response = await router.fetch(`https://remix.run/reset-password/${invalidToken}`, {
+      method: 'POST',
+      body: new URLSearchParams({
+        password: 'newpassword123',
+        confirmPassword: 'newpassword123',
+      }),
+      redirect: 'manual',
+    })
+
+    assert.equal(response.status, 302)
+    assert.equal(response.headers.get('Location'), `/reset-password/${invalidToken}`)
+
+    // Follow redirect to see the error message
+    let sessionCookie = getSessionCookie(response)
+    let followUpResponse = await router.fetch(`https://remix.run/reset-password/${invalidToken}`, {
+      headers: {
+        Cookie: `session=${sessionCookie}`,
+      },
+    })
+
+    let errorHtml = await followUpResponse.text()
+    assertContains(errorHtml, 'Invalid or expired reset token')
+  })
 })

demos/bookstore/app/auth.tsx

@@ -78,9 +78,9 @@ export default {
       async action({ session, formData, url }) {
         let email = formData.get('email')?.toString() ?? ''
         let password = formData.get('password')?.toString() ?? ''
-        let user = authenticateUser(email, password)
         let returnTo = url.searchParams.get('returnTo')
 
+        let user = authenticateUser(email, password)
         if (!user) {
           session.flash('error', 'Invalid email or password. Please try again.')
           return redirect(routes.auth.login.index.href(undefined, { returnTo }))
@@ -239,15 +239,22 @@ export default {
     },
 
     resetPassword: {
-      index({ params }) {
+      index({ params, session }) {
         let token = params.token
+        let error = session.get('error')
 
         return render(
           <Document>
             <div class="card" style="max-width: 500px; margin: 2rem auto;">
               <h1>Reset Password</h1>
               <p>Enter your new password below.</p>
 
+              {typeof error === 'string' ? (
+                <div class="alert alert-error" style="margin-bottom: 1.5rem;">
+                  {error}
+                </div>
+              ) : null}
+
               <form method="POST" action={routes.auth.resetPassword.action.href({ token })}>
                 <div class="form-group">
                   <label for="password">New Password</label>
@@ -280,45 +287,20 @@ export default {
         )
       },
 
-      async action({ formData, params }) {
+      async action({ session, formData, params }) {
         let password = formData.get('password')?.toString() ?? ''
         let confirmPassword = formData.get('confirmPassword')?.toString() ?? ''
 
         if (password !== confirmPassword) {
-          return render(
-            <Document>
-              <div class="card" style="max-width: 500px; margin: 2rem auto;">
-                <div class="alert alert-error">Passwords do not match.</div>
-                <p>
-                  <a
-                    href={routes.auth.resetPassword.index.href({ token: params.token })}
-                    class="btn"
-                  >
-                    Try Again
-                  </a>
-                </p>
-              </div>
-            </Document>,
-            { status: 400 },
-          )
+          session.flash('error', 'Passwords do not match.')
+          return redirect(routes.auth.resetPassword.index.href({ token: params.token }))
         }
 
         let success = resetPassword(params.token, password)
 
         if (!success) {
-          return render(
-            <Document>
-              <div class="card" style="max-width: 500px; margin: 2rem auto;">
-                <div class="alert alert-error">Invalid or expired reset token.</div>
-                <p>
-                  <a href={routes.auth.forgotPassword.index.href()} class="btn">
-                    Request New Link
-                  </a>
-                </p>
-              </div>
-            </Document>,
-            { status: 400 },
-          )
+          session.flash('error', 'Invalid or expired reset token.')
+          return redirect(routes.auth.resetPassword.index.href({ token: params.token }))
         }
 
         return render(

demos/bookstore/app/utils/context.ts

@@ -1,9 +1,8 @@
 import { createStorageKey } from '@remix-run/fetch-router'
 import { getContext } from '@remix-run/fetch-router/async-context-middleware'
 
+import { type Cart, getCart } from '../models/cart.ts'
 import type { User } from '../models/users.ts'
-import type { Cart } from '../models/cart.ts'
-import { getCart } from '../models/cart.ts'
 
 // Storage key for attaching user data to request context
 let USER_KEY = createStorageKey<User>()