prettier

1 files changed, 128 insertions, 57 deletions

diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
index 398393619..4000f9bfe 100644
--- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
@@ -8,18 +8,23 @@ import { AnastasisClientFrame } from "./index";
 
 export function SecretSelectionScreen(): VNode {
   const [selectingVersion, setSelectingVersion] = useState<boolean>(false);
-  const reducer = useAnastasisContext()
+  const reducer = useAnastasisContext();
 
-  const [manageProvider, setManageProvider] = useState(false)
-  const currentVersion = (reducer?.currentReducerState
-    && ("recovery_document" in reducer.currentReducerState)
-    && reducer.currentReducerState.recovery_document?.version) || 0;
+  const [manageProvider, setManageProvider] = useState(false);
+  const currentVersion =
+    (reducer?.currentReducerState &&
+      "recovery_document" in reducer.currentReducerState &&
+      reducer.currentReducerState.recovery_document?.version) ||
+    0;
 
   if (!reducer) {
-    return <div>no reducer in context</div>
+    return <div>no reducer in context</div>;
   }
-  if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) {
-    return <div>invalid state</div>
+  if (
+    !reducer.currentReducerState ||
+    reducer.currentReducerState.recovery_state === undefined
+  ) {
+    return <div>invalid state</div>;
   }
 
   async function doSelectVersion(p: string, n: number): Promise<void> {
@@ -33,72 +38,101 @@ export function SecretSelectionScreen(): VNode {
     });
   }
 
-  const providerList = Object.keys(reducer.currentReducerState.authentication_providers ?? {})
-  const recoveryDocument = reducer.currentReducerState.recovery_document
+  const providerList = Object.keys(
+    reducer.currentReducerState.authentication_providers ?? {},
+  );
+  const recoveryDocument = reducer.currentReducerState.recovery_document;
 
   if (!recoveryDocument) {
-    return <ChooseAnotherProviderScreen
-      providers={providerList} selected=""
-      onChange={(newProv) => doSelectVersion(newProv, 0)}
-    />
+    return (
+      <ChooseAnotherProviderScreen
+        providers={providerList}
+        selected=""
+        onChange={(newProv) => doSelectVersion(newProv, 0)}
+      />
+    );
   }
 
   if (selectingVersion) {
-    return <SelectOtherVersionProviderScreen providers={providerList}
-      provider={recoveryDocument.provider_url} version={recoveryDocument.version}
-      onCancel={() => setSelectingVersion(false)}
-      onConfirm={doSelectVersion}
-    />
+    return (
+      <SelectOtherVersionProviderScreen
+        providers={providerList}
+        provider={recoveryDocument.provider_url}
+        version={recoveryDocument.version}
+        onCancel={() => setSelectingVersion(false)}
+        onConfirm={doSelectVersion}
+      />
+    );
   }
 
   if (manageProvider) {
-    return <AddingProviderScreen onCancel={() => setManageProvider(false)} />
+    return <AddingProviderScreen onCancel={() => setManageProvider(false)} />;
   }
 
   return (
     <AnastasisClientFrame title="Recovery: Select secret">
       <div class="columns">
         <div class="column">
-          <div class="box" style={{ border: '2px solid green' }}>
+          <div class="box" style={{ border: "2px solid green" }}>
             <h1 class="subtitle">{recoveryDocument.provider_url}</h1>
             <div class="block">
-              {currentVersion === 0 ? <p>
-                Set to recover the latest version
-              </p> : <p>
-                Set to recover the version number {currentVersion}
-              </p>}
+              {currentVersion === 0 ? (
+                <p>Set to recover the latest version</p>
+              ) : (
+                <p>Set to recover the version number {currentVersion}</p>
+              )}
             </div>
             <div class="buttons is-right">
-              <button class="button" onClick={(e) => setSelectingVersion(true)}>Change secret's version</button>
+              <button class="button" onClick={(e) => setSelectingVersion(true)}>
+                Change secret's version
+              </button>
             </div>
           </div>
         </div>
         <div class="column">
-          <p>Secret found, you can select another version or continue to the challenges solving</p>
+          <p>
+            Secret found, you can select another version or continue to the
+            challenges solving
+          </p>
           <p class="block">
-            <button class="button is-info" onClick={() => setManageProvider(true)}>
+            <a onClick={() => setManageProvider(true)}>
               Manage recovery providers
-            </button>
+            </a>
           </p>
-
         </div>
       </div>
     </AnastasisClientFrame>
   );
 }
 
