Revize 6129910f

Show dialog in login page

re #9628

frontend/src/features/Auth/Login.tsx

@@ -1 @@
-import { Button, TextField, Typography } from '@mui/material'
-import { useFormik } from 'formik'
 import { Fragment, useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
-import * as yup from 'yup'
-import { SchemaOf } from 'yup'
 import { RootState } from '../redux/store'
-import { logIn } from './userThunks'
+import LoginDialog from './LoginDialog'
 
-interface LoginFields {
-    username: string
-    password: string
-}
 
 const Login = () => {
-    const validationSchema: SchemaOf<LoginFields> = yup.object().shape({
-        username: yup.string().required('Username is required'),
-        password: yup.string().required('Password is required'),
-    })
-
-    const dispatch = useDispatch()
-    const formik = useFormik({
-        initialValues: {
-            username: '',
-            password: '',
-        },
-        validationSchema,
-        onSubmit: () => {
-            dispatch(
-                logIn({
-                    username: formik.values.username,
-                    password: formik.values.password,
-                })
-            )
-        },
-    })
-
-    // Redirect to home if the user is logged in
     const userLoggedIn = useSelector(
         (state: RootState) => state.user.isLoggedIn
     )
+
+    // Redirect to home if the user is logged in
     const navigate = useNavigate()
     useEffect(() => {
         if (userLoggedIn) {
@@ -49 +20 @@
 
     return (
         <Fragment>
-            <Typography variant="h3">Login</Typography>
-
-            <form onSubmit={formik.handleSubmit}>
-                <TextField
-                    label="Username"
-                    name="username"
-                    fullWidth
-                    sx={{ mb: 2 }}
-                    value={formik.values.username}
-                    onChange={formik.handleChange}
-                    error={
-                        Boolean(formik.errors.username) &&
-                        formik.touched.username
-                    }
-                    helperText={
-                        formik.errors.username &&
-                        formik.touched.username &&
-                        formik.errors.username
-                    }
-                />
-                <TextField
-                    type="password"
-                    label="Password"
-                    name="password"
-                    fullWidth
-                    value={formik.values.password}
-                    onChange={formik.handleChange}
-                    error={
-                        Boolean(formik.errors.password) &&
-                        formik.touched.password
-                    }
-                    helperText={
-                        formik.errors.password &&
-                        formik.touched.password &&
-                        formik.errors.password
-                    }
-                    sx={{ mb: 2 }}
-                />
-                <Button
-                    size="large"
-                    variant="contained"
-                    color="primary"
-                    type="submit"
-                    fullWidth
-                >
-                    Login
-                </Button>
-            </form>
+            <LoginDialog />
         </Fragment>
     )
 }

frontend/src/features/Auth/LoginDialog.tsx

@@ -1 @@
-import { Fragment, FunctionComponent, useState } from 'react'
+import { Fragment, FunctionComponent, useEffect, useState } from 'react'
 import Dialog, { DialogProps } from '@mui/material/Dialog'
 import {
     Button,
     DialogContent,
     Link,
-    Stack,
     TextField,
     Typography,
 } from '@mui/material'
 import { useFormik } from 'formik'
 import * as yup from 'yup'
-import { useDispatch } from 'react-redux'
-import { showNotification } from '../Notification/notificationSlice'
-import axiosInstance from '../../api/api'
-import { Link as RouterLink } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+import { Link as RouterLink, useNavigate } from 'react-router-dom'
+import { logIn } from './userThunks'
+import { RootState } from '../redux/store'
+import { resetLoggingIn } from './userSlice'
 
 export interface CreateIndexDialogProps {
     maxWidth?: DialogProps['maxWidth']
@@ -22 +22 @@
 const RegisterDialog: FunctionComponent<CreateIndexDialogProps> = ({
     maxWidth,
 }) => {
-    const [open, setOpen] = useState(false)
-    const [submitButtonEnabled, setSubmitButtonEnabled] = useState(true)
+    const [open, setOpen] = useState(true)
 
     const dispatch = useDispatch()
-
-    const hideDialog = () => {
-        setOpen(false)
-    }
-
-    const showDialog = () => {
-        setOpen(true)
-    }
-
+    const navigate = useNavigate()
+    dispatch(resetLoggingIn())
     const validationSchema = yup.object().shape({
-        email: yup.string().email().required('Email is required'),
+        username: yup.string().required('Username is required'),
         password: yup.string().required('Password is required'),
     })
 
+    const isLoggingIn = useSelector(
+        (state: RootState) => state.user.isLoggingIn
+    )
+
     const formik = useFormik({
         initialValues: {
-            name: '',
+            username: '',
             password: '',
         },
         validationSchema,
-        onSubmit: async (values) => {
-            setSubmitButtonEnabled(false)
-            let userRegistered = false
-            try {
-                const { status } = await axiosInstance.post(
-                    `/users/${values.name}`,
-                    values
-                )
-
-                switch (status) {
-                    case 200:
-                        dispatch({
-                            message: 'User was created successfully',
-                            severity: 'success',
-                        })
-                        userRegistered = true
-                        break
-                    case 204:
-                        dispatch(
-                            showNotification({
-                                message: 'User already exists',
-                                severity: 'error',
-                            })
-                        )
-                        break
-                    default:
-                        dispatch({
-                            message:
-                                'Unknown error ocurred, the user was not registered. Please try again later',
-                            severity: 'error',
-                        })
-                }
-            } catch (err: any) {
-                dispatch(
-                    showNotification({
-                        message: 'The user could not be registered 😥',
-                        severity: 'error',
-                    })
-                )
-            }
-
-            if (userRegistered) {
-                onClose()
-            }
-
-            // Always fetch new indices
-            // TODO actually fetch the users
-            // dispatch(fetchUsers())
-            setSubmitButtonEnabled(true)
+        onSubmit: () => {
+            dispatch(
+                logIn({
+                    username: formik.values.username,
+                    password: formik.values.password,
+                })
+            )
         },
     })
 
-    // Method called on closing the dialog
-    const onClose = () => {
-        hideDialog()
+    const onCancel = () => {
         formik.resetForm()
+        navigate('/')
     }
 
     return (
         <Fragment>
-            <Stack
-                direction="row"
-                justifyContent="flex-end"
-                alignItems="center"
-            >
-                <Button variant="outlined" color="primary" onClick={showDialog}>
-                    Create new Index
-                </Button>
-            </Stack>
-
             <Dialog
                 open={open}
                 fullWidth={true}
-                onClose={onClose}
-                maxWidth={maxWidth || 'lg'}
+                onClose={onCancel}
+                maxWidth="md"
             >
                 <Typography sx={{ ml: 2, mt: 2 }} variant="h5" fontWeight="600">
                     Login
@@ -130 +73 @@
                         <TextField
                             fullWidth
                             label="Name"
-                            name="name"
+                            name="username"
                             sx={{ mb: 2 }}
-                            value={formik.values.name}
+                            value={formik.values.username}
                             onChange={formik.handleChange}
                             error={
-                                Boolean(formik.errors.name) &&
-                                formik.touched.name
+                                Boolean(formik.errors.username) &&
+                                formik.touched.username
                             }
                             helperText={
-                                formik.errors.name &&
-                                formik.touched.name &&
-                                formik.errors.name
+                                formik.errors.username &&
+                                formik.touched.username &&
+                                formik.errors.username
                             }
                         />
                         <TextField
@@ -166 +109 @@
                             <Button
                                 type="submit"
                                 variant="contained"
-                                disabled={!submitButtonEnabled}
                                 fullWidth
+                                disabled={isLoggingIn}
                             >
                                 Log in
                             </Button>
                         </Fragment>
-                    </form> 
+                    </form>
 
-                    <Link component={RouterLink} to="/resetPassword">Forgot password?</Link>
+                    <Link component={RouterLink} to="/resetPassword">
+                        Forgot password?
+                    </Link>
                 </DialogContent>
             </Dialog>
         </Fragment>

frontend/src/features/Auth/RegisterDialog.tsx

@@ +1 @@
+import { useFormik } from "formik"
+
+const register = () => {
+
+    return <></>
+}

frontend/src/features/Auth/userSlice.ts

@@ -8 +8 @@
     refreshToken?: string
     username: string
     roles: string[]
+    isLoggingIn: boolean
     isLoggedIn: boolean
     lastErr?: string // consumable for errors during thunks
 }
@@ -21 +22 @@
 const initialState: UserState = {
     roles: [],
     isLoggedIn: false,
+    isLoggingIn: false,
     username: '',
 }
 
@@ -41 +43 @@
             ...state,
             lastErr: action.payload,
         }),
-        setUserState: (state, action) => {
-            return ({ ...state, ...action.payload })
-        },
+        setUserState: (state, action) => ({ ...state, ...action.payload }),
+        resetLoggingIn: (state) => ({ ...state, isLoggingIn: false }),
     },
 
     // Thunks
     extraReducers: (builder) => {
         builder.addCase(logIn.fulfilled, (state, action) => {
-            return ({ ...state, ...action.payload })
+            return { ...state, ...action.payload }
         })
         builder.addCase(logIn.rejected, (state, action) => {
             if (action.payload && typeof action.error.message === 'string') {
-                return ({ ...state, lastErr: action.error.message })
+                return { ...state, lastErr: action.error.message }
             }
         })
+        builder.addCase(logIn.pending, (state, action) => {
+            return { ...state, isLoggingIn: true }
+        })
     },
 })
 
-
 const userReducer = persistReducer(persistConfig, userSlice.reducer)
 
-export const { logout, refreshTokens, setErr, setUserState } = userSlice.actions
+export const { logout, refreshTokens, setErr, setUserState, resetLoggingIn } = userSlice.actions
 
 export default userReducer

frontend/src/features/Auth/userThunks.ts

@@ -40 +40 @@
                 refreshToken,
                 username: sub,
                 roles: authorities,
+                isLoggingIn: false,
                 isLoggedIn: true
             }
             

frontend/src/features/Navigation/navigationMenuItems.ts

@@ -15 +15 @@
     // All privileges that can access this menu item
     accessibleTo: Set<string>
     icon: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>
-    position: number
+    position: number,
+    isDialog?: boolean
 }
 
 const visitorRole = 'VISITOR'
@@ -69 +70 @@
         accessibleTo: new Set([visitorRoleOnly]),
         icon: LoginIcon,
         position: 5,
+        isDialog: true
     },
     {
         name: 'Statistics',

frontend/src/features/Theme/ThemeChanger.tsx

@@ -1 @@
-export default {}