Centralize error handling for authentication views using Redux status system (#195)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: dkhalife <[email protected]>
Co-authored-by: Dany Khalife <[email protected]>

Author: Copilot

frontend/src/views/Authorization/ForgotPasswordView.tsx

@@ -12,19 +12,24 @@ import {
   Input,
   FormHelperText,
   Button,
-  Snackbar,
 } from '@mui/joy'
 import React, { ChangeEvent } from 'react'
+import { connect } from 'react-redux'
+import { AppDispatch } from '@/store/store'
+import { pushStatus } from '@/store/statusSlice'
+import { StatusSeverity } from '@/models/status'
 
-type ForgotPasswordViewProps = WithNavigate
+type ForgotPasswordViewProps = WithNavigate & {
+  pushStatus: (message: string, severity: StatusSeverity, timeout?: number) => void
+}
 
 interface ForgotPasswordViewState {
   email: string
   emailError: string | null
   resetStatusOk: boolean | null
 }
 
-export class ForgotPasswordView extends React.Component<
+class ForgotPasswordViewImpl extends React.Component<
   ForgotPasswordViewProps,
   ForgotPasswordViewState
 > {
@@ -56,8 +61,10 @@ export class ForgotPasswordView extends React.Component<
     try {
       await ResetPassword(this.state.email)
       this.setState({ resetStatusOk: true })
+      this.props.pushStatus('Reset email sent, check your email', 'success', 5000)
     } catch {
       this.setState({ resetStatusOk: false })
+      this.props.pushStatus('Reset email failed, try again later', 'error', 5000)
     }
   }
 
@@ -74,13 +81,6 @@ export class ForgotPasswordView extends React.Component<
     this.handleSubmit()
   }
 
-  private onSnackbarClose = () => {
-    const { resetStatusOk } = this.state
-    if (resetStatusOk) {
-      this.props.navigate(NavigationPaths.Login)
-    }
-  }
-
   render(): React.ReactNode {
     const { email, emailError, resetStatusOk } = this.state
     const { navigate } = this.props
@@ -177,9 +177,9 @@ export class ForgotPasswordView extends React.Component<
               <>
                 <Box mt={-30}>
                   <Typography>
-                    if there is an account associated with the email you
+                    If there is an account associated with the email you
                     entered, you will receive an email with instructions on how
-                    to reset your
+                    to reset your password.
                   </Typography>
                 </Box>
                 <Button
@@ -193,18 +193,16 @@ export class ForgotPasswordView extends React.Component<
                 </Button>
               </>
             )}
-            <Snackbar
-              open={resetStatusOk ? resetStatusOk : resetStatusOk === false}
-              autoHideDuration={5000}
-              onClose={this.onSnackbarClose}
-            >
-              {resetStatusOk
-                ? 'Reset email sent, check your email'
-                : 'Reset email failed, try again later'}
-            </Snackbar>
           </Sheet>
         </Box>
       </Container>
     )
   }
 }
+
+const mapDispatchToProps = (dispatch: AppDispatch) => ({
+  pushStatus: (message: string, severity: StatusSeverity, timeout?: number) =>
+    dispatch(pushStatus({ message, severity, timeout })),
+})
+
+export const ForgotPasswordView = connect(null, mapDispatchToProps)(ForgotPasswordViewImpl)

frontend/src/views/Authorization/LoginView.tsx

@@ -7,29 +7,32 @@ import {
   Input,
   Button,
   Divider,
-  Snackbar,
 } from '@mui/joy'
 import React, { ChangeEvent } from 'react'
 import { doLogin } from '@/utils/auth'
 import { setTitle } from '@/utils/dom'
 import { NavigationPaths, WithNavigate } from '@/utils/navigation'
+import { connect } from 'react-redux'
+import { AppDispatch } from '@/store/store'
+import { pushStatus } from '@/store/statusSlice'
+import { StatusSeverity } from '@/models/status'
 
-type LoginViewProps = WithNavigate
+type LoginViewProps = WithNavigate & {
+  pushStatus: (message: string, severity: StatusSeverity, timeout?: number) => void
+}
 
 interface LoginViewState {
   email: string
   password: string
-  error: string | null
 }
 
