1 files changed, 30 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..6d5220a05 100644
--- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
@@ -2,6 +2,7 @@
 import { h, VNode } from "preact";
 import { useAnastasisContext } from "../../context/anastasis";
 import { AnastasisClientFrame } from "./index";
+import { authMethods, KnownAuthMethods } from "./authMethodSetup";
 
 export function ReviewPoliciesScreen(): VNode {
   const reducer = useAnastasisContext()
@@ -11,43 +12,50 @@ 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 ?? [];
 
+  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> }
       {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' }}><button class="button is-danger" onClick={() => reducer.transition("delete_policy", { policy_index })}>Delete</button></div>
           </div>
         );
       })}