prevent form submit

5 files changed, 60 insertions, 19 deletions

diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx
index 0acced4ab..dd0364d6e 100644
--- a/packages/demobank-ui/src/pages/LoginForm.tsx
+++ b/packages/demobank-ui/src/pages/LoginForm.tsx
@@ -44,7 +44,13 @@ export function LoginForm(): VNode {
 
   return (
     <div class="login-div">
-      <form action="javascript:void(0);" class="login-form" noValidate>
+      <form
+        class="login-form"
+        noValidate
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
         <div class="pure-form">
           <h2>{i18n.str`Please login!`}</h2>
           <p class="unameFieldLabel loginFieldLabel formFieldLabel">
@@ -87,10 +93,11 @@ export function LoginForm(): VNode {
           />
           <br />
           <button
-            type="button"
+            type="submit"
             class="pure-button pure-button-primary"
             disabled={!!errors}
-            onClick={() => {
+            onClick={(e) => {
+              e.preventDefault();
               if (!username || !password) return;
               loginCall({ username, password }, backend);
               setUsername(undefined);
@@ -103,7 +110,8 @@ export function LoginForm(): VNode {
           {bankUiSettings.allowRegistrations ? (
             <button
               class="pure-button pure-button-secondary btn-cancel"
-              onClick={() => {
+              onClick={(e) => {
+                e.preventDefault();
                 route("/register");
               }}
             >
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 3f048c385..1922eeed3 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -74,7 +74,13 @@ export function PaytoWireTransferForm({
   if (!pageState.isRawPayto)
     return (
       <div>
-        <form class="pure-form" name="wire-transfer-form">
+        <form
+          class="pure-form"
+          name="wire-transfer-form"
+          onSubmit={(e) => {
+            e.preventDefault();
+          }}
+        >
           <p>
             <label for="iban">{i18n.str`Receiver IBAN:`}</label>&nbsp;
             <input
@@ -155,11 +161,12 @@ export function PaytoWireTransferForm({
 
           <p style={{ display: "flex", justifyContent: "space-between" }}>
             <input
-              type="button"
+              type="submit"
               class="pure-button pure-button-primary"
               disabled={!!errorsWire}
               value="Send"
-              onClick={async () => {
+              onClick={async (e) => {
+                e.preventDefault();
                 if (
                   typeof submitData === "undefined" ||
                   typeof submitData.iban === "undefined" ||
@@ -203,7 +210,8 @@ export function PaytoWireTransferForm({
               type="button"
               class="pure-button"
               value="Clear"
-              onClick={async () => {
+              onClick={async (e) => {
+                e.preventDefault();
                 submitDataSetter((p) => ({
                   amount: undefined,
                   iban: undefined,
diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx
index 9d84cdf44..183fa993e 100644
--- a/packages/demobank-ui/src/pages/RegistrationPage.tsx
+++ b/packages/demobank-ui/src/pages/RegistrationPage.tsx
@@ -84,7 +84,13 @@ function RegistrationForm(): VNode {
       <h1 class="nav">{i18n.str`Welcome to ${bankUiSettings.bankName}!`}</h1>
       <article>
         <div class="register-div">
-          <form class="register-form" noValidate>
+          <form
+            class="register-form"
+            noValidate
+            onSubmit={(e) => {
+              e.preventDefault();
+            }}
+          >
             <div class="pure-form">
               <h2>{i18n.str`Please register!`}</h2>
               <p class="unameFieldLabel registerFieldLabel formFieldLabel">
@@ -144,8 +150,10 @@ function RegistrationForm(): VNode {
               <br />
               <button
                 class="pure-button pure-button-primary btn-register"
+                type="submit"
                 disabled={!!errors}
-                onClick={() => {
+                onClick={(e) => {
+                  e.preventDefault();
                   if (!username || !password) return;
                   registrationCall(
                     { username, password },
@@ -164,7 +172,8 @@ function RegistrationForm(): VNode {
               {/* FIXME: should use a different color */}
               <button
                 class="pure-button pure-button-secondary btn-cancel"
-                onClick={() => {
+                onClick={(e) => {
+                  e.preventDefault();
                   setUsername(undefined);
                   setPassword(undefined);
                   setRepeatPassword(undefined);
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 1df86717b..17fb85592 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -45,7 +45,14 @@ export function WalletWithdrawForm({
     if (focus) ref.current?.focus();
   }, [focus]);
   return (
-    <form id="reserve-form" class="pure-form" name="tform">
+    <form
+      id="reserve-form"
+      class="pure-form"
+      name="tform"
+      onSubmit={(e) => {
+        e.preventDefault();
+      }}
+    >
       <p>
         <label for="withdraw-amount">{i18n.str`Amount to withdraw:`}</label>
         &nbsp;
@@ -80,9 +87,10 @@ export function WalletWithdrawForm({
           <input
             id="select-exchange"
             class="pure-button pure-button-primary"
-            type="button"
+            type="submit"
             value={i18n.str`Withdraw`}
-            onClick={() => {
+            onClick={(e) => {
+              e.preventDefault();
               submitAmount = validateAmount(submitAmount);
               /**
                * By invalid amounts, the validator prints error messages
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
index 8cfdd4e9f..9fdd8ad59 100644
--- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
@@ -47,7 +47,13 @@ export function WithdrawalConfirmationQuestion(): VNode {
       <h1 class="nav">{i18n.str`Confirm Withdrawal`}</h1>
       <article>
         <div class="challenge-div">
-          <form class="challenge-form" noValidate>
+          <form
+            class="challenge-form"
+            noValidate
+            onSubmit={(e) => {
+              e.preventDefault();
+            }}
+          >
             <div class="pure-form" id="captcha" name="capcha-form">
               <h2>{i18n.str`Authorize withdrawal by solving challenge`}</h2>
               <p>
@@ -72,8 +78,9 @@ export function WithdrawalConfirmationQuestion(): VNode {
               </p>
               <p>
                 <button
+                  type="submit"
                   class="pure-button pure-button-primary btn-confirm"
-                  onClick={(e) => {
+                  onClick={async (e) => {
                     e.preventDefault();
                     if (
                       captchaAnswer ==
@@ -101,14 +108,15 @@ export function WithdrawalConfirmationQuestion(): VNode {
                 &nbsp;
                 <button
                   class="pure-button pure-button-secondary btn-cancel"
-                  onClick={async () =>
+                  onClick={async (e) => {
+                    e.preventDefault();
                     await abortWithdrawalCall(
                       backend.state,
                       pageState.withdrawalId,
                       pageStateSetter,
                       i18n,
-                    )
-                  }
+                    );
+                  }}
                 >
                   {i18n.str`Cancel`}
                 </button>