From e4a2937f2a02cc2090ba1a07d8b9e07d36355258 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 7 Dec 2022 11:36:20 -0300 Subject: [PATCH] no-fix: moving out registration page --- packages/demobank-ui/src/pages/Routing.tsx | 19 +- .../src/pages/home/RegistrationPage.tsx | 254 ++++++++++++++++++ .../src/pages/home/ShowInputErrorLabel.tsx | 29 ++ packages/demobank-ui/src/pages/home/index.tsx | 248 +---------------- packages/demobank-ui/src/utils.ts | 6 + 5 files changed, 309 insertions(+), 247 deletions(-) create mode 100644 packages/demobank-ui/src/pages/home/RegistrationPage.tsx create mode 100644 packages/demobank-ui/src/pages/home/ShowInputErrorLabel.tsx 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 + */ + 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 + */ +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 ( + +

{i18n.str`Currently, the bank is not accepting new registrations!`}

+ + ); + } + return ( + + + + ); +} + +/** + * Collect and submit registration data. + */ +function RegistrationForm(): VNode { + const [backendState, backendStateSetter] = useBackendState(); + const { pageState, pageStateSetter } = usePageContext(); + const [username, setUsername] = useState(); + const [password, setPassword] = useState(); + const [repeatPassword, setRepeatPassword] = useState(); + + 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 ( + +

{i18n.str`Welcome to ${bankUiSettings.bankName}!`}

+
+
+
+
+

{i18n.str`Please register!`}

+

+ +

+ { + setUsername(e.currentTarget.value); + }} + /> + +

+ +

+ { + setPassword(e.currentTarget.value); + }} + /> + +

+ +

+ { + setRepeatPassword(e.currentTarget.value); + }} + /> + +
+ + {/* FIXME: should use a different color */} + +
+
+
+
+ + ); +} + +/** + * 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, + pageStateSetter: StateUpdater, +): Promise { + 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 + */ + +import { Fragment, h, VNode } from "preact"; + +export function ShowInputErrorLabel({ + isDirty, + message, +}: { + message: string | undefined; + isDirty: boolean; +}): VNode { + if (message && isDirty) + return
{message}
; + return ; +} 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, - pageStateSetter: StateUpdater, -): Promise { - 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
{message}
; - return ; -} - function PaytoWireTransfer({ focus, currency, @@ -1257,11 +1157,6 @@ function PaymentOptions({ currency }: { currency?: string }): VNode { ); } -function undefinedIfEmpty(obj: T): T | undefined { - return Object.keys(obj).some((k) => (obj as any)[k] !== undefined) - ? obj - : undefined; -} /** * Collect and submit login data. */ @@ -1361,129 +1256,6 @@ function LoginForm(): VNode { ); } -/** - * Collect and submit registration data. - */ -function RegistrationForm(): VNode { - const [backendState, backendStateSetter] = useBackendState(); - const { pageState, pageStateSetter } = usePageContext(); - const [username, setUsername] = useState(); - const [password, setPassword] = useState(); - const [repeatPassword, setRepeatPassword] = useState(); - - 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 ( - -

{i18n.str`Welcome to ${bankUiSettings.bankName}!`}

-
-
-
-
-

{i18n.str`Please register!`}

-

- -

- { - setUsername(e.currentTarget.value); - }} - /> - -

- -

- { - setPassword(e.currentTarget.value); - }} - /> - -

- -

- { - setRepeatPassword(e.currentTarget.value); - }} - /> - -
- - {/* FIXME: should use a different color */} - -
-
-
-
- - ); -} - /** * Show only the account's balance. NOTE: the backend state * is mostly needed to provide the user's credentials to POST @@ -1689,22 +1461,6 @@ function SWRWithCredentials(props: any): VNode { ); } -export function RegistrationPage(): VNode { - const { i18n } = useTranslationContext(); - if (!bankUiSettings.allowRegistrations) { - return ( - -

{i18n.str`Currently, the bank is not accepting new registrations!`}

- - ); - } - return ( - - - - ); -} - 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(obj: T): T | undefined { + return Object.keys(obj).some((k) => (obj as any)[k] !== undefined) + ? obj + : undefined; +}