Fix crash in password reset page (#3512)

Author: goto-bus-stop

src/components/CrashHandler/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import FatalError from '../FatalError';
+
+export default class CrashHandler extends React.Component<
+  { children: React.ReactNode },
+  { error: Error | null }
+> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props);
+
+    this.state = {
+      error: null,
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static getDerivedStateFromError(error: any) {
+    return { error };
+  }
+
+  render() {
+    const { children } = this.props;
+    const { error } = this.state;
+
+    if (error != null) {
+      return (
+        <FatalError error={error} />
+      );
+    }
+
+    return children;
+  }
+}

src/containers/App.tsx

@@ -11,7 +11,7 @@ import { isConnectedSelector } from '../reducers/server';
 import createTheme from '../utils/createTheme';
 import DesktopApp from '../components/App';
 import MobileApp from '../mobile/components/App';
-import FatalError from '../components/FatalError';
+import CrashHandler from '../components/CrashHandler';
 import UwaveContext from '../context/UwaveContext';
 import { ClockProvider } from '../context/ClockContext';
 import MediaSourceContext, { type MediaSource } from '../context/MediaSourceContext';
@@ -26,37 +26,6 @@ const {
   useRef,
 } = React;
 
-class ErrorWrapper extends React.Component<
-  { children: React.ReactNode },
-  { error: Error | null }
-> {
-  constructor(props: { children: React.ReactNode }) {
-    super(props);
-
-    this.state = {
-      error: null,
-    };
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  static getDerivedStateFromError(error: any) {
-    return { error };
-  }
-
-  render() {
-    const { children } = this.props;
-    const { error } = this.state;
-
-    if (error != null) {
-      return (
-        <FatalError error={error} />
-      );
-    }
-
-    return children;
-  }
-}
-
 function usePageVisibility(fn: (visible: boolean) => void) {
   useEffect(() => {
     const handler = () => {
@@ -114,7 +83,7 @@ function AppContainer({ uwave, mediaSources }: AppContainerProps) {
 
   return (
     <ThemeProvider theme={theme}>
-      <ErrorWrapper>
+      <CrashHandler>
         <TranslateProvider translator={translator}>
           <BusProvider>
             <ClockProvider>
@@ -128,7 +97,7 @@ function AppContainer({ uwave, mediaSources }: AppContainerProps) {
             </ClockProvider>
           </BusProvider>
         </TranslateProvider>
-      </ErrorWrapper>
+      </CrashHandler>
     </ThemeProvider>
   );
 }

src/password-reset/app.css

@@ -2,7 +2,9 @@
 @import url("@openfonts/open-sans_all");
 @import url("../vars.css");
 @import url("../components/App/index.css");
+@import url("../components/FatalError/index.css");
 @import url("../components/Form/index.css");
+@import url("../components/SvgIcon/index.css");
 @import url("./components/PasswordResetPage/index.css");
 
 body {

src/password-reset/components/PasswordResetPage/index.tsx

@@ -22,7 +22,9 @@ function PasswordResetPage({ resetKey, email, onSuccess }: PasswordResetPageProp
   const [newPasswordConfirm, setNewPasswordConfirm] = useState('');
 
   const valid = newPassword.length >= 6 && newPassword === newPasswordConfirm;
-  const handleSubmit = useAsyncCallback(async () => {
+  const handleSubmit = useAsyncCallback(async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
     if (!valid) {
       return;
     }

src/password-reset/containers/PasswordResetApp.tsx

@@ -1,14 +1,22 @@
 import { useState } from 'react';
+import { Provider } from 'react-redux';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 // @ts-expect-error TS2305: no types
 import { TranslateProvider } from '@u-wave/react-translate';
 import ErrorArea from '../../containers/ErrorArea';
 import PasswordResetPage from '../components/PasswordResetPage';
 import PasswordResetSuccessPage from '../components/PasswordResetSuccessPage';
 import theme from '../../theme';
+import CrashHandler from '../../components/CrashHandler';
+import errors from '../../reducers/errors';
 
 const muiTheme = createTheme({ ...theme, cssVariables: true });
 
+const store = configureStore({
+  reducer: combineReducers({ errors }),
+});
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Translator = any; // from @u-wave/translate
 type PasswordResetAppProps = {
@@ -19,19 +27,23 @@ function PasswordResetApp({ translator, resetKey }: PasswordResetAppProps) {
   const [success, setSuccess] = useState(false);
 
   return (
-    <ThemeProvider theme={muiTheme}>
-      <TranslateProvider translator={translator}>
-        {success ? (
-          <PasswordResetSuccessPage />
-        ) : (
-          <PasswordResetPage
-            resetKey={resetKey}
-            onSuccess={() => setSuccess(true)}
-          />
-        )}
-        <ErrorArea />
-      </TranslateProvider>
-    </ThemeProvider>
+    <Provider store={store}>
+      <ThemeProvider theme={muiTheme}>
+        <CrashHandler>
+          <TranslateProvider translator={translator}>
+            {success ? (
+              <PasswordResetSuccessPage />
+            ) : (
+              <PasswordResetPage
+                resetKey={resetKey}
+                onSuccess={() => setSuccess(true)}
+              />
+            )}
+            <ErrorArea />
+          </TranslateProvider>
+        </CrashHandler>
+      </ThemeProvider>
+    </Provider>
   );
 }