diff options
Diffstat (limited to 'packages/auditor-backoffice-ui/src/components/menu')
4 files changed, 685 insertions, 0 deletions
diff --git a/packages/auditor-backoffice-ui/src/components/menu/LangSelector.tsx b/packages/auditor-backoffice-ui/src/components/menu/LangSelector.tsx new file mode 100644 index 000000000..41fe1374a --- /dev/null +++ b/packages/auditor-backoffice-ui/src/components/menu/LangSelector.tsx @@ -0,0 +1,92 @@ +/* + 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 { h, VNode } from "preact"; +import { useState } from "preact/hooks"; +import langIcon from "../../assets/icons/languageicon.svg"; +import { strings as messages } from "../../i18n/strings.js"; + +type LangsNames = { + [P in keyof typeof messages]: string; +}; + +const names: LangsNames = { + es: "Español [es]", + en: "English [en]", + fr: "Français [fr]", + de: "Deutsch [de]", + sv: "Svenska [sv]", + it: "Italiano [it]", +}; + +function getLangName(s: keyof LangsNames | string) { + if (names[s]) return names[s]; + return s; +} + +export function LangSelector(): VNode { + const [updatingLang, setUpdatingLang] = useState(false); + const { lang, changeLanguage } = useTranslationContext(); + + return ( + <div class="dropdown is-active "> + <div class="dropdown-trigger"> + <button + class="button has-tooltip-left" + data-tooltip="change language selection" + aria-haspopup="true" + aria-controls="dropdown-menu" + onClick={() => setUpdatingLang(!updatingLang)} + > + <div class="icon is-small is-left"> + <img src={langIcon} /> + </div> + <span>{getLangName(lang)}</span> + <div class="icon is-right"> + <i class="mdi mdi-chevron-down" /> + </div> + </button> + </div> + {updatingLang && ( + <div class="dropdown-menu" id="dropdown-menu" role="menu"> + <div class="dropdown-content"> + {Object.keys(messages) + .filter((l) => l !== lang) + .map((l) => ( + <a + key={l} + class="dropdown-item" + value={l} + onClick={() => { + changeLanguage(l); + setUpdatingLang(false); + }} + > + {getLangName(l)} + </a> + ))} + </div> + </div> + )} + </div> + ); +} diff --git a/packages/auditor-backoffice-ui/src/components/menu/NavigationBar.tsx b/packages/auditor-backoffice-ui/src/components/menu/NavigationBar.tsx new file mode 100644 index 000000000..9f1b33893 --- /dev/null +++ b/packages/auditor-backoffice-ui/src/components/menu/NavigationBar.tsx @@ -0,0 +1,72 @@ +/* + 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 { h, VNode } from "preact"; +import logo from "../../assets/logo-2021.svg"; + +interface Props { + onMobileMenu: () => void; + title: string; +} + +export function NavigationBar({ onMobileMenu, title }: Props): VNode { + return ( + <nav + class="navbar is-fixed-top" + role="navigation" + aria-label="main navigation" + > + <div class="navbar-brand"> + <span class="navbar-item" style={{ fontSize: 24, fontWeight: 900 }}> + {title} + </span> + + <a + role="button" + class="navbar-burger" + aria-label="menu" + aria-expanded="false" + onClick={(e) => { + onMobileMenu(); + e.stopPropagation(); + }} + > + <span aria-hidden="true" /> + <span aria-hidden="true" /> + <span aria-hidden="true" /> + </a> + </div> + + <div class="navbar-menu "> + <a + class="navbar-start is-justify-content-center is-flex-grow-1" + href="https://taler.net" + > + <img src={logo} style={{ height: 35, margin: 10 }} /> + </a> + <div class="navbar-end"> + <div class="navbar-item" style={{ paddingTop: 4, paddingBottom: 4 }}> + </div> + </div> + </div> + </nav> + ); +} diff --git a/packages/auditor-backoffice-ui/src/components/menu/SideBar.tsx b/packages/auditor-backoffice-ui/src/components/menu/SideBar.tsx new file mode 100644 index 000000000..cfc00148e --- /dev/null +++ b/packages/auditor-backoffice-ui/src/components/menu/SideBar.tsx @@ -0,0 +1,284 @@ +/* + 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 { Fragment, h, VNode } from "preact"; +import { useBackendContext } from "../../context/backend.js"; +import { useConfigContext } from "../../context/config.js"; +import { useInstanceKYCDetails } from "../../hooks/instance.js"; +import { LangSelector } from "./LangSelector.js"; + +const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; +const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined; + +interface Props { + onLogout: () => void; + onShowSettings: () => void; + mobile?: boolean; + instance: string; + admin?: boolean; + mimic?: boolean; + isPasswordOk: boolean; +} + +export function Sidebar({ + mobile, + instance, + onShowSettings, + onLogout, + admin, + mimic, + isPasswordOk +}: Props): VNode { + const config = useConfigContext(); + const { url: backendURL } = useBackendContext() + const { i18n } = useTranslationContext(); + const kycStatus = useInstanceKYCDetails(); + const needKYC = kycStatus.ok && kycStatus.data.type === "redirect"; + + return ( + <aside class="aside is-placed-left is-expanded" style={{ overflowY: "scroll" }}> + {mobile && ( + <div + class="footer" + onClick={(e) => { + return e.stopImmediatePropagation(); + }} + > + <LangSelector /> + </div> + )} + <div class="aside-tools"> + <div class="aside-tools-label"> + <div> + <b>Taler</b> Backoffice + </div> + <div + class="is-size-7 has-text-right" + style={{ lineHeight: 0, marginTop: -10 }} + > + {VERSION} ({config.version}) + </div> + </div> + </div> + <div class="menu is-menu-main"> + {instance ? ( + <Fragment> + <ul class="menu-list"> + <li> + <a href={"/orders"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-cash-register" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>Orders</i18n.Translate> + </span> + </a> + </li> + <li> + <a href={"/inventory"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-shopping" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>Inventory</i18n.Translate> + </span> + </a> + </li> + <li> + <a href={"/transfers"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-arrow-left-right" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>Transfers</i18n.Translate> + </span> + </a> + </li> + <li> + <a href={"/templates"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-newspaper" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>Templates</i18n.Translate> + </span> + </a> + </li> + {needKYC && ( + <li> + <a href={"/kyc"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-account-check" /> + </span> + <span class="menu-item-label">KYC Status</span> + </a> + </li> + )} + </ul> + <p class="menu-label"> + <i18n.Translate>Configuration</i18n.Translate> + </p> + <ul class="menu-list"> + <li> + <a href={"/bank"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-bank" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>Bank account</i18n.Translate> + </span> + </a> + </li> + <li> + <a href={"/otp-devices"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-lock" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>OTP Devices</i18n.Translate> + </span> + </a> + </li> + <li> + <a href={"/reserves"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-cash" /> + </span> + <span class="menu-item-label">Reserves</span> + </a> + </li> + <li> + <a href={"/webhooks"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-newspaper" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>Webhooks</i18n.Translate> + </span> + </a> + </li> + <li> + <a href={"/settings"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-square-edit-outline" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>Settings</i18n.Translate> + </span> + </a> + </li> + <li> + <a href={"/token"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-security" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>Access token</i18n.Translate> + </span> + </a> + </li> + </ul> + </Fragment> + ) : undefined} + <p class="menu-label"> + <i18n.Translate>Connection</i18n.Translate> + </p> + <ul class="menu-list"> + <li> + <a class="has-icon is-state-info is-hoverable" + onClick={(): void => onShowSettings()} + > + <span class="icon"> + <i class="mdi mdi-newspaper" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>Interface</i18n.Translate> + </span> + </a> + </li> + <li> + <div> + <span style={{ width: "3rem" }} class="icon"> + <i class="mdi mdi-web" /> + </span> + <span class="menu-item-label"> + {new URL(backendURL).hostname} + </span> + </div> + </li> + <li> + <div> + <span style={{ width: "3rem" }} class="icon"> + ID + </span> + <span class="menu-item-label"> + {!instance ? "default" : instance} + </span> + </div> + </li> + {admin && !mimic && ( + <Fragment> + <p class="menu-label"> + <i18n.Translate>Instances</i18n.Translate> + </p> + <li> + <a href={"/instance/new"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-plus" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>New</i18n.Translate> + </span> + </a> + </li> + <li> + <a href={"/instances"} class="has-icon"> + <span class="icon"> + <i class="mdi mdi-format-list-bulleted" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>List</i18n.Translate> + </span> + </a> + </li> + </Fragment> + )} + {isPasswordOk ? + <li> + <a + class="has-icon is-state-info is-hoverable" + onClick={(): void => onLogout()} + > + <span class="icon"> + <i class="mdi mdi-logout default" /> + </span> + <span class="menu-item-label"> + <i18n.Translate>Log out</i18n.Translate> + </span> + </a> + </li> : undefined + } + </ul> + </div> + </aside> + ); +} diff --git a/packages/auditor-backoffice-ui/src/components/menu/index.tsx b/packages/auditor-backoffice-ui/src/components/menu/index.tsx new file mode 100644 index 000000000..015d3bd05 --- /dev/null +++ b/packages/auditor-backoffice-ui/src/components/menu/index.tsx @@ -0,0 +1,237 @@ +/* + 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/> + */ + +import { ComponentChildren, Fragment, h, VNode } from "preact"; +import { useEffect, useState } from "preact/hooks"; +import { AdminPaths } from "../../AdminRoutes.js"; +import { InstancePaths } from "../../InstanceRoutes.js"; +import { Notification } from "../../utils/types.js"; +import { NavigationBar } from "./NavigationBar.js"; +import { Sidebar } from "./SideBar.js"; + +function getInstanceTitle(path: string, id: string): string { + switch (path) { + case InstancePaths.settings: + return `${id}: Settings`; + case InstancePaths.inventory_list: + return `${id}: Inventory`; + case InstancePaths.deposit_confirmation_list: + return `${id}: Deposit Confirmation`; + case InstancePaths.inventory_new: + return `${id}: New product`; + case InstancePaths.inventory_update: + return `${id}: Update product`; + case InstancePaths.interface: + return `${id}: Interface`; + default: + return ""; + } +} + +function getAdminTitle(path: string, instance: string) { + if (path === AdminPaths.new_instance) return `New instance`; + if (path === AdminPaths.list_instances) return `Instances`; + return getInstanceTitle(path, instance); +} + +interface MenuProps { + title?: string; + path: string; + instance: string; + admin?: boolean; + onLogout?: () => void; + onShowSettings: () => void; + setInstanceName: (s: string) => void; + isPasswordOk: boolean; +} + +function WithTitle({ + title, + children, +}: { + title: string; + children: ComponentChildren; +}): VNode { + useEffect(() => { + document.title = `Taler Backoffice: ${title}`; + }, [title]); + return <Fragment>{children}</Fragment>; +} + +export function Menu({ + onLogout, + onShowSettings, + title, + instance, + path, + admin, + setInstanceName, + isPasswordOk +}: MenuProps): VNode { + const [mobileOpen, setMobileOpen] = useState(false); + + const titleWithSubtitle = title + ? title + : !admin + ? getInstanceTitle(path, instance) + : getAdminTitle(path, instance); + const adminInstance = instance === "default"; + const mimic = admin && !adminInstance; + return ( + <WithTitle title={titleWithSubtitle}> + <div + class={mobileOpen ? "has-aside-mobile-expanded" : ""} + onClick={() => setMobileOpen(false)} + > + <NavigationBar + onMobileMenu={() => setMobileOpen(!mobileOpen)} + title={titleWithSubtitle} + /> + + {onLogout && ( + <Sidebar + onShowSettings={onShowSettings} + onLogout={onLogout} + admin={admin} + mimic={mimic} + instance={instance} + mobile={mobileOpen} + isPasswordOk={isPasswordOk} + /> + )} + + {mimic && ( + <nav class="level" style={{ + zIndex: 100, + position: "fixed", + width: "50%", + marginLeft: "20%" + }}> + <div class="level-item has-text-centered has-background-warning"> + <p class="is-size-5"> + You are viewing the instance <b>"{instance}"</b>.{" "} + <a + href="#/instances" + onClick={(e) => { + setInstanceName("default"); + }} + > + go back + </a> + </p> + </div> + </nav> + )} + </div> + </WithTitle> + ); +} + +interface NotYetReadyAppMenuProps { + title: string; + onShowSettings: () => void; + onLogout?: () => void; + isPasswordOk: boolean; +} + +interface NotifProps { + notification?: Notification; +} +export function NotificationCard({ + notification: n, +}: NotifProps): VNode | null { + if (!n) return null; + return ( + <div class="notification"> + <div class="columns is-vcentered"> + <div class="column is-12"> + <article + class={ + n.type === "ERROR" + ? "message is-danger" + : n.type === "WARN" + ? "message is-warning" + : "message is-info" + } + > + <div class="message-header"> + <p>{n.message}</p> + </div> + {n.description && ( + <div class="message-body"> + <div>{n.description}</div> + {n.details && <pre>{n.details}</pre>} + </div> + )} + </article> + </div> + </div> + </div> + ); +} + +interface NotConnectedAppMenuProps { + title: string; +} +export function NotConnectedAppMenu({ + title, +}: NotConnectedAppMenuProps): VNode { + const [mobileOpen, setMobileOpen] = useState(false); + + useEffect(() => { + document.title = `Taler Backoffice: ${title}`; + }, [title]); + + return ( + <div + class={mobileOpen ? "has-aside-mobile-expanded" : ""} + onClick={() => setMobileOpen(false)} + > + <NavigationBar + onMobileMenu={() => setMobileOpen(!mobileOpen)} + title={title} + /> + </div> + ); +} + +export function NotYetReadyAppMenu({ + onLogout, + onShowSettings, + title, + isPasswordOk +}: NotYetReadyAppMenuProps): VNode { + const [mobileOpen, setMobileOpen] = useState(false); + + useEffect(() => { + document.title = `Taler Backoffice: ${title}`; + }, [title]); + + return ( + <div + class={mobileOpen ? "has-aside-mobile-expanded" : ""} + onClick={() => setMobileOpen(false)} + > + <NavigationBar + onMobileMenu={() => setMobileOpen(!mobileOpen)} + title={title} + /> + {onLogout && ( + <Sidebar onShowSettings={onShowSettings} onLogout={onLogout} instance="" mobile={mobileOpen} isPasswordOk={isPasswordOk} /> + )} + </div> + ); +} |