fix: Show error messages on invalid form inputs

This commit is contained in:
Ayman
2026-07-10 20:14:21 +01:00
parent 856768c45e
commit 180807a0ec
4 changed files with 27 additions and 0 deletions
@@ -15,6 +15,7 @@ import { Input, Popup } from '../../../../lib/custom-ui';
import selectors from '../../../../selectors'; import selectors from '../../../../selectors';
import entryActions from '../../../../entry-actions'; import entryActions from '../../../../entry-actions';
import actions from '../../../../actions';
import { useForm, useNestedRef, useSteps } from '../../../../hooks'; import { useForm, useNestedRef, useSteps } from '../../../../hooks';
import { isPassword, isUsername } from '../../../../utils/validator'; import { isPassword, isUsername } from '../../../../utils/validator';
import { UserRoles } from '../../../../constants/Enums'; import { UserRoles } from '../../../../constants/Enums';
@@ -43,6 +44,11 @@ const createMessage = (error) => {
type: 'error', type: 'error',
content: 'common.usernameAlreadyInUse', content: 'common.usernameAlreadyInUse',
}; };
case 'Invalid email or username':
return {
type: 'error',
content: 'common.invalidEmailOrUsername',
};
default: default:
return { return {
type: 'warning', type: 'warning',
@@ -85,6 +91,7 @@ const AddStep = React.memo(({ onClose }) => {
if (!isEmail(cleanData.email)) { if (!isEmail(cleanData.email)) {
emailFieldRef.current.select(); emailFieldRef.current.select();
dispatch(actions.createUser.failure(new Error('Invalid email or username')));
return; return;
} }
@@ -100,6 +107,7 @@ const AddStep = React.memo(({ onClose }) => {
if (cleanData.username && !isUsername(cleanData.username)) { if (cleanData.username && !isUsername(cleanData.username)) {
usernameFieldRef.current.select(); usernameFieldRef.current.select();
dispatch(actions.createUser.failure(new Error('Invalid email or username')));
return; return;
} }
@@ -15,6 +15,7 @@ import { Input } from '../../../lib/custom-ui';
import selectors from '../../../selectors'; import selectors from '../../../selectors';
import entryActions from '../../../entry-actions'; import entryActions from '../../../entry-actions';
import actions from '../../../actions';
import { useForm, useNestedRef } from '../../../hooks'; import { useForm, useNestedRef } from '../../../hooks';
import { isUsername } from '../../../utils/validator'; import { isUsername } from '../../../utils/validator';
import AccessTokenSteps from '../../../constants/AccessTokenSteps'; import AccessTokenSteps from '../../../constants/AccessTokenSteps';
@@ -144,11 +145,13 @@ const Content = React.memo(() => {
if (!isEmail(cleanData.emailOrUsername) && !isUsername(cleanData.emailOrUsername)) { if (!isEmail(cleanData.emailOrUsername) && !isUsername(cleanData.emailOrUsername)) {
emailOrUsernameFieldRef.current.select(); emailOrUsernameFieldRef.current.select();
dispatch(actions.authenticate.failure(new Error('Invalid email or username')));
return; return;
} }
if (!cleanData.password) { if (!cleanData.password) {
passwordFieldRef.current.focus(); passwordFieldRef.current.focus();
dispatch(actions.authenticate.failure(new Error('Invalid password')));
return; return;
} }
@@ -14,6 +14,7 @@ import { Input, Popup } from '../../../lib/custom-ui';
import selectors from '../../../selectors'; import selectors from '../../../selectors';
import entryActions from '../../../entry-actions'; import entryActions from '../../../entry-actions';
import actions from '../../../actions';
import { useForm, useNestedRef } from '../../../hooks'; import { useForm, useNestedRef } from '../../../hooks';
import styles from './EditUserEmailStep.module.scss'; import styles from './EditUserEmailStep.module.scss';
@@ -34,6 +35,11 @@ const createMessage = (error) => {
type: 'error', type: 'error',
content: 'common.invalidCurrentPassword', content: 'common.invalidCurrentPassword',
}; };
case 'Invalid email or username':
return {
type: 'error',
content: 'common.invalidEmailOrUsername',
};
default: default:
return { return {
type: 'warning', type: 'warning',
@@ -79,6 +85,7 @@ const EditUserEmailStep = React.memo(({ id, onBack, onClose }) => {
if (!isEmail(cleanData.email)) { if (!isEmail(cleanData.email)) {
emailFieldRef.current.select(); emailFieldRef.current.select();
dispatch(actions.updateUserEmail.failure(id, new Error('Invalid email or username')));
return; return;
} }
@@ -90,6 +97,7 @@ const EditUserEmailStep = React.memo(({ id, onBack, onClose }) => {
if (withPasswordConfirmation) { if (withPasswordConfirmation) {
if (!cleanData.currentPassword) { if (!cleanData.currentPassword) {
currentPasswordFieldRef.current.focus(); currentPasswordFieldRef.current.focus();
dispatch(actions.updateUserEmail.failure(id, new Error('Invalid current password')));
return; return;
} }
} else { } else {
@@ -13,6 +13,7 @@ import { Input, Popup } from '../../../lib/custom-ui';
import selectors from '../../../selectors'; import selectors from '../../../selectors';
import entryActions from '../../../entry-actions'; import entryActions from '../../../entry-actions';
import actions from '../../../actions';
import { useForm, useNestedRef } from '../../../hooks'; import { useForm, useNestedRef } from '../../../hooks';
import { isUsername } from '../../../utils/validator'; import { isUsername } from '../../../utils/validator';
@@ -34,6 +35,11 @@ const createMessage = (error) => {
type: 'error', type: 'error',
content: 'common.invalidCurrentPassword', content: 'common.invalidCurrentPassword',
}; };
case 'Invalid email or username':
return {
type: 'error',
content: 'common.invalidEmailOrUsername',
};
default: default:
return { return {
type: 'warning', type: 'warning',
@@ -79,6 +85,7 @@ const EditUserUsernameStep = React.memo(({ id, onBack, onClose }) => {
if (!cleanData.username || !isUsername(cleanData.username)) { if (!cleanData.username || !isUsername(cleanData.username)) {
usernameFieldRef.current.select(); usernameFieldRef.current.select();
dispatch(actions.updateUserUsername.failure(id, new Error('Invalid email or username')));
return; return;
} }
@@ -90,6 +97,7 @@ const EditUserUsernameStep = React.memo(({ id, onBack, onClose }) => {
if (withPasswordConfirmation) { if (withPasswordConfirmation) {
if (!cleanData.currentPassword) { if (!cleanData.currentPassword) {
currentPasswordFieldRef.current.focus(); currentPasswordFieldRef.current.focus();
dispatch(actions.updateUserUsername.failure(id, new Error('Invalid current password')));
return; return;
} }
} else { } else {