working version with improved ui

1 files changed, 106 insertions, 15 deletions

diff --git a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
index 05ae50b48..077726e02 100644
--- a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
@@ -1,28 +1,36 @@
-import { h, VNode } from "preact";
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { AnastasisClientFrame } from ".";
 import { ChallengeFeedback, ChallengeInfo } from "../../../../anastasis-core/lib";
+import { TextInput } from "../../components/fields/TextInput";
 import { useAnastasisContext } from "../../context/anastasis";
-import { SolveEmailEntry } from "./SolveEmailEntry";
-import { SolvePostEntry } from "./SolvePostEntry";
-import { SolveQuestionEntry } from "./SolveQuestionEntry";
-import { SolveSmsEntry } from "./SolveSmsEntry";
-import { SolveUnsupportedEntry } from "./SolveUnsupportedEntry";
 
 export function SolveScreen(): VNode {
   const reducer = useAnastasisContext()
-
+  const [answer, setAnswer] = useState("");
+  
   if (!reducer) {
-    return <div>no reducer in context</div>
+    return <AnastasisClientFrame hideNext title="Recovery problem">
+      <div>no reducer in context</div>
+    </AnastasisClientFrame>
   }
   if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) {
-    return <div>invalid state</div>
+    return <AnastasisClientFrame hideNext title="Recovery problem">
+      <div>invalid state</div>
+    </AnastasisClientFrame>
   }
 
   if (!reducer.currentReducerState.recovery_information) {
-    return <div>no recovery information found</div>
+    return <AnastasisClientFrame hideNext title="Recovery problem">
+      <div>no recovery information found</div>
+    </AnastasisClientFrame>
   }
   if (!reducer.currentReducerState.selected_challenge_uuid) {
-    return <div>no selected uuid</div>
+    return <AnastasisClientFrame hideNext title="Recovery problem">
+      <div>no selected uuid</div>
+    </AnastasisClientFrame>
   }
+
   const chArr = reducer.currentReducerState.recovery_information.challenges;
   const challengeFeedback = reducer.currentReducerState.challenge_feedback ?? {};
   const selectedUuid = reducer.currentReducerState.selected_challenge_uuid;
@@ -39,16 +47,99 @@ export function SolveScreen(): VNode {
     email: SolveEmailEntry,
     post: SolvePostEntry,
   };
-  const SolveDialog = dialogMap[selectedChallenge?.type] ?? SolveUnsupportedEntry;
+  const SolveDialog = selectedChallenge === undefined ? SolveUndefinedEntry : dialogMap[selectedChallenge.type] ?? SolveUnsupportedEntry;
+
+  function onNext(): void {
+    reducer?.transition("solve_challenge", { answer })
+  }
+  function onCancel(): void {
+    reducer?.back()
+  }
+  
+
   return (
-    <SolveDialog
-      challenge={selectedChallenge}
-      feedback={challengeFeedback[selectedUuid]} />
+    <AnastasisClientFrame
+      hideNav
+      title="Recovery: Solve challenge"
+    >
+      <SolveDialog
+        id={selectedUuid}
+        answer={answer}
+        setAnswer={setAnswer}
+        challenge={selectedChallenge}
+        feedback={challengeFeedback[selectedUuid]} />
+
+      <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
+          <button class="button" onClick={onCancel}>Cancel</button>
+          <button class="button is-info" onClick={onNext} >Confirm</button>
+        </div>
+    </AnastasisClientFrame>
   );
 }
 
 export interface SolveEntryProps {
+  id: string;
   challenge: ChallengeInfo;
   feedback?: ChallengeFeedback;
+  answer: string;
+  setAnswer: (s:string) => void;
 }
 
+function SolveSmsEntry({ challenge, answer, setAnswer }: SolveEntryProps): VNode {
+  return (<Fragment>
+      <p>An sms has been sent to "<b>{challenge.instructions}</b>". Type the code below</p>
+      <TextInput label="Answer" grabFocus bind={[answer, setAnswer]} />
+  </Fragment>
+  );
+}
+function SolveQuestionEntry({ challenge, answer, setAnswer }: SolveEntryProps): VNode {
+  return (
+    <Fragment>
+      <p>Type the answer to the following question:</p>
+      <pre>
+        {challenge.instructions}
+      </pre>
+      <TextInput label="Answer" grabFocus bind={[answer, setAnswer]} />
+    </Fragment>
+  );
+}
+
+function SolvePostEntry({ challenge, answer, setAnswer }: SolveEntryProps): VNode {
+  return (
+    <Fragment>
+      <p>instruction for post type challenge "<b>{challenge.instructions}</b>"</p>
+      <TextInput label="Answer" grabFocus bind={[answer, setAnswer]} />
+    </Fragment>
+  );
+}
+
+function SolveEmailEntry({ challenge, answer, setAnswer }: SolveEntryProps): VNode {
+  return (
+    <Fragment>
+      <p>An email has been sent to "<b>{challenge.instructions}</b>". Type the code below</p>
+      <TextInput label="Answer" grabFocus bind={[answer, setAnswer]} />
+    </Fragment>
+  );
+}
+
+function SolveUnsupportedEntry(props: SolveEntryProps): VNode {
+  return (
+    <Fragment>
+      <p>
+        The challenge selected is not supported for this UI. Please update this version or try using another policy.
+      </p>
+      <p>
+        <b>Challenge type:</b> {props.challenge.type}
+      </p>
+    </Fragment>
+  );
+}
+function SolveUndefinedEntry(props: SolveEntryProps): VNode {
+  return (
+    <Fragment >
+      <p>
+        There is no challenge information for id <b>"{props.id}"</b>. Try resetting the recovery session.
+      </p>
+    </Fragment>
+  );
+}