agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-25 02:00:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

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

GitOrigin-RevId: 66947bdf46c787d7888f15f1471da12fc7a5cd80
This commit is contained in:
June Kelly
2023-06-13 11:16:14 +01:00
committed by Copybot
parent 21444b9d02
commit dbfd60f45d
1 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
services/web/frontend/js/features/form-helpers/hydrate-form.js
View File

@@ -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)
})
}