-
-function ChooseAnotherProviderScreen({ providers, selected, onChange }: { selected: string; providers: string[]; onChange: (prov: string) => void }): VNode {
+function ChooseAnotherProviderScreen({
+  providers,
+  selected,
+  onChange,
+}: {
+  selected: string;
+  providers: string[];
+  onChange: (prov: string) => void;
+}): VNode {
   return (
-    <AnastasisClientFrame hideNext="Recovery document not found" title="Recovery: Problem">
+    <AnastasisClientFrame
+      hideNext="Recovery document not found"
+      title="Recovery: Problem"
+    >
       <p>No recovery document found, try with another provider</p>
       <div class="field">
         <label class="label">Provider</label>
         <div class="control is-expanded has-icons-left">
           <div class="select is-fullwidth">
-            <select onChange={(e) => onChange(e.currentTarget.value)} value={selected}>
-              <option key="none" disabled selected value=""> Choose a provider </option>
-              {providers.map(prov => (
+            <select
+              onChange={(e) => onChange(e.currentTarget.value)}
+              value={selected}
+            >
+              <option key="none" disabled selected value="">
+                {" "}
+                Choose a provider{" "}
+              </option>
+              {providers.map((prov) => (
                 <option key={prov} value={prov}>
                   {prov}
                 </option>
@@ -114,9 +148,23 @@ function ChooseAnotherProviderScreen({ providers, selected, onChange }: { select
   );
 }
 
-function SelectOtherVersionProviderScreen({ providers, provider, version, onConfirm, onCancel }: { onCancel: () => void; provider: string; version: number; providers: string[]; onConfirm: (prov: string, v: number) => Promise<void>; }): VNode {
+function SelectOtherVersionProviderScreen({
+  providers,
+  provider,
+  version,
+  onConfirm,
+  onCancel,
+}: {
+  onCancel: () => void;
+  provider: string;
+  version: number;
+  providers: string[];
+  onConfirm: (prov: string, v: number) => Promise<void>;
+}): VNode {
   const [otherProvider, setOtherProvider] = useState<string>(provider);
-  const [otherVersion, setOtherVersion] = useState(version > 0 ? String(version) : "");
+  const [otherVersion, setOtherVersion] = useState(
+    version > 0 ? String(version) : "",
+  );
 
   return (
     <AnastasisClientFrame hideNav title="Recovery: Select secret">
@@ -125,11 +173,11 @@ function SelectOtherVersionProviderScreen({ providers, provider, version, onConf
           <div class="box">
             <h1 class="subtitle">Provider {otherProvider}</h1>
             <div class="block">
-              {version === 0 ? <p>
-                Set to recover the latest version
-              </p> : <p>
-                Set to recover the version number {version}
-              </p>}
+              {version === 0 ? (
+                <p>Set to recover the latest version</p>
+              ) : (
+                <p>Set to recover the version number {version}</p>
+              )}
               <p>Specify other version below or use the latest</p>
             </div>
 
@@ -137,9 +185,15 @@ function SelectOtherVersionProviderScreen({ providers, provider, version, onConf
               <label class="label">Provider</label>
               <div class="control is-expanded has-icons-left">
                 <div class="select is-fullwidth">
-                  <select onChange={(e) => setOtherProvider(e.currentTarget.value)} value={otherProvider}>
-                    <option key="none" disabled selected value=""> Choose a provider </option>
-                    {providers.map(prov => (
+                  <select
+                    onChange={(e) => setOtherProvider(e.currentTarget.value)}
+                    value={otherProvider}
+                  >
+                    <option key="none" disabled selected value="">
+                      {" "}
+                      Choose a provider{" "}
+                    </option>
+                    {providers.map((prov) => (
                       <option key={prov} value={prov}>
                         {prov}
                       </option>
@@ -156,23 +210,40 @@ function SelectOtherVersionProviderScreen({ providers, provider, version, onConf
                 label="Version"
                 placeholder="version number to recover"
                 grabFocus
-                bind={[otherVersion, setOtherVersion]} />
+                bind={[otherVersion, setOtherVersion]}
+              />
             </div>
           </div>
-          <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
-            <button class="button" onClick={onCancel}>Cancel</button>
+          <div
+            style={{
+              marginTop: "2em",
+              display: "flex",
+              justifyContent: "space-between",
+            }}
+          >
+            <button class="button" onClick={onCancel}>
+              Cancel
+            </button>
             <div class="buttons">
-              <AsyncButton class="button" onClick={() => onConfirm(otherProvider, 0)}>Use latest</AsyncButton>
-              <AsyncButton class="button is-info" onClick={() => onConfirm(otherProvider, parseInt(otherVersion, 10))}>Confirm</AsyncButton>
+              <AsyncButton
+                class="button"
+                onClick={() => onConfirm(otherProvider, 0)}
+              >
+                Use latest
+              </AsyncButton>
+              <AsyncButton
+                class="button is-info"
+                onClick={() =>
+                  onConfirm(otherProvider, parseInt(otherVersion, 10))
+                }
+              >
+                Confirm
+              </AsyncButton>
             </div>
           </div>
         </div>
-        <div class="column">
-          .
-        </div>
+        <div class="column">.</div>
       </div>
-
     </AnastasisClientFrame>
   );
-
 }