From 6e7928062f5bb93769d2960c77af95d5959a64a4 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Mon, 31 Oct 2022 13:10:33 +0100 Subject: demobank-ui: handle per-deployment customization --- packages/demobank-ui/README.md | 28 +++++++++++ packages/demobank-ui/src/pages/home/index.tsx | 70 ++++++++++++++------------- packages/demobank-ui/static/index.html | 3 ++ 3 files changed, 67 insertions(+), 34 deletions(-) (limited to 'packages/demobank-ui') diff --git a/packages/demobank-ui/README.md b/packages/demobank-ui/README.md index 5c68d127e..7f582c5ba 100644 --- a/packages/demobank-ui/README.md +++ b/packages/demobank-ui/README.md @@ -19,3 +19,31 @@ This can be changed for testing by setting the URL via local storage (via your b ``` localStorage.setItem("bank-base-url", OTHER_URL); ``` + +## Customizing Per-Deployment Settings + +To customize per-deployment settings, make sure that the +`demobank-ui-settings.js` file is served alongside the UI. + +This file is loaded before the SPA and can do customizations by +changing `globalThis.`. + +For example, the following settings would correspond +to the default settings: + +``` +globalThis.talerDemobankSettings = { + allowRegistrations: true, + bankName: "Taler Bank", + // Show explainer text and navbar to other demo sites + showDemoNav: true, + // Names and links for other demo sites to show in the navbar + demoSites: [ + ["Landing", "https://demo.taler.net/"], + ["Bank", "https://bank.demo.taler.net/"], + ["Essay Shop", "https://shop.demo.taler.net/"], + ["Donations", "https://donations.demo.taler.net/"], + ["Survey", "https://donations.demo.taler.net/"], + ], +}; +``` diff --git a/packages/demobank-ui/src/pages/home/index.tsx b/packages/demobank-ui/src/pages/home/index.tsx index 0ee2aa20d..0eb7e389d 100644 --- a/packages/demobank-ui/src/pages/home/index.tsx +++ b/packages/demobank-ui/src/pages/home/index.tsx @@ -33,27 +33,33 @@ import { Translate, useTranslator } from "../../i18n/index.js"; import "../../scss/main.scss"; import { Amounts, parsePaytoUri } from "@gnu-taler/taler-util"; +interface BankUiSettings { + allowRegistrations: boolean; + showDemoNav: boolean; + bankName: string; + demoSites: [string, string][]; +} + /** - * If the first argument does not look like a placeholder, return it. - * Otherwise, return the default. - * - * Useful for placeholder string replacements optionally - * done as part of the build system. + * Global settings for the demobank UI. */ -const replacementOrDefault = (x: string, defaultVal: string): string => { - if (x.startsWith("__")) { - return defaultVal; - } - return x; +const defaultSettings: BankUiSettings = { + allowRegistrations: true, + bankName: "Taler Bank", + showDemoNav: true, + demoSites: [ + ["Landing", "https://demo.taler.net/"], + ["Bank", "https://bank.demo.taler.net/"], + ["Essay Shop", "https://shop.demo.taler.net/"], + ["Donations", "https://donations.demo.taler.net/"], + ["Survey", "https://donations.demo.taler.net/"], + ], }; -const UI_ALLOW_REGISTRATIONS = - replacementOrDefault("__LIBEUFIN_UI_ALLOW_REGISTRATIONS__", "1") == "1"; -const UI_IS_DEMO = replacementOrDefault("__LIBEUFIN_UI_IS_DEMO__", "0") == "1"; -const UI_BANK_NAME = replacementOrDefault( - "__LIBEUFIN_UI_BANK_NAME__", - "Taler Bank", -); +const bankUiSettings: BankUiSettings = + "talerDemobankSettings" in globalThis + ? (globalThis as any).talerDemobankSettings + : defaultSettings; /** * FIXME: @@ -185,7 +191,7 @@ interface PageStateType { ***********/ function maybeDemoContent(content: VNode): VNode { - if (UI_IS_DEMO) { + if (bankUiSettings.showDemoNav) { return content; } return ; @@ -1023,17 +1029,13 @@ function BankFrame(Props: any): VNode { ); - // Prepare demo sites links. - const DEMO_SITES = [ - ["Landing", "__DEMO_SITE_LANDING_URL__"], - ["Bank", "__DEMO_SITE_BANK_URL__"], - ["Essay Shop", "__DEMO_SITE_BLOG_URL__"], - ["Donations", "__DEMO_SITE_DONATIONS_URL__"], - ["Survey", "__DEMO_SITE_SURVEY_URL__"], - ]; const demo_sites = []; - for (const i in DEMO_SITES) - demo_sites.push({DEMO_SITES[i][0]}); + for (const i in bankUiSettings.demoSites) + demo_sites.push( + + {bankUiSettings.demoSites[i][0]} + , + ); return ( @@ -1045,7 +1047,7 @@ function BankFrame(Props: any): VNode {

- {UI_BANK_NAME} + {bankUiSettings.bankName}

{maybeDemoContent( @@ -1754,7 +1756,7 @@ function PaymentOptions(Props: any): VNode { function RegistrationButton(Props: any): VNode { const { backendStateSetter, pageStateSetter } = Props; const i18n = useTranslator(); - if (UI_ALLOW_REGISTRATIONS) + if (bankUiSettings.allowRegistrations) return (