Revize 2d3a4e2b

Fixed registering a closing the dialog after success
re #9627

frontend/src/features/Auth/Register.tsx

@@ -1 +1 @@
 import { Fragment, useEffect } from 'react'
-import { useSelector } from 'react-redux'
+import {useDispatch, useSelector} from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import { RootState } from '../redux/store'
 import LoginDialog from './LoginDialog'
 import NotAuthorized from "../NotAuthorized/NotAuthorized"
 import RegisterDialog from "./RegisterDialog"
+import {resetIsRegistered} from "./userSlice"
 
 
 const Register = () => {
     const isAdmin = useSelector(
         (state: RootState) => state.user.roles.includes("ROLE_ADMIN")
     )
+    const isRegistered = useSelector(
+        (state: RootState) => state.user.isRegistered
+    )
+
+    const dispatch = useDispatch()
+
+    // Redirect to home if the user is logged in
+    const navigate = useNavigate()
+    useEffect(() => {
+        if (isRegistered) {
+            dispatch(resetIsRegistered())
+            navigate('/administration')
+        }
+    }, [isRegistered, navigate])
 
     return (
         <Fragment>

frontend/src/features/Auth/RegisterDialog.tsx

@@ -15 +15 @@
 import { RootState } from '../redux/store'
 import { resetLoggingIn } from './userSlice'
 import { Box } from '@mui/system'
+import {unwrapResult} from "@reduxjs/toolkit"
 
 export interface RegisterDialogProps {
     maxWidth?: DialogProps['maxWidth']
@@ -45 +46 @@
         },
         validationSchema,
         onSubmit: () => {
-            dispatch(
+            const response = dispatch(
                 register({
-                    username: formik.values.username,
+                    name: formik.values.username,
                     passwords: {
                         password: formik.values.password,
                         confirmationPassword: formik.values.confirmationPassword,
@@ -60 +61 @@
                     email: formik.values.email,
                 })
             )
+
         },
     })
 

frontend/src/features/Auth/userSlice.ts

@@ -1 +1 @@
 import { createSlice } from '@reduxjs/toolkit'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
-import { logIn } from './userThunks'
+import {logIn, register} from './userThunks'
 
 export interface UserState {
     accessToken?: string
@@ -10 +10 @@
     roles: string[]
     isLoggingIn: boolean
     isLoggedIn: boolean
-    lastErr?: string // consumable for errors during thunks
+    lastErr?: string// consumable for errors during thunks
+    isRegistered: boolean
 }
 
 const persistConfig = {
@@ -24 +25 @@
     isLoggedIn: false,
     isLoggingIn: false,
     username: '',
+    isRegistered: false,
 }
 
 export const userSlice = createSlice({
@@ -43 +45 @@
         }),
         setUserState: (state, action) => ({ ...state, ...action.payload }),
         resetLoggingIn: (state) => ({ ...state, isLoggingIn: false }),
+        resetIsRegistered: (state) => ({ ...state, isRegistered: false }),
     },
 
     // Thunks
@@ -58 +61 @@
         builder.addCase(logIn.pending, (state) => {
             return { ...state, isLoggingIn: true }
         })
+        builder.addCase(register.fulfilled, (state, action) => {
+            return {...state, isRegistered: true}
+        })
     },
 })
 
 const userReducer = persistReducer(persistConfig, userSlice.reducer)
 
-export const { logout, refreshTokens, setErr, setUserState, resetLoggingIn } =
+export const { logout, refreshTokens, setErr, setUserState, resetLoggingIn, resetIsRegistered } =
     userSlice.actions
 
 export default userReducer

frontend/src/features/Auth/userThunks.ts

@@ -16 +16 @@
 }
 
 export interface UserRegister {
-    username: string,
+    name: string,
     passwords: {
         password: string,
         confirmationPassword: string,
@@ -58 +58 @@
                 username: sub,
                 roles: authorities,
                 isLoggingIn: false,
-                isLoggedIn: true
+                isLoggedIn: true,
+                isRegistered: false
             }
             
             return userState
@@ -77 +78 @@
             const { data, status } = await axiosInstance.post('/users', userDto)
             if (status !== 200) {
                 // TODO read API err
-                return Promise.reject(loginError)
+                return Promise.reject(registerError)
             }
             return status
         } catch (err: any) {
-            return Promise.reject(loginError)
+            return Promise.reject(registerError)
         }
     }
 )