-export class LoginView extends React.Component<LoginViewProps, LoginViewState> {
+class LoginViewImpl extends React.Component<LoginViewProps, LoginViewState> {
   constructor(props: LoginViewProps) {
     super(props)
 
     this.state = {
       email: '',
       password: '',
-      error: null,
     }
   }
 
@@ -44,7 +47,7 @@ export class LoginView extends React.Component<LoginViewProps, LoginViewState> {
       const { email, password } = this.state
       await doLogin(email, password, this.props.navigate)
     } catch (error) {
-      this.setState({ error: (error as Error).message })
+      this.props.pushStatus((error as Error).message, 'error', 5000)
     }
   }
 
@@ -56,12 +59,7 @@ export class LoginView extends React.Component<LoginViewProps, LoginViewState> {
     this.setState({ password: e.target.value })
   }
 
-  private onSnackbarClose = () => {
-    this.setState({ error: null })
-  }
-
   render(): React.ReactNode {
-    const { error } = this.state
     const { navigate } = this.props
 
     return (
@@ -159,14 +157,14 @@ export class LoginView extends React.Component<LoginViewProps, LoginViewState> {
             </Button>
           </Sheet>
         </Box>
-        <Snackbar
-          open={error !== null}
-          onClose={this.onSnackbarClose}
-          autoHideDuration={3000}
-        >
-          {error}
-        </Snackbar>
       </Container>
     )
   }
 }
+
+const mapDispatchToProps = (dispatch: AppDispatch) => ({
+  pushStatus: (message: string, severity: StatusSeverity, timeout?: number) =>
+    dispatch(pushStatus({ message, severity, timeout })),
+})
+
+export const LoginView = connect(null, mapDispatchToProps)(LoginViewImpl)

frontend/src/views/Authorization/Signup.tsx

@@ -13,11 +13,16 @@ import {
   Button,
   Sheet,
   Divider,
-  Snackbar,
 } from '@mui/joy'
 import React, { ChangeEvent } from 'react'
+import { connect } from 'react-redux'
+import { AppDispatch } from '@/store/store'
+import { pushStatus } from '@/store/statusSlice'
+import { StatusSeverity } from '@/models/status'
 
-type SignupViewProps = WithNavigate
+type SignupViewProps = WithNavigate & {
+  pushStatus: (message: string, severity: StatusSeverity, timeout?: number) => void
+}
 
 interface SignupViewState {
   password: string
@@ -26,14 +31,15 @@ interface SignupViewState {
   passwordError: string | null
   emailError: string | null
   displayNameError: string | null
-  error: string | null
   accountCreated: boolean
 }
 
-export class SignupView extends React.Component<
+class SignupViewImpl extends React.Component<
   SignupViewProps,
   SignupViewState
 > {
+  private navigationTimeout?: NodeJS.Timeout
+
   constructor(props: SignupViewProps) {
     super(props)
 
@@ -44,7 +50,6 @@ export class SignupView extends React.Component<
       passwordError: null,
       emailError: null,
       displayNameError: null,
-      error: null,
       accountCreated: false,
     }
   }
@@ -53,6 +58,12 @@ export class SignupView extends React.Component<
     setTitle('Sign Up')
   }
 
+  componentWillUnmount(): void {
+    if (this.navigationTimeout) {
+      clearTimeout(this.navigationTimeout)
+    }
+  }
+
   private handleSignUpValidation = () => {
     // Reset errors before validation
     const newState: SignupViewState = {
@@ -105,10 +116,10 @@ export class SignupView extends React.Component<
       this.setState({
         accountCreated: true,
       })
+      this.props.pushStatus('Please check your email to verify your account.', 'success', 3000)
+      this.navigationTimeout = setTimeout(() => this.props.navigate(NavigationPaths.Login), 3000)
     } catch (error) {
-      this.setState({
-        error: (error as Error).message,
-      })
+      this.props.pushStatus((error as Error).message, 'error', 5000)
     }
   }
 
@@ -135,14 +146,12 @@ export class SignupView extends React.Component<
 
   render(): React.ReactNode {
     const {
-      accountCreated,
       password,
       displayName,
       email,
       passwordError,
       displayNameError,
       emailError,
-      error,
     } = this.state
     const { navigate } = this.props
 
@@ -233,23 +242,14 @@ export class SignupView extends React.Component<
             </Button>
           </Sheet>
         </Box>
-        <Snackbar
-          open={error !== null}
-          onClose={() => this.setState({ error: null })}
-          autoHideDuration={5000}
-        >
-          {error}
-        </Snackbar>
-        <Snackbar
-          color='success'
-          variant='solid'
-          open={accountCreated}
-          onClose={() => navigate(NavigationPaths.Login)}
-          autoHideDuration={3000}
-        >
-          Please check your email to verify your account.
-        </Snackbar>
       </Container>
     )
   }
 }
+
+const mapDispatchToProps = (dispatch: AppDispatch) => ({
+  pushStatus: (message: string, severity: StatusSeverity, timeout?: number) =>
+    dispatch(pushStatus({ message, severity, timeout })),
+})
+
+export const SignupView = connect(null, mapDispatchToProps)(SignupViewImpl)