[taler-merchant-backoffice] branch master updated: -try to improve bank UX

[gnunet]

This is an automated email from the git hooks/post-receive script.

grothoff pushed a commit to branch master
in repository merchant-backoffice.

The following commit(s) were added to refs/heads/master by this push:
     new ee78347  -try to improve bank UX
ee78347 is described below

commit ee783479c710257e74a39bbee3dad5da26b7a63a
Author: Christian Grothoff <christian@grothoff.org>
AuthorDate: Fri Oct 21 19:34:51 2022 +0200

    -try to improve bank UX
---
 packages/bank/src/pages/home/index.tsx | 76 +++++++++++++++-------------------
 packages/bank/src/scss/bank.scss       | 33 +++++++++++++++
 2 files changed, 66 insertions(+), 43 deletions(-)

diff --git a/packages/bank/src/pages/home/index.tsx 
b/packages/bank/src/pages/home/index.tsx
index d686204..6bda5c2 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -112,7 +112,6 @@ interface PageStateType {
   error?: string;
   info?: string;
   talerWithdrawUri?: string;
-  withdrawalOutcome?: string;
   /**
    * Not strictly a presentational value, could
    * be moved in a future "withdrawal state" object.
@@ -490,7 +489,7 @@ async function abortWithdrawalCall(
     const { talerWithdrawUri, withdrawalId, ...rest } = prevState;
     return {
       ...rest,
-      withdrawalOutcome: 'Withdrawal aborted!'
+      info: 'Withdrawal aborted!'
     }
   })
 
@@ -569,7 +568,7 @@ async function confirmWithdrawalCall(
     const { talerWithdrawUri, ...rest } = prevState;
     return {
       ...rest,
-      withdrawalOutcome: 'Withdrawal confirmed!'
+      info: 'Withdrawal confirmed!'
     }
   })
 
@@ -844,7 +843,6 @@ function BankFrame(Props: any): VNode {
         pageStateSetter((prevState: PageStateType) => {
           const {
             talerWithdrawUri,
-            withdrawalOutcome,
             withdrawalId, ...rest } = prevState;
           return {
             ...rest,
@@ -959,6 +957,7 @@ function PaytoWireTransfer(Props: any): VNode {
             id="iban"
             name="iban"
             placeholder="CC0123456789"
+            autofocus
             required
             pattern={ibanRegex}
             onInput={(e): void => {
@@ -1122,22 +1121,28 @@ function TalerWithdrawalConfirmationQuestion(Props: 
any): VNode {
 
   return (<Fragment>
     <h1 class="nav">{i18n`Confirm Withdrawal`}</h1>
-    <p><Translate>
-      Please, authorize this operation by answering the following question.
-    </Translate></p>
-    <div>
-      <label for="answer">What is <em>{captchaNumbers.a} + 
{captchaNumbers.b}</em> ?&nbsp;</label>
+    <article>
+    <div class="challenge-div">
+    <form class="challenge-form">
+    <div class="pure-form"
+         id="captcha"
+         name="capcha-form">
+      <h2>{i18n`Authorize withdrawal by solving challenge`}</h2>
+      <p>
+      <label for="answer">{i18n`What 
is`}&nbsp;<em>{captchaNumbers.a}&nbsp;+&nbsp;{captchaNumbers.b}</em>?&nbsp;</label>&nbsp;
       <input
         name="answer"
         id="answer"
         type="text"
+        autofocus
         required
         onInput={(e): void => {
           captchaAnswer = e.currentTarget.value;
         }} />
-      <input
-        type="submit"
-        value="confirm"
+      </p>
+      <p>
+      <button
+        class="pure-button pure-button-primary btn-confirm"
         onClick={() => {
           if (captchaAnswer == (captchaNumbers.a + 
captchaNumbers.b).toString()) {
             confirmWithdrawalCall(
@@ -1148,22 +1153,32 @@ function TalerWithdrawalConfirmationQuestion(Props: 
any): VNode {
           }
           pageStateSetter((prevState: PageStateType) =>
             ({ ...prevState, hasError: true, error: 'Answer is wrong.' }))
-        }} />
-      <input
-        type="submit"
-        value="abort"
+        }}>
+        {i18n`Confirm`}
+      </button>
+      &nbsp;
+      <button
+        class="pure-button pure-button-secondary btn-cancel"
         onClick={() =>
           abortWithdrawalCall(
             backendState,
             pageState.withdrawalId,
             pageStateSetter
-          )} />
+          )}>
+         {i18n`Cancel`}
+      </button>
+      </p>
     </div>
+    </form>
+    <div class="hint">
     <p><Translate>
       A this point, a <b>real</b> bank would ask for an additional
       authentication proof (PIN/TAN, one time password, ..), instead
       of a simple calculation.
     </Translate></p>
+    </div>
+    </div>
+    </article>
   </Fragment>);
 }
 
@@ -1202,7 +1217,7 @@ function TalerWithdrawalQRCode(Props: any): VNode {
   const i18n = useTranslator();
   const abortButton = <a class="pure-button" onClick={() => {
     pageStateSetter((prevState: PageStateType) => {
-      const { withdrawalOutcome, withdrawalId, talerWithdrawUri, ...rest } = 
prevState;
+      const { withdrawalId, talerWithdrawUri, ...rest } = prevState;
       return { ...rest, withdrawalInProgress: false };
     })
   }}>{i18n`Abort`}</a>
@@ -1234,7 +1249,6 @@ function TalerWithdrawalQRCode(Props: any): VNode {
   if (data.aborted)
     pageStateSetter((prevState: PageStateType) => {
       const {
-        withdrawalOutcome,
         withdrawalId,
         talerWithdrawUri,
         ...rest } = prevState;
@@ -1514,7 +1528,6 @@ function RegistrationForm(Props: any): VNode {
               placeholder="Password"
               value={submitData && submitData.password}
               required
-              autofocus
               onInput={(e): void => {
                 submitDataSetter((submitData: any) => ({
                   ...submitData,
@@ -1541,7 +1554,6 @@ function RegistrationForm(Props: any): VNode {
               <br />
               */}
             <button
