From 3e060b80428943c6562250a6ff77eff10a0259b7 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Mon, 24 Oct 2022 10:46:14 +0200 Subject: repo: integrate packages from former merchant-backoffice.git --- packages/demobank-ui/src/.babelrc | 3 + packages/demobank-ui/src/assets/empty.png | Bin 0 -> 2785 bytes packages/demobank-ui/src/assets/example/id1.jpg | Bin 0 -> 103558 bytes packages/demobank-ui/src/assets/favicon.ico | Bin 0 -> 15086 bytes .../src/assets/icons/android-chrome-192x192.png | Bin 0 -> 14058 bytes .../src/assets/icons/android-chrome-512x512.png | Bin 0 -> 51484 bytes .../src/assets/icons/apple-touch-icon.png | Bin 0 -> 12746 bytes .../src/assets/icons/auth_method/email.svg | 1 + .../src/assets/icons/auth_method/postal.svg | 1 + .../src/assets/icons/auth_method/question.svg | 1 + .../src/assets/icons/auth_method/sms.svg | 1 + .../src/assets/icons/auth_method/video.svg | 1 + .../demobank-ui/src/assets/icons/favicon-16x16.png | Bin 0 -> 626 bytes .../demobank-ui/src/assets/icons/favicon-32x32.png | Bin 0 -> 1487 bytes .../demobank-ui/src/assets/icons/languageicon.svg | 48 + .../src/assets/icons/mstile-150x150.png | Bin 0 -> 9050 bytes packages/demobank-ui/src/assets/logo-white.svg | 45 + packages/demobank-ui/src/assets/logo.jpeg | Bin 0 -> 39336 bytes .../demobank-ui/src/components/AsyncButton.tsx | 66 + packages/demobank-ui/src/components/FileButton.tsx | 57 + .../demobank-ui/src/components/Notifications.tsx | 74 + packages/demobank-ui/src/components/QR.tsx | 48 + packages/demobank-ui/src/components/app.tsx | 14 + .../src/components/fields/DateInput.tsx | 90 + .../src/components/fields/EmailInput.tsx | 57 + .../src/components/fields/FileInput.tsx | 104 + .../src/components/fields/ImageInput.tsx | 93 + .../src/components/fields/NumberInput.tsx | 56 + .../src/components/fields/TextInput.tsx | 68 + .../src/components/menu/LangSelector.tsx | 101 + .../src/components/menu/NavigationBar.tsx | 53 + .../demobank-ui/src/components/menu/SideBar.tsx | 73 + packages/demobank-ui/src/components/menu/index.tsx | 135 ++ .../src/components/picker/DatePicker.tsx | 356 ++++ .../components/picker/DurationPicker.stories.tsx | 55 + .../src/components/picker/DurationPicker.tsx | 211 ++ packages/demobank-ui/src/context/translation.ts | 73 + packages/demobank-ui/src/declaration.d.ts | 20 + packages/demobank-ui/src/hooks/async.ts | 80 + packages/demobank-ui/src/hooks/index.ts | 151 ++ packages/demobank-ui/src/i18n/bank.pot | 258 +++ packages/demobank-ui/src/i18n/de.po | 257 +++ packages/demobank-ui/src/i18n/en.po | 266 +++ packages/demobank-ui/src/i18n/index.tsx | 211 ++ packages/demobank-ui/src/i18n/it.po | 258 +++ packages/demobank-ui/src/i18n/poheader | 27 + packages/demobank-ui/src/i18n/strings-prelude | 19 + packages/demobank-ui/src/i18n/strings.ts | 472 +++++ packages/demobank-ui/src/index.tsx | 3 + packages/demobank-ui/src/manifest.json | 21 + packages/demobank-ui/src/pages/home/index.tsx | 2018 ++++++++++++++++++++ packages/demobank-ui/src/pages/notfound/index.tsx | 16 + packages/demobank-ui/src/pages/notfound/style.css | 0 .../src/pages/profile/index.stories.tsx | 38 + packages/demobank-ui/src/pages/profile/index.tsx | 42 + packages/demobank-ui/src/pages/profile/style.css | 0 packages/demobank-ui/src/scss/DurationPicker.scss | 70 + packages/demobank-ui/src/scss/_aside.scss | 128 ++ packages/demobank-ui/src/scss/_card.scss | 69 + .../demobank-ui/src/scss/_custom-calendar.scss | 263 +++ packages/demobank-ui/src/scss/_footer.scss | 35 + packages/demobank-ui/src/scss/_form.scss | 71 + packages/demobank-ui/src/scss/_hero-bar.scss | 55 + packages/demobank-ui/src/scss/_loading.scss | 51 + packages/demobank-ui/src/scss/_main-section.scss | 24 + packages/demobank-ui/src/scss/_misc.scss | 50 + packages/demobank-ui/src/scss/_mixins.scss | 34 + packages/demobank-ui/src/scss/_modal.scss | 35 + packages/demobank-ui/src/scss/_nav-bar.scss | 144 ++ packages/demobank-ui/src/scss/_table.scss | 179 ++ packages/demobank-ui/src/scss/_theme-default.scss | 136 ++ packages/demobank-ui/src/scss/_tiles.scss | 24 + packages/demobank-ui/src/scss/_title-bar.scss | 50 + packages/demobank-ui/src/scss/bank.scss | 264 +++ packages/demobank-ui/src/scss/colors-bank.scss | 31 + packages/demobank-ui/src/scss/demo.scss | 157 ++ .../src/scss/fonts/XRXV3I6Li01BKofINeaE.ttf | Bin 0 -> 43752 bytes packages/demobank-ui/src/scss/fonts/nunito.css | 22 + .../fonts/materialdesignicons-webfont-4.9.95.eot | Bin 0 -> 844600 bytes .../fonts/materialdesignicons-webfont-4.9.95.ttf | Bin 0 -> 844380 bytes .../fonts/materialdesignicons-webfont-4.9.95.woff | Bin 0 -> 404384 bytes .../fonts/materialdesignicons-webfont-4.9.95.woff2 | Bin 0 -> 283040 bytes .../scss/icons/materialdesignicons-4.9.95.min.css | 3 + packages/demobank-ui/src/scss/libs/_all.scss | 29 + packages/demobank-ui/src/scss/main.scss | 4 + packages/demobank-ui/src/scss/pure.scss | 1328 +++++++++++++ packages/demobank-ui/src/style/index.css | 0 packages/demobank-ui/src/template.html | 52 + 88 files changed, 9350 insertions(+) create mode 100644 packages/demobank-ui/src/.babelrc create mode 100644 packages/demobank-ui/src/assets/empty.png create mode 100644 packages/demobank-ui/src/assets/example/id1.jpg create mode 100644 packages/demobank-ui/src/assets/favicon.ico create mode 100644 packages/demobank-ui/src/assets/icons/android-chrome-192x192.png create mode 100644 packages/demobank-ui/src/assets/icons/android-chrome-512x512.png create mode 100644 packages/demobank-ui/src/assets/icons/apple-touch-icon.png create mode 100644 packages/demobank-ui/src/assets/icons/auth_method/email.svg create mode 100644 packages/demobank-ui/src/assets/icons/auth_method/postal.svg create mode 100644 packages/demobank-ui/src/assets/icons/auth_method/question.svg create mode 100644 packages/demobank-ui/src/assets/icons/auth_method/sms.svg create mode 100644 packages/demobank-ui/src/assets/icons/auth_method/video.svg create mode 100644 packages/demobank-ui/src/assets/icons/favicon-16x16.png create mode 100644 packages/demobank-ui/src/assets/icons/favicon-32x32.png create mode 100644 packages/demobank-ui/src/assets/icons/languageicon.svg create mode 100644 packages/demobank-ui/src/assets/icons/mstile-150x150.png create mode 100644 packages/demobank-ui/src/assets/logo-white.svg create mode 100644 packages/demobank-ui/src/assets/logo.jpeg create mode 100644 packages/demobank-ui/src/components/AsyncButton.tsx create mode 100644 packages/demobank-ui/src/components/FileButton.tsx create mode 100644 packages/demobank-ui/src/components/Notifications.tsx create mode 100644 packages/demobank-ui/src/components/QR.tsx create mode 100644 packages/demobank-ui/src/components/app.tsx create mode 100644 packages/demobank-ui/src/components/fields/DateInput.tsx create mode 100644 packages/demobank-ui/src/components/fields/EmailInput.tsx create mode 100644 packages/demobank-ui/src/components/fields/FileInput.tsx create mode 100644 packages/demobank-ui/src/components/fields/ImageInput.tsx create mode 100644 packages/demobank-ui/src/components/fields/NumberInput.tsx create mode 100644 packages/demobank-ui/src/components/fields/TextInput.tsx create mode 100644 packages/demobank-ui/src/components/menu/LangSelector.tsx create mode 100644 packages/demobank-ui/src/components/menu/NavigationBar.tsx create mode 100644 packages/demobank-ui/src/components/menu/SideBar.tsx create mode 100644 packages/demobank-ui/src/components/menu/index.tsx create mode 100644 packages/demobank-ui/src/components/picker/DatePicker.tsx create mode 100644 packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx create mode 100644 packages/demobank-ui/src/components/picker/DurationPicker.tsx create mode 100644 packages/demobank-ui/src/context/translation.ts create mode 100644 packages/demobank-ui/src/declaration.d.ts create mode 100644 packages/demobank-ui/src/hooks/async.ts create mode 100644 packages/demobank-ui/src/hooks/index.ts create mode 100644 packages/demobank-ui/src/i18n/bank.pot create mode 100644 packages/demobank-ui/src/i18n/de.po create mode 100644 packages/demobank-ui/src/i18n/en.po create mode 100644 packages/demobank-ui/src/i18n/index.tsx create mode 100644 packages/demobank-ui/src/i18n/it.po create mode 100644 packages/demobank-ui/src/i18n/poheader create mode 100644 packages/demobank-ui/src/i18n/strings-prelude create mode 100644 packages/demobank-ui/src/i18n/strings.ts create mode 100644 packages/demobank-ui/src/index.tsx create mode 100644 packages/demobank-ui/src/manifest.json create mode 100644 packages/demobank-ui/src/pages/home/index.tsx create mode 100644 packages/demobank-ui/src/pages/notfound/index.tsx create mode 100644 packages/demobank-ui/src/pages/notfound/style.css create mode 100644 packages/demobank-ui/src/pages/profile/index.stories.tsx create mode 100644 packages/demobank-ui/src/pages/profile/index.tsx create mode 100644 packages/demobank-ui/src/pages/profile/style.css create mode 100644 packages/demobank-ui/src/scss/DurationPicker.scss create mode 100644 packages/demobank-ui/src/scss/_aside.scss create mode 100644 packages/demobank-ui/src/scss/_card.scss create mode 100644 packages/demobank-ui/src/scss/_custom-calendar.scss create mode 100644 packages/demobank-ui/src/scss/_footer.scss create mode 100644 packages/demobank-ui/src/scss/_form.scss create mode 100644 packages/demobank-ui/src/scss/_hero-bar.scss create mode 100644 packages/demobank-ui/src/scss/_loading.scss create mode 100644 packages/demobank-ui/src/scss/_main-section.scss create mode 100644 packages/demobank-ui/src/scss/_misc.scss create mode 100644 packages/demobank-ui/src/scss/_mixins.scss create mode 100644 packages/demobank-ui/src/scss/_modal.scss create mode 100644 packages/demobank-ui/src/scss/_nav-bar.scss create mode 100644 packages/demobank-ui/src/scss/_table.scss create mode 100644 packages/demobank-ui/src/scss/_theme-default.scss create mode 100644 packages/demobank-ui/src/scss/_tiles.scss create mode 100644 packages/demobank-ui/src/scss/_title-bar.scss create mode 100644 packages/demobank-ui/src/scss/bank.scss create mode 100644 packages/demobank-ui/src/scss/colors-bank.scss create mode 100644 packages/demobank-ui/src/scss/demo.scss create mode 100644 packages/demobank-ui/src/scss/fonts/XRXV3I6Li01BKofINeaE.ttf create mode 100644 packages/demobank-ui/src/scss/fonts/nunito.css create mode 100644 packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.eot create mode 100644 packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.ttf create mode 100644 packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff create mode 100644 packages/demobank-ui/src/scss/icons/fonts/materialdesignicons-webfont-4.9.95.woff2 create mode 100644 packages/demobank-ui/src/scss/icons/materialdesignicons-4.9.95.min.css create mode 100644 packages/demobank-ui/src/scss/libs/_all.scss create mode 100644 packages/demobank-ui/src/scss/main.scss create mode 100644 packages/demobank-ui/src/scss/pure.scss create mode 100644 packages/demobank-ui/src/style/index.css create mode 100644 packages/demobank-ui/src/template.html (limited to 'packages/demobank-ui/src') diff --git a/packages/demobank-ui/src/.babelrc b/packages/demobank-ui/src/.babelrc new file mode 100644 index 000000000..05f4dcc81 --- /dev/null +++ b/packages/demobank-ui/src/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["preact-cli/babel"] +} diff --git a/packages/demobank-ui/src/assets/empty.png b/packages/demobank-ui/src/assets/empty.png new file mode 100644 index 000000000..5120d3138 Binary files /dev/null and b/packages/demobank-ui/src/assets/empty.png differ diff --git a/packages/demobank-ui/src/assets/example/id1.jpg b/packages/demobank-ui/src/assets/example/id1.jpg new file mode 100644 index 000000000..5d022a379 Binary files /dev/null and b/packages/demobank-ui/src/assets/example/id1.jpg differ diff --git a/packages/demobank-ui/src/assets/favicon.ico b/packages/demobank-ui/src/assets/favicon.ico new file mode 100644 index 000000000..07419145b Binary files /dev/null and b/packages/demobank-ui/src/assets/favicon.ico differ diff --git a/packages/demobank-ui/src/assets/icons/android-chrome-192x192.png b/packages/demobank-ui/src/assets/icons/android-chrome-192x192.png new file mode 100644 index 000000000..93ebe2e2c Binary files /dev/null and b/packages/demobank-ui/src/assets/icons/android-chrome-192x192.png differ diff --git a/packages/demobank-ui/src/assets/icons/android-chrome-512x512.png b/packages/demobank-ui/src/assets/icons/android-chrome-512x512.png new file mode 100644 index 000000000..52d1623ea Binary files /dev/null and b/packages/demobank-ui/src/assets/icons/android-chrome-512x512.png differ diff --git a/packages/demobank-ui/src/assets/icons/apple-touch-icon.png b/packages/demobank-ui/src/assets/icons/apple-touch-icon.png new file mode 100644 index 000000000..254e4bb4d Binary files /dev/null and b/packages/demobank-ui/src/assets/icons/apple-touch-icon.png differ diff --git a/packages/demobank-ui/src/assets/icons/auth_method/email.svg b/packages/demobank-ui/src/assets/icons/auth_method/email.svg new file mode 100644 index 000000000..3e44b8779 --- /dev/null +++ b/packages/demobank-ui/src/assets/icons/auth_method/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/demobank-ui/src/assets/icons/auth_method/postal.svg b/packages/demobank-ui/src/assets/icons/auth_method/postal.svg new file mode 100644 index 000000000..3787b8350 --- /dev/null +++ b/packages/demobank-ui/src/assets/icons/auth_method/postal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/demobank-ui/src/assets/icons/auth_method/question.svg b/packages/demobank-ui/src/assets/icons/auth_method/question.svg new file mode 100644 index 000000000..a346556b2 --- /dev/null +++ b/packages/demobank-ui/src/assets/icons/auth_method/question.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/demobank-ui/src/assets/icons/auth_method/sms.svg b/packages/demobank-ui/src/assets/icons/auth_method/sms.svg new file mode 100644 index 000000000..ed15679bf --- /dev/null +++ b/packages/demobank-ui/src/assets/icons/auth_method/sms.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/demobank-ui/src/assets/icons/auth_method/video.svg b/packages/demobank-ui/src/assets/icons/auth_method/video.svg new file mode 100644 index 000000000..69de5e0b4 --- /dev/null +++ b/packages/demobank-ui/src/assets/icons/auth_method/video.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/demobank-ui/src/assets/icons/favicon-16x16.png b/packages/demobank-ui/src/assets/icons/favicon-16x16.png new file mode 100644 index 000000000..e81177dcb Binary files /dev/null and b/packages/demobank-ui/src/assets/icons/favicon-16x16.png differ diff --git a/packages/demobank-ui/src/assets/icons/favicon-32x32.png b/packages/demobank-ui/src/assets/icons/favicon-32x32.png new file mode 100644 index 000000000..40e9b5b47 Binary files /dev/null and b/packages/demobank-ui/src/assets/icons/favicon-32x32.png differ diff --git a/packages/demobank-ui/src/assets/icons/languageicon.svg b/packages/demobank-ui/src/assets/icons/languageicon.svg new file mode 100644 index 000000000..22d58da65 --- /dev/null +++ b/packages/demobank-ui/src/assets/icons/languageicon.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/demobank-ui/src/assets/icons/mstile-150x150.png b/packages/demobank-ui/src/assets/icons/mstile-150x150.png new file mode 100644 index 000000000..9cfb889be Binary files /dev/null and b/packages/demobank-ui/src/assets/icons/mstile-150x150.png differ diff --git a/packages/demobank-ui/src/assets/logo-white.svg b/packages/demobank-ui/src/assets/logo-white.svg new file mode 100644 index 000000000..cb1f023c5 --- /dev/null +++ b/packages/demobank-ui/src/assets/logo-white.svg @@ -0,0 +1,45 @@ + + + + diff --git a/packages/demobank-ui/src/assets/logo.jpeg b/packages/demobank-ui/src/assets/logo.jpeg new file mode 100644 index 000000000..489832f7c Binary files /dev/null and b/packages/demobank-ui/src/assets/logo.jpeg differ diff --git a/packages/demobank-ui/src/components/AsyncButton.tsx b/packages/demobank-ui/src/components/AsyncButton.tsx new file mode 100644 index 000000000..0c4305668 --- /dev/null +++ b/packages/demobank-ui/src/components/AsyncButton.tsx @@ -0,0 +1,66 @@ +/* + 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 + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { ComponentChildren, h, VNode } from 'preact'; +import { useLayoutEffect, useRef } from 'preact/hooks'; +// import { LoadingModal } from "../modal"; +import { useAsync } from '../hooks/async'; +// import { Translate } from "../../i18n"; + +type Props = { + children: ComponentChildren; + disabled?: boolean; + onClick?: () => Promise; + grabFocus?: boolean; + [rest: string]: any; +}; + +export function AsyncButton({ + onClick, + grabFocus, + disabled, + children, + ...rest +}: Props): VNode { + const { isLoading, request } = useAsync(onClick); + + const buttonRef = useRef(null); + useLayoutEffect(() => { + if (grabFocus) + buttonRef.current?.focus(); + + }, [grabFocus]); + + // if (isSlow) { + // return ; + // } + if (isLoading) + return ; + + + return ( + + + + ); +} diff --git a/packages/demobank-ui/src/components/FileButton.tsx b/packages/demobank-ui/src/components/FileButton.tsx new file mode 100644 index 000000000..dba86ccbf --- /dev/null +++ b/packages/demobank-ui/src/components/FileButton.tsx @@ -0,0 +1,57 @@ +import { h, VNode } from 'preact'; +import { useRef, useState } from 'preact/hooks'; + +const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024; + +export interface FileTypeContent { + content: string; + type: string; + name: string; +} + +interface Props { + label: string; + onChange: (v: FileTypeContent | undefined) => void; +} +export function FileButton(props: Props): VNode { + const fileInputRef = useRef(null); + const [sizeError, setSizeError] = useState(false); + return ( +
+ + { + const f: FileList | null = e.currentTarget.files; + if (!f || f.length != 1) + return props.onChange(undefined); + + console.log(f); + if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) { + setSizeError(true); + return props.onChange(undefined); + } + setSizeError(false); + return f[0].arrayBuffer().then((b) => { + const content = new Uint8Array(b).reduce( + (data, byte) => data + String.fromCharCode(byte), + '', + ); + return props.onChange({ + content, + name: f[0].name, + type: f[0].type, + }); + }); + }} + /> + {sizeError && ( +

File should be smaller than 1 MB

+ )} +
+ ); +} diff --git a/packages/demobank-ui/src/components/Notifications.tsx b/packages/demobank-ui/src/components/Notifications.tsx new file mode 100644 index 000000000..09329442a --- /dev/null +++ b/packages/demobank-ui/src/components/Notifications.tsx @@ -0,0 +1,74 @@ +/* + 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 + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { h, VNode } from 'preact'; + +export interface Notification { + message: string; + description?: string | VNode; + type: MessageType; +} + +export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS'; + +interface Props { + notifications: Notification[]; + removeNotification?: (n: Notification) => void; +} + +function messageStyle(type: MessageType): string { + switch (type) { + case 'INFO': + return 'message is-info'; + case 'WARN': + return 'message is-warning'; + case 'ERROR': + return 'message is-danger'; + case 'SUCCESS': + return 'message is-success'; + default: + return 'message'; + } +} + +export function Notifications({ + notifications, + removeNotification, +}: Props): VNode { + return ( +
+ {notifications.map((n, i) => ( +
+
+

{n.message}

+ {removeNotification && ( +
+ {n.description &&
{n.description}
} +
+ ))} +
+ ); +} diff --git a/packages/demobank-ui/src/components/QR.tsx b/packages/demobank-ui/src/components/QR.tsx new file mode 100644 index 000000000..ee5b73c69 --- /dev/null +++ b/packages/demobank-ui/src/components/QR.tsx @@ -0,0 +1,48 @@ +/* + 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 + */ + +import { h, VNode } from 'preact'; +import { useEffect, useRef } from 'preact/hooks'; +import qrcode from 'qrcode-generator'; + +export function QR({ text }: { text: string }): VNode { + const divRef = useRef(null); + useEffect(() => { + const qr = qrcode(0, 'L'); + qr.addData(text); + qr.make(); + if (divRef.current) + divRef.current.innerHTML = qr.createSvgTag({ + scalable: true, + }); + }); + + return ( +
+
+
+ ); +} diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx new file mode 100644 index 000000000..5338c548e --- /dev/null +++ b/packages/demobank-ui/src/components/app.tsx @@ -0,0 +1,14 @@ +import { FunctionalComponent, h } from 'preact'; +import { TranslationProvider } from '../context/translation'; +import { BankHome } from '../pages/home/index'; +import { Menu } from './menu'; + +const App: FunctionalComponent = () => { + return ( + + + + ); +}; + +export default App; diff --git a/packages/demobank-ui/src/components/fields/DateInput.tsx b/packages/demobank-ui/src/components/fields/DateInput.tsx new file mode 100644 index 000000000..06ec4b6a7 --- /dev/null +++ b/packages/demobank-ui/src/components/fields/DateInput.tsx @@ -0,0 +1,90 @@ +import { format, subYears } from 'date-fns'; +import { h, VNode } from 'preact'; +import { useLayoutEffect, useRef, useState } from 'preact/hooks'; +import { DatePicker } from '../picker/DatePicker'; + +export interface DateInputProps { + label: string; + grabFocus?: boolean; + tooltip?: string; + error?: string; + years?: Array; + onConfirm?: () => void; + bind: [string, (x: string) => void]; +} + +export function DateInput(props: DateInputProps): VNode { + const inputRef = useRef(null); + useLayoutEffect(() => { + if (props.grabFocus) + inputRef.current?.focus(); + + }, [props.grabFocus]); + const [opened, setOpened] = useState(false); + + const value = props.bind[0] || ''; + const [dirty, setDirty] = useState(false); + const showError = dirty && props.error; + + const calendar = subYears(new Date(), 30); + + return ( +
+ +
+
+

+ { + if (e.key === 'Enter' && props.onConfirm) + props.onConfirm() + + }} + onInput={(e) => { + const text = e.currentTarget.value; + setDirty(true); + props.bind[1](text); + }} + ref={inputRef} + /> +

+

+ { + setOpened(true); + }} + > + + + + +

