share header and footer in web utils

8 files changed, 276 insertions, 4 deletions

diff --git a/packages/web-util/src/assets/logo-2021.svg b/packages/web-util/src/assets/logo-2021.svg
new file mode 100644
index 000000000..8c5ff3e5b
--- /dev/null
+++ b/packages/web-util/src/assets/logo-2021.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 90">
+  <g fill="#0042b3" fill-rule="evenodd" stroke-width=".3">
+    <path d="M86.7 1.1c15.6 0 29 9.4 36 23.2h-5.9A35.1 35.1 0 0086.7 6.5C67 6.5 51 23.6 51 44.7c0 10.4 3.8 19.7 10 26.6a31.4 31.4 0 01-4.2 3A45.2 45.2 0 0146 44.7c0-24 18.2-43.6 40.7-43.6zm35.8 64.3a40.4 40.4 0 01-39 22.8c3-1.5 6-3.5 8.6-5.7a35.6 35.6 0 0024.6-17.1z" />
+    <path d="M64.2 1.1l3.1.1c-3 1.6-5.9 3.5-8.5 5.8a37.5 37.5 0 00-30.2 37.7c0 14.3 7.3 26.7 18 33.3a29.6 29.6 0 01-8.5.2c-9-8-14.6-20-14.6-33.5 0-24 18.2-43.6 40.7-43.6zm5.4 81.4a35.6 35.6 0 0024.6-17.1h5.9a40.4 40.4 0 01-39 22.8c3-1.5 5.9-3.5 8.5-5.7zm24.8-58.2a37 37 0 00-12.6-12.8 29.6 29.6 0 018.5-.2c4 3.6 7.4 8 9.9 13z" />
+    <path d="M41.8 1.1c1 0 2 0 3.1.2-3 1.5-5.9 3.4-8.5 5.6A37.5 37.5 0 006.1 44.7c0 21.1 16 38.3 35.7 38.3 12.6 0 23.6-7 30-17.6h5.8a40.4 40.4 0 01-35.8 23C19.3 88.4 1 68.8 1 44.7c0-24 18.2-43.6 40.7-43.6zm30.1 23.2a38.1 38.1 0 00-4.5-6.1c1.3-1.2 2.7-2.2 4.3-3 2.3 2.7 4.4 5.8 6 9.1z" />
+  </g>
+  <path d="M76.1 34.4h9.2v-5H61.9v5H71v26h5.1zM92.6 52.9h13.7l3 7.4h5.3l-12.7-31.2h-4.7L84.5 60.3h5.2zm11.8-4.9h-9.9l5-12.4zM123.8 29.4h-4.6v31h20.6v-5h-16zM166.5 29.4H145v31h21.6v-5H150v-8.3h14.5v-4.9h-14.5v-8h16.4zM191.2 39.5c0 1.6-.5 2.8-1.6 3.8s-2.6 1.4-4.4 1.4h-7.4V34.3h7.4c1.9 0 3.4.4 4.4 1.3 1 .9 1.6 2.2 1.6 3.9zm6 20.8l-7.7-11.7c1-.3 1.9-.7 2.7-1.3a8.8 8.8 0 003.6-4.6c.4-1 .5-2.2.5-3.5 0-1.5-.2-2.9-.7-4.1a8.4 8.4 0 00-2.1-3.1c-1-.8-2-1.5-3.4-2-1.3-.4-2.8-.6-4.5-.6h-12.9v31h5V49.4h6.5l7 10.8z" />
+</svg>
\ No newline at end of file
diff --git a/packages/web-util/src/assets/logo-white.svg b/packages/web-util/src/assets/logo-white.svg
new file mode 100644
index 000000000..cb1f023c5
--- /dev/null
+++ b/packages/web-util/src/assets/logo-white.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="670"
+   height="300"
+   viewBox="0 0 201 90"
+   version="1.1"
+   id="svg8">
+  <g
+     id="logo">
+    <g
+       id="circles"
+       style="fill:#FFF;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.327943">
+      <path
+         d="m 86.662153,1.1211936 c 15.589697,0 29.129227,9.4011664 35.961027,23.2018054 h -5.81736 C 110.4866,13.623304 99.349002,6.5180852 86.662153,6.5180852 c -19.690571,0 -35.652876,17.1120008 -35.652876,38.2205688 0,10.331797 3.825597,19.704678 10.03957,26.582945 -1.342357,1.120912 -2.771532,2.127905 -4.275488,3.006754 C 50.071485,66.553412 45.974857,56.15992 45.974857,44.738654 c 0,-24.089211 18.216325,-43.6174604 40.687296,-43.6174604 z M 122.51416,65.375898 c -6.86645,13.680134 -20.34561,22.980218 -35.852007,22.980218 -1.052702,0 -2.096093,-0.04291 -3.128683,-0.127026 3.052192,-1.561167 5.913582,-3.480387 8.538307,-5.707305 10.320963,-1.684389 19.185983,-8.113638 24.601813,-17.145887 z"
+         id="path2350" />
+      <path
+         d="m 64.212372,1.1211936 c 1.052607,0 2.095998,0.042919 3.128684,0.1270583 C 64.288864,2.8094199 61.427378,4.728606 58.802653,6.9555572 41.679542,9.7498571 28.559494,25.601563 28.559494,44.738654 c 0,14.264563 7.29059,26.702023 18.093843,33.268925 -1.593656,0.26719 -3.226966,0.406948 -4.890748,0.406948 -1.239545,0 -2.46151,-0.07952 -3.663522,-0.229364 C 29.191129,70.184015 23.525076,58.171633 23.525076,44.738654 23.525076,20.649443 41.7414,1.1211936 64.212372,1.1211936 Z M 69.62209,82.521785 C 79.943207,80.837396 88.808164,74.407841 94.224059,65.375422 h 5.840511 c -6.866354,13.680305 -20.345548,22.980694 -35.852198,22.980694 -1.052703,0 -2.095999,-0.04291 -3.128684,-0.127026 3.052002,-1.561371 5.913836,-3.480218 8.538402,-5.707305 z M 94.355885,24.322999 c -3.13939,-5.314721 -7.467551,-9.74275 -12.584511,-12.853269 1.593656,-0.26719 3.226904,-0.406948 4.890779,-0.406948 1.239451,0 2.461512,0.07952 3.663524,0.229364 4.016018,3.607242 7.373195,8.030111 9.849053,13.030853 z"
+         id="path2352" />
+      <path
+         d="m 41.762589,1.1211936 c 1.064296,0 2.118804,0.044379 3.162607,0.1302161 -3.046523,1.558961 -5.903162,3.4745139 -8.52358,5.6968133 C 19.254624,9.7205882 6.1097128,25.583465 6.1097128,44.738654 c 0,21.108568 15.9624012,38.22057 35.6528762,38.22057 12.599746,0 23.672446,-7.007056 30.013748,-17.583802 h 5.838515 C 70.748498,79.055727 57.26924,88.356116 41.762589,88.356116 c -22.470907,0 -40.6871998,-19.52825 -40.6871998,-43.617462 0,-24.089211 18.2162928,-43.6174604 40.6871998,-43.6174604 z M 71.905375,24.322999 c -1.31192,-2.220567 -2.830984,-4.287049 -4.528877,-6.166508 1.342452,-1.120945 2.771374,-2.128381 4.275139,-3.00723 2.372984,2.753011 4.418875,5.834636 6.072489,9.173738 z"
+         id="path2354" />
+    </g>
+    <g
+       id="letters"
+       style="fill:#FFF">
+      <path
+         d="m 76.135411,34.409066 h 9.161042 V 29.36588 H 61.857537 v 5.043186 h 9.161137 v 25.92317 h 5.116737 z"
+         id="path2346" />
+      <path
+         d="m 92.647571,52.856334 h 13.659009 l 2.93009,7.476072 h 5.36461 L 101.89122,29.144903 H 97.187186 L 84.477089,60.332406 h 5.199533 z m 11.802109,-4.822276 h -9.944771 l 4.951718,-12.386462 z"
+         id="path2362" />
+      <path
+         d="m 123.80641,29.366084 h -4.58038 v 30.966322 h 20.54728 v -4.910253 c -5.32227,0 -10.64463,0 -15.9669,0 z"
+         id="path2356" />
+      <path
+         d="m 166.4722,29.366084 h -21.37564 v 30.966322 h 21.58203 v -4.910253 h -16.54771 v -8.27275 h 14.48439 V 42.23925 h -14.48439 v -7.962811 h 16.34132 z"
+         id="path2360" />
+      <path
+         d="m 191.19035,39.474593 c 0,1.59947 -0.53646,2.87535 -1.61628,3.818883 -1.07281,0.95124 -2.52409,1.422837 -4.34678,1.422837 h -7.44851 V 34.276439 h 7.4073 c 1.9051,0 3.38376,0.435027 4.42939,1.312178 1.05226,0.870258 1.57488,2.167734 1.57488,3.885976 z m 6.06602,20.857813 -7.79911,-11.723191 c 1.01771,-0.294794 1.94631,-0.714813 2.78553,-1.260566 0.83885,-0.545619 1.56122,-1.209263 2.16629,-1.990627 0.60541,-0.781738 1.07981,-1.681096 1.42369,-2.698345 0.34378,-1.017553 0.51561,-2.175238 0.51561,-3.472883 0,-1.50409 -0.24743,-2.867948 -0.74267,-4.092048 -0.49515,-1.223794 -1.20344,-2.256186 -2.12499,-3.096734 -0.92173,-0.840446 -2.04957,-1.489252 -3.38375,-1.946452 -1.33447,-0.457267 -2.82692,-0.685476 -4.4774,-0.685476 h -12.87512 v 30.966322 h 5.03433 V 49.538522 h 6.37569 l 7.11829,10.793884 z"
+         id="path2358" />
+    </g>
+  </g>
+</svg>
diff --git a/packages/web-util/src/components/Footer.tsx b/packages/web-util/src/components/Footer.tsx
new file mode 100644
index 000000000..8fdf6b8f0
--- /dev/null
+++ b/packages/web-util/src/components/Footer.tsx
@@ -0,0 +1,44 @@
+import { useTranslationContext } from "../index.browser.js";
+import { h } from "preact";
+
+export function Footer({ testingUrl, VERSION, GIT_HASH }: { VERSION?: string, GIT_HASH?: string, testingUrl?: string }) {
+  const { i18n } = useTranslationContext()
+  const versionText = VERSION
+    ? GIT_HASH
+      ? <a href={`https://git.taler.net/wallet-core.git/tree/?id=${GIT_HASH}`} target="_blank" rel="noreferrer noopener">
+        Version {VERSION} ({GIT_HASH.substring(0, 8)})
+      </a>
+      : VERSION
+    : "";
+  return (
+    <footer class="bottom-4 my-4 mx-8 bg-slate-200">
+      <div>
+        <p class="text-xs leading-5 text-gray-400">
+          <i18n.Translate>
+            Learn more about <a target="_blank" rel="noreferrer noopener" class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net">GNU Taler</a>
+          </i18n.Translate>
+        </p>
+      </div>
+      <div style="flex-grow:1" />
+      <p class="text-xs leading-5 text-gray-400">
+        Copyright &copy; 2014&mdash;2023 Taler Systems SA. {versionText}{" "}
+      </p>
+      {testingUrl &&
+
+        <p class="text-xs leading-5 text-gray-300">
+          Testing with {testingUrl}{" "}
+          <a
+            href=""
+            onClick={(e) => {
+              e.preventDefault();
+              localStorage.removeItem("bank-base-url");
+              window.location.reload();
+            }}
+          >
+            stop testing
+          </a>
+        </p>
+      }
+    </footer>
+  );
+}
diff --git a/packages/web-util/src/components/GlobalNotificationBanner.tsx b/packages/web-util/src/components/GlobalNotificationBanner.tsx
new file mode 100644
index 000000000..c8049acc3
--- /dev/null
+++ b/packages/web-util/src/components/GlobalNotificationBanner.tsx
@@ -0,0 +1,28 @@
+import { Fragment, VNode, h } from "preact"
+import { Attention, useNotifications } from "../index.browser.js"
+
+export function GlobalNotificationsBanner(): VNode {
+  const notifs = useNotifications()
+  if (notifs.length === 0) return <Fragment />
+  return <div class="fixed z-20 w-full p-4"> {
+    notifs.map(n => {
+      switch (n.message.type) {
+        case "error":
+          return <Attention type="danger" title={n.message.title} onClose={() => {
+            n.remove()
+          }}>
+            {n.message.description &&
+              <div class="mt-2 text-sm text-red-700">
+                {n.message.description}
+              </div>
+            }
+            {/* <MaybeShowDebugInfo info={n.message.debug} /> */}
+          </Attention>
+        case "info":
+          return <Attention type="success" title={n.message.title} onClose={() => {
+            n.remove();
+          }} />
+      }
+    })}
+  </div>
+}
diff --git a/packages/web-util/src/components/Header.tsx b/packages/web-util/src/components/Header.tsx
new file mode 100644
index 000000000..bde0688dc
--- /dev/null
+++ b/packages/web-util/src/components/Header.tsx
@@ -0,0 +1,143 @@
+import { useState } from "preact/hooks";
+import { LangSelector, useTranslationContext } from "../index.browser.js";
+import { ComponentChildren, Fragment, VNode, h } from "preact";
+import logo from "../assets/logo-2021.svg";
+
+export function Header({ title, iconLinkURL, sites, supportedLangs, onLogout, children }: { title: string, iconLinkURL: string, children?: ComponentChildren, onLogout: (() => void) | undefined, sites: [string, string][], supportedLangs: string[] }): VNode {
+  const { i18n } = useTranslationContext();
+  const [open, setOpen] = useState(false)
+  return <Fragment>
+    <header class="bg-indigo-600 w-full mx-auto px-2 border-b border-opacity-25 border-indigo-400">
+      <div class="flex flex-row h-16 items-center ">
+        <div class="flex px-2 justify-start">
+          <div class="flex-shrink-0 bg-white rounded-lg">
+            <a href={iconLinkURL ?? "#"}>
+              <img
+                class="h-8 w-auto"
+                src={logo}
+                alt="GNU Taler"
+                style={{ height: "1.5rem", margin: ".5rem" }}
+              />
+            </a>
+          </div>
+          <span class="flex items-center text-white text-lg font-bold ml-4">
+            {title}
+          </span>
+        </div>
+        <div class="block flex-1 ml-6 ">
+          {sites.length !== 0 &&
+            <div class="flex flex-1 space-x-4">
+              {/* <!-- Current: "bg-indigo-700 text-white", Default: "text-white hover:bg-indigo-500 hover:bg-opacity-75" --> */}
+              {sites.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 class="flex justify-end">
+          <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-indigo-600 p-1 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600" aria-controls="mobile-menu" aria-expanded="false"
+            onClick={(e) => {
+              setOpen(!open)
+            }}>
+            <span class="absolute -inset-0.5"></span>
+            <span class="sr-only"><i18n.Translate>Open settings</i18n.Translate></span>
+            <svg class="block h-10 w-10" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </header>
+
+    {open &&
+      <div class="relative z-10" aria-labelledby="slide-over-title" role="dialog" aria-modal="true"
+        onClick={() => {
+          setOpen(false)
+        }}>
+        <div class="fixed inset-0"></div>
+
+        <div class="fixed inset-0 overflow-hidden">
+          <div class="absolute inset-0 overflow-hidden">
+            <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
+              <div class="pointer-events-auto w-screen max-w-md" >
+                <div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl" onClick={(e) => {
+                  //do not trigger close if clicking inside the sidebar
+                  e.stopPropagation();
+                }}>
+                  <div class="px-4 sm:px-6" >
+                    <div class="flex items-start justify-between" >
+                      <h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title">
+                        <i18n.Translate>Menu</i18n.Translate>
+                      </h2>
+                      <div class="ml-3 flex h-7 items-center">
+                        <button type="button" class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                          onClick={(e) => {
+                            setOpen(false)
+                          }}
+
+                        >
+                          <span class="absolute -inset-2.5"></span>
+                          <span class="sr-only">
+                            <i18n.Translate>Close panel</i18n.Translate>
+                          </span>
+                          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <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">
+                        {onLogout ?
+                          <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={() => {
+                                onLogout();
+                                setOpen(false)
+                              }}
+                            >
+                              <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 supportedLangs={supportedLangs} />
+                        </li>
+                        {/* CHILDREN */}
+                        {children}
+                        {/* /CHILDREN */}
+                        {sites.length !== 0 &&
+                          <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">
+                              {sites.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>
+                        }
+                      </ul>
+                    </nav>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  </Fragment>
+}
diff --git a/packages/web-util/src/components/Loading.tsx b/packages/web-util/src/components/Loading.tsx
index b567e9056..c5dcd90c1 100644
--- a/packages/web-util/src/components/Loading.tsx
+++ b/packages/web-util/src/components/Loading.tsx
@@ -33,9 +33,9 @@ export function Loading(): VNode {
   );
 }
 
-export function Spinner(): VNode {
+function Spinner(): VNode {
   return (
-    <div class="lds-ring" style={{margin:"auto"}}>
+    <div class="lds-ring" style={{ margin: "auto" }}>
       <div />
       <div />
       <div />
diff --git a/packages/web-util/src/components/ShowLocalNotification.tsx b/packages/web-util/src/components/LocalNotificationBanner.tsx
index cb947e536..ab46703cb 100644
--- a/packages/web-util/src/components/ShowLocalNotification.tsx
+++ b/packages/web-util/src/components/LocalNotificationBanner.tsx
@@ -3,7 +3,7 @@ import { Attention } from "./Attention.js";
 import { Notification } from "../index.browser.js";
 // import { useSettings } from "../hooks/settings.js";
 
-export function ShowLocalNotification({ notification }: { notification?: Notification }): VNode {
+export function LocalNotificationBanner({ notification }: { notification?: Notification }): VNode {
   if (!notification) return <Fragment />
   switch (notification.message.type) {
     case "error":
diff --git a/packages/web-util/src/components/index.ts b/packages/web-util/src/components/index.ts
index 8344d4a7a..d94502b48 100644
--- a/packages/web-util/src/components/index.ts
+++ b/packages/web-util/src/components/index.ts
@@ -4,5 +4,8 @@ export * from "./CopyButton.js";
 export * from "./ErrorLoading.js";
 export * from "./LangSelector.js";
 export * from "./Loading.js";
+export * from "./Header.js";
+export * from "./Footer.js";
 export * from "./ShowInputErrorLabel.js";
-export * from "./ShowLocalNotification.js";
+export * from "./LocalNotificationBanner.js";
+export * from "./GlobalNotificationBanner.js";