-              autofocus
               class="pure-button pure-button-primary btn-register"
               onClick={() => {
                 console.log('maybe submitting the registration..');
@@ -1580,7 +1592,6 @@ function RegistrationForm(Props: any): VNode {
             </button>
             {/* FIXME: should use a different color */}
             <button
-              autofocus
               class="pure-button pure-button-secondary btn-cancel"
               onClick={() => {
                 pageStateSetter((prevState: PageStateType) => ({ ...prevState, 
tryRegister: false }))
@@ -1670,7 +1681,6 @@ function Account(Props: any): VNode {
   const [pageState, pageStateSetter] = useContext(PageContext);
   const {
     withdrawalInProgress,
-    withdrawalOutcome,
     withdrawalId,
     isLoggedIn,
     talerWithdrawUri } = pageState;
@@ -1738,26 +1748,6 @@ function Account(Props: any): VNode {
   }
   if (!data) return <p>Retrieving the profile page...</p>;
 
-  /**
-   * Withdrawal reached a final state: show it.
-   */
-  if (withdrawalOutcome)
-    return <BankFrame>
-      <p>{withdrawalOutcome}</p>
-      <button onClick={() => {
-        pageStateSetter((prevState: PageStateType) => {
-          const { withdrawalOutcome, withdrawalId, ...rest } = prevState;
-          return {
-            ...rest,
-            withdrawalInProgress: false
-          };
-        })
-      }}>
-        {i18n`Close Taler withdrawal`}
-      </button>
-    </BankFrame>
-
-
   /**
    * This block shows the withdrawal QR code.
    *
diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss
index 6806dab..dd2efb1 100644
--- a/packages/bank/src/scss/bank.scss
+++ b/packages/bank/src/scss/bank.scss
@@ -191,6 +191,39 @@ input {
 }
 
 
+.challenge-form > .pure-form {
+    background: #4a4a4a;
+    color: #ffffff;
+    display: inline-block;
+    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 16px 16px;
+    border-radius: 8px;
+    width: max-content;
+    .formFieldLabel {
+        margin: 2px 2px;
+    }
+    input[type="text"] {
+        border: none;
+        border-radius: 4px;
+        background: #6a6a6a;
+        color: #fefefe;
+        box-shadow: none;
+    }
+    .btn-confirm {
+        float: left;
+    }
+    .btn-cancel {
+        float: right;
+    }
+    h2 {
+        margin-top: 0;
+        margin-bottom: 10px;
+    }
+}
+
+
 .wire-transfer-form > .pure-form,
 .payto-form > .pure-form,
 .reserve-form > .pure-form {

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.