From 1e4f21cc76345f3881ea8e5ea0e94d27d26da609 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Tue, 26 Sep 2023 15:18:43 -0300
Subject: lang selector and fix logout

---
 packages/demobank-ui/src/pages/BankFrame.tsx | 128 ++++++++-------------------
 1 file changed, 39 insertions(+), 89 deletions(-)

(limited to 'packages/demobank-ui/src/pages/BankFrame.tsx')

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>
-- 
cgit v1.2.3