+
+
+

Using the format yyyy-mm-dd

+ {showError &&

{props.error}

} + setOpened(false)} + dateReceiver={(d) => { + setDirty(true); + const v = format(d, 'yyyy-MM-dd'); + props.bind[1](v); + }} + /> +
+ ); +} diff --git a/packages/demobank-ui/src/components/fields/EmailInput.tsx b/packages/demobank-ui/src/components/fields/EmailInput.tsx new file mode 100644 index 000000000..8b64264ed --- /dev/null +++ b/packages/demobank-ui/src/components/fields/EmailInput.tsx @@ -0,0 +1,57 @@ +import { h, VNode } from 'preact'; +import { useLayoutEffect, useRef, useState } from 'preact/hooks'; + +export interface TextInputProps { + label: string; + grabFocus?: boolean; + error?: string; + placeholder?: string; + tooltip?: string; + onConfirm?: () => void; + bind: [string, (x: string) => void]; +} + +export function EmailInput(props: TextInputProps): VNode { + const inputRef = useRef(null); + useLayoutEffect(() => { + if (props.grabFocus) + inputRef.current?.focus(); + + }, [props.grabFocus]); + const value = props.bind[0]; + const [dirty, setDirty] = useState(false); + const showError = dirty && props.error; + return ( +
+ +
+ { + if (e.key === 'Enter' && props.onConfirm) + props.onConfirm() + + }} + onInput={(e) => { + setDirty(true); + props.bind[1]((e.target as HTMLInputElement).value); + }} + ref={inputRef} + style={{ display: 'block' }} + /> +
+ {showError &&

{props.error}

} +
+ ); +} diff --git a/packages/demobank-ui/src/components/fields/FileInput.tsx b/packages/demobank-ui/src/components/fields/FileInput.tsx new file mode 100644 index 000000000..17413b907 --- /dev/null +++ b/packages/demobank-ui/src/components/fields/FileInput.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 + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ +import { h, VNode } from 'preact'; +import { useLayoutEffect, useRef, useState } from 'preact/hooks'; + +const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024; + +export interface FileTypeContent { + content: string; + type: string; + name: string; +} + +export interface FileInputProps { + label: string; + grabFocus?: boolean; + disabled?: boolean; + error?: string; + placeholder?: string; + tooltip?: string; + onChange: (v: FileTypeContent | undefined) => void; +} + +export function FileInput(props: FileInputProps): VNode { + const inputRef = useRef(null); + useLayoutEffect(() => { + if (props.grabFocus) + inputRef.current?.focus(); + + }, [props.grabFocus]); + + const fileInputRef = useRef(null); + const [sizeError, setSizeError] = useState(false); + return ( +
+ +
+ { + const f: FileList | null = e.currentTarget.files; + if (!f || f.length != 1) + return props.onChange(undefined); + + console.log(f) + if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) { + setSizeError(true); + return props.onChange(undefined); + } + setSizeError(false); + return f[0].arrayBuffer().then((b) => { + const b64 = btoa( + new Uint8Array(b).reduce( + (data, byte) => data + String.fromCharCode(byte), + '', + ), + ); + return props.onChange({content: `data:${f[0].type};base64,${b64}`, name: f[0].name, type: f[0].type}); + }); + }} + /> + {props.error &&

{props.error}

} + {sizeError && ( +

File should be smaller than 1 MB

+ )} +
+
+ ); +} diff --git a/packages/demobank-ui/src/components/fields/ImageInput.tsx b/packages/demobank-ui/src/components/fields/ImageInput.tsx new file mode 100644 index 000000000..98457af21 --- /dev/null +++ b/packages/demobank-ui/src/components/fields/ImageInput.tsx @@ -0,0 +1,93 @@ +/* + 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 + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ +import { h, VNode } from 'preact'; +import { useLayoutEffect, useRef, useState } from 'preact/hooks'; +import emptyImage from '../../assets/empty.png'; +import { TextInputProps } from './TextInput'; + +const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024; + +export function ImageInput(props: TextInputProps): VNode { + const inputRef = useRef(null); + useLayoutEffect(() => { + if (props.grabFocus) + inputRef.current?.focus(); + + }, [props.grabFocus]); + + const value = props.bind[0]; + // const [dirty, setDirty] = useState(false) + const image = useRef(null); + const [sizeError, setSizeError] = useState(false); + function onChange(v: string): void { + // setDirty(true); + props.bind[1](v); + } + return ( +
+ +
+ image.current?.click()} + /> + { + const f: FileList | null = e.currentTarget.files; + if (!f || f.length != 1) + return onChange(emptyImage); + + if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) { + setSizeError(true); + return onChange(emptyImage); + } + setSizeError(false); + return f[0].arrayBuffer().then((b) => { + const b64 = btoa( + new Uint8Array(b).reduce( + (data, byte) => data + String.fromCharCode(byte), + '', + ), + ); + return onChange(`data:${f[0].type};base64,${b64}` as any); + }); + }} + /> + {props.error &&

{props.error}

} + {sizeError && ( +

Image should be smaller than 1 MB

+ )} +
+
+ ); +} diff --git a/packages/demobank-ui/src/components/fields/NumberInput.tsx b/packages/demobank-ui/src/components/fields/NumberInput.tsx new file mode 100644 index 000000000..881c61c57 --- /dev/null +++ b/packages/demobank-ui/src/components/fields/NumberInput.tsx @@ -0,0 +1,56 @@ +import { h, VNode } from 'preact'; +import { useLayoutEffect, useRef, useState } from 'preact/hooks'; + +export interface TextInputProps { + label: string; + grabFocus?: boolean; + error?: string; + placeholder?: string; + tooltip?: string; + onConfirm?: () => void; + bind: [string, (x: string) => void]; +} + +export function PhoneNumberInput(props: TextInputProps): VNode { + const inputRef = useRef(null); + useLayoutEffect(() => { + if (props.grabFocus) + inputRef.current?.focus(); + + }, [props.grabFocus]); + const value = props.bind[0]; + const [dirty, setDirty] = useState(false); + const showError = dirty && props.error; + return ( +
+ +
+ { + if (e.key === 'Enter' && props.onConfirm) + props.onConfirm() + + }} + onInput={(e) => { + setDirty(true); + props.bind[1]((e.target as HTMLInputElement).value); + }} + ref={inputRef} + style={{ display: 'block' }} + /> +
+ {showError &&

{props.error}

} +
+ ); +} diff --git a/packages/demobank-ui/src/components/fields/TextInput.tsx b/packages/demobank-ui/src/components/fields/TextInput.tsx new file mode 100644 index 000000000..5cc9f32ad --- /dev/null +++ b/packages/demobank-ui/src/components/fields/TextInput.tsx @@ -0,0 +1,68 @@ +import { h, VNode } from 'preact'; +import { useLayoutEffect, useRef, useState } from 'preact/hooks'; + +export interface TextInputProps { + inputType?: 'text' | 'number' | 'multiline' | 'password'; + label: string; + grabFocus?: boolean; + disabled?: boolean; + error?: string; + placeholder?: string; + tooltip?: string; + onConfirm?: () => void; + bind: [string, (x: string) => void]; +} + +const TextInputType = function ({ inputType, grabFocus, ...rest }: any): VNode { + const inputRef = useRef(null); + useLayoutEffect(() => { + if (grabFocus) + inputRef.current?.focus(); + + }, [grabFocus]); + + return inputType === 'multiline' ? ( +