From 2ec2161a7e1c0787b5e9ea14311f19c6b6a52d63 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 22 Oct 2021 01:31:46 -0300 Subject: [PATCH] some storybook exmaples --- packages/anastasis-core/src/reducer-types.ts | 6 +- packages/anastasis-webui/.gitignore | 1 + packages/anastasis-webui/.storybook/.babelrc | 25 + packages/anastasis-webui/.storybook/main.js | 57 + .../anastasis-webui/.storybook/preview.js | 49 + packages/anastasis-webui/package.json | 10 +- .../src/components/menu/SideBar.tsx | 164 ++- .../anastasis-webui/src/context/anastasis.ts | 41 + .../home/AttributeEntryScreen.stories.tsx | 63 + .../src/pages/home/AttributeEntryScreen.tsx | 25 +- .../AuthenticationEditorScreen.stories.tsx | 35 + .../pages/home/AuthenticationEditorScreen.tsx | 19 +- .../home/BackupFinishedScreen.stories.tsx | 60 + .../src/pages/home/BackupFinishedScreen.tsx | 26 +- .../home/ChallengeOverviewScreen.stories.tsx | 83 ++ .../pages/home/ChallengeOverviewScreen.tsx | 39 +- .../home/ContinentSelectionScreen.stories.tsx | 36 + .../pages/home/ContinentSelectionScreen.tsx | 17 +- .../home/CountrySelectionScreen.stories.tsx | 36 + .../src/pages/home/CountrySelectionScreen.tsx | 20 +- .../home/PoliciesPayingScreen.stories.tsx | 47 + .../src/pages/home/PoliciesPayingScreen.tsx | 18 +- .../home/RecoveryFinishedScreen.stories.tsx | 42 + .../src/pages/home/RecoveryFinishedScreen.tsx | 24 +- .../home/ReviewPoliciesScreen.stories.tsx | 81 ++ .../src/pages/home/ReviewPoliciesScreen.tsx | 42 +- .../pages/home/SecretEditorScreen.stories.tsx | 44 + .../src/pages/home/SecretEditorScreen.tsx | 25 +- .../home/SecretSelectionScreen.stories.tsx | 50 + .../src/pages/home/SecretSelectionScreen.tsx | 37 +- .../src/pages/home/SolveEmailEntry.tsx | 13 +- .../src/pages/home/SolvePostEntry.tsx | 11 +- .../src/pages/home/SolveQuestionEntry.tsx | 11 +- .../src/pages/home/SolveScreen.stories.tsx | 121 ++ .../src/pages/home/SolveScreen.tsx | 32 +- .../src/pages/home/SolveSmsEntry.tsx | 13 +- .../src/pages/home/StartScreen.stories.tsx | 35 + .../src/pages/home/StartScreen.tsx | 32 +- .../pages/home/TruthsPayingScreen.stories.tsx | 40 + .../src/pages/home/TruthsPayingScreen.tsx | 16 +- .../anastasis-webui/src/pages/home/index.tsx | 170 +-- packages/anastasis-webui/src/utils/index.tsx | 161 +++ pnpm-lock.yaml | 1155 ++++++++++++++++- 43 files changed, 2737 insertions(+), 295 deletions(-) create mode 100644 packages/anastasis-webui/.storybook/.babelrc create mode 100644 packages/anastasis-webui/.storybook/main.js create mode 100644 packages/anastasis-webui/.storybook/preview.js create mode 100644 packages/anastasis-webui/src/context/anastasis.ts create mode 100644 packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/utils/index.tsx diff --git a/packages/anastasis-core/src/reducer-types.ts b/packages/anastasis-core/src/reducer-types.ts index f7ba9e0f1..1a443bf9b 100644 --- a/packages/anastasis-core/src/reducer-types.ts +++ b/packages/anastasis-core/src/reducer-types.ts @@ -23,7 +23,7 @@ export interface Policy { authentication_method: number; provider: string; }[]; -} +} export interface PolicyProvider { provider_url: string; @@ -51,7 +51,7 @@ export interface ReducerStateBackup { identity_attributes?: { [n: string]: string }; authentication_providers?: { [url: string]: AuthenticationProviderStatus }; authentication_methods?: AuthMethod[]; - required_attributes?: any; + required_attributes?: UserAttributeSpec[]; selected_continent?: string; selected_country?: string; secret_name?: string; @@ -133,7 +133,7 @@ export interface ReducerStateRecovery { selected_country?: string; currencies?: string[]; - required_attributes?: any; + required_attributes?: UserAttributeSpec[]; /** * Recovery information, used by the UI. diff --git a/packages/anastasis-webui/.gitignore b/packages/anastasis-webui/.gitignore index 5baa9defe..32d0a5057 100644 --- a/packages/anastasis-webui/.gitignore +++ b/packages/anastasis-webui/.gitignore @@ -2,3 +2,4 @@ node_modules /build /*.log /size-plugin.json +/storybook-static/ diff --git a/packages/anastasis-webui/.storybook/.babelrc b/packages/anastasis-webui/.storybook/.babelrc new file mode 100644 index 000000000..610b6f339 --- /dev/null +++ b/packages/anastasis-webui/.storybook/.babelrc @@ -0,0 +1,25 @@ +/* + 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) + */ +{ + "presets": [ + "preact-cli/babel" + ] +} \ No newline at end of file diff --git a/packages/anastasis-webui/.storybook/main.js b/packages/anastasis-webui/.storybook/main.js new file mode 100644 index 000000000..f8e4bbcc7 --- /dev/null +++ b/packages/anastasis-webui/.storybook/main.js @@ -0,0 +1,57 @@ +/* + 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) +*/ + + +module.exports = { + "stories": [ + "../src/**/*.stories.mdx", + "../src/**/*.stories.@(js|jsx|ts|tsx)" + ], + "addons": [ + "@storybook/preset-scss", + "@storybook/addon-a11y", + "@storybook/addon-essentials" //docs, control, actions, viewpot, toolbar, background + ], + // sb does not yet support new jsx transform by default + // https://github.com/storybookjs/storybook/issues/12881 + // https://github.com/storybookjs/storybook/issues/12952 + babel: async (options) => ({ + ...options, + presets: [ + ...options.presets, + [ + '@babel/preset-react', { + runtime: 'automatic', + }, + 'preset-react-jsx-transform' + ], + ], + }), + webpackFinal: (config) => { + // should be removed after storybook 6.3 + // https://github.com/storybookjs/storybook/issues/12853#issuecomment-821576113 + config.resolve.alias = { + react: "preact/compat", + "react-dom": "preact/compat", + }; + return config; + }, +} \ No newline at end of file diff --git a/packages/anastasis-webui/.storybook/preview.js b/packages/anastasis-webui/.storybook/preview.js new file mode 100644 index 000000000..7cb9405ba --- /dev/null +++ b/packages/anastasis-webui/.storybook/preview.js @@ -0,0 +1,49 @@ +/* + 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 "../src/scss/main.scss" +import { TranslationProvider } from '../src/context/translation' +import { h } from 'preact'; + + +export const parameters = { + controls: { expanded: true }, +} + +export const globalTypes = { + locale: { + name: 'Locale', + description: 'Internationalization locale', + defaultValue: 'en', + toolbar: { + icon: 'globe', + items: [ + { value: 'en', right: 'πŸ‡ΊπŸ‡Έ', title: 'English' }, + { value: 'es', right: 'πŸ‡ͺπŸ‡Έ', title: 'Spanish' }, + ], + }, + }, +}; + +export const decorators = [ + (Story, { globals }) => { + document.body.parentElement.classList = "has-aside-left has-aside-mobile-transition has-navbar-fixed-top has-aside-expanded" + return + }, + (Story, { globals }) => + + , +]; diff --git a/packages/anastasis-webui/package.json b/packages/anastasis-webui/package.json index 8f7711313..57cfdd8d4 100644 --- a/packages/anastasis-webui/package.json +++ b/packages/anastasis-webui/package.json @@ -8,7 +8,9 @@ "serve": "sirv build --port 8080 --cors --single", "dev": "preact watch", "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'", - "test": "jest ./tests" + "test": "jest ./tests", + "build-storybook": "build-storybook", + "storybook": "start-storybook -p 6006" }, "eslintConfig": { "parser": "@typescript-eslint/parser", @@ -30,6 +32,12 @@ }, "devDependencies": { "@creativebulma/bulma-tooltip": "^1.2.0", + "@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", "@types/enzyme": "^3.10.5", "@types/jest": "^26.0.8", "@typescript-eslint/eslint-plugin": "^2.25.0", diff --git a/packages/anastasis-webui/src/components/menu/SideBar.tsx b/packages/anastasis-webui/src/components/menu/SideBar.tsx index 628adb571..df582a5d0 100644 --- a/packages/anastasis-webui/src/components/menu/SideBar.tsx +++ b/packages/anastasis-webui/src/components/menu/SideBar.tsx @@ -20,7 +20,9 @@ */ -import { h, VNode } from 'preact'; +import { Fragment, h, VNode } from 'preact'; +import { BackupStates, RecoveryStates } from '../../../../anastasis-core/lib'; +import { useAnastasisContext } from '../../context/anastasis'; import { Translate } from '../../i18n'; import { LangSelector } from './LangSelector'; @@ -31,8 +33,9 @@ interface Props { export function Sidebar({ mobile }: Props): VNode { // const config = useConfigContext(); const config = { version: 'none' } - const process = { env : { __VERSION__: '0.0.0'}} - + const process = { env: { __VERSION__: '0.0.0' } } + const reducer = useAnastasisContext()! + return ( diff --git a/packages/anastasis-webui/src/context/anastasis.ts b/packages/anastasis-webui/src/context/anastasis.ts new file mode 100644 index 000000000..e7f93ed43 --- /dev/null +++ b/packages/anastasis-webui/src/context/anastasis.ts @@ -0,0 +1,41 @@ +/* + 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 { createContext, h, VNode } from 'preact'; +import { useContext } from 'preact/hooks'; +import { AnastasisReducerApi } from '../hooks/use-anastasis-reducer'; + +type Type = AnastasisReducerApi | undefined; + +const initial = undefined + +const Context = createContext(initial) + +interface Props { + value: AnastasisReducerApi; + children: any; +} + +export const AnastasisProvider = ({ value, children }: Props): VNode => { + return h(Context.Provider, { value, children }); +} + +export const useAnastasisContext = (): Type => useContext(Context); \ No newline at end of file diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx new file mode 100644 index 000000000..d28a6df43 --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx @@ -0,0 +1,63 @@ +/* eslint-disable @typescript-eslint/camelcase */ +/* + 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 { ReducerState } from 'anastasis-core'; +import { createExample, reducerStatesExample } from '../../utils'; +import { AttributeEntryScreen as TestedComponent } from './AttributeEntryScreen'; + + +export default { + title: 'Pages/AttributeEntryScreen', + component: TestedComponent, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const WithSomeAttributes = createExample(TestedComponent, { + ...reducerStatesExample.attributeEditing, + required_attributes: [{ + name: 'first', + label: 'first', + type: 'type', + uuid: 'asdasdsa1', + widget: 'wid', + }, { + name: 'pepe', + label: 'second', + type: 'type', + uuid: 'asdasdsa2', + widget: 'wid', + }, { + name: 'pepe2', + label: 'third', + type: 'type', + uuid: 'asdasdsa3', + widget: 'calendar', + }] +} as ReducerState); + +export const Empty = createExample(TestedComponent, { + ...reducerStatesExample.attributeEditing, + required_attributes: undefined +} as ReducerState); diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx index 6f87a3358..2f804f940 100644 --- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx @@ -1,15 +1,24 @@ /* eslint-disable @typescript-eslint/camelcase */ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { ReducerStateRecovery, ReducerStateBackup } from "../../../../anastasis-core/lib"; +import { ReducerStateRecovery, ReducerStateBackup, UserAttributeSpec } from "anastasis-core/lib"; +import { useAnastasisContext } from "../../context/anastasis"; import { AnastasisReducerApi } from "../../hooks/use-anastasis-reducer"; import { AnastasisClientFrame, withProcessLabel, LabeledInput } from "./index"; -export function AttributeEntryScreen(props: AttributeEntryProps): VNode { - const { reducer, reducerState: backupState } = props; - const [attrs, setAttrs] = useState>( - props.reducerState.identity_attributes ?? {} - ); +export function AttributeEntryScreen(): VNode { + const reducer = useAnastasisContext() + const state = reducer?.currentReducerState + const currentIdentityAttributes = state && "identity_attributes" in state ? (state.identity_attributes || {}) : {} + const [attrs, setAttrs] = useState>(currentIdentityAttributes); + + if (!reducer) { + return
no reducer in context
+ } + if (!reducer.currentReducerState || !("required_attributes" in reducer.currentReducerState)) { + return
invalid state
+ } + return ( - {backupState.required_attributes.map((x: any, i: number) => { + {reducer.currentReducerState.required_attributes?.map((x, i: number) => { return ( void; - spec: any; + spec: UserAttributeSpec; } export function AttributeEntryField(props: AttributeEntryFieldProps): VNode { diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx new file mode 100644 index 000000000..44d3795b2 --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx @@ -0,0 +1,35 @@ +/* + 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 { createExample, reducerStatesExample } from '../../utils'; +import { AuthenticationEditorScreen as TestedComponent } from './AuthenticationEditorScreen'; + + +export default { + title: 'Pages/AuthenticationEditorScreen', + component: TestedComponent, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const Example = createExample(TestedComponent, reducerStatesExample.authEditing); diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx index fc28942aa..e9ffccbac 100644 --- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx @@ -1,7 +1,8 @@ /* eslint-disable @typescript-eslint/camelcase */ +import { AuthMethod, ReducerStateBackup } from "anastasis-core"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { AuthMethod, ReducerStateBackup } from "anastasis-core"; +import { useAnastasisContext } from "../../context/anastasis"; import { AnastasisReducerApi } from "../../hooks/use-anastasis-reducer"; import { AuthMethodEmailSetup } from "./AuthMethodEmailSetup"; import { AuthMethodPostSetup } from "./AuthMethodPostSetup"; @@ -9,12 +10,18 @@ import { AuthMethodQuestionSetup } from "./AuthMethodQuestionSetup"; import { AuthMethodSmsSetup } from "./AuthMethodSmsSetup"; import { AnastasisClientFrame } from "./index"; -export function AuthenticationEditorScreen(props: AuthenticationEditorProps): VNode { +export function AuthenticationEditorScreen(): VNode { const [selectedMethod, setSelectedMethod] = useState( undefined ); - const { reducer, backupState } = props; - const providers = backupState.authentication_providers!; + const reducer = useAnastasisContext() + if (!reducer) { + return
no reducer in context
+ } + if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) { + return
invalid state
+ } + const providers = reducer.currentReducerState.authentication_providers!; const authAvailableSet = new Set(); for (const provKey of Object.keys(providers)) { const p = providers[provKey]; @@ -52,14 +59,14 @@ export function AuthenticationEditorScreen(props: AuthenticationEditorProps): VN disabled={!authAvailableSet.has(props.method)} onClick={() => { setSelectedMethod(props.method); - reducer.dismissError(); + if (reducer) reducer.dismissError(); }} > {props.label} ); } - const configuredAuthMethods: AuthMethod[] = backupState.authentication_methods ?? []; + const configuredAuthMethods: AuthMethod[] = reducer.currentReducerState.authentication_methods ?? []; const haveMethodsConfigured = configuredAuthMethods.length; return ( diff --git a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx new file mode 100644 index 000000000..65a2b7e13 --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx @@ -0,0 +1,60 @@ +/* eslint-disable @typescript-eslint/camelcase */ +/* + 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 { ReducerState } from 'anastasis-core'; +import { createExample, reducerStatesExample } from '../../utils'; +import { BackupFinishedScreen as TestedComponent } from './BackupFinishedScreen'; + + +export default { + title: 'Pages/BackupFinishedScreen', + component: TestedComponent, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const Simple = createExample(TestedComponent, reducerStatesExample.backupFinished); + +export const WithName = createExample(TestedComponent, {...reducerStatesExample.backupFinished, + secret_name: 'super_secret', +} as ReducerState); + +export const WithDetails = createExample(TestedComponent, { + ...reducerStatesExample.backupFinished, + secret_name: 'super_secret', + success_details: { + 'http://anastasis.net': { + policy_expiration: { + t_ms: 'never' + }, + policy_version: 0 + }, + 'http://taler.net': { + policy_expiration: { + t_ms: new Date().getTime() + 60*60*24*1000 + }, + policy_version: 1 + }, + } +} as ReducerState); diff --git a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.tsx b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.tsx index 6c2770947..218f1d1fd 100644 --- a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.tsx @@ -1,23 +1,33 @@ import { h, VNode } from "preact"; -import { BackupReducerProps, AnastasisClientFrame } from "./index"; +import { useAnastasisContext } from "../../context/anastasis"; +import { AnastasisClientFrame } from "./index"; -export function BackupFinishedScreen(props: BackupReducerProps): VNode { +export function BackupFinishedScreen(): VNode { + const reducer = useAnastasisContext() + if (!reducer) { + return
no reducer in context
+ } + if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) { + return
invalid state
+ } + const details = reducer.currentReducerState.success_details return (

- Your backup of secret "{props.backupState.secret_name ?? "??"}" was + Your backup of secret "{reducer.currentReducerState.secret_name ?? "??"}" was successful.

The backup is stored by the following providers:

-
    - {Object.keys(props.backupState.success_details!).map((x, i) => { - const sd = props.backupState.success_details![x]; + + {details &&
      + {Object.keys(details).map((x, i) => { + const sd = details[x]; return (
    • {x} (Policy version {sd.policy_version})
      • ); })} -
    - +
} + ); } diff --git a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx new file mode 100644 index 000000000..4f186c031 --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx @@ -0,0 +1,83 @@ +/* eslint-disable @typescript-eslint/camelcase */ +/* + 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 { ReducerState } from 'anastasis-core'; +import { createExample, reducerStatesExample } from '../../utils'; +import { ChallengeOverviewScreen as TestedComponent } from './ChallengeOverviewScreen'; + + +export default { + title: 'Pages/ChallengeOverviewScreen', + component: TestedComponent, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const OneChallenge = createExample(TestedComponent, {...reducerStatesExample.challengeSelecting, + recovery_information: { + policies: [[{uuid:'1'}]], + challenges: [{ + cost: 'USD:1', + instructions: 'just go for it', + type: 'question', + uuid: '1', + }] + }, +} as ReducerState); + +export const MoreChallenges = createExample(TestedComponent, {...reducerStatesExample.challengeSelecting, + recovery_information: { + policies: [[{uuid:'1'}, {uuid:'2'}],[{uuid:'3'}]], + challenges: [{ + cost: 'USD:1', + instructions: 'just go for it', + type: 'question', + uuid: '1', + },{ + cost: 'USD:1', + instructions: 'just go for it', + type: 'question', + uuid: '2', + },{ + cost: 'USD:1', + instructions: 'just go for it', + type: 'question', + uuid: '3', + }] + }, +} as ReducerState); + +export const OneBadConfiguredPolicy = createExample(TestedComponent, {...reducerStatesExample.challengeSelecting, + recovery_information: { + policies: [[{uuid:'2'}]], + challenges: [{ + cost: 'USD:1', + instructions: 'just go for it', + type: 'sasd', + uuid: '1', + }] + }, +} as ReducerState); + +export const NoPolicies = createExample(TestedComponent, reducerStatesExample.challengeSelecting); diff --git a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx index 1f108ce6d..c9b52e91b 100644 --- a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx @@ -1,10 +1,21 @@ import { h, VNode } from "preact"; -import { RecoveryReducerProps, AnastasisClientFrame } from "./index"; +import { useAnastasisContext } from "../../context/anastasis"; +import { AnastasisClientFrame } from "./index"; + +export function ChallengeOverviewScreen(): VNode { + const reducer = useAnastasisContext() + + if (!reducer) { + return
no reducer in context
+ } + if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) { + return
invalid state
+ } + + const policies = reducer.currentReducerState.recovery_information?.policies ?? []; + const chArr = reducer.currentReducerState.recovery_information?.challenges ?? []; + const challengeFeedback = reducer.currentReducerState?.challenge_feedback; -export function ChallengeOverviewScreen(props: RecoveryReducerProps): VNode { - const { recoveryState, reducer } = props; - const policies = recoveryState.recovery_information!.policies; - const chArr = recoveryState.recovery_information!.challenges; const challenges: { [uuid: string]: { type: string; @@ -22,15 +33,21 @@ export function ChallengeOverviewScreen(props: RecoveryReducerProps): VNode { return (

Policies

- {policies.map((x, i) => { + {!policies.length &&

+ No policies found +

} + {policies.map((row, i) => { return (

Policy #{i + 1}

- {x.map((x, j) => { - const ch = challenges[x.uuid]; - const feedback = recoveryState.challenge_feedback?.[x.uuid]; + {row.map(column => { + const ch = challenges[column.uuid]; + if (!ch) return
+ There is no challenge for this policy +
+ const feedback = challengeFeedback?.[column.uuid]; return ( -
reducer.transition("select_challenge", { - uuid: x.uuid, + uuid: column.uuid, })} > Solve diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx new file mode 100644 index 000000000..aad37cd7f --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx @@ -0,0 +1,36 @@ +/* + 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 { createExample, reducerStatesExample } from '../../utils'; +import { ContinentSelectionScreen as TestedComponent } from './ContinentSelectionScreen'; + + +export default { + title: 'Pages/ContinentSelectionScreen', + component: TestedComponent, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const Backup = createExample(TestedComponent, reducerStatesExample.backupSelectCountry); +export const Recovery = createExample(TestedComponent, reducerStatesExample.recoverySelectCountry); diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx index 2fed23d4e..ad529a4a7 100644 --- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx @@ -1,15 +1,16 @@ import { h, VNode } from "preact"; -import { CommonReducerProps, AnastasisClientFrame, withProcessLabel } from "./index"; +import { useAnastasisContext } from "../../context/anastasis"; +import { AnastasisClientFrame, withProcessLabel } from "./index"; -export function ContinentSelectionScreen(props: CommonReducerProps): VNode { - const { reducer, reducerState } = props; +export function ContinentSelectionScreen(): VNode { + const reducer = useAnastasisContext() + if (!reducer || !reducer.currentReducerState || !("continents" in reducer.currentReducerState)) { + return
+ } const sel = (x: string): void => reducer.transition("select_continent", { continent: x }); return ( - - {reducerState.continents.map((x: any) => ( + + {reducer.currentReducerState.continents.map((x: any) => ( diff --git a/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx new file mode 100644 index 000000000..adf36980f --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx @@ -0,0 +1,36 @@ +/* + 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 { createExample, reducerStatesExample } from '../../utils'; +import { CountrySelectionScreen as TestedComponent } from './CountrySelectionScreen'; + + +export default { + title: 'Pages/CountrySelectionScreen', + component: TestedComponent, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const Backup = createExample(TestedComponent, reducerStatesExample.backupSelectCountry); +export const Recovery = createExample(TestedComponent, reducerStatesExample.recoverySelectCountry); diff --git a/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx index dbe4b7616..555622c1d 100644 --- a/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx @@ -1,19 +1,23 @@ /* eslint-disable @typescript-eslint/camelcase */ import { h, VNode } from "preact"; -import { CommonReducerProps, AnastasisClientFrame, withProcessLabel } from "./index"; +import { useAnastasisContext } from "../../context/anastasis"; +import { AnastasisClientFrame, withProcessLabel } from "./index"; -export function CountrySelectionScreen(props: CommonReducerProps): VNode { - const { reducer, reducerState } = props; +export function CountrySelectionScreen(): VNode { + const reducer = useAnastasisContext() + if (!reducer) { + return
no reducer in context
+ } + if (!reducer.currentReducerState || !("countries" in reducer.currentReducerState)) { + return
invalid state
+ } const sel = (x: any): void => reducer.transition("select_country", { country_code: x.code, currencies: [x.currency], }); return ( - - {reducerState.countries.map((x: any) => ( + + {reducer.currentReducerState.countries.map((x: any) => ( diff --git a/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx new file mode 100644 index 000000000..1a9462b88 --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx @@ -0,0 +1,47 @@ +/* eslint-disable @typescript-eslint/camelcase */ +/* + 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 { ReducerState } from 'anastasis-core'; +import { createExample, reducerStatesExample } from '../../utils'; +import { PoliciesPayingScreen as TestedComponent } from './PoliciesPayingScreen'; + + +export default { + title: 'Pages/PoliciesPayingScreen', + component: TestedComponent, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const Example = createExample(TestedComponent, reducerStatesExample.policyPay); +export const WithSomePaymentRequest = createExample(TestedComponent, { + ...reducerStatesExample.policyPay, + policy_payment_requests: [{ + payto: 'payto://x-taler-bank/bank.taler/account-a', + provider: 'provider1' + }, { + payto: 'payto://x-taler-bank/bank.taler/account-b', + provider: 'provider2' + }] +} as ReducerState); diff --git a/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.tsx b/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.tsx index be74729eb..8a39cf0e4 100644 --- a/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.tsx @@ -1,9 +1,17 @@ import { h, VNode } from "preact"; -import { BackupReducerProps, AnastasisClientFrame } from "./index"; - -export function PoliciesPayingScreen(props: BackupReducerProps): VNode { - const payments = props.backupState.policy_payment_requests ?? []; +import { useAnastasisContext } from "../../context/anastasis"; +import { AnastasisClientFrame } from "./index"; +export function PoliciesPayingScreen(): VNode { + const reducer = useAnastasisContext() + if (!reducer) { + return
no reducer in context
+ } + if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) { + return
invalid state
+ } + const payments = reducer.currentReducerState.policy_payment_requests ?? []; + return (

@@ -19,7 +27,7 @@ export function PoliciesPayingScreen(props: BackupReducerProps): VNode { ); })} - diff --git a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx new file mode 100644 index 000000000..0c1842420 --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx @@ -0,0 +1,42 @@ +/* eslint-disable @typescript-eslint/camelcase */ +/* + 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 { ReducerState } from 'anastasis-core'; +import { createExample, reducerStatesExample } from '../../utils'; +import { RecoveryFinishedScreen as TestedComponent } from './RecoveryFinishedScreen'; + + +export default { + title: 'Pages/RecoveryFinishedScreen', + component: TestedComponent, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const NormalEnding = createExample(TestedComponent, { + ...reducerStatesExample.recoveryFinished, + core_secret: { mime: 'text/plain', value: 'hello' } +} as ReducerState); + +export const BadEnding = createExample(TestedComponent, reducerStatesExample.recoveryFinished); diff --git a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx index 7ccc511ff..8c8a2c7c8 100644 --- a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx @@ -3,13 +3,31 @@ import { decodeCrock } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; -import { RecoveryReducerProps, AnastasisClientFrame } from "./index"; +import { useAnastasisContext } from "../../context/anastasis"; +import { AnastasisClientFrame } from "./index"; -export function RecoveryFinishedScreen(props: RecoveryReducerProps): VNode { +export function RecoveryFinishedScreen(): VNode { + const reducer = useAnastasisContext() + + if (!reducer) { + return

no reducer in context
+ } + if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) { + return
invalid state
+ } + const encodedSecret = reducer.currentReducerState.core_secret?.value + if (!encodedSecret) { + return +

+ Secret not found +

+ + } + const secret = bytesToString(decodeCrock(encodedSecret)) return (

- Secret: {bytesToString(decodeCrock(props.recoveryState.core_secret?.value!))} + Secret: {secret}

); diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx new file mode 100644 index 000000000..b52699e7b --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx @@ -0,0 +1,81 @@ +/* eslint-disable @typescript-eslint/camelcase */ +/* + 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 { ReducerState } from 'anastasis-core'; +import { createExample, reducerStatesExample } from '../../utils'; +import { ReviewPoliciesScreen as TestedComponent } from './ReviewPoliciesScreen'; + + +export default { + title: 'Pages/ReviewPoliciesScreen', + component: TestedComponent, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const HasPoliciesButMethodListIsEmpty = createExample(TestedComponent, { + ...reducerStatesExample.policyReview, + policies: [{ + methods: [{ + authentication_method: 0, + provider: 'asd' + },{ + authentication_method: 1, + provider: 'asd' + }] + },{ + methods: [{ + authentication_method: 1, + provider: 'asd' + }] + }], + authentication_methods: [] +} as ReducerState); + +export const SomePoliciesWithMethods = createExample(TestedComponent, { + ...reducerStatesExample.policyReview, + policies: [{ + methods: [{ + authentication_method: 0, + provider: 'asd' + },{ + authentication_method: 1, + provider: 'asd' + }] + },{ + methods: [{ + authentication_method: 1, + provider: 'asd' + }] + }], + authentication_methods: [{ + challenge: 'asd', + instructions: 'ins', + type: 'type', + },{ + challenge: 'asd2', + instructions: 'ins2', + type: 'type2', + }] +} as ReducerState); diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx index 3e20538d2..b360ccaf0 100644 --- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx @@ -1,35 +1,49 @@ /* eslint-disable @typescript-eslint/camelcase */ import { h, VNode } from "preact"; -import { BackupReducerProps, AnastasisClientFrame } from "./index"; +import { useAnastasisContext } from "../../context/anastasis"; +import { AnastasisClientFrame } from "./index"; + +export function ReviewPoliciesScreen(): VNode { + const reducer = useAnastasisContext() + if (!reducer) { + return
no reducer in context
+ } + if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) { + return
invalid state
+ } + const authMethods = reducer.currentReducerState.authentication_methods ?? []; + const policies = reducer.currentReducerState.policies ?? []; -export function ReviewPoliciesScreen(props: BackupReducerProps): VNode { - const { reducer, backupState } = props; - const authMethods = backupState.authentication_methods!; return ( - {backupState.policies?.map((p, i) => { - const policyName = p.methods - .map((x, i) => authMethods[x.authentication_method].type) - .join(" + "); + {policies.map((p, policy_index) => { + const methods = p.methods + .map(x => authMethods[x.authentication_method] && ({ ...authMethods[x.authentication_method], provider: x.provider })) + .filter(x => !!x) + + const policyName = methods.map(x => x.type).join(" + "); + return ( -
+

- Policy #{i + 1}: {policyName} + Policy #{policy_index + 1}: {policyName}

Required Authentications: + {!methods.length &&

+ No auth method found +

}
    - {p.methods.map((x, i) => { - const m = authMethods[x.authentication_method]; + {methods.map((m, i) => { return (
  • - {m.type} ({m.instructions}) at provider {x.provider} + {m.type} ({m.instructions}) at provider {m.provider}
    • ); })}
diff --git a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx new file mode 100644 index 000000000..18560356a --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx @@ -0,0 +1,44 @@ +/* eslint-disable @typescript-eslint/camelcase */ +/* + 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 { ReducerState } from 'anastasis-core'; +import { createExample, reducerStatesExample } from '../../utils'; +import { SecretEditorScreen as TestedComponent } from './SecretEditorScreen'; + + +export default { + title: 'Pages/SecretEditorScreen', + component: TestedComponent, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const WithSecretNamePreselected = createExample(TestedComponent, { + ...reducerStatesExample.secretEdition, + secret_name: 'someSecretName', +} as ReducerState); + +export const WithoutName = createExample(TestedComponent, { + ...reducerStatesExample.secretEdition, +} as ReducerState); diff --git a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx index 086d4921d..a5235d66c 100644 --- a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx @@ -2,18 +2,29 @@ import { encodeCrock, stringToBytes } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; +import { useAnastasisContext } from "../../context/anastasis"; import { - BackupReducerProps, AnastasisClientFrame, - LabeledInput, + LabeledInput } from "./index"; -export function SecretEditorScreen(props: BackupReducerProps): VNode { - const { reducer } = props; - const [secretName, setSecretName] = useState( - props.backupState.secret_name ?? "", - ); +export function SecretEditorScreen(): VNode { + const reducer = useAnastasisContext() const [secretValue, setSecretValue] = useState(""); + + const currentSecretName = reducer?.currentReducerState + && ("secret_name" in reducer.currentReducerState) + && reducer.currentReducerState.secret_name; + + const [secretName, setSecretName] = useState(currentSecretName || ""); + + if (!reducer) { + return
no reducer in context
+ } + if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) { + return
invalid state
+ } + const secretNext = (): void => { reducer.runTransaction(async (tx) => { await tx.transition("enter_secret_name", { diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx new file mode 100644 index 000000000..e9c597023 --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx @@ -0,0 +1,50 @@ +/* eslint-disable @typescript-eslint/camelcase */ +/* + 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 { ReducerState } from 'anastasis-core'; +import { createExample, reducerStatesExample } from '../../utils'; +import { SecretSelectionScreen as TestedComponent } from './SecretSelectionScreen'; + + +export default { + title: 'Pages/SecretSelectionScreen', + component: TestedComponent, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const Example = createExample(TestedComponent, { + ...reducerStatesExample.secretSelection, + recovery_document: { + provider_url: 'http://anastasis.url/', + secret_name: 'secretName', + version: 1, + }, +} as ReducerState); + + +export const NoRecoveryDocumentFound = createExample(TestedComponent, { + ...reducerStatesExample.secretSelection, + recovery_document: undefined, +} as ReducerState); diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx index 7cb7fdf20..903f57868 100644 --- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx @@ -1,17 +1,29 @@ /* eslint-disable @typescript-eslint/camelcase */ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { RecoveryReducerProps, AnastasisClientFrame } from "./index"; +import { useAnastasisContext } from "../../context/anastasis"; +import { AnastasisClientFrame } from "./index"; -export function SecretSelectionScreen(props: RecoveryReducerProps): VNode { - const { reducer, recoveryState } = props; +export function SecretSelectionScreen(): VNode { const [selectingVersion, setSelectingVersion] = useState(false); - const [otherVersion, setOtherVersion] = useState( - recoveryState.recovery_document?.version ?? 0 - ); - const recoveryDocument = recoveryState.recovery_document!; const [otherProvider, setOtherProvider] = useState(""); + const reducer = useAnastasisContext() + + const currentVersion = reducer?.currentReducerState + && ("recovery_document" in reducer.currentReducerState) + && reducer.currentReducerState.recovery_document?.version; + + const [otherVersion, setOtherVersion] = useState(currentVersion || 0); + + if (!reducer) { + return
no reducer in context
+ } + if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) { + return
invalid state
+ } + function selectVersion(p: string, n: number): void { + if (!reducer) return; reducer.runTransaction(async (tx) => { await tx.transition("change_version", { version: n, @@ -20,12 +32,21 @@ export function SecretSelectionScreen(props: RecoveryReducerProps): VNode { setSelectingVersion(false); }); } + + const recoveryDocument = reducer.currentReducerState.recovery_document + if (!recoveryDocument) { + return ( + +

No recovery document found

+ + ) + } if (selectingVersion) { return (

Select a different version of the secret