Merge pull request #13383 from overleaf/jk-fix-error-handling-password-reset-form

[web] Form errors: fall back to rendering error message if custom message not found

GitOrigin-RevId: 66947bdf46c787d7888f15f1471da12fc7a5cd80

services/web/frontend/js/features/form-helpers/hydrate-form.js

@@ -138,12 +138,41 @@ function showMessages(formEl, messageBag) {
 
   // Render messages
   messageBag.forEach(message => {
-    if (message.key) {
-      formEl
-        .querySelectorAll(`[data-ol-custom-form-message="${message.key}"]`)
-        .forEach(el => {
-          el.hidden = false
+    const customErrorElements = message.key
+      ? formEl.querySelectorAll(
+          `[data-ol-custom-form-message="${message.key}"]`
+        )
+      : []
+    if (message.key && customErrorElements.length > 0) {
+      // Found at least one custom error element for key, show them
+      customErrorElements.forEach(el => {
+        el.hidden = false
+      })
+    } else {
+      // No custom error element for key on page, append a new error message
+      const messageEl = document.createElement('div')
+      messageEl.className = classNames('alert mb-2', {
+        'alert-danger': message.type === 'error',
+        'alert-success': message.type !== 'error',
+      })
+      messageEl.textContent = message.text || `Error: ${message.key}`
+      messageEl.setAttribute('aria-live', 'assertive')
+      messageEl.setAttribute(
+        'role',
+        message.type === 'error' ? 'alert' : 'status'
+      )
+      if (message.hints && message.hints.length) {
+        const listEl = document.createElement('ul')
+        message.hints.forEach(hint => {
+          const listItemEl = document.createElement('li')
+          listItemEl.textContent = hint
+          listEl.append(listItemEl)
         })
+        messageEl.append(listEl)
+      }
+      messagesEl.append(messageEl)
+    }
+    if (message.key) {
       // Hide the form elements on specific message types
       const hideOnError = formEl.attributes['data-ol-hide-on-error']
       if (
@@ -159,30 +188,7 @@ function showMessages(formEl, messageBag) {
         .forEach(el => {
           el.hidden = true
         })
-      return
-    }
-
-    const messageEl = document.createElement('div')
-    messageEl.className = classNames('alert mb-2', {
-      'alert-danger': message.type === 'error',
-      'alert-success': message.type !== 'error',
-    })
-    messageEl.textContent = message.text
-    messageEl.setAttribute('aria-live', 'assertive')
-    messageEl.setAttribute(
-      'role',
-      message.type === 'error' ? 'alert' : 'status'
-    )
-    if (message.hints && message.hints.length) {
-      const listEl = document.createElement('ul')
-      message.hints.forEach(hint => {
-        const listItemEl = document.createElement('li')
-        listItemEl.textContent = hint
-        listEl.append(listItemEl)
-      })
-      messageEl.append(listEl)
     }
-    messagesEl.append(messageEl)
   })
 }