refactoring challenge overview to look more like policy reviewing

1 files changed, 43 insertions, 39 deletions

diff --git a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
index cf44d5bf4..7b9b060ce 100644
--- a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
@@ -1,7 +1,9 @@
+/* eslint-disable @typescript-eslint/camelcase */
 import { ChallengeFeedback } 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()
@@ -50,59 +52,61 @@ export function ChallengeOverviewScreen(): VNode {
   const errors = !atLeastThereIsOnePolicySolved ? "Solve one policy before proceeding" : undefined;
   return (
     <AnastasisClientFrame hideNext={errors} title="Recovery: Solve challenges">
-      {!policies.length ? <p>
+      {!policies.length ? <p class="block">
         No policies found, try with another version of the secret
-      </p> : (policies.length === 1 ? <p>
+      </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>
+      </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((row, i) => {
-        const tableBody = row.challenges.map(({ info, uuid }) => {
+      {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]
           return (
-            <tr key={uuid}>
-              <td>{info.type}</td>
-              <td>
-                {info.instructions}
-              </td>
-              <td>{info.feedback?.state ?? "unknown"}</td>
-              <td>{info.cost}</td>
-              <td>
-                {info.feedback?.state !== "solved" ? (
-                  <a onClick={() => reducer.transition("select_challenge", { uuid })}>
-                    Solve
+            <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>
+              <div>
+                {method && info.feedback?.state !== "solved" ? (
+                  <a class="button" onClick={() => reducer.transition("select_challenge", { uuid })}>
+                    {isFree ? "Solve" : `Pay and Solve`}
                   </a>
                 ) : null}
-              </td>
-            </tr>
+                {info.feedback?.state === "solved" ? (
+                  <a class="button is-success"> Solved </a>
+                ) : null}
+              </div>
+            </div>
           );
         })
+        
+        const policyName = policy.challenges.map(x => x.info.type).join(" + ");
+        const opa = !atLeastThereIsOnePolicySolved ? undefined : ( policy.isPolicySolved ? undefined : '0.6')
         return (
-          <div key={i}>
-            <b>Policy #{i + 1}</b>
-            {row.challenges.length === 0 && <p>
-              This policy doesn't have challenges
+          <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>}
-            {row.challenges.length === 1 && <p>
-              This policy just have one challenge to be solved
+            {policy.challenges.length === 1 && <p>
+              This policy just have one challenge.
             </p>}
-            {row.challenges.length > 1 && <p>
-              This policy have {row.challenges.length} challenges
+            {policy.challenges.length > 1 && <p>
+              This policy have {policy.challenges.length} challenges.
             </p>}
-            <table class="table">
-              <thead>
-                <tr>
-                  <td>Challenge type</td>
-                  <td>Description</td>
-                  <td>Status</td>
-                  <td>Cost</td>
-                </tr>
-              </thead>
-              <tbody>
-                {tableBody}
-              </tbody>
-            </table>
+            {tableBody}
           </div>
         );
       })}