mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-22 11:15:23 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(login): prevent default for new user confirmation form event

Browse source 
The new user form which is shown when a new user logs in via an external
auth provider did not include the event.preventDefault() statement.
This meant that on submitting the form there was a race-condition
between the JS code sending the data to the API and the browser
reloading the page. Chromium-based browsers seem to handle events before
handling page navigation, and because the form event initiates a page
navigation on a successful API response it worked. Firefox seems to call
the event handler and the page navigation in parallel, resulting in a
loop on the new user form.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2025-02-14 12:47:19 +01:00 • committed by Philip Molares
parent a522380c4c
commit 024a8ca0d8
1 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/components/login-page/new-user/new-user-card.tsx
View file

@ -3,6 +3,7 @@
* *
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
import type { FormEvent } from 'react'
import React, { useCallback, useEffect, useMemo, useState } from 'react' import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Button, Card, Form } from 'react-bootstrap' import { Button, Card, Form } from 'react-bootstrap'
import { Trans } from 'react-i18next' import { Trans } from 'react-i18next'
@ -36,18 +37,22 @@ export const NewUserCard: React.FC = () => {
const onChangeUsername = useOnInputChange(setUsername) const onChangeUsername = useOnInputChange(setUsername)
const onChangeDisplayName = useOnInputChange(setDisplayName) const onChangeDisplayName = useOnInputChange(setDisplayName)
const submitUserdata = useCallback(() => { const submitUserdata = useCallback(
confirmPendingUser({ (event: FormEvent) => {
username, event.preventDefault()
displayName, confirmPendingUser({
profilePicture: pictureChoice === ProfilePictureChoice.PROVIDER ? value?.photoUrl : undefined username,
}) displayName,
.then(() => fetchAndSetUser()) profilePicture: pictureChoice === ProfilePictureChoice.PROVIDER ? value?.photoUrl : undefined
.then(() => {
router.push('/')
}) })
.catch(showErrorNotification('login.welcome.error')) .then(() => fetchAndSetUser())
}, [username, displayName, pictureChoice, router, showErrorNotification, value?.photoUrl]) .then(() => {
router.push('/')
})
.catch(showErrorNotification('login.welcome.error'))
},
[username, displayName, pictureChoice, router, showErrorNotification, value?.photoUrl]
)
const cancelUserCreation = useCallback(() => { const cancelUserCreation = useCallback(() => {
cancelPendingUser() cancelPendingUser()