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>

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,7 +37,9 @@ export const NewUserCard: React.FC = () => {
   const onChangeUsername = useOnInputChange(setUsername)
   const onChangeDisplayName = useOnInputChange(setDisplayName)
 
-  const submitUserdata = useCallback(() => {
+  const submitUserdata = useCallback(
+    (event: FormEvent) => {
+      event.preventDefault()
       confirmPendingUser({
         username,
         displayName,
@@ -47,7 +50,9 @@ export const NewUserCard: React.FC = () => {
           router.push('/')
         })
         .catch(showErrorNotification('login.welcome.error'))
-  }, [username, displayName, pictureChoice, router, showErrorNotification, value?.photoUrl])
+    },
+    [username, displayName, pictureChoice, router, showErrorNotification, value?.photoUrl]
+  )
 
   const cancelUserCreation = useCallback(() => {
     cancelPendingUser()