Merge pull request #1726 from AymanAlSuleihi/fix/login-and-user-forms-validation-feedback

fix: Show error messages on invalid login and user settings form inputs

client/src/components/common/AdministrationModal/UsersPane/AddStep.jsx

@@ -15,6 +15,7 @@ import { Input, Popup } from '../../../../lib/custom-ui';
 
 import selectors from '../../../../selectors';
 import entryActions from '../../../../entry-actions';
+import actions from '../../../../actions';
 import { useForm, useNestedRef, useSteps } from '../../../../hooks';
 import { isPassword, isUsername } from '../../../../utils/validator';
 import { UserRoles } from '../../../../constants/Enums';
@@ -43,6 +44,11 @@ const createMessage = (error) => {
         type: 'error',
         content: 'common.usernameAlreadyInUse',
       };
+    case 'Invalid email or username':
+      return {
+        type: 'error',
+        content: 'common.invalidEmailOrUsername',
+      };
     default:
       return {
         type: 'warning',
@@ -85,6 +91,7 @@ const AddStep = React.memo(({ onClose }) => {
 
     if (!isEmail(cleanData.email)) {
       emailFieldRef.current.select();
+      dispatch(actions.createUser.failure(new Error('Invalid email or username')));
       return;
     }
 
@@ -100,6 +107,7 @@ const AddStep = React.memo(({ onClose }) => {
 
     if (cleanData.username && !isUsername(cleanData.username)) {
       usernameFieldRef.current.select();
+      dispatch(actions.createUser.failure(new Error('Invalid email or username')));
       return;
     }
 

client/src/components/common/Login/Content.jsx

@@ -14,6 +14,7 @@ import { Input } from '../../../lib/custom-ui';
 
 import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
+import actions from '../../../actions';
 import { useForm, useNestedRef } from '../../../hooks';
 import { isUsername } from '../../../utils/validator';
 import AccessTokenSteps from '../../../constants/AccessTokenSteps';
@@ -133,11 +134,13 @@ const Content = React.memo(() => {
 
     if (!isEmail(cleanData.emailOrUsername) && !isUsername(cleanData.emailOrUsername)) {
       emailOrUsernameFieldRef.current.select();
+      dispatch(actions.authenticate.failure(new Error('Invalid email or username')));
       return;
     }
 
     if (!cleanData.password) {
       passwordFieldRef.current.focus();
+      dispatch(actions.authenticate.failure(new Error('Invalid password')));
       return;
     }
 

client/src/components/users/EditUserEmailStep/EditUserEmailStep.jsx

@@ -14,6 +14,7 @@ import { Input, Popup } from '../../../lib/custom-ui';
 
 import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
+import actions from '../../../actions';
 import { useForm, useNestedRef } from '../../../hooks';
 
 import styles from './EditUserEmailStep.module.scss';
@@ -34,6 +35,11 @@ const createMessage = (error) => {
         type: 'error',
         content: 'common.invalidCurrentPassword',
       };
+    case 'Invalid email or username':
+      return {
+        type: 'error',
+        content: 'common.invalidEmailOrUsername',
+      };
     default:
       return {
         type: 'warning',
@@ -78,6 +84,7 @@ const EditUserEmailStep = React.memo(({ id, onBack, onClose }) => {
 
     if (!isEmail(cleanData.email)) {
       emailFieldRef.current.select();
+      dispatch(actions.updateUserEmail.failure(id, new Error('Invalid email or username')));
       return;
     }
 
@@ -89,6 +96,7 @@ const EditUserEmailStep = React.memo(({ id, onBack, onClose }) => {
     if (withPasswordConfirmation) {
       if (!cleanData.currentPassword) {
         currentPasswordFieldRef.current.focus();
+        dispatch(actions.updateUserEmail.failure(id, new Error('Invalid current password')));
         return;
       }
     } else {

client/src/components/users/EditUserPasswordStep/EditUserPasswordStep.jsx

@@ -14,6 +14,7 @@ import { Input, Popup } from '../../../lib/custom-ui';
 
 import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
+import actions from '../../../actions';
 import { useForm, useNestedRef } from '../../../hooks';
 import { isPassword } from '../../../utils/validator';
 
@@ -30,6 +31,11 @@ const createMessage = (error) => {
         type: 'error',
         content: 'common.invalidCurrentPassword',
       };
+    case 'Invalid password':
+      return {
+        type: 'error',
+        content: 'common.invalidPassword',
+      };
     default:
       return {
         type: 'warning',
@@ -68,11 +74,13 @@ const EditUserPasswordStep = React.memo(({ id, onBack, onClose }) => {
   const handleSubmit = useCallback(() => {
     if (!data.password || !isPassword(data.password)) {
       passwordFieldRef.current.select();
+      dispatch(actions.updateUserPassword.failure(id, new Error('Invalid password')));
       return;
     }
 
     if (withPasswordConfirmation && !data.currentPassword) {
       currentPasswordFieldRef.current.focus();
+      dispatch(actions.updateUserPassword.failure(id, new Error('Invalid current password')));
       return;
     }
 

client/src/components/users/EditUserUsernameStep/EditUserUsernameStep.jsx

@@ -13,6 +13,7 @@ import { Input, Popup } from '../../../lib/custom-ui';
 
 import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
+import actions from '../../../actions';
 import { useForm, useNestedRef } from '../../../hooks';
 import { isUsername } from '../../../utils/validator';
 
@@ -34,6 +35,11 @@ const createMessage = (error) => {
         type: 'error',
         content: 'common.invalidCurrentPassword',
       };
+    case 'Invalid email or username':
+      return {
+        type: 'error',
+        content: 'common.invalidEmailOrUsername',
+      };
     default:
       return {
         type: 'warning',
@@ -78,6 +84,7 @@ const EditUserUsernameStep = React.memo(({ id, onBack, onClose }) => {
 
     if (!cleanData.username || !isUsername(cleanData.username)) {
       usernameFieldRef.current.select();
+      dispatch(actions.updateUserUsername.failure(id, new Error('Invalid email or username')));
       return;
     }
 
@@ -89,6 +96,7 @@ const EditUserUsernameStep = React.memo(({ id, onBack, onClose }) => {
     if (withPasswordConfirmation) {
       if (!cleanData.currentPassword) {
         currentPasswordFieldRef.current.focus();
+        dispatch(actions.updateUserUsername.failure(id, new Error('Invalid current password')));
         return;
       }
     } else {