diff options
Diffstat (limited to 'packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx')
-rw-r--r-- | packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx | 116 |
1 files changed, 82 insertions, 34 deletions
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx index 903f57868..5d67ee472 100644 --- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx @@ -29,15 +29,31 @@ export function SecretSelectionScreen(): VNode { version: n, provider_url: p, }); - setSelectingVersion(false); }); + setSelectingVersion(false); } + const providerList = Object.keys(reducer.currentReducerState.authentication_providers ?? {}) const recoveryDocument = reducer.currentReducerState.recovery_document if (!recoveryDocument) { return ( - <AnastasisClientFrame hideNav title="Recovery: Problem"> - <p>No recovery document found</p> + <AnastasisClientFrame hideNext title="Recovery: Problem"> + <p>No recovery document found, try with another provider</p> + <table class="table"> + <tr> + <td><b>Provider</b></td> + <td> + <select onChange={(e) => setOtherProvider((e.target as any).value)}> + <option key="none" disabled selected > Choose another provider </option> + {providerList.map(prov => ( + <option key={prov} value={prov}> + {prov} + </option> + ))} + </select> + </td> + </tr> + </table> </AnastasisClientFrame> ) } @@ -45,43 +61,75 @@ export function SecretSelectionScreen(): VNode { return ( <AnastasisClientFrame hideNav title="Recovery: Select secret"> <p>Select a different version of the secret</p> - <select onChange={(e) => setOtherProvider((e.target as any).value)}> - {Object.keys(reducer.currentReducerState.authentication_providers ?? {}).map( - (x, i) => ( - <option key={i} selected={x === recoveryDocument.provider_url} value={x}> - {x} - </option> - ) - )} - </select> - <div> - <input - value={otherVersion} - onChange={(e) => setOtherVersion(Number((e.target as HTMLInputElement).value))} - type="number" /> - <button onClick={() => selectVersion(otherProvider, otherVersion)}> - Use this version - </button> - </div> - <div> - <button onClick={() => selectVersion(otherProvider, 0)}> - Use latest version - </button> - </div> - <div> - <button onClick={() => setSelectingVersion(false)}>Cancel</button> + <table class="table"> + <tr> + <td><b>Provider</b></td> + <td> + <select onChange={(e) => setOtherProvider((e.target as any).value)}> + {providerList.map(prov => ( + <option key={prov} selected={prov === recoveryDocument.provider_url} value={prov}> + {prov} + </option> + ))} + </select> + </td> + </tr> + <tr> + <td><b>Version</b></td> + <td> + <input + value={otherVersion} + onChange={(e) => setOtherVersion(Number((e.target as HTMLInputElement).value))} + type="number" /> + </td> + <td> + <a onClick={() => setOtherVersion(0)}>set to latest version</a> + </td> + </tr> + </table> + <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}> + <button class="button" onClick={() => setSelectingVersion(false)}>Cancel</button> + <button class="button is-info" onClick={() => selectVersion(otherProvider, otherVersion)}>Confirm</button> </div> + </AnastasisClientFrame> ); } return ( <AnastasisClientFrame title="Recovery: Select secret"> - <p>Provider: {recoveryDocument.provider_url}</p> - <p>Secret version: {recoveryDocument.version}</p> - <p>Secret name: {recoveryDocument.secret_name}</p> - <button onClick={() => setSelectingVersion(true)}> - Select different secret - </button> + <p>Secret found, you can select another version or continue to the challenges solving</p> + <table class="table"> + <tr> + <td> + <b>Provider</b> + <span class="icon has-tooltip-right" data-tooltip="Service provider backing up your secret"> + <i class="mdi mdi-information" /> + </span> + </td> + <td>{recoveryDocument.provider_url}</td> + <td><a onClick={() => setSelectingVersion(true)}>use another provider</a></td> + </tr> + <tr> + <td> + <b>Secret version</b> + <span class="icon has-tooltip-right" data-tooltip="Secret version to be recovered"> + <i class="mdi mdi-information" /> + </span> + </td> + <td>{recoveryDocument.version}</td> + <td><a onClick={() => setSelectingVersion(true)}>use another version</a></td> + </tr> + <tr> + <td> + <b>Secret name</b> + <span class="icon has-tooltip-right" data-tooltip="Secret identifier"> + <i class="mdi mdi-information" /> + </span> + </td> + <td>{recoveryDocument.secret_name}</td> + <td> </td> + </tr> + </table> </AnastasisClientFrame> ); } |