commit 871980eb3274cf53891a703958587ba59852b8ad
parent efb8269f95afd8ab9e93faa0d3f127385a3c4017
Author: Florian Dold <dold@taler.net>
Date: Mon, 24 Aug 2026 02:31:56 +0200
bank web UI: add authentication and account form examples
Diffstat:
6 files changed, 125 insertions(+), 3 deletions(-)
diff --git a/packages/libeufin-bank-webui/src/components/index.examples.ts b/packages/libeufin-bank-webui/src/components/index.examples.ts
@@ -16,3 +16,4 @@
export * as tx from "./Transactions/stories.js";
export * as cashouts from "./Cashouts/stories.js";
+export * as retryableError from "./RetryableError.stories.js";
diff --git a/packages/libeufin-bank-webui/src/pages/Authentication.stories.tsx b/packages/libeufin-bank-webui/src/pages/Authentication.stories.tsx
@@ -0,0 +1,28 @@
+/*
+ This file is part of GNU Taler
+ (C) 2026 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+*/
+
+import { urlPattern } from "@gnu-taler/web-util/browser";
+import * as tests from "@gnu-taler/web-util/testing";
+import { LoginForm } from "./LoginForm.js";
+import { RegistrationPage } from "./RegistrationPage.js";
+
+export default {
+ title: "authentication forms",
+};
+
+export const Login = tests.createExample(LoginForm, {});
+
+export const Registration = tests.createExample(RegistrationPage, {
+ routeCancel: urlPattern(/.*/, () => "#"),
+ onRegistrationSuccesful: () => undefined,
+});
diff --git a/packages/libeufin-bank-webui/src/pages/admin/AccountForm.stories.tsx b/packages/libeufin-bank-webui/src/pages/admin/AccountForm.stories.tsx
@@ -0,0 +1,67 @@
+/*
+ This file is part of GNU Taler
+ (C) 2026 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+*/
+
+import * as tests from "@gnu-taler/web-util/testing";
+import { AccountForm } from "./AccountForm.js";
+
+export default {
+ title: "account form",
+};
+
+export const Create = tests.createExample(AccountForm, {
+ template: undefined,
+ purpose: "create",
+ onChange: () => undefined,
+ children: undefined,
+});
+
+const accountTemplate = {
+ debit_threshold: "ASR:10",
+ is_taler_exchange: false,
+ is_public: true,
+ name: "Alice Example",
+ payto_uri: "payto://iban/DE89370400440532013000",
+ cashout_payto_uri: "payto://iban/DE02120300000000202051",
+ contact_data: {
+ email: "alice@example.com",
+ phone: "+41790000000",
+ },
+ tan_channels: ["email", "sms"],
+} as any;
+
+export const Update = tests.createExample(AccountForm, {
+ template: accountTemplate,
+ username: "alice",
+ purpose: "update",
+ onChange: () => undefined,
+ children: undefined,
+});
+
+export const Show = tests.createExample(AccountForm, {
+ template: accountTemplate,
+ username: "alice",
+ purpose: "show",
+ onChange: undefined,
+ children: undefined,
+});
+
+export const AdministratorCreate = tests.createExample(
+ AccountForm,
+ {
+ template: undefined,
+ purpose: "create",
+ onChange: () => undefined,
+ children: undefined,
+ },
+ { loggedIn: true, administrator: true },
+);
diff --git a/packages/libeufin-bank-webui/src/pages/index.stories.tsx b/packages/libeufin-bank-webui/src/pages/index.stories.tsx
@@ -14,9 +14,10 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-export * as qr from "./QrCodeSection.stories.js";
export * as po from "./PaymentOptions.stories.js";
export * as ptf from "./PaytoWireTransferForm.stories.js";
export * as frame from "./BankFrame.stories.js";
export * as account from "./AccountPage/stories.js";
export * as operation from "./OperationState/stories.js";
+export * as authentication from "./Authentication.stories.js";
+export * as accountForm from "./admin/AccountForm.stories.js";
diff --git a/packages/libeufin-bank-webui/src/stories.test.ts b/packages/libeufin-bank-webui/src/stories.test.ts
@@ -21,6 +21,8 @@
import { describe, it } from "node:test";
import assert from "node:assert";
import {
+ AbsoluteTime,
+ AccessToken,
AmountString,
setupI18n,
TalerBankConversionHttpClient,
@@ -29,15 +31,21 @@ import {
} from "@gnu-taler/taler-util";
import {
BankApiProviderTesting,
+ buildStorageKey,
NotificationProvider,
TalerWalletIntegrationTestingProvider,
parseGroupImport,
+ useLocalStorage,
} from "@gnu-taler/web-util/browser";
import * as tests from "@gnu-taler/web-util/testing";
import * as components from "./components/index.examples.js";
import * as pages from "./pages/index.stories.js";
import { ComponentChildren, h as create, VNode } from "preact";
+import {
+ codecForSessionState,
+ defaultState as defaultSessionState,
+} from "./hooks/session.js";
// import { BankCoreApiProviderTesting } from "./context/config.js";
setupI18n("en", { en: {} });
@@ -70,9 +78,28 @@ describe("All the examples:", () => {
function DefaultTestingContext({
children,
+ loggedIn = false,
+ administrator = false,
}: {
children: ComponentChildren;
+ loggedIn?: boolean;
+ administrator?: boolean;
}): VNode {
+ const { update: updateSession } = useLocalStorage(
+ buildStorageKey("bank-session", codecForSessionState()),
+ defaultSessionState,
+ );
+ updateSession(
+ loggedIn
+ ? {
+ status: "loggedIn",
+ username: "alice",
+ token: "story-token" as AccessToken,
+ expiration: AbsoluteTime.never(),
+ isUserAdministrator: administrator,
+ }
+ : defaultSessionState,
+ );
const cfg: TalerCorebankApi.TalerCorebankConfigResponse = {
name: "libeufin-bank",
allow_deletions: true,
diff --git a/packages/libeufin-bank-webui/src/stories.tsx b/packages/libeufin-bank-webui/src/stories.tsx
@@ -25,8 +25,6 @@ import * as components from "./components/index.examples.js";
import { renderStories } from "@gnu-taler/web-util/browser";
-const TALER_SCREEN_ID = 101;
-
function main(): void {
renderStories(
{ pages, components },
