From 9049be2a5b576c8b8d1b298ce7ed7a514e52ff37 Mon Sep 17 00:00:00 2001
From: ShiranAbir <106183696+ShiranAbir@users.noreply.github.com>
Date: Sun, 11 Dec 2022 17:24:38 +0200
Subject: [PATCH] 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              | 53 ++++++++++++-------
 .../src/components/accounts/EditImporter.tsx  | 22 +++++---
 2 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/ui-react/src/accountMetadata.tsx b/ui-react/src/accountMetadata.tsx
index 1d65ddf6..b7f14c11 100644
--- a/ui-react/src/accountMetadata.tsx
+++ b/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,
 
 };
 
diff --git a/ui-react/src/components/accounts/EditImporter.tsx b/ui-react/src/components/accounts/EditImporter.tsx
index 3e2d8abf..8669ebbf 100644
--- a/ui-react/src/components/accounts/EditImporter.tsx
+++ b/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,6 +17,7 @@ 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,
@@ -24,10 +25,15 @@ export default function EditImporter({
             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>