Revize 6129910f

Show dialog in login page

re #9628

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>