bugfix/CLAN6-120-clear-login-input-fields

cogboard-webapp/src/actions/actionCreators.js

@@ -18,6 +18,7 @@ import {
   SAVE_DATA_SUCCESS,
   LOGIN_SUCCESS,
   LOGIN_FAILURE,
+  CLEAR_LOGIN_ERROR_MESSAGE,
   LOGOUT,
   INIT_BOARD_PROPS
 } from './types';
@@ -36,6 +37,10 @@ export const loginFailure = (data) => ({
   payload: data
 });
 
+export const clearLoginErrorMessage = () => ({
+  type: CLEAR_LOGIN_ERROR_MESSAGE,
+});
+
 export const logout = () => ({
   type: LOGOUT
 });

cogboard-webapp/src/actions/types.js

@@ -17,4 +17,5 @@ export const SAVE_DATA_START = 'SAVE_DATA_START';
 export const SAVE_DATA_SUCCESS = 'SAVE_DATA_SUCCESS';
 export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
 export const LOGIN_FAILURE = 'LOGIN_FAILURE';
+export const CLEAR_LOGIN_ERROR_MESSAGE = 'CLEAR_LOGIN_ERROR_MESSAGE';
 export const LOGOUT = 'LOGOUT';

cogboard-webapp/src/components/UserLogin.js

@@ -1,8 +1,9 @@
 import React, {useEffect} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { useFormData, useToggle } from '../hooks';
+import { useToggle } from '../hooks';
 import { login, logout } from '../actions/thunks';
+import { clearLoginErrorMessage } from "../actions/actionCreators";
 import { getIsAuthenticated } from '../selectors';
 
 import { Button, IconButton, TextField, Typography } from '@material-ui/core';
@@ -13,7 +14,6 @@ import { StyledFieldset } from './styled';
 
 const UserLogin = () => {
   const dispatch = useDispatch();
-  const {values, handleChange} = useFormData({username: '', password: ''});
   const errorMsg = useSelector(({app}) => app.loginErrorMessage);
   const isAuthenticated = useSelector(getIsAuthenticated);
   const [dialogOpened, openDialog, handleDialogClose] = useToggle();
@@ -27,13 +27,14 @@ const UserLogin = () => {
     }
   }, [isAuthenticated, handleDialogClose, openLoginSnackbar]);
 
-  const handleLoginButtonClick = (credentials) => () => {
+  const handleLoginButtonClick = () => {
+    const credentials = getCredentials();
     dispatch(login(credentials))
   };
 
-  const handleLoginOnEnterPress = (event, credentials) => {
+  const handleLoginOnEnterPress = event => {
     if (event.key === 'Enter') {
-      dispatch(login(credentials))
+      handleLoginButtonClick();
     }
   };
 
@@ -46,6 +47,20 @@ const UserLogin = () => {
     openLogoutSnackbar();
   };
 
+  const getCredentials = () => {
+    const usernameField = document.getElementById("username");
+    const passwordField = document.getElementById("password");
+    return {
+      username: usernameField ? usernameField.value : "",
+      password: passwordField ? passwordField.value : "",
+    };
+  };
+
+  function closeDialog() {
+    handleDialogClose();
+    dispatch(clearLoginErrorMessage());
+  }
+
   return (
     <>
       {!isAuthenticated &&
@@ -71,7 +86,7 @@ const UserLogin = () => {
         </IconButton>
       }
       <AppDialog
-        handleDialogClose={handleDialogClose}
+        handleDialogClose={closeDialog}
         open={dialogOpened}
         title='User Login'>
         <StyledFieldset component="fieldset">
@@ -80,33 +95,29 @@ const UserLogin = () => {
             {errorMsg}
           </Typography>}
           <TextField
-            onChange={handleChange('username')}
             id="username"
             InputLabelProps={{
               shrink: true
             }}
             label="Username"
             margin="normal"
-            value={values.username}
-            onKeyPress={(ev) => handleLoginOnEnterPress(ev, values)}
+            onKeyPress={handleLoginOnEnterPress}
             inputProps={{'data-cy': 'user-login-username-input'}}
           />
           <TextField
-            onChange={handleChange('password')}
             id="password"
             InputLabelProps={{
               shrink: true
             }}
             type="password"
             label="Password"
             margin="normal"
-            value={values.password}
-            onKeyPress={(ev) => handleLoginOnEnterPress(ev, values)}
+            onKeyPress={handleLoginOnEnterPress}
             inputProps={{'data-cy': 'user-login-password-input'}}
           />
           <Button
             color="primary"
-            onClick={handleLoginButtonClick(values)}
+            onClick={handleLoginButtonClick}
             variant="contained"
             data-cy='user-login-submit-button'>
             Login
@@ -117,7 +128,7 @@ const UserLogin = () => {
         open={loginSnackbarOpened}
         handleClose={handleLoginSnackbarClose}
         hideAfter={3000}
-        message={`Logged in as ${values.username}`}
+        message={`Logged in as ${getCredentials().username}`}
         vertical="top"
         horizontal="center"
         variant="success"
@@ -126,7 +137,7 @@ const UserLogin = () => {
         open={logoutSnackbarOpened}
         handleClose={handleLogoutSnackbarClose}
         hideAfter={3000}
-        message={`${values.username} was logged out successfully`}
+        message={`Logged out successfully`}
         vertical="top"
         horizontal="center"
         variant="info"

cogboard-webapp/src/reducers/app/loginErrorMessage.js

@@ -1,10 +1,11 @@
-import { LOGIN_FAILURE, LOGIN_SUCCESS, LOGOUT } from '../../actions/types';
+import { LOGIN_FAILURE, LOGIN_SUCCESS, CLEAR_LOGIN_ERROR_MESSAGE, LOGOUT } from '../../actions/types';
 
 const loginErrorMessage = (state = '', { type, payload }) => {
   switch (type) {
     case LOGIN_FAILURE:
       return payload;
     case LOGIN_SUCCESS:
+    case CLEAR_LOGIN_ERROR_MESSAGE:
     case LOGOUT:
       return '';
     default: