diff --git a/packages/anastasis-webui/package.json b/packages/anastasis-webui/package.json index 0cdb1be71..e60d505bc 100644 --- a/packages/anastasis-webui/package.json +++ b/packages/anastasis-webui/package.json @@ -4,26 +4,12 @@ "version": "0.0.2", "license": "MIT", "scripts": { - "build": "preact build --no-sw --no-esm --no-inline-css", - "serve": "sirv build --port ${PORT:=8080} --cors --single", - "dev": "preact watch --port ${PORT:=8080} --no-sw --no-esm", + "compile": "tsc", + "dev": "./dev.mjs", + "prepare": "pnpm compile", "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'", "test": "echo no tests", - "build-storybook": "build-storybook", - "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", - "pretty": "prettier --write src", - "storybook": "start-storybook -p 6006" - }, - "eslintConfig": { - "parser": "@typescript-eslint/parser", - "extends": [ - "preact", - "plugin:@typescript-eslint/recommended" - ], - "ignorePatterns": [ - "build/" - ] + "pretty": "prettier --write src" }, "dependencies": { "@gnu-taler/anastasis-core": "workspace:*", @@ -41,27 +27,13 @@ }, "devDependencies": { "@creativebulma/bulma-tooltip": "^1.2.0", - "@storybook/addon-a11y": "^6.3.12", - "@storybook/addon-actions": "^6.3.12", - "@storybook/addon-essentials": "^6.3.12", - "@storybook/addon-links": "^6.3.12", - "@storybook/preact": "^6.3.12", - "@storybook/preset-scss": "^1.0.3", - "@types/enzyme": "^3.10.11", - "@typescript-eslint/eslint-plugin": "^5.3.0", - "@typescript-eslint/parser": "^5.3.0", "bulma": "^0.9.3", "bulma-checkbox": "^1.1.1", "bulma-radio": "^1.1.1", - "enzyme": "^3.11.0", - "enzyme-adapter-preact-pure": "^3.2.0", - "eslint": "^8.1.0", - "eslint-config-preact": "^1.2.0", "jssha": "^3.2.0", "preact-cli": "^3.3.1", "sass": "1.32.13", "sass-loader": "^10", - "sirv-cli": "^1.0.14", "typescript": "^4.5.4" } } diff --git a/packages/anastasis-webui/src/components/picker/DurationPicker.tsx b/packages/anastasis-webui/src/components/picker/DurationPicker.tsx index 8a1faf4d0..dc4a13a44 100644 --- a/packages/anastasis-webui/src/components/picker/DurationPicker.tsx +++ b/packages/anastasis-webui/src/components/picker/DurationPicker.tsx @@ -21,7 +21,7 @@ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { useTranslator } from "../../i18n"; +import { useTranslator } from "../../i18n/index.js"; import "../../scss/DurationPicker.scss"; export interface Props { diff --git a/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts b/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts index 1b77db38f..1ff3f66fa 100644 --- a/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts +++ b/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts @@ -323,7 +323,7 @@ export function useAnastasisReducer(): AnastasisReducerApi { }, }); }, - async discoverMore(): Promise {}, + async discoverMore(): Promise { }, async startRecover() { let s: ReducerState; if (remoteReducer) { @@ -403,7 +403,7 @@ export function useAnastasisReducer(): AnastasisReducerApi { } class ReducerTxImpl implements ReducerTransactionHandle { - constructor(public transactionState: ReducerState) {} + constructor(public transactionState: ReducerState) { } async transition(action: string, args: any): Promise { let s: ReducerState; if (remoteReducer) { diff --git a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx index d85aa5974..3f3abdb54 100644 --- a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx @@ -59,48 +59,13 @@ export function AddingProviderScreen({ providerType, onCancel }: Props): VNode { ? authMethods[providerType].label : undefined; - //FIXME: move this timeout logic into a hook - const timeout = useRef(undefined); - useEffect(() => { - if (timeout) window.clearTimeout(timeout.current); - timeout.current = window.setTimeout(async () => { - const url = providerURL.endsWith("/") ? providerURL : providerURL + "/"; - if (!providerURL || authProviders.includes(url)) return; - try { - setTesting(true); - await testProvider(url, providerType); - // this is use as tested but everything when ok - // undefined will mean that the field is not dirty - setError(""); - } catch (e) { - console.log("tuvieja", e); - if (e instanceof Error) setError(e.message); - } - setTesting(false); - }, 200); - }, [providerURL, reducer]); - - if (!reducer) { - return
no reducer in context
; - } - - if ( - !reducer.currentReducerState || - !("authentication_providers" in reducer.currentReducerState) - ) { - return
invalid state
; - } - - async function addProvider(provider_url: string): Promise { - await reducer?.transition("add_provider", { provider_url }); - onCancel(); - } - function deleteProvider(provider_url: string): void { - reducer?.transition("delete_provider", { provider_url }); - } - const allAuthProviders = - reducer.currentReducerState.authentication_providers || {}; + !reducer || + !reducer.currentReducerState || + reducer.currentReducerState.reducer_type === "error" || + !reducer.currentReducerState.authentication_providers + ? {} + : reducer.currentReducerState.authentication_providers; const authProviders = Object.keys(allAuthProviders).filter((provUrl) => { const p = allAuthProviders[provUrl]; if (!providerLabel) { @@ -114,6 +79,43 @@ export function AddingProviderScreen({ providerType, onCancel }: Props): VNode { } }); + //FIXME: move this timeout logic into a hook + const timeout = useRef(undefined); + useEffect(() => { + if (timeout) window.clearTimeout(timeout.current); + timeout.current = window.setTimeout(async () => { + const url = providerURL.endsWith("/") ? providerURL : providerURL + "/"; + if (!providerURL || authProviders.includes(url)) return; + try { + setTesting(true); + await testProvider(url, providerType); + setError(""); + } catch (e) { + if (e instanceof Error) setError(e.message); + } + setTesting(false); + }, 200); + }, [providerURL, reducer]); + + async function addProvider(provider_url: string): Promise { + await reducer?.transition("add_provider", { provider_url }); + onCancel(); + } + function deleteProvider(provider_url: string): void { + reducer?.transition("delete_provider", { provider_url }); + } + + if (!reducer) { + return
no reducer in context
; + } + + if ( + !reducer.currentReducerState || + !("authentication_providers" in reducer.currentReducerState) + ) { + return
invalid state
; + } + let errors = !providerURL ? "Add provider URL" : undefined; let url: string | undefined; try { @@ -190,7 +192,9 @@ export function AddingProviderScreen({ providerType, onCancel }: Props): VNode { {authProviders.map((k) => { const p = allAuthProviders[k] as AuthenticationProviderStatusOk; - return ; + return ( + + ); })} diff --git a/packages/anastasis-webui/src/pages/home/style.css b/packages/anastasis-webui/src/pages/home/style.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/anastasis-webui/src/utils/index.tsx b/packages/anastasis-webui/src/utils/index.tsx index 2e502cacb..a59b19323 100644 --- a/packages/anastasis-webui/src/utils/index.tsx +++ b/packages/anastasis-webui/src/utils/index.tsx @@ -1,6 +1,4 @@ -/* eslint-disable @typescript-eslint/camelcase */ import { - AuthenticationProviderStatus, AuthenticationProviderStatusError, AuthenticationProviderStatusOk, BackupStates, @@ -9,7 +7,11 @@ import { ReducerStateRecovery, } from "@gnu-taler/anastasis-core"; import { FunctionalComponent, h, VNode } from "preact"; -import { AnastasisProvider } from "../context/anastasis"; +import { AnastasisProvider } from "../context/anastasis.js"; + +const noop = async (): Promise => { + return; +}; export function createExample( Component: FunctionalComponent, @@ -21,39 +23,23 @@ export function createExample( {}, - discoverStart: async () => {}, + discoverMore: noop, + discoverStart: noop, discoveryState: { state: "none", }, currentError: undefined, - back: async () => { - null; - }, - dismissError: async () => { - null; - }, - reset: () => { - null; - }, - runTransaction: async () => { - null; - }, - startBackup: () => { - null; - }, - startRecover: () => { - null; - }, - transition: async () => { - null; - }, + back: noop, + dismissError: noop, + reset: noop, + runTransaction: noop, + startBackup: noop, + startRecover: noop, + transition: noop, exportState: () => { return "{}"; }, - importState(s: string) { - /* do nothing */ - }, + importState: noop, }} > diff --git a/packages/anastasis-webui/tsconfig.json b/packages/anastasis-webui/tsconfig.json index b21a04318..2d60fd47a 100644 --- a/packages/anastasis-webui/tsconfig.json +++ b/packages/anastasis-webui/tsconfig.json @@ -3,7 +3,10 @@ /* Basic Options */ "target": "ES6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */, "module": "ESNext" /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */, - // "lib": [], /* Specify library files to be included in the compilation: */ + "lib": [ + "es2021", + "dom" + ], /* Specify library files to be included in the compilation: */ // "allowJs": true /* Allow javascript files to be compiled. */, // "checkJs": true, /* Report errors in .js files. */ "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,