From 7d24d2254b49010eb0e6e6af54a0f381cfdc4b53 Mon Sep 17 00:00:00 2001
From: Florian Dold <florian@dold.me>
Date: Wed, 3 Nov 2021 18:26:57 +0100
Subject: anastasis-webui: make it compile again

---
 .../src/pages/home/ChallengeOverviewScreen.tsx     | 157 +++++++++++++--------
 1 file changed, 101 insertions(+), 56 deletions(-)

(limited to 'packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx')

diff --git a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
index 7b9b060ce..c63f19eb6 100644
--- a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
@@ -1,23 +1,29 @@
 /* eslint-disable @typescript-eslint/camelcase */
-import { ChallengeFeedback } from "anastasis-core";
+import { ChallengeFeedback, ChallengeFeedbackStatus } from "anastasis-core";
 import { h, VNode } from "preact";
 import { useAnastasisContext } from "../../context/anastasis";
 import { AnastasisClientFrame } from "./index";
 import { authMethods, KnownAuthMethods } from "./authMethod";
 
 export function ChallengeOverviewScreen(): VNode {
-  const reducer = useAnastasisContext()
+  const reducer = useAnastasisContext();
 
   if (!reducer) {
-    return <div>no reducer in context</div>
+    return <div>no reducer in context</div>;
   }
-  if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) {
-    return <div>invalid state</div>
+  if (
+    !reducer.currentReducerState ||
+    reducer.currentReducerState.recovery_state === undefined
+  ) {
+    return <div>invalid state</div>;
   }
 
-  const policies = reducer.currentReducerState.recovery_information?.policies ?? [];
-  const knownChallengesArray = reducer.currentReducerState.recovery_information?.challenges ?? [];
-  const challengeFeedback = reducer.currentReducerState?.challenge_feedback ?? {};
+  const policies =
+    reducer.currentReducerState.recovery_information?.policies ?? [];
+  const knownChallengesArray =
+    reducer.currentReducerState.recovery_information?.challenges ?? [];
+  const challengeFeedback =
+    reducer.currentReducerState?.challenge_feedback ?? {};
 
   const knownChallengesMap: {
     [uuid: string]: {
@@ -32,51 +38,80 @@ export function ChallengeOverviewScreen(): VNode {
       type: ch.type,
       cost: ch.cost,
       instructions: ch.instructions,
-      feedback: challengeFeedback[ch.uuid]
+      feedback: challengeFeedback[ch.uuid],
     };
   }
-  const policiesWithInfo = policies.map(row => {
-    let isPolicySolved = true
-    const challenges = row.map(({ uuid }) => {
-      const info = knownChallengesMap[uuid];
-      const isChallengeSolved = info?.feedback?.state === 'solved'
-      isPolicySolved = isPolicySolved && isChallengeSolved
-      return { info, uuid, isChallengeSolved }
-    }).filter(ch => ch.info !== undefined)
+  const policiesWithInfo = policies.map((row) => {
+    let isPolicySolved = true;
+    const challenges = row
+      .map(({ uuid }) => {
+        const info = knownChallengesMap[uuid];
+        const isChallengeSolved = info?.feedback?.state === "solved";
+        isPolicySolved = isPolicySolved && isChallengeSolved;
+        return { info, uuid, isChallengeSolved };
+      })
+      .filter((ch) => ch.info !== undefined);
 
-    return { isPolicySolved, challenges }
-  })
+    return { isPolicySolved, challenges };
+  });
 
-  const atLeastThereIsOnePolicySolved = policiesWithInfo.find(p => p.isPolicySolved) !== undefined
+  const atLeastThereIsOnePolicySolved =
+    policiesWithInfo.find((p) => p.isPolicySolved) !== undefined;
 
-  const errors = !atLeastThereIsOnePolicySolved ? "Solve one policy before proceeding" : undefined;
+  const errors = !atLeastThereIsOnePolicySolved
+    ? "Solve one policy before proceeding"
+    : undefined;
   return (
     <AnastasisClientFrame hideNext={errors} title="Recovery: Solve challenges">
-      {!policies.length ? <p class="block">
-        No policies found, try with another version of the secret
-      </p> : (policies.length === 1 ? <p class="block">
-        One policy found for this secret. You need to solve all the challenges in order to recover your secret.
-      </p> : <p class="block">
-        We have found {policies.length} polices. You need to solve all the challenges from one policy in order
-        to recover your secret.
-      </p>)}
+      {!policies.length ? (
+        <p class="block">
+          No policies found, try with another version of the secret
+        </p>
+      ) : policies.length === 1 ? (
+        <p class="block">
+          One policy found for this secret. You need to solve all the challenges
+          in order to recover your secret.
+        </p>
+      ) : (
+        <p class="block">
+          We have found {policies.length} polices. You need to solve all the
+          challenges from one policy in order to recover your secret.
+        </p>
+      )}
       {policiesWithInfo.map((policy, policy_index) => {
         const tableBody = policy.challenges.map(({ info, uuid }) => {
-          const isFree = !info.cost || info.cost.endsWith(':0')
-          const method = authMethods[info.type as KnownAuthMethods]
+          const isFree = !info.cost || info.cost.endsWith(":0");
+          const method = authMethods[info.type as KnownAuthMethods];
           return (
-            <div key={uuid} class="block" style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <div style={{display:'flex', alignItems:'center'}}>
-                <span class="icon">
-                  {method?.icon}
-                </span>
-                <span>
-                  {info.instructions}
-                </span>
+            <div
+              key={uuid}
+              class="block"
+              style={{ display: "flex", justifyContent: "space-between" }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                }}
+              >
+                <div style={{ display: "flex", alignItems: "center" }}>
+                  <span class="icon">{method?.icon}</span>
+                  <span>{info.instructions}</span>
+                </div>
+                {info.feedback?.state === ChallengeFeedbackStatus.Message ? (
+                  <div>
+                    <p>{info.feedback.message}</p>
+                  </div>
+                ) : null}
               </div>
               <div>
                 {method && info.feedback?.state !== "solved" ? (
-                  <a class="button" onClick={() => reducer.transition("select_challenge", { uuid })}>
+                  <a
+                    class="button"
+                    onClick={() =>
+                      reducer.transition("select_challenge", { uuid })
+                    }
+                  >
                     {isFree ? "Solve" : `Pay and Solve`}
                   </a>
                 ) : null}
@@ -86,26 +121,36 @@ export function ChallengeOverviewScreen(): VNode {
               </div>
             </div>
           );
-        })
-        
-        const policyName = policy.challenges.map(x => x.info.type).join(" + ");
-        const opa = !atLeastThereIsOnePolicySolved ? undefined : ( policy.isPolicySolved ? undefined : '0.6')
+        });
+
+        const policyName = policy.challenges
+          .map((x) => x.info.type)
+          .join(" + ");
+        const opa = !atLeastThereIsOnePolicySolved
+          ? undefined
+          : policy.isPolicySolved
+          ? undefined
+          : "0.6";
         return (
-          <div key={policy_index} class="box" style={{
-            opacity: opa
-          }}>
+          <div
+            key={policy_index}
+            class="box"
+            style={{
+              opacity: opa,
+            }}
+          >
             <h3 class="subtitle">
               Policy #{policy_index + 1}: {policyName}
             </h3>
-            {policy.challenges.length === 0 && <p>
-              This policy doesn't have challenges.
-            </p>}
-            {policy.challenges.length === 1 && <p>
-              This policy just have one challenge.
-            </p>}
-            {policy.challenges.length > 1 && <p>
-              This policy have {policy.challenges.length} challenges.
-            </p>}
+            {policy.challenges.length === 0 && (
+              <p>This policy doesn't have challenges.</p>
+            )}
+            {policy.challenges.length === 1 && (
+              <p>This policy just have one challenge.</p>
+            )}
+            {policy.challenges.length > 1 && (
+              <p>This policy have {policy.challenges.length} challenges.</p>
+            )}
             {tableBody}
           </div>
         );
-- 
cgit v1.2.3

