1 files changed, 44 insertions, 13 deletions
diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
index 673f215e2..b8beb7b47 100644
--- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
@@ -1,10 +1,14 @@
 /* eslint-disable @typescript-eslint/camelcase */
+import { AuthMethod } from "anastasis-core";
 import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
-import { AnastasisClientFrame } from "./index";
 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>
@@ -12,20 +16,44 @@ export function ReviewPoliciesScreen(): VNode {
   if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) {
     return <div>invalid state</div>
   }
+
   const configuredAuthMethods = reducer.currentReducerState.authentication_methods ?? [];
   const policies = reducer.currentReducerState.policies ?? [];
 
+  if (editingPolicy !== undefined) {
+    return (
+      <EditPoliciesScreen
+        index={editingPolicy}
+        cancel={() => setEditingPolicy(undefined)}
+        confirm={(newMethods) => {
+          reducer.runTransaction(async (tx) => {
+            await tx.transition("delete_policy", {
+              policy_index: editingPolicy
+            });
+            await tx.transition("add_policy", {
+              policy: newMethods
+            });
+          });
+          setEditingPolicy(undefined)
+        }}
+      />
+    )
+  }
+
   const errors = policies.length < 1 ? 'Need more policies' : undefined
   return (
     <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 
+        have been configured. In order to recover your secret you have to solve all the
         challenges of at least one policy.
-      </p> }
+      </p>}
       {policies.length < 1 && <p class="block">
         No policies had been created. Go back and add more authentication methods.
-      </p> }
+      </p>}
+      <div class="block" onClick={() => setEditingPolicy(policies.length + 1)}>
+        <button class="button is-success">Add new policy</button>
+      </div>
       {policies.map((p, policy_index) => {
         const methods = p.methods
           .map(x => configuredAuthMethods[x.authentication_method] && ({ ...configuredAuthMethods[x.authentication_method], provider: x.provider }))
@@ -44,18 +72,21 @@ export function ReviewPoliciesScreen(): VNode {
               </p>}
               {methods.map((m, i) => {
                 return (
-                  <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>
+                  <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>
                 );
               })}
             </div>
-            <div style={{ marginTop: 'auto', marginBottom: 'auto' }}><button class="button is-danger" onClick={() => reducer.transition("delete_policy", { policy_index })}>Delete</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>
         );
       })}