added core validators, worked on look and feel

30 files changed, 336 insertions, 109 deletions

diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx
index d28a6df43..d9be48fb4 100644
--- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx
@@ -28,14 +28,40 @@ import { AttributeEntryScreen as TestedComponent } from './AttributeEntryScreen'
 export default {
   title: 'Pages/AttributeEntryScreen',
   component: TestedComponent,
+  args: {
+    order: 4,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
   },
 };
 
-export const WithSomeAttributes = createExample(TestedComponent, {
-  ...reducerStatesExample.attributeEditing,
+export const Backup = createExample(TestedComponent, {
+  ...reducerStatesExample.backupAttributeEditing,
+  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 Recovery = createExample(TestedComponent, {
+  ...reducerStatesExample.recoveryAttributeEditing,
   required_attributes: [{
     name: 'first',
     label: 'first',
@@ -57,7 +83,40 @@ export const WithSomeAttributes = createExample(TestedComponent, {
   }]
 } as ReducerState);
 
-export const Empty = createExample(TestedComponent, {
-  ...reducerStatesExample.attributeEditing,
+export const WithNoRequiredAttribute = createExample(TestedComponent, {
+  ...reducerStatesExample.backupAttributeEditing,
   required_attributes: undefined
 } as ReducerState);
+
+const allWidgets = [
+  "anastasis_gtk_ia_aadhar_in",
+  "anastasis_gtk_ia_ahv",
+  "anastasis_gtk_ia_birthdate",
+  "anastasis_gtk_ia_birthnumber_cz",
+  "anastasis_gtk_ia_birthnumber_sk",
+  "anastasis_gtk_ia_birthplace",
+  "anastasis_gtk_ia_cf_it",
+  "anastasis_gtk_ia_cpr_dk",
+  "anastasis_gtk_ia_es_dni",
+  "anastasis_gtk_ia_es_ssn",
+  "anastasis_gtk_ia_full_name",
+  "anastasis_gtk_ia_my_jp",
+  "anastasis_gtk_ia_nid_al",
+  "anastasis_gtk_ia_nid_be",
+  "anastasis_gtk_ia_ssn_de",
+  "anastasis_gtk_ia_ssn_us",
+  "anastasis_gtk_ia_tax_de",
+  "anastasis_gtk_xx_prime",
+  "anastasis_gtk_xx_square",
+]
+
+export const WithAllPosibleWidget = createExample(TestedComponent, {
+  ...reducerStatesExample.backupAttributeEditing,
+  required_attributes: allWidgets.map(w => ({
+    name: w,
+    label: `widget: ${w}`,
+    type: 'type',
+    uuid: `uuid-${w}`,
+    widget: w
+  }))
+} as ReducerState);
diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
index 2f804f940..3b39cf9c4 100644
--- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/camelcase */
+import { UserAttributeSpec, validators } from "anastasis-core";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-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";
+import { AnastasisClientFrame, withProcessLabel } from "./index";
+import { LabeledInput } from "../../components/fields/LabeledInput";
+import { DateInput } from "../../components/fields/DateInput";
 
 export function AttributeEntryScreen(): VNode {
   const reducer = useAnastasisContext()
@@ -18,48 +19,105 @@ export function AttributeEntryScreen(): VNode {
   if (!reducer.currentReducerState || !("required_attributes" in reducer.currentReducerState)) {
     return <div>invalid state</div>
   }
-  
+
+
   return (
     <AnastasisClientFrame
-      title={withProcessLabel(reducer, "Select Country")}
+      title={withProcessLabel(reducer, "Who are you?")}
       onNext={() => reducer.transition("enter_user_attributes", {
         identity_attributes: attrs,
       })}
     >
-      {reducer.currentReducerState.required_attributes?.map((x, i: number) => {
-        return (
-          <AttributeEntryField
-            key={i}
-            isFirst={i == 0}
-            setValue={(v: string) => setAttrs({ ...attrs, [x.name]: v })}
-            spec={x}
-            value={attrs[x.name]} />
-        );
-      })}
+      <div class="columns">
+        <div class="column is-half">
+
+          {reducer.currentReducerState.required_attributes?.map((x, i: number) => {
+            const value = attrs[x.name]
+            function checkIfValid(): string | undefined {
+              const pattern = x['validation-regex']
+              if (pattern) {
+                const re = new RegExp(pattern)
+                if (!re.test(value)) return 'The value is invalid'
+              }
+              const logic = x['validation-logic']
+              if (logic) {
+                const func = (validators as any)[logic];
+                if (func && typeof func === 'function' && !func(value)) return 'Please check the value'
+              }
+              const optional = x.optional
+              console.log('optiona', optional)
+              if (!optional && !value) {
+                return 'This value is required'
+              }
+              return undefined
+            }
+
+            return (
+              <AttributeEntryField
+                key={i}
+                isFirst={i == 0}
+                setValue={(v: string) => setAttrs({ ...attrs, [x.name]: v })}
+                spec={x}
+                isValid={checkIfValid}
+                value={value} />
+            );
+          })}
+
+        </div>
+        <div class="column is-half" >
+          <h1><b>This stay private</b></h1>
+          <p>The information you have entered here:
+          </p>
+          <ul>
+            <li>
+              <span class="icon is-right">
+                <i class="mdi mdi-circle-small" />
+              </span>
+              Will be hashed, and therefore unreadable
+            </li>
+            <li><span class="icon is-right">
+              <i class="mdi mdi-circle-small" />
+            </span>The non-hashed version is not shared</li>
+          </ul>
+        </div>
+      </div>
     </AnastasisClientFrame>
   );
 }
 
-interface AttributeEntryProps {
-  reducer: AnastasisReducerApi;
-  reducerState: ReducerStateRecovery | ReducerStateBackup;
-}
-
-export interface AttributeEntryFieldProps {
+interface AttributeEntryFieldProps {
   isFirst: boolean;
   value: string;
   setValue: (newValue: string) => void;
   spec: UserAttributeSpec;
+  isValid: () => string | undefined;
 }
 
-export function AttributeEntryField(props: AttributeEntryFieldProps): VNode {
+function AttributeEntryField(props: AttributeEntryFieldProps): VNode {
+  const errorMessage = props.isValid()
+
   return (
     <div>
-      <LabeledInput
-        grabFocus={props.isFirst}
-        label={props.spec.label}
-        bind={[props.value, props.setValue]}
-      />
+      {props.spec.type === 'date' ?
+        <DateInput
+          grabFocus={props.isFirst}
+          label={props.spec.label}
+          error={errorMessage}
+          bind={[props.value, props.setValue]}
+        /> :
+        <LabeledInput
+          grabFocus={props.isFirst}
+          label={props.spec.label}
+          error={errorMessage}
+          bind={[props.value, props.setValue]}
+        />
+      }
+      <span>
+        <span class="icon is-right">
+          <i class="mdi mdi-eye-off" />
+        </span>
+        This stay private
+      </span>
     </div>
   );
 }
diff --git a/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx b/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx
index 9567e0ef7..5243c5259 100644
--- a/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx
@@ -6,7 +6,8 @@ import {
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { AuthMethodSetupProps } from "./AuthenticationEditorScreen";
-import { AnastasisClientFrame, LabeledInput } from "./index";
+import { AnastasisClientFrame } from "./index";
+import { LabeledInput } from "../../components/fields/LabeledInput";
 
 export function AuthMethodEmailSetup(props: AuthMethodSetupProps): VNode {
   const [email, setEmail] = useState("");
diff --git a/packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx b/packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx
index 55e37a968..1c2a9a92e 100644
--- a/packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx
@@ -6,7 +6,7 @@ import {
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { AuthMethodSetupProps } from "./AuthenticationEditorScreen";
-import { LabeledInput } from "./index";
+import { LabeledInput } from "../../components/fields/LabeledInput";
 
 export function AuthMethodPostSetup(props: AuthMethodSetupProps): VNode {
   const [fullName, setFullName] = useState("");
diff --git a/packages/anastasis-webui/src/pages/home/AuthMethodQuestionSetup.tsx b/packages/anastasis-webui/src/pages/home/AuthMethodQuestionSetup.tsx
index 7699cdf34..c2bd24ef9 100644
--- a/packages/anastasis-webui/src/pages/home/AuthMethodQuestionSetup.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthMethodQuestionSetup.tsx
@@ -6,7 +6,8 @@ import {
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { AuthMethodSetupProps } from "./AuthenticationEditorScreen";
-import { AnastasisClientFrame, LabeledInput } from "./index";
+import { AnastasisClientFrame } from "./index";
+import { LabeledInput } from "../../components/fields/LabeledInput";
 
 export function AuthMethodQuestionSetup(props: AuthMethodSetupProps): VNode {
   const [questionText, setQuestionText] = useState("");
diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx
index 44d3795b2..8f86831a9 100644
--- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx
@@ -24,8 +24,11 @@ import { AuthenticationEditorScreen as TestedComponent } from './AuthenticationE
 
 
 export default {
-  title: 'Pages/AuthenticationEditorScreen',
+  title: 'Pages/backup/AuthenticationEditorScreen',
   component: TestedComponent,
+  args: {
+    order: 5,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
diff --git a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx
index 65a2b7e13..0c9d007bc 100644
--- a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx
@@ -26,8 +26,11 @@ import { BackupFinishedScreen as TestedComponent } from './BackupFinishedScreen'
 
 
 export default {
-  title: 'Pages/BackupFinishedScreen',
+  title: 'Pages/backup/FinishedScreen',
   component: TestedComponent,
+  args: {
+    order: 9,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
diff --git a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx
index 4f186c031..def44c5a6 100644
--- a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx
@@ -20,23 +20,27 @@
 * @author Sebastian Javier Marchano (sebasjm)
 */
 
-import { ReducerState } from 'anastasis-core';
+import { RecoveryStates, ReducerState } from 'anastasis-core';
 import { createExample, reducerStatesExample } from '../../utils';
 import { ChallengeOverviewScreen as TestedComponent } from './ChallengeOverviewScreen';
 
 
 export default {
-  title: 'Pages/ChallengeOverviewScreen',
+  title: 'Pages/recovery/ChallengeOverviewScreen',
   component: TestedComponent,
+  args: {
+    order: 5,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
   },
 };
 
-export const OneChallenge = createExample(TestedComponent, {...reducerStatesExample.challengeSelecting,
+export const OneChallenge = createExample(TestedComponent, {
+  ...reducerStatesExample.challengeSelecting,
   recovery_information: {
-    policies: [[{uuid:'1'}]],
+    policies: [[{ uuid: '1' }]],
     challenges: [{
       cost: 'USD:1',
       instructions: 'just go for it',
@@ -46,37 +50,44 @@ export const OneChallenge = createExample(TestedComponent, {...reducerStatesExam
   },
 } as ReducerState);
 
-export const MoreChallenges = createExample(TestedComponent, {...reducerStatesExample.challengeSelecting,
+export const MoreChallenges = createExample(TestedComponent, {
+  ...reducerStatesExample.challengeSelecting,
   recovery_information: {
-    policies: [[{uuid:'1'}, {uuid:'2'}],[{uuid:'3'}]],
+    policies: [[{ uuid: '1' }, { uuid: '2' }], [{ uuid: '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',
+      uuid: 'uuid-3',
     }]
   },
+  challenge_feedback: {
+    'uuid-3': {
+      state: 'solved'
+    }
+  }
 } as ReducerState);
 
-export const OneBadConfiguredPolicy = createExample(TestedComponent, {...reducerStatesExample.challengeSelecting,
+export const OneBadConfiguredPolicy = createExample(TestedComponent, {
+  ...reducerStatesExample.challengeSelecting,
   recovery_information: {
-    policies: [[{uuid:'2'}]],
+    policies: [[{ uuid: '2' }]],
     challenges: [{
       cost: 'USD:1',
       instructions: 'just go for it',
       type: 'sasd',
       uuid: '1',
-    }]
+    }],
   },
 } as ReducerState);
 
diff --git a/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx
new file mode 100644
index 000000000..e5fe09e99
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx
@@ -0,0 +1,38 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { createExample, reducerStatesExample } from '../../utils';
+import { ChallengePayingScreen as TestedComponent } from './ChallengePayingScreen';
+
+
+export default {
+  title: 'Pages/recovery/__ChallengePayingScreen',
+  component: TestedComponent,
+  args: {
+    order: 10,
+  },
+  argTypes: {
+    onUpdate: { action: 'onUpdate' },
+    onBack: { action: 'onBack' },
+  },
+};
+
+export const Example = createExample(TestedComponent, reducerStatesExample.challengePaying);
diff --git a/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.tsx b/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.tsx
new file mode 100644
index 000000000..d87afdf46
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.tsx
@@ -0,0 +1,33 @@
+import { h, VNode } from "preact";
+import { useAnastasisContext } from "../../context/anastasis";
+import { AnastasisClientFrame } from "./index";
+
+export function ChallengePayingScreen(): VNode {
+  const reducer = useAnastasisContext()
+  if (!reducer) {
+    return <div>no reducer in context</div>
+  }
+  if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) {
+    return <div>invalid state</div>
+  }
+  const payments = ['']; //reducer.currentReducerState.payments ?? 
+  return (
+    <AnastasisClientFrame
+      hideNext
+      title="Recovery: Challenge Paying"
+    >
+      <p>
+        Some of the providers require a payment to store the encrypted
+        authentication information.
+      </p>
+      <ul>
+        {payments.map((x, i) => {
+          return <li key={i}>{x}</li>;
+        })}
+      </ul>
+      <button onClick={() => reducer.transition("pay", {})}>
+        Check payment status now
+      </button>
+    </AnastasisClientFrame>
+  );
+}
diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx
index aad37cd7f..8744a2b79 100644
--- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx
@@ -26,11 +26,14 @@ import { ContinentSelectionScreen as TestedComponent } from './ContinentSelectio
 export default {
   title: 'Pages/ContinentSelectionScreen',
   component: TestedComponent,
+  args: {
+    order: 2,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
   },
 };
 
-export const Backup = createExample(TestedComponent, reducerStatesExample.backupSelectCountry);
-export const Recovery = createExample(TestedComponent, reducerStatesExample.recoverySelectCountry);
+export const Backup = createExample(TestedComponent, reducerStatesExample.backupSelectContinent);
+export const Recovery = createExample(TestedComponent, reducerStatesExample.recoverySelectContinent);
diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
index ad529a4a7..94c0409da 100644
--- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
@@ -7,11 +7,11 @@ export function ContinentSelectionScreen(): VNode {
   if (!reducer || !reducer.currentReducerState || !("continents" in reducer.currentReducerState)) {
     return <div />
   }
-  const sel = (x: string): void => reducer.transition("select_continent", { continent: x });
+  const select = (continent: string) => (): void => reducer.transition("select_continent", { continent });
   return (
     <AnastasisClientFrame hideNext title={withProcessLabel(reducer, "Select Continent")}>
       {reducer.currentReducerState.continents.map((x: any) => (
-        <button onClick={() => sel(x.name)} key={x.name}>
+        <button class="button" onClick={select(x.name)} key={x.name}>
           {x.name}
         </button>
       ))}
diff --git a/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx
index adf36980f..3a642748a 100644
--- a/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx
@@ -26,6 +26,9 @@ import { CountrySelectionScreen as TestedComponent } from './CountrySelectionScr
 export default {
   title: 'Pages/CountrySelectionScreen',
   component: TestedComponent,
+  args: {
+    order: 3,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
diff --git a/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx
index 555622c1d..417c08633 100644
--- a/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx
@@ -17,11 +17,15 @@ export function CountrySelectionScreen(): VNode {
   });
   return (
     <AnastasisClientFrame hideNext title={withProcessLabel(reducer, "Select Country")} >
-      {reducer.currentReducerState.countries.map((x: any) => (
-        <button onClick={() => sel(x)} key={x.name}>
-          {x.name} ({x.currency})
-        </button>
-      ))}
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {reducer.currentReducerState.countries.map((x: any) => (
+          <div key={x.name}>
+            <button class="button" onClick={() => sel(x)} >
+              {x.name} ({x.currency})
+            </button>
+          </div>
+        ))}
+      </div>
     </AnastasisClientFrame>
   );
 }
diff --git a/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx
index 1a9462b88..e952ab28d 100644
--- a/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx
@@ -26,8 +26,11 @@ import { PoliciesPayingScreen as TestedComponent } from './PoliciesPayingScreen'
 
 
 export default {
-  title: 'Pages/PoliciesPayingScreen',
+  title: 'Pages/backup/PoliciesPayingScreen',
   component: TestedComponent,
+  args: {
+    order: 8,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
diff --git a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
index 0c1842420..b5933db17 100644
--- a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
@@ -26,7 +26,10 @@ import { RecoveryFinishedScreen as TestedComponent } from './RecoveryFinishedScr
 
 
 export default {
-  title: 'Pages/RecoveryFinishedScreen',
+  title: 'Pages/recovery/FinishedScreen',
+  args: {
+    order: 7,
+  },
   component: TestedComponent,
   argTypes: {
     onUpdate: { action: 'onUpdate' },
diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx
index b52699e7b..91855b023 100644
--- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx
@@ -26,7 +26,10 @@ import { ReviewPoliciesScreen as TestedComponent } from './ReviewPoliciesScreen'
 
 
 export default {
-  title: 'Pages/ReviewPoliciesScreen',
+  title: 'Pages/backup/ReviewPoliciesScreen',
+  args: {
+    order: 6,
+  },
   component: TestedComponent,
   argTypes: {
     onUpdate: { action: 'onUpdate' },
diff --git a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx
index 18560356a..49dd8fca8 100644
--- a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx
@@ -26,8 +26,11 @@ import { SecretEditorScreen as TestedComponent } from './SecretEditorScreen';
 
 
 export default {
-  title: 'Pages/SecretEditorScreen',
+  title: 'Pages/backup/SecretEditorScreen',
   component: TestedComponent,
+  args: {
+    order: 7,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
diff --git a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
index a5235d66c..f5fd7c0d1 100644
--- a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
@@ -4,9 +4,8 @@ import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
 import {
-  AnastasisClientFrame,
-  LabeledInput
-} from "./index";
+  AnastasisClientFrame} from "./index";
+import { LabeledInput } from "../../components/fields/LabeledInput";
 
 export function SecretEditorScreen(): VNode {
   const reducer = useAnastasisContext()
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
index e9c597023..f56939090 100644
--- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
@@ -26,8 +26,11 @@ import { SecretSelectionScreen as TestedComponent } from './SecretSelectionScree
 
 
 export default {
-  title: 'Pages/SecretSelectionScreen',
+  title: 'Pages/recovery/SecretSelectionScreen',
   component: TestedComponent,
+  args: {
+    order: 4,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
diff --git a/packages/anastasis-webui/src/pages/home/SolveEmailEntry.tsx b/packages/anastasis-webui/src/pages/home/SolveEmailEntry.tsx
index 2c27895c2..0d70405e5 100644
--- a/packages/anastasis-webui/src/pages/home/SolveEmailEntry.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveEmailEntry.tsx
@@ -1,7 +1,8 @@
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
-import { AnastasisClientFrame, LabeledInput } from "./index";
+import { AnastasisClientFrame } from "./index";
+import { LabeledInput } from "../../components/fields/LabeledInput";
 import { SolveEntryProps } from "./SolveScreen";
 
 export function SolveEmailEntry({ challenge, feedback }: SolveEntryProps): VNode {
diff --git a/packages/anastasis-webui/src/pages/home/SolvePostEntry.tsx b/packages/anastasis-webui/src/pages/home/SolvePostEntry.tsx
index 1a824acb8..22b8d470b 100644
--- a/packages/anastasis-webui/src/pages/home/SolvePostEntry.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolvePostEntry.tsx
@@ -1,7 +1,8 @@
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
-import { AnastasisClientFrame, LabeledInput } from "./index";
+import { AnastasisClientFrame } from "./index";
+import { LabeledInput } from "../../components/fields/LabeledInput";
 import { SolveEntryProps } from "./SolveScreen";
 
 export function SolvePostEntry({ challenge, feedback }: SolveEntryProps): VNode {
diff --git a/packages/anastasis-webui/src/pages/home/SolveQuestionEntry.tsx b/packages/anastasis-webui/src/pages/home/SolveQuestionEntry.tsx
index 72dadbe89..319289381 100644
--- a/packages/anastasis-webui/src/pages/home/SolveQuestionEntry.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveQuestionEntry.tsx
@@ -1,7 +1,8 @@
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
-import { AnastasisClientFrame, LabeledInput } from "./index";
+import { AnastasisClientFrame } from "./index";
+import { LabeledInput } from "../../components/fields/LabeledInput";
 import { SolveEntryProps } from "./SolveScreen";
 
 export function SolveQuestionEntry({ challenge, feedback }: SolveEntryProps): VNode {
diff --git a/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
index 69af9be42..c05c36b07 100644
--- a/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
@@ -26,8 +26,11 @@ import { SolveScreen as TestedComponent } from './SolveScreen';
 
 
 export default {
-  title: 'Pages/SolveScreen',
+  title: 'Pages/recovery/SolveScreen',
   component: TestedComponent,
+  args: {
+    order: 6,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
diff --git a/packages/anastasis-webui/src/pages/home/SolveSmsEntry.tsx b/packages/anastasis-webui/src/pages/home/SolveSmsEntry.tsx
index 163e0d1f3..c4cf3a680 100644
--- a/packages/anastasis-webui/src/pages/home/SolveSmsEntry.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveSmsEntry.tsx
@@ -1,7 +1,8 @@
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
-import { AnastasisClientFrame, LabeledInput } from "./index";
+import { AnastasisClientFrame } from "./index";
+import { LabeledInput } from "../../components/fields/LabeledInput";
 import { SolveEntryProps } from "./SolveScreen";
 
 export function SolveSmsEntry({ challenge, feedback }: SolveEntryProps): VNode {
diff --git a/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx
index ad84cd8f2..657a2dd74 100644
--- a/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx
@@ -26,6 +26,9 @@ import { StartScreen as TestedComponent } from './StartScreen';
 export default {
   title: 'Pages/StartScreen',
   component: TestedComponent,
+  args: {
+    order: 1,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
diff --git a/packages/anastasis-webui/src/pages/home/StartScreen.tsx b/packages/anastasis-webui/src/pages/home/StartScreen.tsx
index 6625ec5b8..c751ad9e4 100644
--- a/packages/anastasis-webui/src/pages/home/StartScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/StartScreen.tsx
@@ -16,12 +16,21 @@ export function StartScreen(): VNode {
             <div class="column" />
             <div class="column is-four-fifths">
 
-              <div class="buttons is-right">
+              <div class="buttons">
                 <button class="button is-success" autoFocus onClick={() => reducer.startBackup()}>
-                  Backup
+                  <div class="icon"><i class="mdi mdi-arrow-up" /></div>
+                  <span>Backup a secret</span>
                 </button>
 
-                <button class="button is-info" onClick={() => reducer.startRecover()}>Recover</button>
+                <button class="button is-info" onClick={() => reducer.startRecover()}>
+                  <div class="icon"><i class="mdi mdi-arrow-down" /></div>
+                  <span>Recover a secret</span>
+                </button>
+
+                <button class="button">
+                  <div class="icon"><i class="mdi mdi-file" /></div>
+                  <span>Restore a session</span>
+                </button>
               </div>
 
             </div>
diff --git a/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx
index e2f3d521e..7568ccd69 100644
--- a/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx
@@ -25,8 +25,11 @@ import { TruthsPayingScreen as TestedComponent } from './TruthsPayingScreen';
 
 
 export default {
-  title: 'Pages/TruthsPayingScreen',
+  title: 'Pages/backup/__TruthsPayingScreen',
   component: TestedComponent,
+  args: {
+    order: 10,
+  },
   argTypes: {
     onUpdate: { action: 'onUpdate' },
     onBack: { action: 'onBack' },
diff --git a/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.tsx b/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.tsx
index 319f590a0..098a8ba8d 100644
--- a/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.tsx
@@ -14,7 +14,7 @@ export function TruthsPayingScreen(): VNode {
   return (
     <AnastasisClientFrame
       hideNext
-      title="Backup: Authentication Storage Payments"
+      title="Backup: Truths Paying"
     >
       <p>
         Some of the providers require a payment to store the encrypted
diff --git a/packages/anastasis-webui/src/pages/home/index.tsx b/packages/anastasis-webui/src/pages/home/index.tsx
index 4cec47ec8..5cef4ee9c 100644
--- a/packages/anastasis-webui/src/pages/home/index.tsx
+++ b/packages/anastasis-webui/src/pages/home/index.tsx
@@ -11,10 +11,7 @@ import {
   VNode
 } from "preact";
 import {
-  useErrorBoundary,
-  useLayoutEffect,
-  useRef
-} from "preact/hooks";
+  useErrorBoundary} from "preact/hooks";
 import { Menu } from "../../components/menu";
 import { AnastasisProvider, useAnastasisContext } from "../../context/anastasis";
 import {
@@ -25,6 +22,7 @@ import { AttributeEntryScreen } from "./AttributeEntryScreen";
 import { AuthenticationEditorScreen } from "./AuthenticationEditorScreen";
 import { BackupFinishedScreen } from "./BackupFinishedScreen";
 import { ChallengeOverviewScreen } from "./ChallengeOverviewScreen";
+import { ChallengePayingScreen } from "./ChallengePayingScreen";
 import { ContinentSelectionScreen } from "./ContinentSelectionScreen";
 import { CountrySelectionScreen } from "./CountrySelectionScreen";
 import { PoliciesPayingScreen } from "./PoliciesPayingScreen";
@@ -118,9 +116,9 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode {
           <ErrorBanner />
           {props.children}
           {!props.hideNav ? (
-            <div>
-              <button onClick={() => reducer.back()}>Back</button>
-              {!props.hideNext ? <button onClick={next}>Next</button> : null}
+            <div style={{marginTop: '2em', display:'flex', justifyContent:'space-between'}}>
+              <button class="button" onClick={() => reducer.back()}>Back</button>
+              {!props.hideNext ? <button class="button is-info"onClick={next}>Next</button> : null}
             </div>
           ) : null}
         </div>
@@ -222,7 +220,9 @@ const AnastasisClientImpl: FunctionalComponent = () => {
       <RecoveryFinishedScreen />
     );
   }
-
+  if (state.recovery_state === RecoveryStates.ChallengePaying) {
+    return <ChallengePayingScreen />;
+  }
   console.log("unknown state", reducer.currentReducerState);
   return (
     <AnastasisClientFrame hideNav title="Bug">
@@ -234,32 +234,6 @@ const AnastasisClientImpl: FunctionalComponent = () => {
   );
 };
 
-interface LabeledInputProps {
-  label: string;
-  grabFocus?: boolean;
-  bind: [string, (x: string) => void];
-}
-
-export function LabeledInput(props: LabeledInputProps): VNode {
-  const inputRef = useRef<HTMLInputElement>(null);
-  useLayoutEffect(() => {
-    if (props.grabFocus) {
-      inputRef.current?.focus();
-    }
-  }, [props.grabFocus]);
-  return (
-    <label>
-      {props.label}
-      <input
-        value={props.bind[0]}
-        onChange={(e) => props.bind[1]((e.target as HTMLInputElement).value)}
-        ref={inputRef}
-        style={{ display: "block" }}
-      />
-    </label>
-  );
-}
-
 /**
  * Show a dismissible error banner if there is a current error.
  */