common anstasis frame

6 files changed, 598 insertions, 383 deletions

diff --git a/packages/anastasis-webui/src/components/app.tsx b/packages/anastasis-webui/src/components/app.tsx
index 5abb12a3d..45c9035f0 100644
--- a/packages/anastasis-webui/src/components/app.tsx
+++ b/packages/anastasis-webui/src/components/app.tsx
@@ -1,23 +1,13 @@
-import { FunctionalComponent, h } from 'preact';
-import { Route, Router } from 'preact-router';
+import { FunctionalComponent, h } from "preact";
 
-import Home from '../routes/home';
-import Profile from '../routes/profile';
-import NotFoundPage from '../routes/notfound';
-import Header from './header';
+import AnastasisClient from "../routes/home";
 
 const App: FunctionalComponent = () => {
-    return (
-        <div id="preact_root">
-            <Header />
-            <Router>
-                <Route path="/" component={Home} />
-                <Route path="/profile/" component={Profile} user="me" />
-                <Route path="/profile/:user" component={Profile} />
-                <NotFoundPage default />
-            </Router>
-        </div>
-    );
+  return (
+    <div id="preact_root">
+      <AnastasisClient />
+    </div>
+  );
 };
 
 export default App;
diff --git a/packages/anastasis-webui/src/components/header/index.tsx b/packages/anastasis-webui/src/components/header/index.tsx
deleted file mode 100644
index f2b6fe8ad..000000000
--- a/packages/anastasis-webui/src/components/header/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { FunctionalComponent, h } from 'preact';
-import { Link } from 'preact-router/match';
-import style from './style.css';
-
-const Header: FunctionalComponent = () => {
-    return (
-        <header class={style.header}>
-            <h1>Preact App</h1>
-            <nav>
-                <Link activeClassName={style.active} href="/">
-                    Home
-                </Link>
-                <Link activeClassName={style.active} href="/profile">
-                    Me
-                </Link>
-                <Link activeClassName={style.active} href="/profile/john">
-                    John
-                </Link>
-            </nav>
-        </header>
-    );
-};
-
-export default Header;
diff --git a/packages/anastasis-webui/src/components/header/style.css b/packages/anastasis-webui/src/components/header/style.css
deleted file mode 100644
index f08fda702..000000000
--- a/packages/anastasis-webui/src/components/header/style.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.header {
-	position: fixed;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 56px;
-	padding: 0;
-	background: #673AB7;
-	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-	z-index: 50;
-}
-
-.header h1 {
-	float: left;
-	margin: 0;
-	padding: 0 15px;
-	font-size: 24px;
-	line-height: 56px;
-	font-weight: 400;
-	color: #FFF;
-}
-
-.header nav {
-	float: right;
-	font-size: 100%;
-}
-
-.header nav a {
-	display: inline-block;
-	height: 56px;
-	line-height: 56px;
-	padding: 0 15px;
-	min-width: 50px;
-	text-align: center;
-	background: rgba(255,255,255,0);
-	text-decoration: none;
-	color: #FFF;
-	will-change: background-color;
-}
-
-.header nav a:hover,
-.header nav a:active {
-	background: rgba(0,0,0,0.2);
-}
-
-.header nav a.active {
-	background: rgba(0,0,0,0.4);
-}
diff --git a/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts b/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts
index 6ca0ccfae..efa0592dd 100644
--- a/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts
+++ b/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts
@@ -11,6 +11,7 @@ export interface ReducerStateBackup {
   code: undefined;
   continents: any;
   countries: any;
+  identity_attributes?: { [n: string]: string };
   authentication_providers: any;
   authentication_methods?: AuthMethod[];
   required_attributes: any;
@@ -39,14 +40,60 @@ export interface AuthMethod {
   challenge: string;
 }
 
+export interface ChallengeInfo {
+  cost: string;
+  instructions: string;
+  type: string;
+  uuid: string;
+}
+
 export interface ReducerStateRecovery {
   backup_state: undefined;
   recovery_state: RecoveryStates;
   code: undefined;
 
+  identity_attributes?: { [n: string]: string };
+
   continents: any;
   countries: any;
   required_attributes: any;
+
+  recovery_information?: {
+    challenges: ChallengeInfo[];
+    policies: {
+      /**
+       * UUID of the associated challenge.
+       */
+      uuid: string;
+    }[][];
+  };
+
+  recovery_document?: {
+    secret_name: string;
+    provider_url: string;
+    version: number;
+  };
+
+  selected_challenge_uuid?: string;
+
+  challenge_feedback?: { [uuid: string]: ChallengeFeedback };
+
+  core_secret?: {
+    mime: string;
+    value: string;
+  };
+
+  authentication_providers?: {
+    [url: string]: {
+      business_name: string;
+    };
+  };
+
+  recovery_error: any;
+}
+
+export interface ChallengeFeedback {
+  state: string;
 }
 
 export interface ReducerStateError {
@@ -76,6 +123,11 @@ export enum RecoveryStates {
   ContinentSelecting = "CONTINENT_SELECTING",
   CountrySelecting = "COUNTRY_SELECTING",
   UserAttributesCollecting = "USER_ATTRIBUTES_COLLECTING",
+  SecretSelecting = "SECRET_SELECTING",
+  ChallengeSelecting = "CHALLENGE_SELECTING",
+  ChallengePaying = "CHALLENGE_PAYING",
+  ChallengeSolving = "CHALLENGE_SOLVING",
+  RecoveryFinished = "RECOVERY_FINISHED",
 }
 
 const reducerBaseUrl = "http://localhost:5000/";
diff --git a/packages/anastasis-webui/src/routes/home/index.tsx b/packages/anastasis-webui/src/routes/home/index.tsx
index f0b630851..99f8febb4 100644
--- a/packages/anastasis-webui/src/routes/home/index.tsx
+++ b/packages/anastasis-webui/src/routes/home/index.tsx
@@ -1,14 +1,23 @@
 import {
+  bytesToString,
   canonicalJson,
+  decodeCrock,
   encodeCrock,
   stringToBytes,
 } from "@gnu-taler/taler-util";
-import { FunctionalComponent, h } from "preact";
-import { useState } from "preact/hooks";
+import {
+  FunctionalComponent,
+  ComponentChildren,
+  h,
+  createContext,
+} from "preact";
+import { useState, useContext, useRef, useLayoutEffect } from "preact/hooks";
 import {
   AnastasisReducerApi,
   AuthMethod,
   BackupStates,
+  ChallengeFeedback,
+  ChallengeInfo,
   RecoveryStates,
   ReducerStateBackup,
   ReducerStateRecovery,
@@ -16,85 +25,340 @@ import {
 } from "../../hooks/use-anastasis-reducer";
 import style from "./style.css";
 
-interface ContinentSelectionProps {
+const WithReducer = createContext<AnastasisReducerApi | undefined>(undefined);
+
+function isBackup(reducer: AnastasisReducerApi) {
+  return !!reducer.currentReducerState?.backup_state;
+}
+
+interface CommonReducerProps {
   reducer: AnastasisReducerApi;
   reducerState: ReducerStateBackup | ReducerStateRecovery;
 }
 
-function isBackup(reducer: AnastasisReducerApi) {
-  return !!reducer.currentReducerState?.backup_state;
+function withProcessLabel(reducer: AnastasisReducerApi, text: string): string {
+  if (isBackup(reducer)) {
+    return "Backup: " + text;
+  }
+  return "Recovery: " + text;
 }
 
-function ContinentSelection(props: ContinentSelectionProps) {
+function ContinentSelection(props: CommonReducerProps) {
   const { reducer, reducerState } = props;
   return (
-    <div class={style.home}>
-      <h1>{isBackup(reducer) ? "Backup" : "Recovery"}: Select Continent</h1>
-      <ErrorBanner reducer={reducer} />
-      <div>
-        {reducerState.continents.map((x: any) => {
-          const sel = (x: string) =>
-            reducer.transition("select_continent", { continent: x });
-          return (
-            <button onClick={() => sel(x.name)} key={x.name}>
-              {x.name}
-            </button>
-          );
-        })}
-      </div>
-      <div>
-        <button onClick={() => reducer.back()}>Back</button>
-      </div>
-    </div>
+    <AnastasisClientFrame
+      hideNext
+      title={withProcessLabel(reducer, "Select Continent")}
+    >
+      {reducerState.continents.map((x: any) => {
+        const sel = (x: string) =>
+          reducer.transition("select_continent", { continent: x });
+        return (
+          <button onClick={() => sel(x.name)} key={x.name}>
+            {x.name}
+          </button>
+        );
+      })}
+    </AnastasisClientFrame>
+  );
+}
+
+function CountrySelection(props: CommonReducerProps) {
+  const { reducer, reducerState } = props;
+  return (
+    <AnastasisClientFrame
+      hideNext
+      title={withProcessLabel(reducer, "Select Country")}
+    >
+      {reducerState.countries.map((x: any) => {
+        const sel = (x: any) =>
+          reducer.transition("select_country", {
+            country_code: x.code,
+            currencies: [x.currency],
+          });
+        return (
+          <button onClick={() => sel(x)} key={x.name}>
+            {x.name} ({x.currency})
+          </button>
+        );
+      })}
+    </AnastasisClientFrame>
   );
 }
 
-interface CountrySelectionProps {
+interface SolveEntryProps {
   reducer: AnastasisReducerApi;
-  reducerState: ReducerStateBackup | ReducerStateRecovery;
+  challenge: ChallengeInfo;
+  feedback?: ChallengeFeedback;
 }
 
-function CountrySelection(props: CountrySelectionProps) {
-  const { reducer, reducerState } = props;
+function SolveQuestionEntry(props: SolveEntryProps) {
+  const [answer, setAnswer] = useState("");
+  const { reducer, challenge, feedback } = props;
+  const next = () =>
+    reducer.transition("solve_challenge", {
+      answer,
+    });
   return (
-    <div class={style.home}>
-      <h1>Backup: Select Country</h1>
-      <ErrorBanner reducer={reducer} />
+    <AnastasisClientFrame
+      title="Recovery: Solve challenge"
+      onNext={() => next()}
+    >
+      <p>Feedback: {JSON.stringify(feedback)}</p>
+      <p>Question: {challenge.instructions}</p>
+      <label>
+        <input
+          value={answer}
+          onChange={(e) => setAnswer((e.target as HTMLInputElement).value)}
+          type="test"
+        />
+      </label>
+    </AnastasisClientFrame>
+  );
+}
+
+function SecretEditor(props: BackupReducerProps) {
+  const { reducer } = props;
+  const [secretName, setSecretName] = useState("");
+  const [secretValue, setSecretValue] = useState("");
+  const secretNext = () => {
+    reducer.runTransaction(async (tx) => {
+      await tx.transition("enter_secret_name", {
+        name: secretName,
+      });
+      await tx.transition("enter_secret", {
+        secret: {
+          value: encodeCrock(stringToBytes(secretValue)),
+          mime: "text/plain",
+        },
+        expiration: {
+          t_ms: new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 5,
+        },
+      });
+      await tx.transition("next", {});
+    });
+  };
+  return (
+    <AnastasisClientFrame
+      title="Backup: Provide secret"
+      onNext={() => secretNext()}
+    >
       <div>
-        {reducerState.countries.map((x: any) => {
-          const sel = (x: any) =>
-            reducer.transition("select_country", {
-              country_code: x.code,
-              currencies: [x.currency],
-            });
-          return (
-            <button onClick={() => sel(x)} key={x.name}>
-              {x.name} ({x.currency})
-            </button>
-          );
-        })}
+        <label>
+          Secret name:{" "}
+          <input
+            value={secretName}
+            onChange={(e) =>
+              setSecretName((e.target as HTMLInputElement).value)
+            }
+            type="text"
+          />
+        </label>
+      </div>
+      <div>
+        <label>
+          Secret value:{" "}
+          <input
+            value={secretValue}
+            onChange={(e) =>
+              setSecretValue((e.target as HTMLInputElement).value)
+            }
+            type="text"
+          />
+        </label>
       </div>
+      or:
       <div>
-        <button onClick={() => reducer.back()}>Back</button>
+        <label>
+          File Upload: <input type="file" />
+        </label>
       </div>
-    </div>
+    </AnastasisClientFrame>
   );
 }
 
-const Home: FunctionalComponent = () => {
+export interface BackupReducerProps {
+  reducer: AnastasisReducerApi;
+  backupState: ReducerStateBackup;
+}
+
+function ReviewPolicies(props: BackupReducerProps) {
+  const { reducer, backupState } = props;
+  const authMethods = backupState.authentication_methods!;
+  return (
+    <AnastasisClientFrame title="Backup: Review Recovery Policies">
+      {backupState.policies?.map((p, i) => {
+        const policyName = p.methods
+          .map((x) => authMethods[x.authentication_method].type)
+          .join(" + ");
+        return (
+          <div class={style.policy}>
+            <h3>
+              Policy #{i + 1}: {policyName}
+            </h3>
+            Required Authentications:
+            <ul>
+              {p.methods.map((x) => {
+                const m = authMethods[x.authentication_method];
+                return (
+                  <li>
+                    {m.type} ({m.instructions}) at provider {x.provider}
+                  </li>
+                );
+              })}
+            </ul>
+            <div>
+              <button
+                onClick={() =>
+                  reducer.transition("delete_policy", { policy_index: i })
+                }
+              >
+                Delete Policy
+              </button>
+            </div>
+          </div>
+        );
+      })}
+    </AnastasisClientFrame>
+  );
+}
+
+export interface RecoveryReducerProps {
+  reducer: AnastasisReducerApi;
+  recoveryState: ReducerStateRecovery;
+}
+
+function SecretSelection(props: RecoveryReducerProps) {
+  const { reducer, recoveryState } = props;
+  const [selectingVersion, setSelectingVersion] = useState<boolean>(false);
+  const [otherVersion, setOtherVersion] = useState<number>(
+    recoveryState.recovery_document?.version ?? 0,
+  );
+  const [otherProvider, setOtherProvider] = useState<string>("");
+  function selectVersion(p: string, n: number) {
+    reducer.runTransaction(async (tx) => {
+      await tx.transition("change_version", {
+        version: n,
+        provider_url: p,
+      });
+      setSelectingVersion(false);
+    });
+  }
+  if (selectingVersion) {
+    return (
+      <AnastasisClientFrame hideNav title="Recovery: Select secret">
+        <p>Select a different version of the secret</p>
+        <select onChange={(e) => setOtherProvider((e.target as any).value)}>
+          {Object.keys(recoveryState.authentication_providers ?? {}).map(
+            (x) => {
+              return <option value={x}>{x}</option>;
+            },
+          )}
+        </select>
+        <div>
+          <input
+            value={otherVersion}
+            onChange={(e) =>
+              setOtherVersion(Number((e.target as HTMLInputElement).value))
+            }
+            type="number"
+          />
+          <button onClick={() => selectVersion(otherProvider, otherVersion)}>
+            Select
+          </button>
+        </div>
+        <div>
+          <button onClick={() => selectVersion(otherProvider, 0)}>
+            Use latest version
+          </button>
+        </div>
+        <div>
+          <button onClick={() => setSelectingVersion(false)}>Cancel</button>
+        </div>
+      </AnastasisClientFrame>
+    );
+  }
+  return (
+    <AnastasisClientFrame title="Recovery: Select secret">
+      <p>Provider: {recoveryState.recovery_document!.provider_url}</p>
+      <p>Secret version: {recoveryState.recovery_document!.version}</p>
+      <p>Secret name: {recoveryState.recovery_document!.version}</p>
+      <button onClick={() => setSelectingVersion(true)}>
+        Select different secret
+      </button>
+    </AnastasisClientFrame>
+  );
+}
+
+interface AnastasisClientFrameProps {
+  onNext?(): void;
+  title: string;
+  children: ComponentChildren;
+  /**
+   * Should back/next buttons be provided?
+   */
+  hideNav?: boolean;
+  /**
+   * Hide only the "next" button.
+   */
+  hideNext?: boolean;
+}
+
+function AnastasisClientFrame(props: AnastasisClientFrameProps) {
+  return (
+    <WithReducer.Consumer>
+      {(reducer) => {
+        if (!reducer) {
+          return <p>Fatal: Reducer must be in context.</p>;
+        }
+        const next = () => {
+          if (props.onNext) {
+            props.onNext();
+          } else {
+            reducer.transition("next", {});
+          }
+        };
+        return (
+          <div class={style.home}>
+            <button onClick={() => reducer.reset()}>Reset session</button>
+            <h1>{props.title}</h1>
+            <ErrorBanner reducer={reducer} />
+            {props.children}
+            {!props.hideNav ? (
+              <div>
+                <button onClick={() => reducer.back()}>Back</button>
+                {!props.hideNext ? (
+                  <button onClick={() => next()}>Next</button>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        );
+      }}
+    </WithReducer.Consumer>
+  );
+}
+
+const AnastasisClient: FunctionalComponent = () => {
   const reducer = useAnastasisReducer();
+  return (
+    <WithReducer.Provider value={reducer}>
+      <AnastasisClientImpl />
+    </WithReducer.Provider>
+  );
+};
+
+const AnastasisClientImpl: FunctionalComponent = () => {
+  const reducer = useContext(WithReducer)!;
   const reducerState = reducer.currentReducerState;
   if (!reducerState) {
     return (
-      <div class={style.home}>
-        <h1>Home</h1>
-        <p>
-          <button autoFocus onClick={() => reducer.startBackup()}>
-            Backup
-          </button>
-          <button onClick={() => reducer.startRecover()}>Recover</button>
-        </p>
-      </div>
+      <AnastasisClientFrame hideNav title="Home">
+        <button autoFocus onClick={() => reducer.startBackup()}>
+          Backup
+        </button>
+        <button onClick={() => reducer.startRecover()}>Recover</button>
+      </AnastasisClientFrame>
     );
   }
   console.log("state", reducer.currentReducerState);
@@ -122,109 +386,17 @@ const Home: FunctionalComponent = () => {
       <AuthenticationEditor backupState={reducerState} reducer={reducer} />
     );
   }
-
   if (reducerState.backup_state === BackupStates.PoliciesReviewing) {
-    const backupState: ReducerStateBackup = reducerState;
-    const authMethods = backupState.authentication_methods!;
-    return (
-      <div class={style.home}>
-        <h1>Backup: Review Recovery Policies</h1>
-        <ErrorBanner reducer={reducer} />
-        <div>
-          {backupState.policies?.map((p, i) => {
-            const policyName = p.methods
-              .map((x) => authMethods[x.authentication_method].type)
-              .join(" + ");
-            return (
-              <div class={style.policy}>
-                <h3>
-                  Policy #{i + 1}: {policyName}
-                </h3>
-                Required Authentications:
-                <ul>
-                  {p.methods.map((x) => {
-                    const m = authMethods[x.authentication_method];
-                    return (
-                      <li>
-                        {m.type} ({m.instructions}) at provider {x.provider}
-                      </li>
-                    );
-                  })}
-                </ul>
-                <div>
-                  <button
-                    onClick={() =>
-                      reducer.transition("delete_policy", { policy_index: i })
-                    }
-                  >
-                    Delete Policy
-                  </button>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-        <div>
-          <button onClick={() => reducer.back()}>Back</button>
-          <button onClick={() => reducer.transition("next", {})}>Next</button>
-        </div>
-      </div>
-    );
+    return <ReviewPolicies reducer={reducer} backupState={reducerState} />;
   }
-
   if (reducerState.backup_state === BackupStates.SecretEditing) {
-    const [secretName, setSecretName] = useState("");
-    const [secretValue, setSecretValue] = useState("");
-    const secretNext = () => {
-      reducer.runTransaction(async (tx) => {
-        await tx.transition("enter_secret_name", {
-          name: secretName,
-        });
-        await tx.transition("enter_secret", {
-          secret: {
-            value: "EDJP6WK5EG50",
-            mime: "text/plain",
-          },
-          expiration: {
-            t_ms: new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 5,
-          },
-        });
-        await tx.transition("next", {});
-      });
-    };
-    return (
-      <div class={style.home}>
-        <h1>Backup: Provide secret</h1>
-        <ErrorBanner reducer={reducer} />
-        <div>
-          <label>
-            Secret name: <input type="text" />
-          </label>
-        </div>
-        <div>
-          <label>
-            Secret value: <input type="text" />
-          </label>
-        </div>
-        or:
-        <div>
-          <label>
-            File Upload: <input type="file" />
-          </label>
-        </div>
-        <div>
-          <button onClick={() => reducer.back()}>Back</button>
-          <button onClick={() => secretNext()}>Next</button>
-        </div>
-      </div>
-    );
+    return <SecretEditor reducer={reducer} backupState={reducerState} />;
   }
 
   if (reducerState.backup_state === BackupStates.BackupFinished) {
     const backupState: ReducerStateBackup = reducerState;
     return (
-      <div class={style.home}>
-        <h1>Backup finished</h1>
+      <AnastasisClientFrame hideNext title="Backup finished">
         <p>
           Your backup of secret "{backupState.secret_name ?? "??"}" was
           successful.
@@ -240,10 +412,8 @@ const Home: FunctionalComponent = () => {
             );
           })}
         </ul>
-        <button onClick={() => reducer.reset()}>
-          Start a new backup/recovery
-        </button>
-      </div>
+        <button onClick={() => reducer.reset()}>Back to start</button>
+      </AnastasisClientFrame>
     );
   }
 
@@ -251,8 +421,10 @@ const Home: FunctionalComponent = () => {
     const backupState: ReducerStateBackup = reducerState;
     const payments = backupState.payments ?? [];
     return (
-      <div class={style.home}>
-        <h1>Backup: Authentication Storage Payments</h1>
+      <AnastasisClientFrame
+        hideNext
+        title="Backup: Authentication Storage Payments"
+      >
         <p>
           Some of the providers require a payment to store the encrypted
           authentication information.
@@ -262,22 +434,19 @@ const Home: FunctionalComponent = () => {
             return <li>{x}</li>;
           })}
         </ul>
-        <div>
-          <button onClick={() => reducer.back()}>Back</button>
-          <button onClick={() => reducer.transition("pay", {})}>
-            Check payment(s)
-          </button>
-        </div>
-      </div>
+        <button onClick={() => reducer.transition("pay", {})}>
+          Check payment status now
+        </button>
+      </AnastasisClientFrame>
     );
   }
 
   if (reducerState.backup_state === BackupStates.PoliciesPaying) {
     const backupState: ReducerStateBackup = reducerState;
     const payments = backupState.policy_payment_requests ?? [];
+
     return (
-      <div class={style.home}>
-        <h1>Backup: Recovery Document Payments</h1>
+      <AnastasisClientFrame hideNext title="Backup: Recovery Document Payments">
         <p>
           Some of the providers require a payment to store the encrypted
           recovery document.
@@ -291,23 +460,111 @@ const Home: FunctionalComponent = () => {
             );
           })}
         </ul>
-        <div>
-          <button onClick={() => reducer.back()}>Back</button>
-          <button onClick={() => reducer.transition("pay", {})}>
-            Check payment(s)
-          </button>
-        </div>
-      </div>
+        <button onClick={() => reducer.transition("pay", {})}>
+          Check payment status now
+        </button>
+      </AnastasisClientFrame>
+    );
+  }
+
+  if (reducerState.recovery_state === RecoveryStates.SecretSelecting) {
+    return <SecretSelection reducer={reducer} recoveryState={reducerState} />;
+  }
+
+  if (reducerState.recovery_state === RecoveryStates.ChallengeSelecting) {
+    const policies = reducerState.recovery_information!.policies;
+    const chArr = reducerState.recovery_information!.challenges;
+    const challenges: {
+      [uuid: string]: {
+        type: string;
+        instructions: string;
+        cost: string;
+      };
+    } = {};
+    for (const ch of chArr) {
+      challenges[ch.uuid] = {
+        type: ch.type,
+        cost: ch.cost,
+        instructions: ch.instructions,
+      };
+    }
+    return (
+      <AnastasisClientFrame title="Recovery: Solve challenges">
+        <h2>Policies</h2>
+        {policies.map((x, i) => {
+          return (
+            <div>
+              <h3>Policy #{i + 1}</h3>
+              {x.map((x) => {
+                const ch = challenges[x.uuid];
+                return (
+                  <div>
+                    {ch.type} ({ch.instructions})
+                    <button
+                      onClick={() =>
+                        reducer.transition("select_challenge", {
+                          uuid: x.uuid,
+                        })
+                      }
+                    >
+                      Solve
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </AnastasisClientFrame>
+    );
+  }
+
+  if (reducerState.recovery_state === RecoveryStates.ChallengeSolving) {
+    const chArr = reducerState.recovery_information!.challenges;
+    const challengeFeedback = reducerState.challenge_feedback ?? {};
+    const selectedUuid = reducerState.selected_challenge_uuid!;
+    const challenges: {
+      [uuid: string]: ChallengeInfo;
+    } = {};
+    for (const ch of chArr) {
+      challenges[ch.uuid] = ch;
+    }
+    const selectedChallenge = challenges[selectedUuid];
+    if (selectedChallenge.type === "question") {
+      return (
+        <SolveQuestionEntry
+          challenge={selectedChallenge}
+          reducer={reducer}
+          feedback={challengeFeedback[selectedUuid]}
+        />
+      );
+    } else {
+      return (
+        <AnastasisClientFrame hideNext title="Recovery: Solve challenge">
+          <p>{JSON.stringify(selectedChallenge)}</p>
+          <p>Challenge not supported.</p>
+        </AnastasisClientFrame>
+      );
+    }
+  }
+
+  if (reducerState.recovery_state === RecoveryStates.RecoveryFinished) {
+    return (
+      <AnastasisClientFrame title="Recovery Finished" hideNext>
+        <h1>Recovery Finished</h1>
+        <p>
+          Secret: {bytesToString(decodeCrock(reducerState.core_secret?.value!))}
+        </p>
+      </AnastasisClientFrame>
     );
   }
 
   console.log("unknown state", reducer.currentReducerState);
   return (
-    <div class={style.home}>
-      <h1>Home</h1>
+    <AnastasisClientFrame hideNav title="Bug">
       <p>Bug: Unknown state.</p>
       <button onClick={() => reducer.reset()}>Reset</button>
-    </div>
+    </AnastasisClientFrame>
   );
 };
 
@@ -328,9 +585,12 @@ function AuthMethodSmsSetup(props: AuthMethodSetupProps) {
       },
     });
   };
+  //const inputRef = useRef<HTMLInputElement>(null);
+  // useLayoutEffect(() => {
+  //   inputRef.current?.focus();
+  // }, []);
   return (
-    <div class={style.home}>
-      <h1>Add {props.method} authentication</h1>
+    <AnastasisClientFrame hideNav title="Add SMS authentication">
       <div>
         <p>
           For SMS authentication, you need to provide a mobile number. When
@@ -338,9 +598,11 @@ function AuthMethodSmsSetup(props: AuthMethodSetupProps) {
           receive via SMS.
         </p>
         <label>
-          Mobile number{" "}
+          Mobile number:{" "}
           <input
             value={mobileNumber}
+            //ref={inputRef}
+            style={{ display: "block" }}
             autoFocus
             onChange={(e) => setMobileNumber((e.target as any).value)}
             type="text"
@@ -351,7 +613,7 @@ function AuthMethodSmsSetup(props: AuthMethodSetupProps) {
           <button onClick={() => addSmsAuth()}>Add</button>
         </div>
       </div>
-    </div>
+    </AnastasisClientFrame>
   );
 }
 
@@ -359,8 +621,7 @@ function AuthMethodQuestionSetup(props: AuthMethodSetupProps) {
   const [questionText, setQuestionText] = useState("");
   const [answerText, setAnswerText] = useState("");
   return (
-    <div class={style.home}>
-      <h1>Add {props.method} authentication</h1>
+    <AnastasisClientFrame hideNav title="Add Security Question">
       <div>
         <p>
           For security question authentication, you need to provide a question
@@ -370,9 +631,10 @@ function AuthMethodQuestionSetup(props: AuthMethodSetupProps) {
         </p>
         <div>
           <label>
-            Security question
+            Security question:{" "}
             <input
               value={questionText}
+              style={{ display: "block" }}
               autoFocus
               onChange={(e) => setQuestionText((e.target as any).value)}
               type="text"
@@ -381,9 +643,10 @@ function AuthMethodQuestionSetup(props: AuthMethodSetupProps) {
         </div>
         <div>
           <label>
-            Answer
+            Answer:{" "}
             <input
               value={answerText}
+              style={{ display: "block" }}
               autoFocus
               onChange={(e) => setAnswerText((e.target as any).value)}
               type="text"
@@ -407,50 +670,48 @@ function AuthMethodQuestionSetup(props: AuthMethodSetupProps) {
           </button>
         </div>
       </div>
-    </div>
+    </AnastasisClientFrame>
   );
 }
 
 function AuthMethodEmailSetup(props: AuthMethodSetupProps) {
   const [email, setEmail] = useState("");
   return (
-    <div class={style.home}>
-      <h1>Add {props.method} authentication</h1>
+    <AnastasisClientFrame hideNav title="Add email authentication">
+      <p>
+        For email authentication, you need to provide an email address. When
+        recovering your secret, you will need to enter the code you receive by
+        email.
+      </p>
       <div>
-        <p>
-          For email authentication, you need to provid an email address. When
-          recovering your secret, you need to enter the code you will receive by
-          email.
-        </p>
-        <div>
-          <label>
-            Email address
-            <input
-              value={email}
-              autoFocus
-              onChange={(e) => setEmail((e.target as any).value)}
-              type="text"
-            />
-          </label>
-        </div>
-        <div>
-          <button onClick={() => props.cancel()}>Cancel</button>
-          <button
-            onClick={() =>
-              props.addAuthMethod({
-                authentication_method: {
-                  type: "email",
-                  instructions: `Email to ${email}`,
-                  challenge: encodeCrock(stringToBytes(email)),
-                },
-              })
-            }
-          >
-            Add
-          </button>
-        </div>
+        <label>
+          Email address:{" "}
+          <input
+            style={{ display: "block" }}
+            value={email}
+            autoFocus
+            onChange={(e) => setEmail((e.target as any).value)}
+            type="text"
+          />
+        </label>
       </div>
-    </div>
+      <div>
+        <button onClick={() => props.cancel()}>Cancel</button>
+        <button
+          onClick={() =>
+            props.addAuthMethod({
+              authentication_method: {
+                type: "email",
+                instructions: `Email to ${email}`,
+                challenge: encodeCrock(stringToBytes(email)),
+              },
+            })
+          }
+        >
+          Add
+        </button>
+      </div>
+    </AnastasisClientFrame>
   );
 }
 
@@ -460,6 +721,28 @@ function AuthMethodPostSetup(props: AuthMethodSetupProps) {
   const [city, setCity] = useState("");
   const [postcode, setPostcode] = useState("");
   const [country, setCountry] = useState("");
+
+  const addPostAuth = () => {
+    () =>
+      props.addAuthMethod({
+        authentication_method: {
+          type: "email",
+          instructions: `Letter to address in postal code ${postcode}`,
+          challenge: encodeCrock(
+            stringToBytes(
+              canonicalJson({
+                full_name: fullName,
+                street,
+                city,
+                postcode,
+                country,
+              }),
+            ),
+          ),
+        },
+      });
+  };
+
   return (
     <div class={style.home}>
       <h1>Add {props.method} authentication</h1>
@@ -526,29 +809,7 @@ function AuthMethodPostSetup(props: AuthMethodSetupProps) {
         </div>
         <div>
           <button onClick={() => props.cancel()}>Cancel</button>
-          <button
-            onClick={() =>
-              props.addAuthMethod({
-                authentication_method: {
-                  type: "email",
-                  instructions: `Letter to address in postal code ${postcode}`,
-                  challenge: encodeCrock(
-                    stringToBytes(
-                      canonicalJson({
-                        full_name: fullName,
-                        street,
-                        city,
-                        postcode,
-                        country,
-                      }),
-                    ),
-                  ),
-                },
-              })
-            }
-          >
-            Add
-          </button>
+          <button onClick={() => addPostAuth()}>Add</button>
         </div>
       </div>
     </div>
@@ -557,15 +818,10 @@ function AuthMethodPostSetup(props: AuthMethodSetupProps) {
 
 function AuthMethodNotImplemented(props: AuthMethodSetupProps) {
   return (
-    <div class={style.home}>
-      <h1>Add {props.method} authentication</h1>
-      <div>
-        <p>
-          This auth method is not implemented yet, please choose another one.
-        </p>
-        <button onClick={() => props.cancel()}>Cancel</button>
-      </div>
-    </div>
+    <AnastasisClientFrame hideNav title={`Add ${props.method} authentication`}>
+      <p>This auth method is not implemented yet, please choose another one.</p>
+      <button onClick={() => props.cancel()}>Cancel</button>
+    </AnastasisClientFrame>
   );
 }
 
@@ -583,8 +839,10 @@ function AuthenticationEditor(props: AuthenticationEditorProps) {
   const authAvailableSet = new Set<string>();
   for (const provKey of Object.keys(providers)) {
     const p = providers[provKey];
-    for (const meth of p.methods) {
-      authAvailableSet.add(meth.type);
+    if (p.methods) {
+      for (const meth of p.methods) {
+        authAvailableSet.add(meth.type);
+      }
     }
   }
   if (selectedMethod) {
@@ -653,10 +911,7 @@ function AuthenticationEditor(props: AuthenticationEditorProps) {
     backupState.authentication_methods ?? [];
   const haveMethodsConfigured = configuredAuthMethods.length;
   return (
-    <div class={style.home}>
-      <h1>Backup: Configure Authentication Methods</h1>
-      <ErrorBanner reducer={reducer} />
-      <h2>Add authentication method</h2>
+    <AnastasisClientFrame title="Backup: Configure Authentication Methods">
       <div>
         <MethodButton method="sms" label="SMS" />
         <MethodButton method="email" label="Email" />
@@ -686,11 +941,7 @@ function AuthenticationEditor(props: AuthenticationEditorProps) {
       ) : (
         <p>No authentication methods configured yet.</p>
       )}
-      <div>
-        <button onClick={() => reducer.back()}>Back</button>
-        <button onClick={() => reducer.transition("next", {})}>Next</button>
-      </div>
-    </div>
+    </AnastasisClientFrame>
   );
 }
 
@@ -701,36 +952,29 @@ export interface AttributeEntryProps {
 
 function AttributeEntry(props: AttributeEntryProps) {
   const { reducer, reducerState: backupState } = props;
-  const [attrs, setAttrs] = useState<Record<string, string>>({});
+  const [attrs, setAttrs] = useState<Record<string, string>>(
+    props.reducerState.identity_attributes ?? {},
+  );
   return (
-    <div class={style.home}>
-      <h1>Backup: Enter Basic User Attributes</h1>
-      <ErrorBanner reducer={reducer} />
-      <div>
-        {backupState.required_attributes.map((x: any, i: number) => {
-          return (
-            <AttributeEntryField
-              isFirst={i == 0}
-              setValue={(v: string) => setAttrs({ ...attrs, [x.name]: v })}
-              spec={x}
-              value={attrs[x.name]}
-            />
-          );
-        })}
-      </div>
-      <div>
-        <button onClick={() => reducer.back()}>Back</button>
-        <button
-          onClick={() =>
-            reducer.transition("enter_user_attributes", {
-              identity_attributes: attrs,
-            })
-          }
-        >
-          Next
-        </button>
-      </div>
-    </div>
+    <AnastasisClientFrame
+      title={withProcessLabel(reducer, "Select Country")}
+      onNext={() =>
+        reducer.transition("enter_user_attributes", {
+          identity_attributes: attrs,
+        })
+      }
+    >
+      {backupState.required_attributes.map((x: any, i: number) => {
+        return (
+          <AttributeEntryField
+            isFirst={i == 0}
+            setValue={(v: string) => setAttrs({ ...attrs, [x.name]: v })}
+            spec={x}
+            value={attrs[x.name]}
+          />
+        );
+      })}
+    </AnastasisClientFrame>
   );
 }
 
@@ -744,8 +988,9 @@ export interface AttributeEntryFieldProps {
 function AttributeEntryField(props: AttributeEntryFieldProps) {
   return (
     <div>
-      <label>{props.spec.label}</label>
+      <label>{props.spec.label}:</label>
       <input
+        style={{ display: "block" }}
         autoFocus={props.isFirst}
         type="text"
         value={props.value}
@@ -777,4 +1022,4 @@ function ErrorBanner(props: ErrorBannerProps) {
   return null;
 }
 
-export default Home;
+export default AnastasisClient;
diff --git a/packages/anastasis-webui/src/routes/home/style.css b/packages/anastasis-webui/src/routes/home/style.css
index c9f34e6c8..b94981f10 100644
--- a/packages/anastasis-webui/src/routes/home/style.css
+++ b/packages/anastasis-webui/src/routes/home/style.css
@@ -1,5 +1,5 @@
 .home {
-  padding: 56px 20px;
+  padding: 1em 1em;
   min-height: 100%;
   width: 100%;
 }