diff options
Diffstat (limited to 'packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx')
-rw-r--r-- | packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx | 119 |
1 files changed, 87 insertions, 32 deletions
diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx index aa98b5dd9..c43f0cdea 100644 --- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx @@ -6,16 +6,20 @@ import { EditPoliciesScreen } from "./EditPoliciesScreen"; import { AnastasisClientFrame } from "./index"; export function ReviewPoliciesScreen(): VNode { - const [editingPolicy, setEditingPolicy] = useState<number | undefined>() - const reducer = useAnastasisContext() + const [editingPolicy, setEditingPolicy] = useState<number | undefined>(); + const reducer = useAnastasisContext(); if (!reducer) { - return <div>no reducer in context</div> + return <div>no reducer in context</div>; } - if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) { - return <div>invalid state</div> + if ( + !reducer.currentReducerState || + reducer.currentReducerState.backup_state === undefined + ) { + return <div>invalid state</div>; } - const configuredAuthMethods = reducer.currentReducerState.authentication_methods ?? []; + const configuredAuthMethods = + reducer.currentReducerState.authentication_methods ?? []; const policies = reducer.currentReducerState.policies ?? []; if (editingPolicy !== undefined) { @@ -28,58 +32,109 @@ export function ReviewPoliciesScreen(): VNode { policy_index: editingPolicy, policy: newMethods, }); - setEditingPolicy(undefined) + setEditingPolicy(undefined); }} /> - ) + ); } - const errors = policies.length < 1 ? 'Need more policies' : 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 - 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> + <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 => configuredAuthMethods[x.authentication_method] && ({ ...configuredAuthMethods[x.authentication_method], provider: x.provider })) - .filter(x => !!x) + .map( + (x) => + configuredAuthMethods[x.authentication_method] && { + ...configuredAuthMethods[x.authentication_method], + provider: x.provider, + }, + ) + .filter((x) => !!x); - const policyName = methods.map(x => x.type).join(" + "); + const policyName = methods.map((x) => x.type).join(" + "); + + if (p.methods.length > methods.length) { + //there is at least one authentication method that is corrupted + return null; + } return ( - <div key={policy_index} class="box" style={{ display: 'flex', justifyContent: 'space-between' }}> + <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.length && <p>No auth method found</p>} {methods.map((m, i) => { return ( - <p key={i} class="block" style={{ display: 'flex', alignItems: 'center' }}> + <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> + {m.instructions} recovery provided by{" "} + <a href={m.provider}>{m.provider}</a> </span> </p> ); })} </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 + 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> ); |