diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-03 17:30:11 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-03 17:35:29 -0300 |
commit | a82b5a6992fda61d6eaa0bb079e284805a394777 (patch) | |
tree | 857168ae8c28d93253ec319708ae0818bd76c30f /packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx | |
parent | 9fb6536fbc91adaf7a8a80860fcef5e1f80bfb3b (diff) | |
download | wallet-core-a82b5a6992fda61d6eaa0bb079e284805a394777.tar.xz |
feedback from meeting and editing policy
Diffstat (limited to 'packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx')
-rw-r--r-- | packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx | 57 |
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> ); })} |