diff options
author | Sebastian <sebasjm@gmail.com> | 2021-10-19 10:56:52 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-10-19 11:05:32 -0300 |
commit | 5883d42d800c7b444c59d626bcaa5abca7dc83d0 (patch) | |
tree | ac42ad7b9e26c4dd2145a31101305884906a543e /packages/anastasis-webui/src/components | |
parent | 269022a526b670d602ca146f4df02850983bb72e (diff) | |
download | wallet-core-5883d42d800c7b444c59d626bcaa5abca7dc83d0.tar.xz |
add template from merchant backoffice
Diffstat (limited to 'packages/anastasis-webui/src/components')
5 files changed, 343 insertions, 4 deletions
diff --git a/packages/anastasis-webui/src/components/app.tsx b/packages/anastasis-webui/src/components/app.tsx index 45c9035f0..c6b4cfc14 100644 --- a/packages/anastasis-webui/src/components/app.tsx +++ b/packages/anastasis-webui/src/components/app.tsx @@ -1,12 +1,15 @@ import { FunctionalComponent, h } from "preact"; +import { TranslationProvider } from "../context/translation"; -import AnastasisClient from "../routes/home"; +import AnastasisClient from "../pages/home"; const App: FunctionalComponent = () => { return ( - <div id="preact_root"> - <AnastasisClient /> - </div> + <TranslationProvider> + <div id="app" class="has-navbar-fixed-top"> + <AnastasisClient /> + </div> + </TranslationProvider> ); }; diff --git a/packages/anastasis-webui/src/components/menu/LangSelector.tsx b/packages/anastasis-webui/src/components/menu/LangSelector.tsx new file mode 100644 index 000000000..41d08a58b --- /dev/null +++ b/packages/anastasis-webui/src/components/menu/LangSelector.tsx @@ -0,0 +1,73 @@ +/* + This file is part of GNU Taler + (C) 2021 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 { useState } from "preact/hooks"; +import langIcon from '../../assets/icons/languageicon.svg'; +import { useTranslationContext } from "../../context/translation"; +import { strings as messages } from '../../i18n/strings' + +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> +}
\ No newline at end of file diff --git a/packages/anastasis-webui/src/components/menu/NavigationBar.tsx b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx new file mode 100644 index 000000000..e1bb4c7c0 --- /dev/null +++ b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx @@ -0,0 +1,58 @@ +/* + This file is part of GNU Taler + (C) 2021 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.jpeg'; +import { LangSelector } from './LangSelector'; + +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: 50, maxHeight: 50 }} /> + </a> + <div class="navbar-end"> + <div class="navbar-item" style={{ paddingTop: 4, paddingBottom: 4 }}> + <LangSelector /> + </div> + </div> + </div> + </nav> + ); +}
\ No newline at end of file diff --git a/packages/anastasis-webui/src/components/menu/SideBar.tsx b/packages/anastasis-webui/src/components/menu/SideBar.tsx new file mode 100644 index 000000000..628adb571 --- /dev/null +++ b/packages/anastasis-webui/src/components/menu/SideBar.tsx @@ -0,0 +1,101 @@ +/* + This file is part of GNU Taler + (C) 2021 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 { Translate } from '../../i18n'; +import { LangSelector } from './LangSelector'; + +interface Props { + mobile?: boolean; +} + +export function Sidebar({ mobile }: Props): VNode { + // const config = useConfigContext(); + const config = { version: 'none' } + const process = { env : { __VERSION__: '0.0.0'}} + + return ( + <aside class="aside is-placed-left is-expanded"> + {mobile && <div class="footer" onClick={(e) => { return e.stopImmediatePropagation() }}> + <LangSelector /> + </div>} + <div class="aside-tools"> + <div class="aside-tools-label"> + <div><b>Anastasis</b> Reducer</div> + <div class="is-size-7 has-text-right" style={{ lineHeight: 0, marginTop: -10 }}> + {process.env.__VERSION__} ({config.version}) + </div> + </div> + </div> + <div class="menu is-menu-main"> + <p class="menu-label"> + <Translate>Back up a secret</Translate> + </p> + <ul class="menu-list"> + <li> + <div class="has-icon"> + <span class="icon"><i class="mdi mdi-square-edit-outline" /></span> + <span class="menu-item-label"><Translate>Location & Currency</Translate></span> + </div> + </li> + <li class="is-active"> + <div class="has-icon"> + <span class="icon"><i class="mdi mdi-cash-register" /></span> + <span class="menu-item-label"><Translate>Personal information</Translate></span> + </div> + </li> + <li> + <div class="has-icon"> + <span class="icon"><i class="mdi mdi-shopping" /></span> + <span class="menu-item-label"><Translate>Authorization methods</Translate></span> + </div> + </li> + <li> + <div class="has-icon"> + <span class="icon"><i class="mdi mdi-bank" /></span> + <span class="menu-item-label"><Translate>Recovery policies</Translate></span> + </div> + </li> + <li> + <div class="has-icon"> + <span class="icon"><i class="mdi mdi-bank" /></span> + <span class="menu-item-label"><Translate>Enter secrets</Translate></span> + </div> + </li> + <li> + <div class="has-icon"> + <span class="icon"><i class="mdi mdi-bank" /></span> + <span class="menu-item-label"><Translate>Payment (optional)</Translate></span> + </div> + </li> + <li> + <div class="has-icon"> + <span class="icon"><i class="mdi mdi-cash" /></span> + <span class="menu-item-label">Backup completed</span> + </div> + </li> + </ul> + </div> + </aside> + ); +} + diff --git a/packages/anastasis-webui/src/components/menu/index.tsx b/packages/anastasis-webui/src/components/menu/index.tsx new file mode 100644 index 000000000..d15bf9264 --- /dev/null +++ b/packages/anastasis-webui/src/components/menu/index.tsx @@ -0,0 +1,104 @@ +/* + This file is part of GNU Taler + (C) 2021 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 Match from 'preact-router/match'; +import { useEffect, useState } from "preact/hooks"; +import { NavigationBar } from "./NavigationBar"; +import { Sidebar } from "./SideBar"; + + + + +interface MenuProps { + title: string; +} + +function WithTitle({ title, children }: { title: string; children: ComponentChildren }): VNode { + useEffect(() => { + document.title = `Taler Backoffice: ${title}` + }, [title]) + return <Fragment>{children}</Fragment> +} + +export function Menu({ title }: MenuProps): VNode { + const [mobileOpen, setMobileOpen] = useState(false) + + return <Match>{({ path }: { path: string }) => { + const titleWithSubtitle = title // title ? title : (!admin ? getInstanceTitle(path, instance) : getAdminTitle(path, instance)) + return (<WithTitle title={titleWithSubtitle}> + <div class={mobileOpen ? "has-aside-mobile-expanded" : ""} onClick={() => setMobileOpen(false)}> + <NavigationBar onMobileMenu={() => setMobileOpen(!mobileOpen)} title={titleWithSubtitle} /> + + <Sidebar mobile={mobileOpen} /> + + </div> + </WithTitle> + ) + }}</Match> + +} + +interface NotYetReadyAppMenuProps { + title: string; + onLogout?: () => void; +} + +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"> + {n.description} + </div>} + </article> + </div> + </div> + </div> +} + +export function NotYetReadyAppMenu({ onLogout, title }: 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 onLogout={onLogout} mobile={mobileOpen} />} + </div> + +} + +export interface Notification { + message: string; + description?: string | VNode; + type: MessageType; +} + +export type ValueOrFunction<T> = T | ((p: T) => T) +export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS' + |