major style hacking by Nora

2 files changed, 86 insertions, 24 deletions

diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
index 5c8f20d..cf2de8e 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -12,9 +12,9 @@ import talerLogo from '../../assets/logo-white.svg';
 import { LangSelectorLikePy as LangSelector } from '../../components/menu/LangSelector';
 
 // Uncomment to allow test runs:
-// const __LIBEUFIN_UI_ALLOW_REGISTRATIONS__ = 1;
-// const __LIBEUFIN_UI_IS_DEMO__ = 0;
-// const __LIBEUFIN_UI_BANK_NAME__ = 0;
+const __LIBEUFIN_UI_ALLOW_REGISTRATIONS__ = window.__LIBEUFIN_UI_ALLOW_REGISTRATIONS ?? 1;
+const __LIBEUFIN_UI_IS_DEMO__ = window.__LIBEUFIN_UI_IS_DEMO__ ?? 0;
+const __LIBEUFIN_UI_BANK_NAME__ = window.__LIBEUFIN_UI_BANK_NAME__ ?? 'Taler Bank';
 
 /**
  * FIXME:
@@ -895,12 +895,14 @@ function BankFrame(Props: any): VNode {
         <ErrorBanner pageState={[pageState, pageStateSetter]} />
         {pageState.isLoggedIn ? logOut : null}
         {Props.children}
-        <hr />
-        <div>
-          <p>You can learn more about GNU Taler on our <a href="https://taler.net">main website</a>.</p>
+        <div class="footer">
+                <hr />
+                <div>
+                <p>You can learn more about GNU Taler on our <a href="https://taler.net">main website</a>.</p>
+                </div>
+                <div style="flex-grow:1" />
+                <p>Copyright &copy; 2014&mdash;2022 Taler Systems SA</p>
         </div>
-        <div style="flex-grow:1" />
-        <p>Copyright &copy; 2014&mdash;2022 Taler Systems SA</p>
       </section>
     </Fragment>);
 }
@@ -1284,23 +1286,26 @@ function LoginForm(Props: any): VNode {
   const i18n = useTranslator();
   // FIXME: try removing the outer Fragment.
   return (<form action="javascript:void(0);" class="login-form">
-    <h2>{i18n`Please login!`}</h2>
     <div class="pure-form">
+      <h2>{i18n`Please login!`}</h2>
+      <p class="unameFieldLabel loginFieldLabel formFieldLabel">{i18n`Username:`}</p>
       <input
         type="text"
         value={submitData && submitData.username}
-        placeholder="username"
+        placeholder="Username"
         required
         onInput={(e): void => {
           submitDataSetter((submitData: any) => ({
             ...submitData,
             username: e.currentTarget.value,
           }))
-        }} />
+        }}
+      />
+      <p class="passFieldLabel loginFieldLabel formFieldLabel">{i18n`Password:`}</p>
       <input
         type="password"
         value={submitData && submitData.password}
-        placeholder="password"
+        placeholder="Password"
         required
         onInput={(e): void => {
           submitDataSetter((submitData: any) => ({
@@ -1308,6 +1313,7 @@ function LoginForm(Props: any): VNode {
             password: e.currentTarget.value,
           }))
         }} />
+      <br />
       <button
         autofocus
         type="submit"
@@ -1330,6 +1336,14 @@ function LoginForm(Props: any): VNode {
           );
           submitDataSetter(undefined);
         }}>{i18n`Login`}</button>
+        <button
+              autofocus
+              class="pure-button pure-button-secondary btn-cancel"
+              onClick={() => {
+                pageStateSetter((prevState: PageStateType) => ({ ...prevState, tryRegister: true }))
+              }}>
+              {i18n`Register`}
+            </button>
     </div>
   </form>);
 }
@@ -1350,10 +1364,10 @@ function RegistrationForm(Props: any): VNode {
       <article>
         <div class="register-form">
           <form action="javascript:void(0);" class="pure-form">
-            {i18n`Username:`}
+            <p class="unameFieldLabel registerFieldLabel formFieldLabel">{i18n`Username:`}</p>
             <input
               type="text"
-              placeholder="username"
+              placeholder="Username"
               value={submitData && submitData.username}
               required
               autofocus
@@ -1364,10 +1378,10 @@ function RegistrationForm(Props: any): VNode {
                 }))
               }} />
             <br />
-            {i18n`Password:`}
+            <p class="unameFieldLabel registerFieldLabel formFieldLabel">{i18n`Password:`}</p>
             <input
               type="password"
-              placeholder="password"
+              placeholder="Password"
               value={submitData && submitData.password}
               required
               autofocus
@@ -1396,7 +1410,7 @@ function RegistrationForm(Props: any): VNode {
               */}
             <button
               autofocus
