diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components')
4 files changed, 6 insertions, 251 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/exception/login.tsx b/packages/merchant-backoffice-ui/src/components/exception/login.tsx deleted file mode 100644 index 4fa440fc7..000000000 --- a/packages/merchant-backoffice-ui/src/components/exception/login.tsx +++ /dev/null @@ -1,244 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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/> - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { ComponentChildren, h, VNode } from "preact"; -import { useState } from "preact/hooks"; -import { useBackendContext } from "../../context/backend.js"; -import { useInstanceContext } from "../../context/instance.js"; -import { useCredentialsChecker } from "../../hooks/backend.js"; -import { Notification } from "../../utils/types.js"; - -interface Props { - withMessage?: Notification; - onConfirm: (backend: string, token?: string) => void; -} - -function getTokenValuePart(t: string): string { - if (!t) return t; - const match = /secret-token:(.*)/.exec(t); - if (!match || !match[1]) return ""; - return match[1]; -} - -function normalizeToken(r: string): string { - return `secret-token:${r}`; -} - -function cleanUp(s: string): string { - let result = s; - if (result.indexOf("webui/") !== -1) { - result = result.substring(0, result.indexOf("webui/")); - } - return result; -} - -export function LoginModal({ onConfirm, withMessage }: Props): VNode { - const { url: backendUrl, token: baseToken } = useBackendContext(); - const { admin, token: instanceToken, id } = useInstanceContext(); - const testLogin = useCredentialsChecker(); - const currentToken = getTokenValuePart( - (!admin ? baseToken : instanceToken) ?? "", - ); - const [token, setToken] = useState(currentToken); - - const [url, setURL] = useState(cleanUp(backendUrl)); - const { i18n } = useTranslationContext(); - - if (admin && id !== "default") { - //admin trying to access another instance - return (<div class="columns is-centered" style={{ margin: "auto" }}> - <div class="column is-two-thirds "> - <div class="modal-card" style={{ width: "100%", margin: 0 }}> - <header - class="modal-card-head" - style={{ border: "1px solid", borderBottom: 0 }} - > - <p class="modal-card-title">{i18n.str`Login required`}</p> - </header> - <section - class="modal-card-body" - style={{ border: "1px solid", borderTop: 0, borderBottom: 0 }} - > - <p> - <i18n.Translate>Need the access token for the instance.</i18n.Translate> - </p> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label"> - <i18n.Translate>Access Token</i18n.Translate> - </label> - </div> - <div class="field-body"> - <div class="field"> - <p class="control is-expanded"> - <input - class="input" - type="password" - placeholder={"current access token"} - name="token" - onKeyPress={(e) => - e.keyCode === 13 - ? onConfirm(url, normalizeToken(token)) - : null - } - value={token} - onInput={(e): void => setToken(e?.currentTarget.value)} - /> - </p> - </div> - </div> - </div> - </section> - <footer - class="modal-card-foot " - style={{ - justifyContent: "flex-end", - border: "1px solid", - borderTop: 0, - }} - > - <AsyncButton - onClick={async () => { - const secretToken = normalizeToken(token); - const { valid, cause } = await testLogin(`${url}/instances/${id}`, secretToken); - if (valid) { - onConfirm(url, secretToken); - } else { - onConfirm(url); - } - }} - > - <i18n.Translate>Confirm</i18n.Translate> - </AsyncButton> - </footer> - </div> - </div> - </div>) - } - - return ( - <div class="columns is-centered" style={{ margin: "auto" }}> - <div class="column is-two-thirds "> - <div class="modal-card" style={{ width: "100%", margin: 0 }}> - <header - class="modal-card-head" - style={{ border: "1px solid", borderBottom: 0 }} - > - <p class="modal-card-title">{i18n.str`Login required`}</p> - </header> - <section - class="modal-card-body" - style={{ border: "1px solid", borderTop: 0, borderBottom: 0 }} - > - <i18n.Translate>Please enter your access token.</i18n.Translate> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">URL</label> - </div> - <div class="field-body"> - <div class="field"> - <p class="control is-expanded"> - <input - class="input" - type="text" - placeholder="set new url" - name="id" - value={url} - onKeyPress={(e) => - e.keyCode === 13 - ? onConfirm(url, normalizeToken(token)) - : null - } - onInput={(e): void => setURL(e?.currentTarget.value)} - /> - </p> - </div> - </div> - </div> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label"> - <i18n.Translate>Access Token</i18n.Translate> - </label> - </div> - <div class="field-body"> - <div class="field"> - <p class="control is-expanded"> - <input - class="input" - type="password" - placeholder={"current access token"} - name="token" - onKeyPress={(e) => - e.keyCode === 13 - ? onConfirm(url, normalizeToken(token)) - : null - } - value={token} - onInput={(e): void => setToken(e?.currentTarget.value)} - /> - </p> - </div> - </div> - </div> - </section> - <footer - class="modal-card-foot " - style={{ - justifyContent: "flex-end", - border: "1px solid", - borderTop: 0, - }} - > - <AsyncButton - onClick={async () => { - const secretToken = normalizeToken(token); - const { valid, cause } = await testLogin(url, secretToken); - if (valid) { - onConfirm(url, secretToken); - } else { - onConfirm(url); - } - }} - > - <i18n.Translate>Confirm</i18n.Translate> - </AsyncButton> - </footer> - </div> - </div> - </div> - ); -} - -function AsyncButton({ onClick, children }: { onClick: () => Promise<void>, children: ComponentChildren }): VNode { - const [running, setRunning] = useState(false) - return <button class="button is-info" disabled={running} onClick={() => { - setRunning(true) - onClick().then(() => { - setRunning(false) - }).catch(() => { - setRunning(false) - }) - }}> - {children} - </button> -} diff --git a/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx b/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx index b75dc83b3..6f5881fc0 100644 --- a/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx +++ b/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx @@ -40,13 +40,13 @@ export function DefaultInstanceFormFields({ showId: boolean; }): VNode { const { i18n } = useTranslationContext(); - const backend = useBackendContext(); + const { url: backendURL } = useBackendContext() return ( <Fragment> {showId && ( <InputWithAddon<Entity> name="id" - addonBefore={`${backend.url}/instances/`} + addonBefore={`${backendURL}/instances/`} readonly={readonlyId} label={i18n.str`Identifier`} tooltip={i18n.str`Name of the instance in URLs. The 'default' instance is special in that it is used to administer other instances.`} diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx index be2f8dde5..3d5f20c85 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx @@ -25,7 +25,6 @@ import { useBackendContext } from "../../context/backend.js"; import { useConfigContext } from "../../context/config.js"; import { useInstanceKYCDetails } from "../../hooks/instance.js"; import { LangSelector } from "./LangSelector.js"; -import { useCredentialsChecker } from "../../hooks/backend.js"; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined; @@ -50,7 +49,7 @@ export function Sidebar({ isPasswordOk }: Props): VNode { const config = useConfigContext(); - const backend = useBackendContext(); + const { url: backendURL } = useBackendContext() const { i18n } = useTranslationContext(); const kycStatus = useInstanceKYCDetails(); const needKYC = kycStatus.ok && kycStatus.data.type === "redirect"; @@ -230,7 +229,7 @@ export function Sidebar({ <i class="mdi mdi-web" /> </span> <span class="menu-item-label"> - {new URL(backend.url).hostname} + {new URL(backendURL).hostname} </span> </div> </li> diff --git a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx index 726a94f5e..8bebbd298 100644 --- a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx +++ b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx @@ -114,7 +114,7 @@ export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) { onSubscribe(hasErrors ? undefined : submit); }, [submit, hasErrors]); - const backend = useBackendContext(); + const { url: backendURL } = useBackendContext() const { i18n } = useTranslationContext(); return ( @@ -128,7 +128,7 @@ export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) { {alreadyExist ? undefined : ( <InputWithAddon<Entity> name="product_id" - addonBefore={`${backend.url}/product/`} + addonBefore={`${backendURL}/product/`} label={i18n.str`ID`} tooltip={i18n.str`product identification to use in URLs (for internal use only)`} /> |