autofocus

1 files changed, 98 insertions, 103 deletions

diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
index 6bda5c2..0a2a5a5 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -932,17 +932,17 @@ function PaytoWireTransfer(Props: any): VNode {
   const [submitData, submitDataSetter] = useWireTransferRequestType();
   const [rawPaytoInput, rawPaytoInputSetter] = useRawPaytoInputType();
   const i18n = useTranslator();
+  const { focus, backendState } = Props
   const amountRegex = '^[0-9]+(\.[0-9]+)?$';
   const ibanRegex = '^[A-Z][A-Z][0-9]+$';
   const receiverInput = '';
   const subjectInput = '';
   let transactionData: TransactionRequestType;
-  const focusInput = useRef(null);
+  const ref = useRef<HTMLInputElement>(null)
   useEffect(() => {
-    console.log('Now focus', focusInput);
-    if (focusInput.current)
-      (focusInput.current as any).focus();
-  }, []);
+    if (focus) ref.current?.focus();
+  },[]);
+
   if (!pageState.isRawPayto) {
     console.log('wire transfer form');
     return (
@@ -952,12 +952,11 @@ function PaytoWireTransfer(Props: any): VNode {
           <p>
           <label for="iban">{i18n`Receiver IBAN:`}</label>&nbsp;
           <input
-            ref={focusInput}
+            ref={ref}
             type="text"
             id="iban"
             name="iban"
             placeholder="CC0123456789"
-            autofocus
             required
             pattern={ibanRegex}
             onInput={(e): void => {
@@ -981,7 +980,7 @@ function PaytoWireTransfer(Props: any): VNode {
             }} /><br /><br />
           <label for="amount">{i18n`Amount:`}</label>&nbsp;
           <input
-            type="text"
+            type="number"
             name="amount"
             id="amount"
             placeholder="amount"
@@ -1028,7 +1027,7 @@ function PaytoWireTransfer(Props: any): VNode {
               };
               createTransactionCall(
                 transactionData,
-                Props.backendState,
+                backendState,
                 pageStateSetter,
                 submitDataSetter // need here only to be cleaned.
               );
@@ -1089,7 +1088,7 @@ function PaytoWireTransfer(Props: any): VNode {
               transactionData.paytoUri.length === 0) return;
             createTransactionCall(
               transactionData,
-              Props.backendState,
+              backendState,
               pageStateSetter,
               rawPaytoInputSetter);
           }} />
@@ -1134,7 +1133,6 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode {
         name="answer"
         id="answer"
         type="text"
-        autofocus
         required
         onInput={(e): void => {
           captchaAnswer = e.currentTarget.value;
@@ -1274,84 +1272,70 @@ function TalerWithdrawalQRCode(Props: any): VNode {
 
 
 
-/* FIXME: find a way to get rid of the @ts-ignore here! Sebastian: fix my evil DOM modification */
-function OpenPayTab(evt: MouseEvent, tabName: string) {
-  let tabcontent = document.getElementsByClassName("tabcontent");
-  for (let i = 0; i < tabcontent.length; i++) {
-    // @ts-ignore
-    tabcontent[i].style.display = "none";
-  }
-  let tablinks = document.getElementsByClassName("tablinks");
-  for (let i = 0; i < tablinks.length; i++) {
-    tablinks[i].className
-      = tablinks[i].className.replace(" active", "");
-  }
-  // @ts-ignore
-  document.getElementById(tabName).style.display = "block";
-  // @ts-ignore
-  evt.currentTarget.className += " active";
-}
-
-
 function WalletWithdraw(Props: any): VNode {
-  const { backendState, pageStateSetter } = Props;
+  const { backendState, pageStateSetter, focus } = Props;
   const currency = useContext(CurrencyContext);
   const i18n = useTranslator();
   let submitAmount = '5.00';
   const amountRegex = '^[0-9]+(\.[0-9]+)?$';
 
+  const ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (focus) ref.current?.focus();
+  },[]);
   return (
-        <div id="reserve-form"
-          class="pure-form"
-          name="tform">
-          <p>
-          <label for="withdraw-amount">{i18n`Amount to withdraw:`}</label>&nbsp;
-          <input
-            type="text"
-            id="withdraw-amount"
-            name="withdraw-amount"
-            value={submitAmount}
-            pattern={amountRegex}
-            class="amount" autofocus
-            onChange={(e): void => {
-              // FIXME: validate using 'parseAmount()',
-              // deactivate submit button as long as
-              // amount is not valid
-              submitAmount = e.currentTarget.value;
-            }} />
-          &nbsp;
-          <input
-            type="text"
-            readonly
-            class="currency-indicator"
-            size={currency.length}
-            maxLength={currency.length}
-            tabIndex={-1} value={currency} />
-          </p>
-          <p>
-          <div>
-          <input
-             id="select-exchange"
-             class="pure-button pure-button-primary"
-             type="submit"
-             value={i18n`Withdraw`}
-             onClick={() => {
-               submitAmount = validateAmount(submitAmount);
-      /**
-       * By invalid amounts, the validator prints error messages
-       * on the console, and the browser colourizes the amount input
-       * box to indicate a error.
-       */
-               if (!submitAmount) return;
-               createWithdrawalCall(
-                 `${currency}:${submitAmount}`,
-                  backendState,
-                  pageStateSetter
-               )
-            }} />
-          </div>
-          </p>
-        </div>
+    <div id="reserve-form"
+      class="pure-form"
+      name="tform">
+      <p>
+      <label for="withdraw-amount">{i18n`Amount to withdraw:`}</label>&nbsp;
+      <input
+        type="number"
+        ref={ref}
+        id="withdraw-amount"
+        name="withdraw-amount"
+        value={submitAmount}
+        pattern={amountRegex}
+        class="amount" 
+        onChange={(e): void => {
+          // FIXME: validate using 'parseAmount()',
+          // deactivate submit button as long as
+          // amount is not valid
+          submitAmount = e.currentTarget.value;
+        }} />
+      &nbsp;
+      <input
+        type="text"
+        readonly
+        class="currency-indicator"
+        size={currency.length}
+        maxLength={currency.length}
+        tabIndex={-1} value={currency} />
+      </p>
+      <p>
+      <div>
+      <input
+          id="select-exchange"
+          class="pure-button pure-button-primary"
+          type="submit"
+          value={i18n`Withdraw`}
+          onClick={() => {
+            submitAmount = validateAmount(submitAmount);
+  /**
+   * By invalid amounts, the validator prints error messages
+   * on the console, and the browser colourizes the amount input
+   * box to indicate a error.
+   */
+            if (!submitAmount) return;
+            createWithdrawalCall(
+              `${currency}:${submitAmount}`,
+              backendState,
+              pageStateSetter
+            )
+        }} />
+      </div>
+      </p>
+    </div>
   )
 }
 
@@ -1361,34 +1345,43 @@ function WalletWithdraw(Props: any): VNode {
  * then specify the details trigger the action.
  */
 function PaymentOptions(Props: any): VNode {
-  const { backendState, pageStateSetter } = Props;
+  const { backendState, pageStateSetter, focus } = Props;
   const currency = useContext(CurrencyContext);
   const i18n = useTranslator();
 
+  const [tab, setTab] = useState<"charge-wallet"|"wire-transfer">("charge-wallet")
+  
+
   return (<article>
     <div class="payments">
       <div class="tab">
-        <button class="tablinks active"
-          onClick={(e: MouseEvent): void => {OpenPayTab(e, 'charge-wallet')}}>
+        <button class={tab === "charge-wallet" ? "tablinks active" : "tablinks"}
+          onClick={(e: MouseEvent): void => {setTab('charge-wallet')}}>
           {i18n`Charge Taler wallet`}
         </button>
-        <button class="tablinks"
-          onClick={(e: MouseEvent): void => {OpenPayTab(e, 'wire-transfer')}}>
+        <button class={tab === "wire-transfer" ? "tablinks active" : "tablinks"}
+          onClick={(e: MouseEvent): void => {setTab("wire-transfer")}}>
           {i18n`Wire to bank account`}
         </button>
       </div>
-      <div id='charge-wallet' class='tabcontent active'>
-        <h3>{i18n`Charge Taler wallet`}</h3>
-        <WalletWithdraw
-           backendState={backendState}
-           pageStateSetter={pageStateSetter} />
-      </div>
-      <div id='wire-transfer' class='tabcontent'>
-        <h3>{i18n`Wire to bank account`}</h3>
-        <PaytoWireTransfer
-           backendState={backendState}
-           pageStateSetter={pageStateSetter} />
-      </div>
+      { tab === "charge-wallet" &&
+        <div id='charge-wallet' class='tabcontent active'>
+          <h3>{i18n`Charge Taler wallet`}</h3>
+          <WalletWithdraw
+            backendState={backendState}
+            focus
+            pageStateSetter={pageStateSetter} />
+        </div> 
+      }
+      { tab === "wire-transfer" &&
+        <div id='wire-transfer' class='tabcontent active'>
+          <h3>{i18n`Wire to bank account`}</h3>
+          <PaytoWireTransfer
+            backendState={backendState}
+            focus
+            pageStateSetter={pageStateSetter} />
+        </div> 
+      }
     </div>
   </article>);
 }
@@ -1399,7 +1392,6 @@ function RegistrationButton(Props: any): VNode {
   if (UI_ALLOW_REGISTRATIONS)
   {
      return (<button
-              autofocus
               class="pure-button pure-button-secondary btn-cancel"
               onClick={() => {
                 pageStateSetter((prevState: PageStateType) => ({ ...prevState, tryRegister: true }))
@@ -1420,12 +1412,18 @@ function LoginForm(Props: any): VNode {
   const { backendStateSetter, pageStateSetter } = Props;
   const [submitData, submitDataSetter] = useCredentialsRequestType();
   const i18n = useTranslator();
+  const ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    ref.current?.focus();
+  },[]);
   return (<div class="login-div">
   <form action="javascript:void(0);" class="login-form">
     <div class="pure-form">
       <h2>{i18n`Please login!`}</h2>
       <p class="unameFieldLabel loginFieldLabel formFieldLabel"><label for="username">{i18n`Username:`}</label></p>
       <input
+        ref={ref}
+        autoFocus
         type="text"
         name="username"
         id="username"
@@ -1455,7 +1453,6 @@ function LoginForm(Props: any): VNode {
         }} />
       <br />
       <button
-        autofocus
         type="submit"
         class="pure-button pure-button-primary"
         onClick={() => {
@@ -1512,7 +1509,6 @@ function RegistrationForm(Props: any): VNode {
               placeholder="Username"
               value={submitData && submitData.username}
               required
-              autofocus
               onInput={(e): void => {
                 submitDataSetter((submitData: any) => ({
                   ...submitData,
@@ -1545,7 +1541,6 @@ function RegistrationForm(Props: any): VNode {
                 placeholder="+CC-123456789"
                 value={submitData && submitData.phone}
                 required
-                autofocus
                 onInput={(e): void => {
 		  submitDataSetter((submitData: any) => ({
                     ...submitData,