[taler-merchant-backoffice] branch master updated: -work a bit on registration page

[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 e18176f  -work a bit on registration page
e18176f is described below

commit e18176ff974f29ee9602b3e8e32c8c7232987dc2
Author: Christian Grothoff <christian@grothoff.org>
AuthorDate: Sun Sep 25 15:31:31 2022 +0200

    -work a bit on registration page
---
 .../bank/src/components/menu/NavigationBar.tsx     | 26 ----------
 packages/bank/src/pages/home/index.tsx             | 59 ++++++++++++++--------
 packages/bank/src/template.html                    |  6 +--
 3 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/packages/bank/src/components/menu/NavigationBar.tsx 
b/packages/bank/src/components/menu/NavigationBar.tsx
index b7876a4..6dd7e4d 100644
--- a/packages/bank/src/components/menu/NavigationBar.tsx
+++ b/packages/bank/src/components/menu/NavigationBar.tsx
@@ -39,32 +39,6 @@ export function NavigationBar({ onMobileMenu, title }: 
Props): VNode {
         <span class="navbar-item" style={{ fontSize: 24, fontWeight: 900 }}>
           {title}
         </span>
-        {/* <a
-          href="mailto:contact@anastasis.lu";
-          style={{ alignSelf: "center", padding: "0.5em" }}
-        >
-          Contact us
-        </a>
-        <a
-          href="https://bugs.anastasis.li/";
-          style={{ alignSelf: "center", padding: "0.5em" }}
-        >
-          Report a bug
-        </a> */}
-        {/* <a
-          role="button"
-          class="navbar-burger"
-          aria-label="menu"
-          aria-expanded="false"
-          onClick={(e) => {
-            onMobileMenu();
-            e.stopPropagation();
-          }}
-        >
-          <span aria-hidden="true" />
-          <span aria-hidden="true" />
-          <span aria-hidden="true" />
-        </a> */}
       </div>
 
       <div class="navbar-menu ">
diff --git a/packages/bank/src/pages/home/index.tsx 
b/packages/bank/src/pages/home/index.tsx
index a7cda01..36aea01 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -22,7 +22,7 @@ import { LangSelectorLikePy as LangSelector} from 
"../../components/menu/LangSel
  *
  * - the page needs a "home" button that either redirects to
  *   the profile page (when the user is logged in), or to
- *   the very initial home page. 
+ *   the very initial home page.
  *
  * - histories 'pages' are grouped in UL elements that cause
  *   the rendering to visually separate each UL.  History elements
@@ -509,7 +509,7 @@ async function confirmWithdrawalCall(
     pageStateSetter((prevState) => ({...prevState, hasError: true, error: "No 
withdrawal ID found."}))
     return;
   }
-  
+
   try {
     const { username, password } = backendState;
     let headers = prepareHeaders(username, password);
@@ -580,7 +580,7 @@ async function createTransactionCall(
       `access-api/accounts/${getUsername(backendState)}/transactions`,
       backendState,
       JSON.stringify(req)
-    )   
+    )
   }
   catch (error) {
     console.log("Could not POST transaction request to the bank", error);
@@ -661,7 +661,7 @@ async function createWithdrawalCall(
       hasError: true,
       error: `Withdrawal creation gave response error: ${responseText} 
(${res.status})`}))
       return;
-  } 
+  }
 
   console.log("Withdrawal operation created!");
   let resp = await res.json();
@@ -834,7 +834,7 @@ function BankFrame(Props: any): VNode {
   ];
   let demo_sites = [];
   for (const i in DEMO_SITES) {
-    demo_sites.push(<a href={DEMO_SITES[i][1]}>{DEMO_SITES[i][0]}</a>) 
+    demo_sites.push(<a href={DEMO_SITES[i][1]}>{DEMO_SITES[i][0]}</a>)
   }
   return (
     <Fragment>
@@ -910,11 +910,11 @@ function PaytoWireTransfer(Props: any): VNode {
     () => {
       pageStateSetter((prevState: PageStateType) => ({...prevState, 
tryManualTransfer: false}))
       submitDataSetter(undefined)
-    } 
+    }
   }>{i18n`Go back`}</a>;
   const goBackRawPayto = <a href="#" onClick={
     () => {
-      pageStateSetter((prevState: PageStateType) => ({...prevState, 
isRawPayto: false})) 
+      pageStateSetter((prevState: PageStateType) => ({...prevState, 
isRawPayto: false}))
       rawPaytoInputSetter(undefined)
     }
 
@@ -987,7 +987,7 @@ function PaytoWireTransfer(Props: any): VNode {
                 Props.backendState,
                 pageStateSetter,
                 submitDataSetter // need here only to be cleaned.
-              ); 
+              );
             }}  />
         </div>
         <p><a
