aboutsummaryrefslogtreecommitdiff
path: root/packages/demobank-ui/src/pages/BankFrame.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/demobank-ui/src/pages/BankFrame.tsx')
-rw-r--r--packages/demobank-ui/src/pages/BankFrame.tsx128
1 files changed, 39 insertions, 89 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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-09-11 17:46:44 +0000