From 9592f9b537f6e399423e7222e852387445b25e25 Mon Sep 17 00:00:00 2001
From: Christian Grothoff <christian@grothoff.org>
Date: Sun, 16 Oct 2022 23:16:45 +0200
Subject: -clean up login/register forms

---
 packages/bank/src/pages/home/index.tsx | 90 +++++++++++++++++-----------------
 packages/bank/src/scss/bank.scss       | 41 +++++++++++++---
 2 files changed, 77 insertions(+), 54 deletions(-)

(limited to 'packages')

diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
index 4e7582d..42ea47e 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -107,11 +107,12 @@ interface PageStateType {
   tryRegister: boolean;
   showPublicHistories: boolean;
   hasError: boolean;
+  hasInfo: boolean;
   withdrawalInProgress: boolean;
   error?: string;
+  info?: string;
   talerWithdrawUri?: string;
   withdrawalOutcome?: string;
-  transferOutcome?: string;
   /**
    * Not strictly a presentational value, could
    * be moved in a future "withdrawal state" object.
@@ -396,6 +397,7 @@ function usePageState(
     tryRegister: false,
     showPublicHistories: false,
     hasError: false,
+    hasInfo: false,
     withdrawalInProgress: false,
   }
 ): [PageStateType, StateUpdater<PageStateType>] {
@@ -620,7 +622,8 @@ async function createTransactionCall(
   console.log('Wire transfer created!');
   pageStateSetter((prevState) => ({
     ...prevState,
-    transferOutcome: 'Wire transfer created!'
+    hasInfo: true,
+    info: 'Wire transfer created!'
   }))
   // Only at this point the input data can
   // be discarded.
@@ -806,17 +809,26 @@ function ErrorBanner(Props: any): VNode | null {
   const [pageState, pageStateSetter] = Props.pageState;
   const i18n = useTranslator();
   if (!pageState.hasError) return null;
-  return (
+
+  const rval = (
     <p class="informational informational-fail">{pageState.error}
-      &nbsp;&nbsp;<a href="#" onClick={() => {
-        pageStateSetter((prevState: PageStateType) => {
-          delete prevState.error; // delete error message
-          return { ...prevState, hasError: false } // delete error state
-        })
-      }}>
-        {i18n`Clear`}
-      </a>
     </p>);
+  delete pageState.error;
+  pageState.hasError = false;
+  return rval;
+}
+
+function StatusBanner(Props: any): VNode | null {
+  const [pageState, pageStateSetter] = Props.pageState;
+  const i18n = useTranslator();
+  if (!pageState.hasInfo) return null;
+
+  const rval = (
+    <p class="informational">{pageState.error}
+    </p>);
+  delete pageState.info_msg;
+  pageState.hasInfo = false;
+  return rval;
 }
 
 function BankFrame(Props: any): VNode {
@@ -833,12 +845,13 @@ function BankFrame(Props: any): VNode {
           const {
             talerWithdrawUri,
             withdrawalOutcome,
-            transferOutcome,
             withdrawalId, ...rest } = prevState;
           return {
             ...rest,
             isLoggedIn: false,
             withdrawalInProgress: false,
+            hasInfo: false,
+            hasError: false,
             isRawPayto: false
           };
         });
@@ -895,8 +908,11 @@ function BankFrame(Props: any): VNode {
       </div>
       <section id="main" class="content">
         <ErrorBanner pageState={[pageState, pageStateSetter]} />
+        <StatusBanner pageState={[pageState, pageStateSetter]} />
         {pageState.isLoggedIn ? logOut : null}
         {Props.children}
+      </section>
+      <section id="footer" class="footer">
         <div class="footer">
                 <hr />
                 <div>
@@ -1243,21 +1259,24 @@ function WalletWithdraw(Props: any): VNode {
           name="tform">
           <p>
           {i18n`Amount to withdraw:`}&nbsp;
+          <div class="dropdown">
           <input
             type="text"
             id="reserve-amount"
             name="withdraw-amount"
-            list="amountList"
             class="amount" autofocus
             onChange={(e): void => {
               submitAmount = e.currentTarget.value;
             }} />
-          <datalist id="amountList">
+          <select onChange={(e): void => {
+              // @ts-ignore
+              this.previousElementSibling.value=this.value; this.previousElementSibling.focus()
+            }}>
             <option value="5.00">5.00</option>
             <option value="10.00">10.00</option>
             <option value="15.00">15.00</option>
             <option value="20.00">20.00</option>
-          </datalist>
+          </select>
           &nbsp;
           <input
             type="text"
@@ -1265,8 +1284,7 @@ function WalletWithdraw(Props: any): VNode {
             class="currency-indicator"
             size={currency.length}
             tabIndex={-1} value={currency} />
-          </p>
-          <p>
+          </div>
           <input
              id="select-exchange"
              class="pure-button pure-button-primary"
@@ -1358,8 +1376,8 @@ function LoginForm(Props: any): VNode {
   const { backendStateSetter, pageStateSetter } = Props;
   const [submitData, submitDataSetter] = useCredentialsRequestType();
   const i18n = useTranslator();
-  // FIXME: try removing the outer Fragment.
-  return (<form action="javascript:void(0);" class="login-form">
+  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">{i18n`Username:`}</p>
@@ -1413,7 +1431,8 @@ function LoginForm(Props: any): VNode {
       </button>
       {RegistrationButton(Props)}
     </div>
-  </form>);
+  </form>
+  </div>);
 }
 
 /**
@@ -1432,10 +1451,10 @@ function RegistrationForm(Props: any): VNode {
         i18n`Welcome to ${UI_BANK_NAME}!`
       }
       </h1>
-      <aside class="sidebar" id="left" />
       <article>
-        <div class="register-form">
-          <form action="javascript:void(0);" class="pure-form">
+        <div class="register-div">
+          <form action="javascript:void(0);" class="register-form">
+          <div class="pure-form">
             <h2>{i18n`Please register!`}</h2>
             <p class="unameFieldLabel registerFieldLabel formFieldLabel">{i18n`Username:`}</p>
             <input
@@ -1528,6 +1547,7 @@ function RegistrationForm(Props: any): VNode {
               }}>
               {i18n`Cancel`}
             </button>
+          </div>
           </form>
         </div>
       </article>
@@ -1611,7 +1631,6 @@ function Account(Props: any): VNode {
   const {
     withdrawalInProgress,
     withdrawalOutcome,
-    transferOutcome,
     withdrawalId,
     isLoggedIn,
     talerWithdrawUri } = pageState;
@@ -1641,7 +1660,7 @@ function Account(Props: any): VNode {
         error: i18n`Username or account label '${accountLabel}' not found.  Won't login.`
       }));
 
-      /**
+    /**
      * 404 should never stick to the cache, because they
      * taint successful future registrations.  How?  After
      * registering, the user gets navigated to this page,
@@ -1679,27 +1698,6 @@ function Account(Props: any): VNode {
   }
   if (!data) return <p>Retrieving the profile page...</p>;
 
-  /**
-   * Wire transfer reached a final state: show it.  Note:
-   * such state is usually successful, as errors should
-   * have been reported earlier.
-   */
-  if (transferOutcome)
-    return <BankFrame>
-      <p>{transferOutcome}</p>
-      <button onClick={() => {
-        pageStateSetter((prevState: PageStateType) => {
-          const {
-            transferOutcome,
-            ...rest } = prevState;
-          return { ...rest };
-        })
-      }}>
-        {i18n`Close wire transfer`}
-      </button>
-    </BankFrame>
-
-
   /**
    * Withdrawal reached a final state: show it.
    */
diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss
index 6fee0f1..f6d32d6 100644
--- a/packages/bank/src/scss/bank.scss
+++ b/packages/bank/src/scss/bank.scss
@@ -15,6 +15,12 @@ div.pages-list {
   margin-top: 15px;
 }
 
+.login-div,
+.register-div {
+    display: block;
+    text-align: center;
+}
+
 a.page-number {
   color: blue;
 }
@@ -42,6 +48,8 @@ input[type="number"]::-webkit-inner-spin-button {
 .logout {
     float: right;
     border: 20px;
+    margin-right: 15px;
+    margin-top: 15px;
 }
 
 .tab button {
@@ -70,7 +78,9 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 input[type="number"] {
-  -moz-appearance: textfield;
+    -moz-appearance: textfield;
+    color: white;
+    text: black;
 }
 
 #transfer-fields {
@@ -121,14 +131,15 @@ input[type="number"] {
 
 .register-form > .pure-form,
 .login-form > .pure-form {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%,-50%);
     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;
     }
@@ -161,7 +172,21 @@ html {
     color: #ffffff;
 }
 
-.footer {
-    position: fixed;
-    bottom: 0;
+.dropdown {
+  position: relative;
+  width: 200px;
+}
+
+.dropdown select {
+  width: 100%;
+}
+
+.dropdown > * {
+  box-sizing: border-box;
+  height: 1.5em;
+}
+
+.dropdown input {
+  position: absolute;
+  width: calc(100% - 20px);
 }
-- 
cgit v1.2.3