fix: show error message on login and registration form, prevent saving password on localstorage

1 files changed, 81 insertions, 159 deletions

diff --git a/packages/demobank-ui/src/pages/home/index.tsx b/packages/demobank-ui/src/pages/home/index.tsx
index 884113e85..9927f965c 100644
--- a/packages/demobank-ui/src/pages/home/index.tsx
+++ b/packages/demobank-ui/src/pages/home/index.tsx
@@ -214,32 +214,6 @@ function useWireTransferRequestType(
 }
 
 /**
- * Stores in the state a object containing a 'username'
- * and 'password' field, in order to avoid losing the
- * handle of the data entered by the user in <input> fields.
- */
-type CredentialsRequestTypeOpt = CredentialsRequestType | undefined;
-function useCredentialsRequestType(
-  state?: CredentialsRequestType,
-): [CredentialsRequestTypeOpt, StateUpdater<CredentialsRequestTypeOpt>] {
-  const ret = hooks.useLocalStorage(
-    "credentials-request-state",
-    JSON.stringify(state),
-  );
-  const retObj: CredentialsRequestTypeOpt = ret[0]
-    ? JSON.parse(ret[0])
-    : ret[0];
-  const retSetter: StateUpdater<CredentialsRequestTypeOpt> = function (val) {
-    const newVal =
-      val instanceof Function
-        ? JSON.stringify(val(retObj))
-        : JSON.stringify(val);
-    ret[1](newVal);
-  };
-  return [retObj, retSetter];
-}
-
-/**
  * Request preparators.
  *
  * These functions aim at sanitizing the input received
@@ -597,7 +571,7 @@ async function createWithdrawalCall(
 }
 
 async function loginCall(
-  req: CredentialsRequestType,
+  req: { username: string; password: string },
   /**
    * FIXME: figure out if the two following
    * functions can be retrieved from the state.
@@ -629,7 +603,7 @@ async function loginCall(
  * the page's (to indicate a successful login or a problem).
  */
 async function registrationCall(
-  req: CredentialsRequestType,
+  req: { username: string; password: string },
   /**
    * FIXME: figure out if the two following
    * functions can be retrieved somewhat from
@@ -882,11 +856,7 @@ function ShowInputErrorLabel({
   isDirty: boolean;
 }): VNode {
   if (message && isDirty)
-    return (
-      <div class="informational informational-fail" style={{ marginTop: 8 }}>
-        {message}
-      </div>
-    );
+    return <div style={{ marginTop: 8, color: "red" }}>{message}</div>;
   return <Fragment />;
 }
 
@@ -1488,24 +1458,6 @@ function PaymentOptions({ currency }: { currency?: string }): VNode {
   );
 }
 
-function RegistrationButton(Props: any): VNode {
-  const { backendStateSetter, pageStateSetter } = Props;
-  const { i18n } = useTranslationContext();
-  if (bankUiSettings.allowRegistrations)
-    return (
-      <button
-        class="pure-button pure-button-secondary btn-cancel"
-        onClick={() => {
-          route("/register");
-        }}
-      >
-        {i18n.str`Register`}
-      </button>
-    );
-
-  return <span />;
-}
-
 function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
   return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
     ? obj
@@ -1514,21 +1466,21 @@ function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
 /**
  * Collect and submit login data.
  */
-function LoginForm(Props: any): VNode {
-  const { backendStateSetter, pageStateSetter } = Props;
-  const [submitData, submitDataSetter] = useCredentialsRequestType();
+function LoginForm(): VNode {
+  const [backendState, backendStateSetter] = useBackendState();
+  const { pageState, pageStateSetter } = usePageContext();
+  const [username, setUsername] = useState<string | undefined>();
+  const [password, setPassword] = useState<string | undefined>();
   const { i18n } = useTranslationContext();
   const ref = useRef<HTMLInputElement>(null);
   useEffect(() => {
     ref.current?.focus();
   }, []);
 
-  const errors = !submitData
-    ? undefined
-    : undefinedIfEmpty({
-        username: !submitData.username ? i18n.str`Missing username` : undefined,
-        password: !submitData.password ? i18n.str`Missing password` : undefined,
-      });
+  const errors = undefinedIfEmpty({
+    username: !username ? i18n.str`Missing username` : undefined,
+    password: !password ? i18n.str`Missing password` : undefined,
+  });
 
   return (
     <div class="login-div">
@@ -1544,16 +1496,17 @@ function LoginForm(Props: any): VNode {
             type="text"
             name="username"
             id="username"
-            value={submitData && submitData.username}
+            value={username ?? ""}
             placeholder="Username"
             required
             onInput={(e): void => {
-              submitDataSetter((submitData: any) => ({
-                ...submitData,
-                username: e.currentTarget.value,
-              }));
+              setUsername(e.currentTarget.value);
             }}
           />
+          <ShowInputErrorLabel
+            message={errors?.username}
+            isDirty={username !== undefined}
+          />
           <p class="passFieldLabel loginFieldLabel formFieldLabel">
             <label for="password">{i18n.str`Password:`}</label>
           </p>
@@ -1561,50 +1514,48 @@ function LoginForm(Props: any): VNode {
             type="password"
             name="password"
             id="password"
-            value={submitData && submitData.password}
+            value={password ?? ""}
             placeholder="Password"
             required
             onInput={(e): void => {
-              submitDataSetter((submitData: any) => ({
-                ...submitData,
-                password: e.currentTarget.value,
-              }));
+              setPassword(e.currentTarget.value);
             }}
           />
+          <ShowInputErrorLabel
+            message={errors?.password}
+            isDirty={password !== undefined}
+          />
           <br />
           <button
             type="submit"
             class="pure-button pure-button-primary"
             disabled={!!errors}
             onClick={() => {
-              if (typeof submitData === "undefined") {
-                console.log("login data is undefined", submitData);
-                return;
-              }
-              if (!submitData.password || !submitData.username) {
-                console.log(
-                  "username or password is the empty string",
-                  submitData,
-                );
-                return;
-              }
+              if (!username || !password) return;
               loginCall(
-                // Deep copy, to avoid the cleanup
-                // below make data disappear.
-                { ...submitData },
+                { username, password },
                 backendStateSetter,
                 pageStateSetter,
               );
-              submitDataSetter({
-                password: "",
-                repeatPassword: "",
-                username: "",
-              });
+              setUsername(undefined);
+              setPassword(undefined);
             }}
           >
             {i18n.str`Login`}
           </button>
-          {RegistrationButton(Props)}
+
+          {bankUiSettings.allowRegistrations ? (
+            <button
+              class="pure-button pure-button-secondary btn-cancel"
+              onClick={() => {
+                route("/register");
+              }}
+            >
+              {i18n.str`Register`}
+            </button>
+          ) : (
+            <div />
+          )}
         </div>
       </form>
     </div>
@@ -1615,24 +1566,23 @@ function LoginForm(Props: any): VNode {
  * Collect and submit registration data.
  */
 function RegistrationForm(): VNode {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
   const [backendState, backendStateSetter] = useBackendState();
   const { pageState, pageStateSetter } = usePageContext();
-  const [submitData, submitDataSetter] = useCredentialsRequestType();
+  const [username, setUsername] = useState<string | undefined>();
+  const [password, setPassword] = useState<string | undefined>();
+  const [repeatPassword, setRepeatPassword] = useState<string | undefined>();
+
   const { i18n } = useTranslationContext();
 
-  const errors = !submitData
-    ? undefined
-    : undefinedIfEmpty({
-        username: !submitData.username ? i18n.str`Missing username` : undefined,
-        password: !submitData.password ? i18n.str`Missing password` : undefined,
-        repeatPassword: !submitData.repeatPassword
-          ? i18n.str`Missing password`
-          : submitData.repeatPassword !== submitData.password
-          ? i18n.str`Password don't match`
-          : undefined,
-      });
+  const errors = undefinedIfEmpty({
+    username: !username ? i18n.str`Missing username` : undefined,
+    password: !password ? i18n.str`Missing password` : undefined,
+    repeatPassword: !repeatPassword
+      ? i18n.str`Missing password`
+      : repeatPassword !== password
+      ? i18n.str`Password don't match`
+      : undefined,
+  });
 
   return (
     <Fragment>
@@ -1650,16 +1600,15 @@ function RegistrationForm(): VNode {
                 name="register-un"
                 type="text"
                 placeholder="Username"
-                value={submitData && submitData.username}
-                required
+                value={username ?? ""}
                 onInput={(e): void => {
-                  submitDataSetter((submitData: any) => ({
-                    ...submitData,
-                    username: e.currentTarget.value,
-                  }));
+                  setUsername(e.currentTarget.value);
                 }}
               />
-              <br />
+              <ShowInputErrorLabel
+                message={errors?.username}
+                isDirty={username !== undefined}
+              />
               <p class="unameFieldLabel registerFieldLabel formFieldLabel">
                 <label for="register-pw">{i18n.str`Password:`}</label>
               </p>
@@ -1668,15 +1617,16 @@ function RegistrationForm(): VNode {
                 name="register-pw"
                 id="register-pw"
                 placeholder="Password"
-                value={submitData && submitData.password}
+                value={password ?? ""}
                 required
                 onInput={(e): void => {
-                  submitDataSetter((submitData: any) => ({
-                    ...submitData,
-                    password: e.currentTarget.value,
-                  }));
+                  setPassword(e.currentTarget.value);
                 }}
               />
+              <ShowInputErrorLabel
+                message={errors?.password}
+                isDirty={username !== undefined}
+              />
               <p class="unameFieldLabel registerFieldLabel formFieldLabel">
                 <label for="register-repeat">{i18n.str`Repeat Password:`}</label>
               </p>
@@ -1686,57 +1636,31 @@ function RegistrationForm(): VNode {
                 name="register-repeat"
                 id="register-repeat"
                 placeholder="Same password"
-                value={submitData && submitData.repeatPassword}
+                value={repeatPassword ?? ""}
                 required
                 onInput={(e): void => {
-                  submitDataSetter((submitData: any) => ({
-                    ...submitData,
-                    repeatPassword: e.currentTarget.value,
-                  }));
+                  setRepeatPassword(e.currentTarget.value);
                 }}
               />
+              <ShowInputErrorLabel
+                message={errors?.repeatPassword}
+                isDirty={username !== undefined}
+              />
               <br />
-              {/*
-              <label for="phone">{i18n.str`Phone number:`}</label>
-              // FIXME: add input validation (must start with +, otherwise only numbers)
-              <input
-                name="phone"
-                id="phone"
-                type="phone"
-                placeholder="+CC-123456789"
-                value={submitData && submitData.phone}
-                required
-                onInput={(e): void => {
-		  submitDataSetter((submitData: any) => ({
-                    ...submitData,
-                    phone: e.currentTarget.value,
-                  }))}} />
-              <br />
-              */}
               <button
                 class="pure-button pure-button-primary btn-register"
                 disabled={!!errors}
                 onClick={() => {
-                  console.log("maybe submitting the registration..");
-                  if (!submitData) return;
+                  if (!username || !password) return;
                   registrationCall(
-                    { ...submitData },
+                    { username, password },
                     backendStateSetter, // will store BE URL, if OK.
                     pageStateSetter,
                   );
-                  console.log("Clearing the input data");
-                  /**
-                   * FIXME: clearing the data should be done by setting
-                   * it to undefined, instead of the empty strings, just
-                   * like done in the login function.  Now set to the empty
-                   * strings due to a non lively update of the <input> fields
-                   * after setting to undefined.
-                   */
-                  submitDataSetter({
-                    username: "",
-                    password: "",
-                    repeatPassword: "",
-                  });
+
+                  setUsername(undefined);
+                  setPassword(undefined);
+                  setRepeatPassword(undefined);
                 }}
               >
                 {i18n.str`Register`}
@@ -1745,11 +1669,9 @@ function RegistrationForm(): VNode {
               <button
                 class="pure-button pure-button-secondary btn-cancel"
                 onClick={() => {
-                  submitDataSetter({
-                    username: "",
-                    password: "",
-                    repeatPassword: "",
-                  });
+                  setUsername(undefined);
+                  setPassword(undefined);
+                  setRepeatPassword(undefined);
                   route("/account");
                 }}
               >