[taler-merchant-backoffice] branch master updated (a5ca0af -> 8d4a44f)

[gnunet]

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

ms pushed a change to branch master
in repository merchant-backoffice.

    from a5ca0af  Enhancing window mock.
     new db407fd  bank: move registration to dedicate page
     new 8d4a44f  move public history to dedicate page

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 packages/bank/src/hooks/index.ts       |   1 -
 packages/bank/src/pages/home/index.tsx | 179 ++++++++++++++++++++++-----------
 2 files changed, 123 insertions(+), 57 deletions(-)

diff --git a/packages/bank/src/hooks/index.ts b/packages/bank/src/hooks/index.ts
index 17a9d1d..9a1b50a 100644
--- a/packages/bank/src/hooks/index.ts
+++ b/packages/bank/src/hooks/index.ts
@@ -115,7 +115,6 @@ export function useNotNullLocalStorage(
   key: string,
   initialValue: string,
 ): [string, StateUpdater<string>] {
-
   const [storedValue, setStoredValue] = useState<string>((): string => {
     return typeof window !== "undefined"
       ? window.localStorage.getItem(key) || initialValue
diff --git a/packages/bank/src/pages/home/index.tsx 
b/packages/bank/src/pages/home/index.tsx
index b6feb77..352650b 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -58,6 +58,8 @@ interface CredentialsRequestType {
  */
 interface PageStateType {
   isLoggedIn: boolean;
+  tryRegister: boolean;
+  showPublicHistories: boolean;
   hasError: boolean;
   withdrawalInProgress: boolean;
   error?: string;
@@ -216,6 +218,8 @@ function useAccountState(
 function usePageState(
   state: PageStateType = {
     isLoggedIn: false,
+    tryRegister: false,
+    showPublicHistories: false,
     hasError: false,
     withdrawalInProgress: false,
   }
@@ -597,7 +601,11 @@ async function registrationCall(
     }));
   } else {
     console.log("Credentials are valid");
-    pageStateSetter((prevState) => ({ ...prevState, isLoggedIn: true }));
+    pageStateSetter((prevState) => ({
+      ...prevState,
+      isLoggedIn: true,
+      tryRegister: false
+    }));
     backendStateSetter((prevState) => ({
       ...prevState,
       url: baseUrl,
@@ -611,6 +619,83 @@ async function registrationCall(
  * Functional components. *
  *************************/
 
+/**
+ * Collect and submit login data.
+ */
+function LoginForm(Props: any): VNode {
+  const {backendStateSetter, pageStateSetter} = Props;
+  var submitData: CredentialsRequestType;
+  const i18n = useTranslator();
+  return <Fragment>
+    <input
+      type="text"
+      placeholder="username"
+      required
+      onInput={(e): void => {
+        submitData = {
+          ...submitData,
+          username: e.currentTarget.value,
+        };}} />
+    <input
+      type="text"
+      placeholder="password"
+      required
+      onInput={(e): void => {
+        submitData = {
+          ...submitData,
+          password: e.currentTarget.value,
+        };}} />
+    <button
+      onClick={() => {
+        loginCall(
+          submitData,
+          backendStateSetter,
+          pageStateSetter
+        );
+      }}>{i18n`Login`}</button>
+  </Fragment>
+}
+
+/**
+ * Collect and submit registration data.
+ */
+function RegistrationForm(Props: any): VNode {
+  var {pageState, pageStateSetter} = Props;
+  var submitData: CredentialsRequestType;
+  const i18n = useTranslator();
+  return (<Fragment>
+    <h2>Register!</h2>
+    <input
+      type="text"
+      placeholder="username"
+      required
+      onInput={(e): void => {
+        submitData = {
+          ...submitData,
+          username: e.currentTarget.value,
+        };}} />
+    <input
+      type="text"
+      placeholder="password"
+      required
+      onInput={(e): void => {
+        submitData = {
+          ...submitData,
+          password: e.currentTarget.value,
+        };}} />
+    <button
+      onClick={() => {
+        registrationCall(
+          submitData,
+          Props.backendStateSetter,
+          pageStateSetter
+        );}}>{i18n`Register`}</button>
+    <a onClick={() => {
+      pageStateSetter((prevState: PageStateType) =>
+        ({...prevState, tryRegister: false}))}}>Go back</a>
+  </Fragment>);
+}
+
 /**
  * Show one page of transactions.
  */
@@ -740,7 +825,6 @@ function Account(Props: any): VNode {
     <div>
       <span>{i18n`Last transactions:`}</span> { txsPages }
       <button onClick={() => setTxPageNumber(txPageNumber + 1)}>{i18n`Load 
more transactions`}</button>
-      <button onClick={() => setTxPageNumber(0)}>{i18n`Reset 
transactions`}</button>
     </div>
     {Props.children}
   </Fragment>);
@@ -818,7 +902,9 @@ function PublicHistories(): VNode {
       </div>
     )
   }
-  return <div>{txs}</div>;
+  return <Fragment>
+    {txs.length !== 0 ? txs : <p>No public transactions found.</p>}
+  </Fragment>;
 }
 
 /**
@@ -830,7 +916,6 @@ export function BankHome(): VNode {
   var [pageState, pageStateSetter] = usePageState();
   var [accountState, accountStateSetter] = useAccountState();
   const setTxPageNumber = useTransactionPageNumber()[1];
-
   var i18n = useTranslator();
 
   if (pageState.hasError) {
@@ -842,6 +927,21 @@ export function BankHome(): VNode {
     </Fragment>;
   }
 
+  if (pageState.showPublicHistories) {
+    return (<SWRWithoutCredentials baseUrl={getRootPath()}>
+      <PublicHistories />
+      <a onClick={() => {
+        pageStateSetter((prevState: PageStateType) =>
+          ({...prevState, showPublicHistories: false}))}}>Go back</a>
+    </SWRWithoutCredentials>);
+  }
+
+  if (pageState.tryRegister) {
+    return (<RegistrationForm
+      pageState={pageState}
+      pageStateSetter={pageStateSetter}
+      backendStateSetter={backendStateSetter} />);
+  }
   /**
    * Credentials were correct, now render the bank account page,
    * with balance, transactions history, and a Taler withdrawal
@@ -871,7 +971,8 @@ export function BankHome(): VNode {
             accountLabel={backendState.username}>
   
             { /**
-               * No withdrawal is happening: offer to start one.
+               * No action is currently being performed (page is 'pristine'):
+              * offer the Taler withdrawal button.
                */
               !pageState.withdrawalInProgress && !pageState.transferOutcome && 
<button onClick={() => {
                 createWithdrawalCall(
@@ -898,7 +999,11 @@ export function BankHome(): VNode {
               pageState.withdrawalOutcome && <button onClick={() => {
                 pageStateSetter((prevState) => {
                   const { withdrawalOutcome, withdrawalId, ...rest } = 
prevState;
-                  return {...rest, withdrawalInProgress: 
false};})}}>{i18n`Close Taler withdrawal`}</button>
+                  return {
+                   ...rest,
+                   withdrawalInProgress: false
+                 };}
+               )}}>{i18n`Close Taler withdrawal`}</button>
             }
   
             { /**
@@ -919,7 +1024,7 @@ export function BankHome(): VNode {
            }
 
            { /**
-              * Offer wire transfer, if no withdrawal is in progress.
+              * Profile page is pristine: offer the wire transfer form.
               */
               !pageState.withdrawalInProgress && !pageState.transferOutcome && 
<Fragment>
                <p>Please, include the 'amount' query parameter.</p>
@@ -957,58 +1062,20 @@ export function BankHome(): VNode {
         </Fragment>
       </SWRWithCredentials>
     );
-  }
-
-  var submitData: CredentialsRequestType;
+  } // end of logged-in state.
   return (
     <Fragment>
       <p>{i18n`Welcome to euFin bank: Taler+IBAN now possible!`}</p>
-      <input
-        type="text"
-        placeholder="username"
-        required
-        onInput={(e): void => {
-          submitData = {
-            ...submitData,
-            username: e.currentTarget.value,
-          };
-        }}
-      />
-      <input
-        type="text"
-        placeholder="password"
-        required
-        onInput={(e): void => {
-          submitData = {
-            ...submitData,
-            password: e.currentTarget.value,
-          };
-        }}
-      />
-
-      <button
-        onClick={() => {
-          registrationCall(
-            submitData,
-            backendStateSetter,
-            pageStateSetter
-          );
-        }}>
-        Sign up
-      </button>
-      <button
-        onClick={() => {
-          loginCall(
-            submitData,
-            backendStateSetter,
-            pageStateSetter
-          );
-        }}>{i18n`Sign in`}</button>
-      <div>
-       <SWRWithoutCredentials baseUrl={getRootPath()}>
-          <PublicHistories />
-       </SWRWithoutCredentials>
-      </div>
+      <SWRWithoutCredentials baseUrl={getRootPath()}>
+        <LoginForm
+         pageStateSetter={pageStateSetter}
+          backendStateSetter={backendStateSetter} />
+       <p>Not a customer yet?  <a onClick={() => {
+          pageStateSetter((prevState) => ({...prevState, tryRegister: 
true}))}}>Register!</a></p>
+       <p>See our public <a onClick={() => {
+          pageStateSetter((prevState) => (
+            {...prevState, showPublicHistories: true}))}}>transactions</a></p>
+      </SWRWithoutCredentials>
     </Fragment>
   );
 }

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