Fix: Validate New Account Details (fixes #405) (#406)

* Fix new account form submission

* Validate new account details are not empty

* Add empty details error message

* Change empty details error message to be more specific

* Remove unnecessary variable

* Created minimum length list for each details field

* Validate account details according to the new minimum length list

* Change details error message to include the minimum length required

* Fix for warning changing uncontrolled input to be controlled

* Revert attempted fix. Fixed by initializing fields list

* Revert warning fix as per PR Comment.

* Revert remove unnecessary variable as per PR Comment.

* Added login fields variables as per PR Comment.

* Change form validation to manual validation as per PR Comment.

* Add a callback to `setLoginFields` and simplify validity check.

* Fix useState callback

* Rename variables inside setter to conform with `no-shadow` lint rule

ui-react/src/accountMetadata.tsx

@@ -36,32 +36,47 @@ const accountMetadata: Record<CompanyTypes | OutputVendorName, AccountMetadata>
   };
 });
 
+const CARD_SIX_DIGITS_FIELD = 'card6Digits';
+const USERCODE_FIELD = 'userCode';
+const USERNAME_FIELD = 'username';
 const PASSWORD_FIELD = 'password';
+const NUM_FIELD = 'num';
+const ID_FIELD = 'id';
 
 export const IMPORTERS_LOGIN_FIELDS = {
-  [CompanyTypes.hapoalim]: ['userCode', PASSWORD_FIELD],
-  [CompanyTypes.hapoalimBeOnline]: ['userCode', PASSWORD_FIELD],
-  [CompanyTypes.leumi]: ['username', PASSWORD_FIELD],
-  [CompanyTypes.mizrahi]: ['username', PASSWORD_FIELD],
-  [CompanyTypes.discount]: ['id', PASSWORD_FIELD, 'num'],
-  [CompanyTypes.otsarHahayal]: ['username', PASSWORD_FIELD],
-  [CompanyTypes.leumiCard]: ['username', PASSWORD_FIELD],
-  [CompanyTypes.max]: ['username', PASSWORD_FIELD],
-  [CompanyTypes.visaCal]: ['username', PASSWORD_FIELD],
-  [CompanyTypes.isracard]: ['id', 'card6Digits', PASSWORD_FIELD],
-  [CompanyTypes.amex]: ['id', 'card6Digits', PASSWORD_FIELD],
-  [CompanyTypes.union]: ['username', PASSWORD_FIELD],
-  [CompanyTypes.beinleumi]: ['username', PASSWORD_FIELD],
-  [CompanyTypes.massad]: ['username', PASSWORD_FIELD]
+  [CompanyTypes.hapoalim]: [USERCODE_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.hapoalimBeOnline]: [USERCODE_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.leumi]: [USERNAME_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.mizrahi]: [USERNAME_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.discount]: [ID_FIELD, PASSWORD_FIELD, NUM_FIELD],
+  [CompanyTypes.otsarHahayal]: [USERNAME_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.leumiCard]: [USERNAME_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.max]: [USERNAME_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.visaCal]: [USERNAME_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.isracard]: [ID_FIELD, CARD_SIX_DIGITS_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.amex]: [ID_FIELD, CARD_SIX_DIGITS_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.union]: [USERNAME_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.beinleumi]: [USERNAME_FIELD, PASSWORD_FIELD],
+  [CompanyTypes.massad]: [USERNAME_FIELD, PASSWORD_FIELD]
 };
 
 export const LOGIN_FIELD_DISPLAY_NAMES = {
-  'userCode': 'קוד משתמש',
+  [USERCODE_FIELD]: 'קוד משתמש',
   [PASSWORD_FIELD]: 'סיסמא',
-  username: 'שם משתמש',
-  id: 'מספר זהות',
-  num: 'קוד מזהה',
-  card6Digits: '6 ספרות של הכרטיס',
+  [USERNAME_FIELD]: 'שם משתמש',
+  [ID_FIELD]: 'מספר זהות',
+  [NUM_FIELD]: 'קוד מזהה',
+  [CARD_SIX_DIGITS_FIELD]: '6 ספרות של הכרטיס',
+
+};
+
+export const LOGIN_FIELD_MIN_LENGTH = {
+  [USERCODE_FIELD]: 3,
+  [PASSWORD_FIELD]: 4,
+  [USERNAME_FIELD]: 3,
+  [ID_FIELD]: 9,
+  [NUM_FIELD]: 4,
+  [CARD_SIX_DIGITS_FIELD]: 6,
 
 };
 

ui-react/src/components/accounts/EditImporter.tsx

@@ -1,6 +1,6 @@
 import styles from './EditImporter.module.css';
 import { Importer } from '../../types';
-import { IMPORTERS_LOGIN_FIELDS, LOGIN_FIELD_DISPLAY_NAMES } from "../../accountMetadata";
+import { IMPORTERS_LOGIN_FIELDS, LOGIN_FIELD_DISPLAY_NAMES, LOGIN_FIELD_MIN_LENGTH } from "../../accountMetadata";
 import { useState } from "react";
 import { Button, Card, Form, Image } from "react-bootstrap";
 
@@ -17,17 +17,23 @@ export default function EditImporter({
 }: EditImporterProps) {
     const [loginFields, setLoginFields] = useState<Record<string, string>>(importer.loginFields || {});
     const [active, setActive] = useState<boolean>(importer.active);
+    const [validated, setValidated] = useState(false);
     const onSaveClicked = async () => {
         await handleSave({
             ...importer,
             active,
             loginFields
         });
     };
+    const checkFieldValidity = (loginFieldName: string, value) : boolean => {
+        return value.length >= LOGIN_FIELD_MIN_LENGTH[loginFieldName];
+    };
     const onLoginFieldChanged = (loginFieldName: string, value) => {
-        setLoginFields({
-            ...loginFields,
-            [loginFieldName]: value
+        setLoginFields((prevLoginFields) => {
+            const nextLoginFields = {...prevLoginFields, [loginFieldName]: value};
+
+            setValidated(Object.entries(nextLoginFields).every(([key, value]) => checkFieldValidity(key, value)))
+            return nextLoginFields;
         });
     };
 
@@ -51,11 +57,11 @@ export default function EditImporter({
                         label="פעיל"
                         checked={active}
                     />
+                    <div className={styles.actionButtonsWrapper}>
+                        <Button variant="danger" onClick={() => handleDelete(importer.id)}>מחק</Button>
+                        <Button variant="primary" onClick={onSaveClicked} disabled={!validated}>שמור</Button>
+                    </div>
                 </Form>
-                <div className={styles.actionButtonsWrapper}>
-                    <Button variant="danger" onClick={() => handleDelete(importer.id)}>מחק</Button>
-                    <Button variant="primary" onClick={onSaveClicked}>שמור</Button>
-                </div>
             </Card.Body>
         </Card>
     </div>