1 files changed, 56 insertions, 22 deletions
diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
index b360ccaf0..f93963f67 100644
--- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
@@ -1,9 +1,13 @@
 /* eslint-disable @typescript-eslint/camelcase */
 import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
+import { authMethods, KnownAuthMethods } from "./authMethod";
+import { EditPoliciesScreen } from "./EditPoliciesScreen";
 import { AnastasisClientFrame } from "./index";
 
 export function ReviewPoliciesScreen(): VNode {
+  const [editingPolicy, setEditingPolicy] = useState<number | undefined>()
   const reducer = useAnastasisContext()
   if (!reducer) {
     return <div>no reducer in context</div>
@@ -11,42 +15,72 @@ export function ReviewPoliciesScreen(): VNode {
   if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) {
     return <div>invalid state</div>
   }
-  const authMethods = reducer.currentReducerState.authentication_methods ?? [];
+
+  const configuredAuthMethods = reducer.currentReducerState.authentication_methods ?? [];
   const policies = reducer.currentReducerState.policies ?? [];
 
+  if (editingPolicy !== undefined) {
+    return (
+      <EditPoliciesScreen
+        index={editingPolicy}
+        cancel={() => setEditingPolicy(undefined)}
+        confirm={async (newMethods) => {
+          await reducer.transition("update_policy", {
+            policy_index: editingPolicy,
+            policy: newMethods,
+          });
+          setEditingPolicy(undefined)
+        }}
+      />
+    )
+  }
+
+  const errors = policies.length < 1 ? 'Need more policies' : undefined
   return (
-    <AnastasisClientFrame title="Backup: Review Recovery Policies">
+    <AnastasisClientFrame hideNext={errors} title="Backup: Review Recovery Policies">
+      {policies.length > 0 && <p class="block">
+        Based on your configured authentication method you have created, some policies
+        have been configured. In order to recover your secret you have to solve all the
+        challenges of at least one policy.
+      </p>}
+      {policies.length < 1 && <p class="block">
+        No policies had been created. Go back and add more authentication methods.
+      </p>}
+      <div class="block" style={{ justifyContent: 'flex-end' }} >
+        <button class="button is-success" onClick={() => setEditingPolicy(policies.length + 1)}>Add new policy</button>
+      </div>
       {policies.map((p, policy_index) => {
         const methods = p.methods
-          .map(x => authMethods[x.authentication_method] && ({ ...authMethods[x.authentication_method], provider: x.provider }))
+          .map(x => configuredAuthMethods[x.authentication_method] && ({ ...configuredAuthMethods[x.authentication_method], provider: x.provider }))
           .filter(x => !!x)
 
         const policyName = methods.map(x => x.type).join(" + ");
 
         return (
-          <div key={policy_index} class="policy">
-            <h3>
-              Policy #{policy_index + 1}: {policyName}
-            </h3>
-            Required Authentications:
-            {!methods.length && <p>
-              No auth method found
-            </p>}
-            <ul>
+          <div key={policy_index} class="box" style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <div>
+              <h3 class="subtitle">
+                Policy #{policy_index + 1}: {policyName}
+              </h3>
+              {!methods.length && <p>
+                No auth method found
+              </p>}
               {methods.map((m, i) => {
                 return (
-                  <li key={i}>
-                    {m.type} ({m.instructions}) at provider {m.provider}
-                  </li>
+                  <p key={i} class="block" style={{ display: 'flex', alignItems: 'center' }}>
+                    <span class="icon">
+                      {authMethods[m.type as KnownAuthMethods]?.icon}
+                    </span>
+                    <span>
+                      {m.instructions} recovery provided by <a href={m.provider}>{m.provider}</a>
+                    </span>
+                  </p>
                 );
               })}
-            </ul>
-            <div>
-              <button
-                onClick={() => reducer.transition("delete_policy", { policy_index })}
-              >
-                Delete Policy
-              </button>
+            </div>
+            <div style={{ marginTop: 'auto', marginBottom: 'auto', display: 'flex', justifyContent: 'space-between', flexDirection: 'column' }}>
+              <button class="button is-info block" onClick={() => setEditingPolicy(policy_index)}>Edit</button>
+              <button class="button is-danger block" onClick={() => reducer.transition("delete_policy", { policy_index })}>Delete</button>
             </div>
           </div>
         );