lang selector and fix logout

6 files changed, 166 insertions, 148 deletions

diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index 5c43d2c3e..3d09fcec7 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -18,7 +18,7 @@ import { Amounts, Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringi
 import { notifyError, notifyException, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { StateUpdater, useEffect, useErrorBoundary, useState } from "preact/hooks";
-import { LangSelectorLikePy as LangSelector } from "../components/LangSelector.js";
+import { LangSelector } from "../components/LangSelector.js";
 import { useBackendContext } from "../context/backend.js";
 import { useBusinessAccountDetails } from "../hooks/circuit.js";
 import { bankUiSettings } from "../settings.js";
@@ -65,12 +65,14 @@ export function BankFrame({
   }, [error])
 
   const demo_sites = [];
-  for (const i in bankUiSettings.demoSites)
-    demo_sites.push(
-      <a href={bankUiSettings.demoSites[i][1]}>
-        {bankUiSettings.demoSites[i][0]}
-      </a>,
-    );
+  if (bankUiSettings.demoSites) {
+    for (const i in bankUiSettings.demoSites)
+      demo_sites.push(
+        <a href={bankUiSettings.demoSites[i][1]}>
+          {bankUiSettings.demoSites[i][0]}
+        </a>,
+      );
+  }
 
   return (<div class="min-h-full flex flex-col m-0" style="min-height: 100vh;">
     <div class="bg-indigo-600 pb-32">
@@ -88,14 +90,16 @@ export function BankFrame({
                   />
                 </a>
               </div>
-              <div class="hidden sm:block lg:ml-10 ">
-                <div class="flex space-x-4">
-                  {/* <!-- Current: "bg-indigo-700 text-white", Default: "text-white hover:bg-indigo-500 hover:bg-opacity-75" --> */}
-                  {bankUiSettings.demoSites.map(([name, url]) => {
-                    return <a href={url} class="text-white hover:bg-indigo-500 hover:bg-opacity-75 rounded-md py-2 px-3 text-sm font-medium">{name}</a>
-                  })}
+              {bankUiSettings.demoSites &&
+                <div class="hidden sm:block lg:ml-10 ">
+                  <div class="flex space-x-4">
+                    {/* <!-- Current: "bg-indigo-700 text-white", Default: "text-white hover:bg-indigo-500 hover:bg-opacity-75" --> */}
+                    {bankUiSettings.demoSites.map(([name, url]) => {
+                      return <a href={url} class="text-white hover:bg-indigo-500 hover:bg-opacity-75 rounded-md py-2 px-3 text-sm font-medium">{name}</a>
+                    })}
+                  </div>
                 </div>
-              </div>
+              }
             </div>
 
             <div class="flex">
@@ -166,26 +170,29 @@ export function BankFrame({
                                 <svg class="h-6 w-6 shrink-0 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                   <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                                 </svg>
-                                Log out
-                                {/* <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">5</span> */}
+                                <i18n.Translate>Log out</i18n.Translate>
                               </a>
                             </li>
-                            <li class="sm:hidden">
-                              <div class="text-xs font-semibold leading-6 text-gray-400">
-                                <i18n.Translate>Sites</i18n.Translate>
-                              </div>
-                              <ul role="list" class="-mx-2 mt-2 space-y-1">
-                                {bankUiSettings.demoSites.map(([name, url]) => {
-                                  return <li>
-                                    <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
-                                      <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">&gt;</span>
-                                      <span class="truncate">{name}</span>
-                                    </a>
-                                  </li>
-                                })}
-                              </ul>
+                            <li>
+                              <LangSelector />
                             </li>
-
+                            {bankUiSettings.demoSites &&
+                              <li class="sm:hidden">
+                                <div class="text-xs font-semibold leading-6 text-gray-400">
+                                  <i18n.Translate>Sites</i18n.Translate>
+                                </div>
+                                <ul role="list" class="-mx-2 mt-2 space-y-1">
+                                  {bankUiSettings.demoSites.map(([name, url]) => {
+                                    return <li>
+                                      <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
+                                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">&gt;</span>
+                                        <span class="truncate">{name}</span>
+                                      </a>
+                                    </li>
+                                  })}
+                                </ul>
+                              </li>
+                            }
                             <li>
                               <ul role="list" class="space-y-1">
                                 <li class="mt-2">
@@ -291,63 +298,6 @@ export function BankFrame({
     <Footer />
   </div >
 
-    // <Fragment>
-    //   <header
-    //     class="demobar"
-    //     style="display: flex; flex-direction: row; justify-content: space-between;"
-    //   >
-    //     <a href="#main" class="skip">{i18n.str`Skip to main content`}</a>
-    //     <div style="max-width: 50em; margin-left: 2em; margin-right: 2em;">
-    //       {maybeDemoContent(
-    //         <p>
-    //           {IS_PUBLIC_ACCOUNT_ENABLED ? (
-    //             <i18n.Translate>
-    //               This part of the demo shows how a bank that supports Taler
-    //               directly would work. In addition to using your own bank
-    //               account, you can also see the transaction history of some{" "}
-    //               <a href="/public-accounts">Public Accounts</a>.
-    //             </i18n.Translate>
-    //           ) : (
-    //             <i18n.Translate>
-    //               This part of the demo shows how a bank that supports Taler
-    //               directly would work.
-    //             </i18n.Translate>
-    //           )}
-    //         </p>,
-    //       )}
-    //     </div>
-    //   </header>
-    //   <div style="display:flex; flex-direction: column;" class="navcontainer">
-    //     <nav class="demolist">
-    //       {maybeDemoContent(<Fragment>{demo_sites}</Fragment>)}
-    //       {backend.state.status === "loggedIn" ? (
-    //         <Fragment>
-    //           {goToBusinessAccount && !backend.state.isUserAdministrator ? (
-    //             <MaybeBusinessButton
-    //               account={backend.state.username}
-    //               onClick={goToBusinessAccount}
-    //             />
-    //           ) : undefined}
-
-    // <LangSelector />
-
-    //           <a
-    //             href="#"
-    //             class="pure-button logout-button"
-    // onClick={() => {
-    //   backend.logOut();
-    //   updateSettings("currentWithdrawalOperationId", undefined);
-    // }}
-    //           >{i18n.str`Logout`}</a>
-    //         </Fragment>
-    //       ) : undefined}
-    //     </nav>
-    //   </div>
-    //   <section id="main" class="content">
-    //     <StatusBanner />
-    //     {children}
-    //   </section>
-    // </Fragment>
   );
 }
 
@@ -393,7 +343,7 @@ function StatusBanner(): VNode {
               }
               {n.message.debug &&
                 <div class="mt-2 text-sm text-red-700 font-mono break-all">
-                    {n.message.debug}
+                  {n.message.debug}
                 </div>
               }
             </div>
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx
index 786399d55..14d261622 100644
--- a/packages/demobank-ui/src/pages/LoginForm.tsx
+++ b/packages/demobank-ui/src/pages/LoginForm.tsx
@@ -30,14 +30,32 @@ import { undefinedIfEmpty } from "../utils.js";
  */
 export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {
   const backend = useBackendContext();
-  const currentUser = backend.state.status === "loggedIn" ? backend.state.username : undefined
+  const currentUser = backend.state.status !== "loggedOut" ? backend.state.username : undefined
   const [username, setUsername] = useState<string | undefined>(currentUser);
   const [password, setPassword] = useState<string | undefined>();
   const { i18n } = useTranslationContext();
   const { requestNewLoginToken, refreshLoginToken } = useCredentialsChecker();
 
+
+  /**
+   * Register form may be shown in the initialization step.
+   * If this is an error when usgin the app the registration
+   * callback is not set
+   */
+  const isSessionExpired = !onRegister
+
+  // useEffect(() => {
+  //   if (backend.state.status === "loggedIn") {
+  //     backend.expired()
+  //   }
+  // },[])
   const ref = useRef<HTMLInputElement>(null);
   useEffect(function focusInput() {
+    //FIXME: show invalidate session and allow relogin
+    if (isSessionExpired) {
+      localStorage.removeItem("backend-state");
+      window.location.reload()
+    }
     ref.current?.focus();
   }, []);
   const [busy, setBusy] = useState<Record<string, undefined>>()
@@ -124,13 +142,6 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {
     setBusy(undefined)
   }
 
-  /**
-   * Register form may be shown in the initialization step.
-   * If this is an error when usgin the app the registration
-   * callback is not set
-   */
-  const isSessionExpired = !onRegister
-
   return (
     <div class="flex min-h-full flex-col justify-center">
 
diff --git a/packages/demobank-ui/src/pages/OperationState/views.tsx b/packages/demobank-ui/src/pages/OperationState/views.tsx
index 681a3b94d..93b3694d7 100644
--- a/packages/demobank-ui/src/pages/OperationState/views.tsx
+++ b/packages/demobank-ui/src/pages/OperationState/views.tsx
@@ -14,20 +14,15 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, stringifyPaytoUri, stringifyWithdrawUri } from "@gnu-taler/taler-util";
+import { stringifyWithdrawUri } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { Fragment, h, VNode } from "preact";
-import { Transactions } from "../../components/Transactions/index.js";
-import { PaymentOptions } from "../PaymentOptions.js";
-import { State } from "./index.js";
-import { CopyButton } from "../../components/CopyButton.js";
-import { bankUiSettings } from "../../settings.js";
-import { useBusinessAccountDetails } from "../../hooks/circuit.js";
-import { useSettings } from "../../hooks/settings.js";
+import { Fragment, VNode, h } from "preact";
 import { useEffect, useMemo, useState } from "preact/hooks";
-import { undefinedIfEmpty } from "../../utils.js";
-import { ShowInputErrorLabel } from "../../components/ShowInputErrorLabel.js";
 import { QR } from "../../components/QR.js";
+import { ShowInputErrorLabel } from "../../components/ShowInputErrorLabel.js";
+import { useSettings } from "../../hooks/settings.js";
+import { undefinedIfEmpty } from "../../utils.js";
+import { State } from "./index.js";
 
 export function InvalidPaytoView({ payto, onClose }: State.InvalidPayto) {
   return (
diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx
index a2543f977..2e931a144 100644
--- a/packages/demobank-ui/src/pages/RegistrationPage.tsx
+++ b/packages/demobank-ui/src/pages/RegistrationPage.tsx
@@ -49,6 +49,8 @@ export function RegistrationPage({
 }
 
 export const USERNAME_REGEX = /^[a-z][a-zA-Z0-9-]*$/;
+export const PHONE_REGEX = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/;
+export const EMAIL_REGEX = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
 
 /**
  * Collect and submit registration data.
@@ -58,21 +60,33 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on
   const [username, setUsername] = useState<string | undefined>();
   const [name, setName] = useState<string | undefined>();
   const [password, setPassword] = useState<string | undefined>();
+  const [phone, setPhone] = useState<string | undefined>();
+  const [email, setEmail] = useState<string | undefined>();
   const [repeatPassword, setRepeatPassword] = useState<string | undefined>();
-  const {requestNewLoginToken} = useCredentialsChecker()
+  const { requestNewLoginToken } = useCredentialsChecker()
 
   const { register } = useTestingAPI();
   const { i18n } = useTranslationContext();
 
   const errors = undefinedIfEmpty({
-    name: !name
-      ? i18n.str`Missing name`
-      : undefined,
+    // name: !name
+    //   ? i18n.str`Missing name`
+    //   : undefined,
     username: !username
       ? i18n.str`Missing username`
       : !USERNAME_REGEX.test(username)
         ? i18n.str`Use letters and numbers only, and start with a lowercase letter`
         : undefined,
+    phone: !phone
+      ? undefined
+      : !PHONE_REGEX.test(phone)
+        ? i18n.str`Use letters and numbers only, and start with a lowercase letter`
+        : undefined,
+    email: !email
+      ? undefined
+      : !EMAIL_REGEX.test(email)
+        ? i18n.str`Use letters and numbers only, and start with a lowercase letter`
+        : undefined,
     password: !password ? i18n.str`Missing password` : undefined,
     repeatPassword: !repeatPassword
       ? i18n.str`Missing password`
@@ -82,9 +96,9 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on
   });
 
   async function doRegistrationStep() {
-    if (!username || !password || !name) return;
+    if (!username || !password) return;
     try {
-      await register({ name, username, password });
+      await register({ name: name ?? "", username, password });
       const resp = await requestNewLoginToken(username, password)
       setUsername(undefined);
       if (resp.valid) {
@@ -167,7 +181,7 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on
 
       <div class="flex min-h-full flex-col justify-center">
         <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-          <h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{i18n.str`Sign up!`}</h2>
+          <h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{i18n.str`Registration form`}</h2>
         </div>
 
         <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
@@ -179,34 +193,6 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on
             autoCorrect="off"
           >
             <div>
-              <label for="name" class="block text-sm font-medium leading-6 text-gray-900">
-                <i18n.Translate>Name</i18n.Translate>
-                <b style={{ color: "red" }}> *</b>
-              </label>
-              <div class="mt-2">
-                <input
-                  autoFocus
-                  type="text"
-                  name="name"
-                  id="name"
-                  class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                  value={name ?? ""}
-                  enterkeyhint="next"
-                  placeholder="your name"
-                  autocomplete="name"
-                  required
-                  onInput={(e): void => {
-                    setName(e.currentTarget.value);
-                  }}
-                />
-                <ShowInputErrorLabel
-                  message={errors?.name}
-                  isDirty={name !== undefined}
-                />
-              </div>
-            </div>
-
-            <div>
               <label for="username" class="block text-sm font-medium leading-6 text-gray-900">
                 <i18n.Translate>Username</i18n.Translate>
                 <b style={{ color: "red" }}> *</b>
@@ -237,7 +223,7 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on
             <div>
               <div class="flex items-center justify-between">
                 <label for="password" class="block text-sm font-medium leading-6 text-gray-900">
-                  Password
+                  <i18n.Translate>Password</i18n.Translate>
                   <b style={{ color: "red" }}> *</b>
                 </label>
               </div>
@@ -266,7 +252,7 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on
             <div>
               <div class="flex items-center justify-between">
                 <label for="register-repeat" class="block text-sm font-medium leading-6 text-gray-900">
-                  Repeat assword
+                  <i18n.Translate>Repeat password</i18n.Translate>
                   <b style={{ color: "red" }}> *</b>
                 </label>
               </div>
@@ -292,6 +278,84 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on
               </div>
             </div>
 
+            <div>
+              <label for="name" class="block text-sm font-medium leading-6 text-gray-900">
+                <i18n.Translate>Name</i18n.Translate>
+              </label>
+              <div class="mt-2">
+                <input
+                  autoFocus
+                  type="text"
+                  name="name"
+                  id="name"
+                  class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  value={name ?? ""}
+                  enterkeyhint="next"
+                  placeholder="your name"
+                  autocomplete="name"
+                  required
+                  onInput={(e): void => {
+                    setName(e.currentTarget.value);
+                  }}
+                />
+                {/* <ShowInputErrorLabel
+                  message={errors?.name}
+                  isDirty={name !== undefined}
+                /> */}
+              </div>
+            </div>
+
+            {/* <div>
+              <label for="phone" class="block text-sm font-medium leading-6 text-gray-900">
+                <i18n.Translate>Phone</i18n.Translate>
+              </label>
+              <div class="mt-2">
+                <input
+                  autoFocus
+                  type="text"
+                  name="phone"
+                  id="phone"
+                  class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  value={phone ?? ""}
+                  enterkeyhint="next"
+                  placeholder="your phone"
+                  autocomplete="none"
+                  onInput={(e): void => {
+                    setPhone(e.currentTarget.value);
+                  }}
+                />
+                <ShowInputErrorLabel
+                  message={errors?.phone}
+                  isDirty={phone !== undefined}
+                />
+              </div>
+            </div>
+            <div>
+              <label for="email" class="block text-sm font-medium leading-6 text-gray-900">
+                <i18n.Translate>Email</i18n.Translate>
+              </label>
+              <div class="mt-2">
+                <input
+                  autoFocus
+                  type="text"
+                  name="email"
+                  id="email"
+                  class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  value={email ?? ""}
+                  enterkeyhint="next"
+                  placeholder="your email"
+                  autocomplete="email"
+                  onInput={(e): void => {
+                    setEmail(e.currentTarget.value);
+                  }}
+                />
+                <ShowInputErrorLabel
+                  message={errors?.email}
+                  isDirty={email !== undefined}
+                />
+              </div>
+            </div> */}
+
             <div class="flex w-full justify-between">
               <button type="submit"
                 class="ring-1 ring-gray-600 rounded-md bg-white disabled:bg-gray-300 px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm hover:bg-white-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
diff --git a/packages/demobank-ui/src/pages/admin/Account.tsx b/packages/demobank-ui/src/pages/admin/Account.tsx
index 521bc8eb3..676fc43d0 100644
--- a/packages/demobank-ui/src/pages/admin/Account.tsx
+++ b/packages/demobank-ui/src/pages/admin/Account.tsx
@@ -9,7 +9,7 @@ import { Fragment, h, VNode } from "preact";
 export function AdminAccount({ onRegister }: { onRegister: () => void }): VNode {
   const { i18n } = useTranslationContext();
   const r = useBackendContext();
-  const account = r.state.status === "loggedIn" ? r.state.username : "admin";
+  const account = r.state.status !== "loggedOut" ? r.state.username : "admin";
   const result = useAccountDetails(account);
 
   if (!result.ok) {
diff --git a/packages/demobank-ui/src/pages/business/Home.tsx b/packages/demobank-ui/src/pages/business/Home.tsx
index c9d798082..2945cb65a 100644
--- a/packages/demobank-ui/src/pages/business/Home.tsx
+++ b/packages/demobank-ui/src/pages/business/Home.tsx
@@ -32,7 +32,6 @@ import { Fragment, VNode, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { Cashouts } from "../../components/Cashouts/index.js";
 import { ShowInputErrorLabel } from "../../components/ShowInputErrorLabel.js";
-import { useBackendContext } from "../../context/backend.js";
 import { useAccountDetails } from "../../hooks/access.js";
 import {
   useCashoutDetails,
@@ -46,7 +45,6 @@ import {
   undefinedIfEmpty,
 } from "../../utils.js";
 import { handleNotOkResult } from "../HomePage.js";
-import { LoginForm } from "../LoginForm.js";
 import { Amount } from "../PaytoWireTransferForm.js";
 import { ShowAccountDetails } from "../ShowAccountDetails.js";
 import { UpdateAccountPassword } from "../UpdateAccountPassword.js";