diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/BankFrame.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/BankFrame.tsx | 122 |
1 files changed, 63 insertions, 59 deletions
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index 96ce9c317..c0babd0c9 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -23,8 +23,8 @@ import { Attention } from "../components/Attention.js"; import { CopyButton } from "../components/CopyButton.js"; import { LangSelector } from "../components/LangSelector.js"; import { Loading } from "../components/Loading.js"; -import { useBackendContext } from "../context/backend.js"; import { useAccountDetails } from "../hooks/access.js"; +import { useBackendState } from "../hooks/backend.js"; import { getAllBooleanSettings, getLabelForSetting, useSettings } from "../hooks/settings.js"; import { bankUiSettings } from "../settings.js"; import { RenderAmount } from "./PaytoWireTransferForm.js"; @@ -49,7 +49,7 @@ export function BankFrame({ children: ComponentChildren; }): VNode { const { i18n } = useTranslationContext(); - const backend = useBackendContext(); + const backend = useBackendState(); const [settings, updateSettings] = useSettings(); const [open, setOpen] = useState(false) @@ -80,9 +80,9 @@ export function BankFrame({ return (<div class="min-h-full flex flex-col m-0" style="min-height: 100vh;"> <div class="bg-indigo-600 pb-32"> <nav class=""> - <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8"> + <div class="mx-auto max-w-7xl px-2 "> <div class="relative flex h-16 items-center justify-between "> - <div class="flex items-center px-2 lg:px-0"> + <div class="flex items-center px-2"> <div class="flex-shrink-0 bg-white rounded-lg"> <a href={bankUiSettings.iconLinkURL ?? "#"}> <img @@ -94,7 +94,7 @@ export function BankFrame({ </a> </div> {bankUiSettings.demoSites && - <div class="hidden sm:block lg:ml-10 "> + <div class="hidden sm:block ml-6 "> <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]) => { @@ -161,41 +161,26 @@ export function BankFrame({ <div class="relative mt-6 flex-1 px-4 sm:px-6"> <nav class="flex flex-1 flex-col" aria-label="Sidebar"> <ul role="list" class="flex flex-1 flex-col gap-y-7"> - <li> - <a href="#" - 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" - onClick={() => { - backend.logOut(); - setOpen(false) - updateSettings("currentWithdrawalOperationId", undefined); - }} - > - <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> - <i18n.Translate>Log out</i18n.Translate> - </a> - </li> + {backend.state.status === "loggedIn" ? + <li> + <a href="#" + 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" + onClick={() => { + backend.logOut(); + setOpen(false) + updateSettings("currentWithdrawalOperationId", undefined); + }} + > + <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> + <i18n.Translate>Log out</i18n.Translate> + </a> + </li> + : undefined} <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="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">></span> - <span class="truncate">{name}</span> - </a> - </li> - })} - </ul> - </li> - } <li> <div class="text-xs font-semibold leading-6 text-gray-400"> <i18n.Translate>Preferences</i18n.Translate> @@ -220,6 +205,23 @@ export function BankFrame({ })} </ul> </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="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">></span> + <span class="truncate">{name}</span> + </a> + </li> + })} + </ul> + </li> + } </ul> </nav> </div> @@ -342,28 +344,30 @@ function Footer() { function WelcomeAccount({ account: accountName }: { account: string }): VNode { const { i18n } = useTranslationContext(); - - const result = useAccountDetails(accountName); - if (!result) { - return <Loading /> - } - if (result instanceof TalerError) { - return <div /> - } - - const payto = result.type === "fail" ? undefined : parsePaytoUri(result.body.payto_uri) - const info = !payto || !payto.isKnown ? undefined - : payto.targetType === "iban" ? { account: payto.iban, uri: stringifyPaytoUri(payto) } - : payto.targetType === "x-taler-bank" ? { account: payto.account, uri: stringifyPaytoUri(payto) } - : undefined; - - return <i18n.Translate> - Welcome, <span class="whitespace-nowrap">{accountName}</span> {info !== undefined ? - <small class="whitespace-nowrap"> - (<a href={info.uri}>{info.account}</a> <CopyButton getContent={() => info.uri} />) - </small> - : <Fragment />}! - </i18n.Translate> + return <a href="#/my-profile" class="underline underline-offset-2"> + <i18n.Translate>Welcome, <span class="whitespace-nowrap">{accountName}</span></i18n.Translate> + </a> + // const result = useAccountDetails(accountName); + // if (!result) { + // return <Loading /> + // } + // if (result instanceof TalerError) { + // return <div /> + // } + + // const payto = result.type === "fail" ? undefined : parsePaytoUri(result.body.payto_uri) + // const info = !payto || !payto.isKnown ? undefined + // : payto.targetType === "iban" ? { account: payto.iban, uri: stringifyPaytoUri(payto) } + // : payto.targetType === "x-taler-bank" ? { account: payto.account, uri: stringifyPaytoUri(payto) } + // : undefined; + + // return <i18n.Translate> + // Welcome, <span class="whitespace-nowrap">{accountName}</span> {info !== undefined ? + // <small class="whitespace-nowrap"> + // (<a href={info.uri}>{info.account}</a> <CopyButton getContent={() => info.uri} />) + // </small> + // : <Fragment />}! + // </i18n.Translate> } |