aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--packages/demobank-ui/src/pages/Routing.tsx19
-rw-r--r--packages/demobank-ui/src/pages/home/RegistrationPage.tsx254
-rw-r--r--packages/demobank-ui/src/pages/home/ShowInputErrorLabel.tsx29
-rw-r--r--packages/demobank-ui/src/pages/home/index.tsx248
-rw-r--r--packages/demobank-ui/src/utils.ts6
5 files changed, 309 insertions, 247 deletions
diff --git a/packages/demobank-ui/src/pages/Routing.tsx b/packages/demobank-ui/src/pages/Routing.tsx
index ed9bb2cb3..1ef042297 100644
--- a/packages/demobank-ui/src/pages/Routing.tsx
+++ b/packages/demobank-ui/src/pages/Routing.tsx
@@ -1,9 +1,26 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
import { createHashHistory } from "history";
import { h, VNode } from "preact";
import Router, { route, Route } from "preact-router";
import { useEffect } from "preact/hooks";
-import { AccountPage, RegistrationPage } from "./home/index.js";
+import { AccountPage } from "./home/index.js";
import { PublicHistoriesPage } from "./home/PublicHistoriesPage.js";
+import { RegistrationPage } from "./home/RegistrationPage.js";
export function Routing(): VNode {
const history = createHashHistory();
diff --git a/packages/demobank-ui/src/pages/home/RegistrationPage.tsx b/packages/demobank-ui/src/pages/home/RegistrationPage.tsx
new file mode 100644
index 000000000..9a120cb4f
--- /dev/null
+++ b/packages/demobank-ui/src/pages/home/RegistrationPage.tsx
@@ -0,0 +1,254 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+import { Fragment, h, VNode } from "preact";
+import { route } from "preact-router";
+import { StateUpdater, useState } from "preact/hooks";
+import { PageStateType, usePageContext } from "../../context/pageState.js";
+import { useTranslationContext } from "../../context/translation.js";
+import { BackendStateType, useBackendState } from "../../hooks/backend.js";
+import { bankUiSettings } from "../../settings.js";
+import { getBankBackendBaseUrl, undefinedIfEmpty } from "../../utils.js";
+import { BankFrame } from "./BankFrame.js";
+import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
+
+export function RegistrationPage(): VNode {
+ const { i18n } = useTranslationContext();
+ if (!bankUiSettings.allowRegistrations) {
+ return (
+ <BankFrame>
+ <p>{i18n.str`Currently, the bank is not accepting new registrations!`}</p>
+ </BankFrame>
+ );
+ }
+ return (
+ <BankFrame>
+ <RegistrationForm />
+ </BankFrame>
+ );
+}
+
+/**
+ * Collect and submit registration data.
+ */
+function RegistrationForm(): VNode {
+ const [backendState, backendStateSetter] = useBackendState();
+ const { pageState, pageStateSetter } = usePageContext();
+ const [username, setUsername] = useState<string | undefined>();
+ const [password, setPassword] = useState<string | undefined>();
+ const [repeatPassword, setRepeatPassword] = useState<string | undefined>();
+
+ const { i18n } = useTranslationContext();
+
+ const errors = undefinedIfEmpty({
+ username: !username ? i18n.str`Missing username` : undefined,
+ password: !password ? i18n.str`Missing password` : undefined,
+ repeatPassword: !repeatPassword
+ ? i18n.str`Missing password`
+ : repeatPassword !== password
+ ? i18n.str`Password don't match`
+ : undefined,
+ });
+
+ return (
+ <Fragment>
+ <h1 class="nav">{i18n.str`Welcome to ${bankUiSettings.bankName}!`}</h1>
+ <article>
+ <div class="register-div">
+ <form action="javascript:void(0);" class="register-form" noValidate>
+ <div class="pure-form">
+ <h2>{i18n.str`Please register!`}</h2>
+ <p class="unameFieldLabel registerFieldLabel formFieldLabel">
+ <label for="register-un">{i18n.str`Username:`}</label>
+ </p>
+ <input
+ id="register-un"
+ name="register-un"
+ type="text"
+ placeholder="Username"
+ value={username ?? ""}
+ onInput={(e): void => {
+ setUsername(e.currentTarget.value);
+ }}
+ />
+ <ShowInputErrorLabel
+ message={errors?.username}
+ isDirty={username !== undefined}
+ />
+ <p class="unameFieldLabel registerFieldLabel formFieldLabel">
+ <label for="register-pw">{i18n.str`Password:`}</label>
+ </p>
+ <input
+ type="password"
+ name="register-pw"
+ id="register-pw"
+ placeholder="Password"
+ value={password ?? ""}
+ required
+ onInput={(e): void => {
+ setPassword(e.currentTarget.value);
+ }}
+ />
+ <ShowInputErrorLabel
+ message={errors?.password}
+ isDirty={password !== undefined}
+ />
+ <p class="unameFieldLabel registerFieldLabel formFieldLabel">
+ <label for="register-repeat">{i18n.str`Repeat Password:`}</label>
+ </p>
+ <input
+ type="password"
+ style={{ marginBottom: 8 }}
+ name="register-repeat"
+ id="register-repeat"
+ placeholder="Same password"
+ value={repeatPassword ?? ""}
+ required
+ onInput={(e): void => {
+ setRepeatPassword(e.currentTarget.value);
+ }}
+ />
+ <ShowInputErrorLabel
+ message={errors?.repeatPassword}
+ isDirty={repeatPassword !== undefined}
+ />
+ <br />
+ <button
+ class="pure-button pure-button-primary btn-register"
+ disabled={!!errors}
+ onClick={() => {
+ if (!username || !password) return;
+ registrationCall(
+ { username, password },
+ backendStateSetter, // will store BE URL, if OK.
+ pageStateSetter,
+ );
+
+ setUsername(undefined);
+ setPassword(undefined);
+ setRepeatPassword(undefined);
+ }}
+ >
+ {i18n.str`Register`}
+ </button>
+ {/* FIXME: should use a different color */}
+ <button
+ class="pure-button pure-button-secondary btn-cancel"
+ onClick={() => {
+ setUsername(undefined);
+ setPassword(undefined);
+ setRepeatPassword(undefined);
+ route("/account");
+ }}
+ >
+ {i18n.str`Cancel`}
+ </button>
+ </div>
+ </form>
+ </div>
+ </article>
+ </Fragment>
+ );
+}
+
+/**
+ * This function requests /register.
+ *
+ * This function is responsible to change two states:
+ * the backend's (to store the login credentials) and
+ * the page's (to indicate a successful login or a problem).
+ */
+async function registrationCall(
+ req: { username: string; password: string },
+ /**
+ * FIXME: figure out if the two following
+ * functions can be retrieved somewhat from
+ * the state.
+ */
+ backendStateSetter: StateUpdater<BackendStateType | undefined>,
+ pageStateSetter: StateUpdater<PageStateType>,
+): Promise<void> {
+ let baseUrl = getBankBackendBaseUrl();
+ /**
+ * If the base URL doesn't end with slash and the path
+ * is not empty, then the concatenation made by URL()
+ * drops the last path element.
+ */
+ if (!baseUrl.endsWith("/")) baseUrl += "/";
+
+ const headers = new Headers();
+ headers.append("Content-Type", "application/json");
+ const url = new URL("access-api/testing/register", baseUrl);
+ let res: Response;
+ try {
+ res = await fetch(url.href, {
+ method: "POST",
+ body: JSON.stringify({
+ username: req.username,
+ password: req.password,
+ }),
+ headers,
+ });
+ } catch (error) {
+ console.log(
+ `Could not POST new registration to the bank (${url.href})`,
+ error,
+ );
+ pageStateSetter((prevState) => ({
+ ...prevState,
+
+ error: {
+ title: `Registration failed, please report`,
+ debug: JSON.stringify(error),
+ },
+ }));
+ return;
+ }
+ if (!res.ok) {
+ const response = await res.json();
+ if (res.status === 409) {
+ pageStateSetter((prevState) => ({
+ ...prevState,
+
+ error: {
+ title: `That username is already taken`,
+ debug: JSON.stringify(response),
+ },
+ }));
+ } else {
+ pageStateSetter((prevState) => ({
+ ...prevState,
+
+ error: {
+ title: `New registration gave response error`,
+ debug: JSON.stringify(response),
+ },
+ }));
+ }
+ } else {
+ // registration was ok
+ pageStateSetter((prevState) => ({
+ ...prevState,
+ isLoggedIn: true,
+ }));
+ backendStateSetter((prevState) => ({
+ ...prevState,
+ url: baseUrl,
+ username: req.username,
+ password: req.password,
+ }));
+ route("/account");
+ }
+}
diff --git a/packages/demobank-ui/src/pages/home/ShowInputErrorLabel.tsx b/packages/demobank-ui/src/pages/home/ShowInputErrorLabel.tsx
new file mode 100644
index 000000000..dacffe20a
--- /dev/null
+++ b/packages/demobank-ui/src/pages/home/ShowInputErrorLabel.tsx
@@ -0,0 +1,29 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { Fragment, h, VNode } from "preact";
+
+export function ShowInputErrorLabel({
+ isDirty,
+ message,
+}: {
+ message: string | undefined;
+ isDirty: boolean;
+}): VNode {
+ if (message && isDirty)
+ return <div style={{ marginTop: 8, color: "red" }}>{message}</div>;
+ return <Fragment />;
+}
diff --git a/packages/demobank-ui/src/pages/home/index.tsx b/packages/demobank-ui/src/pages/home/index.tsx
index e05ace2e0..ca5cae571 100644
--- a/packages/demobank-ui/src/pages/home/index.tsx
+++ b/packages/demobank-ui/src/pages/home/index.tsx
@@ -30,10 +30,12 @@ import { QrCodeSection } from "./QrCodeSection.js";
import {
getBankBackendBaseUrl,
getIbanFromPayto,
+ undefinedIfEmpty,
validateAmount,
} from "../../utils.js";
import { BankFrame } from "./BankFrame.js";
import { Transactions } from "./Transactions.js";
+import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
/**
* FIXME:
@@ -553,112 +555,10 @@ async function loginCall(
}));
}
-/**
- * This function requests /register.
- *
- * This function is responsible to change two states:
- * the backend's (to store the login credentials) and
- * the page's (to indicate a successful login or a problem).
- */
-async function registrationCall(
- req: { username: string; password: string },
- /**
- * FIXME: figure out if the two following
- * functions can be retrieved somewhat from
- * the state.
- */
- backendStateSetter: StateUpdater<BackendStateType | undefined>,
- pageStateSetter: StateUpdater<PageStateType>,
-): Promise<void> {
- let baseUrl = getBankBackendBaseUrl();
- /**
- * If the base URL doesn't end with slash and the path
- * is not empty, then the concatenation made by URL()
- * drops the last path element.
- */
- if (!baseUrl.endsWith("/")) baseUrl += "/";
-
- const headers = new Headers();
- headers.append("Content-Type", "application/json");
- const url = new URL("access-api/testing/register", baseUrl);
- let res: Response;
- try {
- res = await fetch(url.href, {
- method: "POST",
- body: JSON.stringify({
- username: req.username,
- password: req.password,
- }),
- headers,
- });
- } catch (error) {
- console.log(
- `Could not POST new registration to the bank (${url.href})`,
- error,
- );
- pageStateSetter((prevState) => ({
- ...prevState,
-
- error: {
- title: `Registration failed, please report`,
- debug: JSON.stringify(error),
- },
- }));
- return;
- }
- if (!res.ok) {
- const response = await res.json();
- if (res.status === 409) {
- pageStateSetter((prevState) => ({
- ...prevState,
-
- error: {
- title: `That username is already taken`,
- debug: JSON.stringify(response),
- },
- }));
- } else {
- pageStateSetter((prevState) => ({
- ...prevState,
-
- error: {
- title: `New registration gave response error`,
- debug: JSON.stringify(response),
- },
- }));
- }
- } else {
- // registration was ok
- pageStateSetter((prevState) => ({
- ...prevState,
- isLoggedIn: true,
- }));
- backendStateSetter((prevState) => ({
- ...prevState,
- url: baseUrl,
- username: req.username,
- password: req.password,
- }));
- route("/account");
- }
-}
-
/**************************
* Functional components. *
*************************/
-function ShowInputErrorLabel({
- isDirty,
- message,
-}: {
- message: string | undefined;
- isDirty: boolean;
-}): VNode {
- if (message && isDirty)
- return <div style={{ marginTop: 8, color: "red" }}>{message}</div>;
- return <Fragment />;
-}
-
function PaytoWireTransfer({
focus,
currency,
@@ -1257,11 +1157,6 @@ function PaymentOptions({ currency }: { currency?: string }): VNode {
);
}
-function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
- return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
- ? obj
- : undefined;
-}
/**
* Collect and submit login data.
*/
@@ -1362,129 +1257,6 @@ function LoginForm(): VNode {
}
/**
- * Collect and submit registration data.
- */
-function RegistrationForm(): VNode {
- const [backendState, backendStateSetter] = useBackendState();
- const { pageState, pageStateSetter } = usePageContext();
- const [username, setUsername] = useState<string | undefined>();
- const [password, setPassword] = useState<string | undefined>();
- const [repeatPassword, setRepeatPassword] = useState<string | undefined>();
-
- const { i18n } = useTranslationContext();
-
- const errors = undefinedIfEmpty({
- username: !username ? i18n.str`Missing username` : undefined,
- password: !password ? i18n.str`Missing password` : undefined,
- repeatPassword: !repeatPassword
- ? i18n.str`Missing password`
- : repeatPassword !== password
- ? i18n.str`Password don't match`
- : undefined,
- });
-
- return (
- <Fragment>
- <h1 class="nav">{i18n.str`Welcome to ${bankUiSettings.bankName}!`}</h1>
- <article>
- <div class="register-div">
- <form action="javascript:void(0);" class="register-form" noValidate>
- <div class="pure-form">
- <h2>{i18n.str`Please register!`}</h2>
- <p class="unameFieldLabel registerFieldLabel formFieldLabel">
- <label for="register-un">{i18n.str`Username:`}</label>
- </p>
- <input
- id="register-un"
- name="register-un"
- type="text"
- placeholder="Username"
- value={username ?? ""}
- onInput={(e): void => {
- setUsername(e.currentTarget.value);
- }}
- />
- <ShowInputErrorLabel
- message={errors?.username}
- isDirty={username !== undefined}
- />
- <p class="unameFieldLabel registerFieldLabel formFieldLabel">
- <label for="register-pw">{i18n.str`Password:`}</label>
- </p>
- <input
- type="password"
- name="register-pw"
- id="register-pw"
- placeholder="Password"
- value={password ?? ""}
- required
- onInput={(e): void => {
- setPassword(e.currentTarget.value);
- }}
- />
- <ShowInputErrorLabel
- message={errors?.password}
- isDirty={username !== undefined}
- />
- <p class="unameFieldLabel registerFieldLabel formFieldLabel">
- <label for="register-repeat">{i18n.str`Repeat Password:`}</label>
- </p>
- <input
- type="password"
- style={{ marginBottom: 8 }}
- name="register-repeat"
- id="register-repeat"
- placeholder="Same password"
- value={repeatPassword ?? ""}
- required
- onInput={(e): void => {
- setRepeatPassword(e.currentTarget.value);
- }}
- />
- <ShowInputErrorLabel
- message={errors?.repeatPassword}
- isDirty={username !== undefined}
- />
- <br />
- <button
- class="pure-button pure-button-primary btn-register"
- disabled={!!errors}
- onClick={() => {
- if (!username || !password) return;
- registrationCall(
- { username, password },
- backendStateSetter, // will store BE URL, if OK.
- pageStateSetter,
- );
-
- setUsername(undefined);
- setPassword(undefined);
- setRepeatPassword(undefined);
- }}
- >
- {i18n.str`Register`}
- </button>
- {/* FIXME: should use a different color */}
- <button
- class="pure-button pure-button-secondary btn-cancel"
- onClick={() => {
- setUsername(undefined);
- setPassword(undefined);
- setRepeatPassword(undefined);
- route("/account");
- }}
- >
- {i18n.str`Cancel`}
- </button>
- </div>
- </form>
- </div>
- </article>
- </Fragment>
- );
-}
-
-/**
* Show only the account's balance. NOTE: the backend state
* is mostly needed to provide the user's credentials to POST
* to the bank.
@@ -1689,22 +1461,6 @@ function SWRWithCredentials(props: any): VNode {
);
}
-export function RegistrationPage(): VNode {
- const { i18n } = useTranslationContext();
- if (!bankUiSettings.allowRegistrations) {
- return (
- <BankFrame>
- <p>{i18n.str`Currently, the bank is not accepting new registrations!`}</p>
- </BankFrame>
- );
- }
- return (
- <BankFrame>
- <RegistrationForm />
- </BankFrame>
- );
-}
-
export function AccountPage(): VNode {
const [backendState, backendStateSetter] = useBackendState();
const { i18n } = useTranslationContext();
diff --git a/packages/demobank-ui/src/utils.ts b/packages/demobank-ui/src/utils.ts
index 8b9e9a89c..b8e0a2acb 100644
--- a/packages/demobank-ui/src/utils.ts
+++ b/packages/demobank-ui/src/utils.ts
@@ -46,3 +46,9 @@ export function getBankBackendBaseUrl(): string {
console.log(`using bank base URL (${maybeRootPath})`);
return maybeRootPath;
}
+
+export function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
+ return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
+ ? obj
+ : undefined;
+}