@@ -1036,7 +1036,7 @@ function PaytoWireTransfer(Props: any): VNode {
                      transactionData,
                      Props.backendState,
                      pageStateSetter,
-                     rawPaytoInputSetter); 
+                     rawPaytoInputSetter);
                }} />
       </div>
     </div>
@@ -1107,7 +1107,7 @@ function QrCodeSection({talerWithdrawUri, 
abortButton}:{talerWithdrawUri:string,
   const i18n = useTranslator();
   useEffect(() => {
     //Taler Wallet WebExtension is listening to headers response and tab 
updates.
-    //In the SPA there is no header response with the Taler URI so 
+    //In the SPA there is no header response with the Taler URI so
     //this hack manually triggers the tab update after the QR is in the DOM.
     window.location.href = window.location.href.split("#")[0] + "#"
   },[])
@@ -1146,7 +1146,7 @@ function TalerWithdrawalQRCode(Props: any): VNode {
   // waiting for the wallet:
 
   const { data, error, mutate } = 
useSWR(`integration-api/withdrawal-operation/${withdrawalId}`);
-  
+
   if (typeof error !== "undefined") {
     console.log(`withdrawal (${withdrawalId}) was never (correctly) created at 
the bank...`, error);
     pageStateSetter((prevState: PageStateType) => ({
@@ -1318,18 +1318,12 @@ function RegistrationForm(Props: any): VNode {
   // 
https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs
   return (
     <Fragment>
-      <h1 class="nav">{i18n`Register to the euFin bank!`}</h1>
+      <h1 class="nav">{i18n`Registration form`}</h1>
       <aside class="sidebar" id="left"></aside>
-        <article>
-          <a href="#" onClick={() => {
-              pageStateSetter((prevState: PageStateType) =>({...prevState, 
tryRegister: false}))}}>
-            {i18n`Go back`}
-         </a>
-        </article>
         <article>
           <div class="register-form">
-            <h1>{i18n`Registration form`}</h1>
             <form action="javascript:void(0);" class="pure-form">
+              {i18n`Username:`}
               <input
                 type="text"
                 placeholder="username"
@@ -1341,6 +1335,8 @@ function RegistrationForm(Props: any): VNode {
                     ...submitData,
                     username: e.currentTarget.value,
                   }))}} />
+              <br>
+              {i18n`Password:`}
               <input
                 type="password"
                 placeholder="password"
@@ -1352,6 +1348,21 @@ function RegistrationForm(Props: any): VNode {
                     ...submitData,
                     password: e.currentTarget.value,
                   }))}} />
+              <br>
+              {i18n`Phone number:`}
+              <!-- FIXME: add input validation (must start with +, otherwise 
only numbers) -->
+              <input
+                type="phone"
+                placeholder="+CC-123456789"
+                value={submitData && submitData.phone}
+                required
+                autofocus
+                onInput={(e): void => {
+                 submitDataSetter((submitData: any) => ({
+                    ...submitData,
+                    phone: e.currentTarget.value,
+                  }))}} />
+              <br>
               <button
                autofocus
                 class="pure-button pure-button-primary"
@@ -1387,6 +1398,14 @@ function RegistrationForm(Props: any): VNode {
                    * after setting to undefined.
                    */
                   submitDataSetter({username: "", password: 
""})}}>{i18n`Register`}</button>
+              <!-- FIXME: should use a different color -->
+              <button
+               autofocus
+                class="pure-button pure-button-primary"
+                onClick={() => {
+                  pageStateSetter((prevState: PageStateType) =>({...prevState, 
tryRegister: false}))}}>
+                                              {i18n`cancel`}</button>
+
             </form>
           </div>
        </article>
@@ -1852,7 +1871,7 @@ export function BankHome(): VNode {
         <LoginForm
             pageStateSetter={pageStateSetter}
             backendStateSetter={backendStateSetter} />
-       {regMsg()} 
+       {regMsg()}
        {maybeDemoContent(<p><Translate>
          To view transactions of public accounts, please <a href="#"
           onClick={goPublicAccounts(pageStateSetter)}>click here</a>.
diff --git a/packages/bank/src/template.html b/packages/bank/src/template.html
index ccccab1..6d84431 100644
--- a/packages/bank/src/template.html
+++ b/packages/bank/src/template.html
@@ -1,6 +1,6 @@
 <!--
-        This file is part of GNU Taler
- (C) 2021 Taler Systems S.A.
+ This file is part of GNU Taler
+ (C) 2021--2022 Taler Systems S.A.
 
  GNU Taler is free software; you can redistribute it and/or modify it under the
  terms of the GNU General Public License as published by the Free Software
@@ -37,7 +37,7 @@
                                <%= 
compilation.assets[file.substr(htmlWebpackPlugin.files.publicPath.length)].source()
 %>
                        </style>
                <% } %>
-               
+
        </head>
        <body>
 

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