From 024a8ca0d8045807d9b8655f5bf99df4f15f6ce0 Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Fri, 14 Feb 2025 12:47:19 +0100
Subject: [PATCH] fix(login): prevent default for new user confirmation form
 event

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>
---
 .../login-page/new-user/new-user-card.tsx     | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

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