diff options
Diffstat (limited to 'packages')
-rw-r--r-- | packages/merchant-backoffice-ui/package.json | 54 | ||||
-rw-r--r-- | packages/merchant-backoffice-ui/src/Application.tsx | 109 | ||||
-rw-r--r-- | packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx | 5 | ||||
-rw-r--r-- | packages/merchant-backoffice-ui/src/custom.d.ts | 2 | ||||
-rw-r--r-- | packages/merchant-backoffice-ui/src/index.html (renamed from packages/merchant-backoffice-ui/src/template.html) | 47 | ||||
-rw-r--r-- | packages/merchant-backoffice-ui/src/index.tsx | 94 | ||||
-rw-r--r-- | packages/merchant-backoffice-ui/src/scss/_mixins.scss | 2 |
7 files changed, 150 insertions, 163 deletions
diff --git a/packages/merchant-backoffice-ui/package.json b/packages/merchant-backoffice-ui/package.json index a772f6296..b78b3636c 100644 --- a/packages/merchant-backoffice-ui/package.json +++ b/packages/merchant-backoffice-ui/package.json @@ -4,31 +4,20 @@ "version": "0.0.4", "license": "MIT", "scripts": { - "build": "preact build --no-sw --no-esm", - "compile": "tsc", - "serve": "sirv build --port ${PORT:=8080} --cors --single", + "build": "./build.mjs", + "check": "tsc", + "compile": "tsc && ./build.mjs", "dev": "preact watch --port ${PORT:=8080} --no-sw --no-esm", - "lint-check": "eslint '{src,tests}/**/*.{js,jsx,ts,tsx}'", - "lint-fix": "eslint --fix '{src,tests}/**/*.{js,jsx,ts,tsx}'", - "test": "jest ./tests", - "dev-test": "jest ./tests --watch", + "test": "pnpm compile && mocha --require source-map-support/register 'dist/**/test.js'", + "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'", + "i18n:extract": "pogen extract", + "i18n:merge": "pogen merge", + "i18n:emit": "pogen emit", + "i18n": "pnpm i18n:extract && pnpm i18n:merge && pnpm i18n:emit", "typedoc": "typedoc src", - "clean": "rimraf build storybook-static docs single", - "build-single": "preact build --no-sw --no-esm -c preact.single-config.js --dest single && sh remove-link-stylesheet.sh", - "serve-single": "sirv single --port ${PORT:=8080} --cors --single", - "build-storybook": "build-storybook", - "storybook": "start-storybook -p 6006" - }, - "engines": { - "node": ">=12", - "pnpm": ">=5" + "pretty": "prettier --write src" }, "eslintConfig": { - "parser": "@typescript-eslint/parser", - "extends": [ - "preact", - "plugin:@typescript-eslint/recommended" - ], "plugins": [ "header" ], @@ -38,8 +27,8 @@ "copyleft-header.js" ] }, - "ignorePatterns": [ - "build/" + "extends": [ + "prettier" ] }, "dependencies": { @@ -53,20 +42,11 @@ "preact-router": "3.2.1", "qrcode-generator": "1.4.4", "swr": "1.3.0", - "react": "npm:@preact/compat@^17.1.2", "yup": "^0.32.9" }, "devDependencies": { - "@babel/core": "7.18.9", - "@babel/plugin-transform-react-jsx-source": "7.18.6", "@creativebulma/bulma-tooltip": "^1.2.0", "@gnu-taler/pogen": "^0.0.5", - "@storybook/addon-a11y": "^6.2.9", - "@storybook/addon-actions": "^6.2.9", - "@storybook/addon-essentials": "^6.2.9", - "@storybook/addon-links": "^6.2.9", - "@storybook/preact": "^6.2.9", - "@storybook/preset-scss": "^1.0.3", "@testing-library/preact": "^2.0.1", "@testing-library/preact-hooks": "^1.1.0", "@types/history": "^4.7.8", @@ -75,7 +55,6 @@ "@types/node": "^18.8.5", "@typescript-eslint/eslint-plugin": "^4.22.0", "@typescript-eslint/parser": "^4.22.0", - "babel-loader": "^8.2.2", "base64-inline-loader": "^1.1.1", "bulma": "^0.9.2", "bulma-checkbox": "^1.1.1", @@ -94,15 +73,8 @@ "inline-chunk-html-plugin": "^1.1.1", "jest": "^26.6.3", "jest-preset-preact": "^4.0.2", - "po2json": "^0.4.5", - "preact-cli": "^3.0.5", - "preact-render-to-json": "^3.6.6", - "preact-render-to-string": "^5.1.19", "rimraf": "^3.0.2", - "sass": "^1.32.13", - "sass-loader": "10.1.1", - "script-ext-html-webpack-plugin": "^2.1.5", - "sirv-cli": "^1.0.11", + "sass": "1.56.1", "typedoc": "^0.20.36", "typescript": "4.8.4" }, diff --git a/packages/merchant-backoffice-ui/src/Application.tsx b/packages/merchant-backoffice-ui/src/Application.tsx new file mode 100644 index 000000000..4aa0f7891 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/Application.tsx @@ -0,0 +1,109 @@ +/* + 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 { route } from 'preact-router'; +import { useMemo } from "preact/hooks"; +import { ApplicationReadyRoutes } from "./ApplicationReadyRoutes.js"; +import { Loading } from "./components/exception/loading.js"; +import { NotificationCard, NotYetReadyAppMenu } from "./components/menu/index.js"; +import { BackendContextProvider, useBackendContext } from './context/backend.js'; +import { ConfigContextProvider } from './context/config.js'; +import { TranslationProvider } from './context/translation.js'; +import { useBackendConfig } from "./hooks/backend.js"; +import { useTranslator } from './i18n/index.js'; +import LoginPage from './paths/login/index.js'; + +export function Application(): VNode { + return ( + // <FetchContextProvider> + <BackendContextProvider> + <TranslationProvider> + <ApplicationStatusRoutes /> + </TranslationProvider> + </BackendContextProvider> + // </FetchContextProvider> + ); +} + +function ApplicationStatusRoutes(): VNode { + const { updateLoginStatus, triedToLog } = useBackendContext() + const result = useBackendConfig(); + const i18n = useTranslator() + + const updateLoginInfoAndGoToRoot = (url: string, token?: string) => { + updateLoginStatus(url, token) + route('/') + } + + const { currency, version } = result.ok ? result.data : { currency: 'unknown', version: 'unknown' } + const ctx = useMemo(() => ({ currency, version }), [currency, version]) + + if (!triedToLog) { + return <div id="app"> + <NotYetReadyAppMenu title="Welcome!" /> + <LoginPage onConfirm={updateLoginInfoAndGoToRoot} /> + </div> + } + + if (result.clientError && result.isUnauthorized) return <div id="app"> + <NotYetReadyAppMenu title="Login" /> + <LoginPage onConfirm={updateLoginInfoAndGoToRoot} /> + </div> + + if (result.clientError && result.isNotfound) return <div id="app"> + <NotYetReadyAppMenu title="Error" /> + <NotificationCard notification={{ + message: i18n`Server not found`, + type: 'ERROR', + description: `Check your url`, + }} /> + <LoginPage onConfirm={updateLoginInfoAndGoToRoot} /> + </div> + + if (result.serverError) return <div id="app"> + <NotYetReadyAppMenu title="Error" /> + <NotificationCard notification={{ + message: i18n`Couldn't access the server`, + type: 'ERROR', + description: i18n`Got message ${result.message} from ${result.info?.url}`, + }} /> + <LoginPage onConfirm={updateLoginInfoAndGoToRoot} /> + </div> + + if (result.loading) return <Loading /> + + if (!result.ok) return <div id="app"> + <NotYetReadyAppMenu title="Error" /> + <NotificationCard notification={{ + message: i18n`Unexpected Error`, + type: 'ERROR', + description: i18n`Got message ${result.message} from ${result.info?.url}`, + }} /> + <LoginPage onConfirm={updateLoginInfoAndGoToRoot} /> + </div> + + return <div id="app" class="has-navbar-fixed-top"> + <ConfigContextProvider value={ctx}> + <ApplicationReadyRoutes /> + </ConfigContextProvider> + </div> +} diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx index b96e431f8..1d15bb094 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx @@ -28,6 +28,9 @@ import { useInstanceKYCDetails } from "../../hooks/instance.js"; import { Translate } from "../../i18n/index.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; mobile?: boolean; @@ -76,7 +79,7 @@ export function Sidebar({ class="is-size-7 has-text-right" style={{ lineHeight: 0, marginTop: -10 }} > - {process.env.__VERSION__} ({config.version}) + {VERSION} ({config.version}) </div> </div> </div> diff --git a/packages/merchant-backoffice-ui/src/custom.d.ts b/packages/merchant-backoffice-ui/src/custom.d.ts index b357d34ab..e60fa0c83 100644 --- a/packages/merchant-backoffice-ui/src/custom.d.ts +++ b/packages/merchant-backoffice-ui/src/custom.d.ts @@ -38,3 +38,5 @@ declare module '*.scss' { const content: Record<string, string>; export default content; } +declare const __VERSION__: string; +declare const __GIT_HASH__: string; diff --git a/packages/merchant-backoffice-ui/src/template.html b/packages/merchant-backoffice-ui/src/index.html index 306b90f11..5f7080df8 100644 --- a/packages/merchant-backoffice-ui/src/template.html +++ b/packages/merchant-backoffice-ui/src/index.html @@ -1,5 +1,5 @@ <!-- - This file is part of GNU Taler + 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 @@ -17,36 +17,23 @@ --> <!DOCTYPE html> <html lang="en" class="has-aside-left has-aside-mobile-transition has-navbar-fixed-top has-aside-expanded"> - <head> - <meta charset="utf-8"> - <title><%= htmlWebpackPlugin.options.title %></title> - <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="mobile-web-app-capable" content="yes"> - <meta name="apple-mobile-web-app-capable" content="yes"> + <head> + <meta charset="utf-8" /> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <meta name="viewport" content="width=device-width,initial-scale=1" /> + <meta name="mobile-web-app-capable" content="yes" /> + <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="icon" href="data:;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////7//v38//78/P/+/fz//vz7///+/v/+/f3//vz7///+/v/+/fz//v38///////////////////////+/v3///7+/////////////////////////////////////////////////////////v3//v79///////+/v3///////r28v/ct5//06SG/9Gffv/Xqo7/7N/V/9e2nf/bsJb/6uDW/9Sskf/euKH/+/j2///////+/v3//////+3azv+/eE3/2rWd/9Kkhv/Vr5T/48i2/8J+VP/Qn3//3ryn/795Tf/WrpP/2LCW/8B6T//w4Nb///////Pn4P+/d0v/9u3n/+7d0v/EhV7//v///+HDr//fxLD/zph2/+TJt//8/Pv/woBX//Lm3f/y5dz/v3hN//bu6f/JjGn/4sW0///////Df1j/8OLZ//v6+P+/elH/+vj1//jy7f+/elL//////+zYzP/Eg13//////967p//MlHT/wn5X///////v4Nb/yY1s///////jw7H/06KG////////////z5t9/+fNvf//////x4pn//Pp4v/8+vn/w39X/8WEX///////5s/A/9CbfP//////27Oc/9y2n////////////9itlf/gu6f//////86Vdf/r2Mz//////8SCXP/Df1j//////+7d0v/KkG7//////+HBrf/VpYr////////////RnoH/5sq6///////Ii2n/8ubf//39/P/Cf1j/xohk/+bNvv//////wn5W//Tq4//58/D/wHxV//7+/f/59fH/v3xU//39/P/w4Nf/xIFb///////hw7H/yo9t/+/f1f/AeU3/+/n2/+nSxP/FhmD//////9qzm//Upon/4MSx/96+qf//////xINc/+3bz//48e3/v3hN//Pn3///////6M+//752S//gw6//06aK/8J+VP/kzLr/zZd1/8OCWv/q18r/17KZ/9Ooi//fv6r/v3dK/+vWyP///////v39///////27un/1aeK/9Opjv/m1cf/1KCC/9a0nP/n08T/0Jx8/82YdP/QnHz/16yR//jx7P///////v39///////+/f3///7+///////+//7//v7+///////+/v7//v/+/////////////////////////v7//v79///////////////////+/v/+/Pv//v39///+/v/+/Pv///7+//7+/f/+/Pv//v39//79/P/+/Pv///7+////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==" /> <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" /> - - <% if (htmlWebpackPlugin.options.manifest.theme_color) { %> - <meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>"> - <% } %> - - <% for (const index in htmlWebpackPlugin.files.css) { %> - <% const file = htmlWebpackPlugin.files.css[index] %> - <style data-href='<%= file %>' > - <%= compilation.assets[file.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> - </style> - <% } %> - - </head> - <body> - - <script> - <%= compilation.assets[htmlWebpackPlugin.files.chunks["polyfills"].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> - </script> - <script> - <%= compilation.assets[htmlWebpackPlugin.files.chunks["bundle"].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> - </script> - - </body> + <title>Merchant Backoffice</title> + <!-- Optional customization script. --> + <script src="merchant-backoffice-ui-settings.js"></script> + <!-- Entry point for the demobank SPA. --> + <script type="module" src="index.js"></script> + <link rel="stylesheet" href="index.css" /> + </head> + <body> + <div id="app"></div> + </body> </html> diff --git a/packages/merchant-backoffice-ui/src/index.tsx b/packages/merchant-backoffice-ui/src/index.tsx index 3802a2149..c60471099 100644 --- a/packages/merchant-backoffice-ui/src/index.tsx +++ b/packages/merchant-backoffice-ui/src/index.tsx @@ -14,97 +14,11 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -/** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ +import {Application} from "./Application.js"; -import { h, VNode } from 'preact'; -import { route } from 'preact-router'; -import { useMemo } from "preact/hooks"; -import { ApplicationReadyRoutes } from "./ApplicationReadyRoutes.js"; -import { Loading } from "./components/exception/loading.js"; -import { NotificationCard, NotYetReadyAppMenu } from "./components/menu/index.js"; -import { BackendContextProvider, useBackendContext } from './context/backend.js'; -import { ConfigContextProvider } from './context/config.js'; -import { TranslationProvider } from './context/translation.js'; -import { useBackendConfig } from "./hooks/backend.js"; -import { useTranslator } from './i18n/index.js'; -import LoginPage from './paths/login/index.js'; +import { h, render } from "preact"; import "./scss/main.scss"; -export default function Application(): VNode { - return ( - // <FetchContextProvider> - <BackendContextProvider> - <TranslationProvider> - <ApplicationStatusRoutes /> - </TranslationProvider> - </BackendContextProvider> - // </FetchContextProvider> - ); -} +const app = document.getElementById("app"); -function ApplicationStatusRoutes(): VNode { - const { updateLoginStatus, triedToLog } = useBackendContext() - const result = useBackendConfig(); - const i18n = useTranslator() - - const updateLoginInfoAndGoToRoot = (url: string, token?: string) => { - updateLoginStatus(url, token) - route('/') - } - - const { currency, version } = result.ok ? result.data : { currency: 'unknown', version: 'unknown' } - const ctx = useMemo(() => ({ currency, version }), [currency, version]) - - if (!triedToLog) { - return <div id="app"> - <NotYetReadyAppMenu title="Welcome!" /> - <LoginPage onConfirm={updateLoginInfoAndGoToRoot} /> - </div> - } - - if (result.clientError && result.isUnauthorized) return <div id="app"> - <NotYetReadyAppMenu title="Login" /> - <LoginPage onConfirm={updateLoginInfoAndGoToRoot} /> - </div> - - if (result.clientError && result.isNotfound) return <div id="app"> - <NotYetReadyAppMenu title="Error" /> - <NotificationCard notification={{ - message: i18n`Server not found`, - type: 'ERROR', - description: `Check your url`, - }} /> - <LoginPage onConfirm={updateLoginInfoAndGoToRoot} /> - </div> - - if (result.serverError) return <div id="app"> - <NotYetReadyAppMenu title="Error" /> - <NotificationCard notification={{ - message: i18n`Couldn't access the server`, - type: 'ERROR', - description: i18n`Got message ${result.message} from ${result.info?.url}`, - }} /> - <LoginPage onConfirm={updateLoginInfoAndGoToRoot} /> - </div> - - if (result.loading) return <Loading /> - - if (!result.ok) return <div id="app"> - <NotYetReadyAppMenu title="Error" /> - <NotificationCard notification={{ - message: i18n`Unexpected Error`, - type: 'ERROR', - description: i18n`Got message ${result.message} from ${result.info?.url}`, - }} /> - <LoginPage onConfirm={updateLoginInfoAndGoToRoot} /> - </div> - - return <div id="app" class="has-navbar-fixed-top"> - <ConfigContextProvider value={ctx}> - <ApplicationReadyRoutes /> - </ConfigContextProvider> - </div> -} +render(<Application />, app as any); diff --git a/packages/merchant-backoffice-ui/src/scss/_mixins.scss b/packages/merchant-backoffice-ui/src/scss/_mixins.scss index 8df866de4..7d5f6b144 100644 --- a/packages/merchant-backoffice-ui/src/scss/_mixins.scss +++ b/packages/merchant-backoffice-ui/src/scss/_mixins.scss @@ -28,7 +28,7 @@ width: $icon-base-width; &.has-update-mark:after { - right: ($icon-base-width / 2) - .85; + right: calc($icon-base-width / 2) - .85; } } } |