[taler-merchant-backoffice] 01/02: bank: move registration to dedicate page

[gnunet]

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

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

commit db407fd1c2f14fa95c7008e8d2286779f6855699
Author: ms <ms@taler.net>
AuthorDate: Wed Feb 9 11:53:30 2022 +0100

    bank: move registration to dedicate page
---
 packages/bank/src/hooks/index.ts       |   1 -
 packages/bank/src/pages/home/index.tsx | 159 ++++++++++++++++++++++-----------
 2 files changed, 105 insertions(+), 55 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..60ea692 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -58,6 +58,7 @@ interface CredentialsRequestType {
  */
 interface PageStateType {
   isLoggedIn: boolean;
+  tryRegister: boolean;
   hasError: boolean;
   withdrawalInProgress: boolean;
   error?: string;
@@ -216,6 +217,7 @@ function useAccountState(
 function usePageState(
   state: PageStateType = {
     isLoggedIn: false,
+    tryRegister: false,
     hasError: false,
     withdrawalInProgress: false,
   }
@@ -597,7 +599,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 +617,82 @@ 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) => ({...prevState, tryRegister: 
false}))}}>Go back</a>
+  </Fragment>);
+}
+
 /**
  * Show one page of transactions.
  */
@@ -830,7 +912,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 +923,12 @@ export function BankHome(): VNode {
     </Fragment>;
   }
 
+  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 +958,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 +986,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 +1011,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 +1049,17 @@ 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>
+      </SWRWithoutCredentials>
     </Fragment>
   );
 }

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