-              class="pure-button pure-button-primary"
+              class="pure-button pure-button-primary btn-register"
               onClick={() => {
                 console.log('maybe submitting the registration..');
                 console.log(submitData);
@@ -1435,11 +1449,11 @@ function RegistrationForm(Props: any): VNode {
             {/* FIXME: should use a different color */}
             <button
               autofocus
-              class="pure-button pure-button-primary"
+              class="pure-button pure-button-secondary btn-cancel"
               onClick={() => {
                 pageStateSetter((prevState: PageStateType) => ({ ...prevState, tryRegister: false }))
               }}>
-              {i18n`cancel`}
+              {i18n`Cancel`}
             </button>
           </form>
         </div>
@@ -1670,7 +1684,7 @@ function Account(Props: any): VNode {
 
   return (<BankFrame>
     <div>
-      <h1 class="nav">
+      <h1 class="nav welcome-text">
         <Translate>Welcome, {accountLabel} ({getIbanFromPayto(data.paytoUri)})!</Translate>
       </h1>
     </div>
@@ -1851,9 +1865,7 @@ export function BankHome(): VNode {
     </SWRWithoutCredentials>);
 
   if (pageState.tryRegister) {
-    // @ts-expect-error Global variable unknown to ts
     console.log('allow registrations?', __LIBEUFIN_UI_ALLOW_REGISTRATIONS__)
-    // @ts-expect-error Global variable unknown to ts
     if (__LIBEUFIN_UI_ALLOW_REGISTRATIONS__)
       return (
         <PageContext.Provider value={[pageState, pageStateSetter]}>
@@ -1898,7 +1910,6 @@ export function BankHome(): VNode {
    * mentioning the currency right at the home page (as instead the Python
    * bank did.)  FIXME: currency needed at startup too.  */
   const regMsg = function () {
-    // @ts-expect-error Global variable unknown to ts
     if (__LIBEUFIN_UI_ALLOW_REGISTRATIONS__)
       return (<Fragment>
         <p><Translate>If you are a new customer please&nbsp;
@@ -1917,7 +1928,7 @@ export function BankHome(): VNode {
   return (
     <PageContext.Provider value={[pageState, pageStateSetter]}>
       <BankFrame>
-        <h1 class="nav">{i18n`Welcome to the bank!`}</h1>
+        <h1 class="nav">{i18n`Welcome to ${__LIBEUFIN_UI_BANK_NAME__}!`}</h1>
         <LoginForm
           pageStateSetter={pageStateSetter}
           backendStateSetter={backendStateSetter} />
diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss
index 329bd1e..b8c0bc2 100644
--- a/packages/bank/src/scss/bank.scss
+++ b/packages/bank/src/scss/bank.scss
@@ -1,3 +1,7 @@
+.navcontainer:not(.default-navcontainer) {
+    margin-bottom: 0 !important;
+}
+
 .abort-button {
   margin-left: 2px;
   border: 2px solid rgb(0, 120, 231);
@@ -78,3 +82,50 @@ input[type="number"] {
   display: block;
   width: fit-content;
 }
+
+.register-form > .pure-form,
+.login-form > .pure-form {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    background: #4a4a4a;
+    color: #ffffff;
+    padding: 16px 16px;
+    border-radius: 8px;
+    .formFieldLabel {
+        margin: 2px 2px;
+    }
+    input[type="text"],
+    input[type="password"] {
+        border: none;
+        border-radius: 4px;
+        background: #6a6a6a;
+        color: #fefefe;
+        box-shadow: none;
+    }
+    input[placeholder="Password"][type="password"] {
+        margin-bottom: 8px;
+    }
+    .btn-register,
+    .btn-login {
+        float: left;
+    }
+    .btn-cancel {
+        float: right;
+    }
+    h2 {
+        margin-top: 0;
+        margin-bottom: 10px;
+    }
+}
+
+html {
+    background: #2a2a2a;
+    color: #ffffff;
+}
+
+.footer {
+    position: fixed;
+    bottom: 0;
+}