prettier

3 files changed, 273 insertions, 134 deletions

diff --git a/packages/anastasis-webui/src/components/menu/LangSelector.tsx b/packages/anastasis-webui/src/components/menu/LangSelector.tsx
index 0f91abd7e..fa22a29c0 100644
--- a/packages/anastasis-webui/src/components/menu/LangSelector.tsx
+++ b/packages/anastasis-webui/src/components/menu/LangSelector.tsx
@@ -15,59 +15,78 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import langIcon from '../../assets/icons/languageicon.svg';
+import langIcon from "../../assets/icons/languageicon.svg";
 import { useTranslationContext } from "../../context/translation";
-import { strings as messages } from '../../i18n/strings'
+import { strings as messages } from "../../i18n/strings";
 
 type LangsNames = {
-  [P in keyof typeof messages]: string
-}
+  [P in keyof typeof messages]: string;
+};
 
 const names: LangsNames = {
-  es: 'Español [es]',
-  en: 'English [en]',
-  fr: 'Français [fr]',
-  de: 'Deutsch [de]',
-  sv: 'Svenska [sv]',
-  it: 'Italiano [it]',
-}
+  es: "Español [es]",
+  en: "English [en]",
+  fr: "Français [fr]",
+  de: "Deutsch [de]",
+  sv: "Svenska [sv]",
+  it: "Italiano [it]",
+};
 
 function getLangName(s: keyof LangsNames | string): string {
-  if (names[s]) return names[s]
-  return String(s)
+  if (names[s]) return names[s];
+  return String(s);
 }
 
 export function LangSelector(): VNode {
-  const [updatingLang, setUpdatingLang] = useState(false)
-  const { lang, changeLanguage } = useTranslationContext()
+  const [updatingLang, setUpdatingLang] = useState(false);
+  const { lang, changeLanguage } = useTranslationContext();
 
-  return <div class="dropdown is-active ">
-    <div class="dropdown-trigger">
-      <button class="button has-tooltip-left" 
-        data-tooltip="change language selection"
-        aria-haspopup="true" 
-        aria-controls="dropdown-menu" onClick={() => setUpdatingLang(!updatingLang)}>
-        <div class="icon is-small is-left">
-          <img src={langIcon} />
-        </div>
-        <span>{getLangName(lang)}</span>
-        <div class="icon is-right">
-          <i class="mdi mdi-chevron-down" />
+  return (
+    <div class="dropdown is-active ">
+      <div class="dropdown-trigger">
+        <button
+          class="button has-tooltip-left"
+          data-tooltip="change language selection"
+          aria-haspopup="true"
+          aria-controls="dropdown-menu"
+          onClick={() => setUpdatingLang(!updatingLang)}
+        >
+          <div class="icon is-small is-left">
+            <img src={langIcon} />
+          </div>
+          <span>{getLangName(lang)}</span>
+          <div class="icon is-right">
+            <i class="mdi mdi-chevron-down" />
+          </div>
+        </button>
+      </div>
+      {updatingLang && (
+        <div class="dropdown-menu" id="dropdown-menu" role="menu">
+          <div class="dropdown-content">
+            {Object.keys(messages)
+              .filter((l) => l !== lang)
+              .map((l) => (
+                <a
+                  key={l}
+                  class="dropdown-item"
+                  value={l}
+                  onClick={() => {
+                    changeLanguage(l);
+                    setUpdatingLang(false);
+                  }}
+                >
+                  {getLangName(l)}
+                </a>
+              ))}
+          </div>
         </div>
-      </button>
+      )}
     </div>
-    {updatingLang && <div class="dropdown-menu" id="dropdown-menu" role="menu">
-      <div class="dropdown-content">
-        {Object.keys(messages)
-          .filter((l) => l !== lang)
-          .map(l => <a key={l} class="dropdown-item" value={l} onClick={() => { changeLanguage(l); setUpdatingLang(false) }}>{getLangName(l)}</a>)}
-      </div>
-    </div>}
-  </div>
-}
\ No newline at end of file
+  );
+}
diff --git a/packages/anastasis-webui/src/components/menu/SideBar.tsx b/packages/anastasis-webui/src/components/menu/SideBar.tsx
index a40f4be09..c73369dd6 100644
--- a/packages/anastasis-webui/src/components/menu/SideBar.tsx
+++ b/packages/anastasis-webui/src/components/menu/SideBar.tsx
@@ -15,16 +15,15 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
-import { Fragment, h, VNode } from 'preact';
-import { BackupStates, RecoveryStates } from '../../../../anastasis-core/lib';
-import { useAnastasisContext } from '../../context/anastasis';
-import { Translate } from '../../i18n';
-import { LangSelector } from './LangSelector';
+import { Fragment, h, VNode } from "preact";
+import { BackupStates, RecoveryStates } from "../../../../anastasis-core/lib";
+import { useAnastasisContext } from "../../context/anastasis";
+import { Translate } from "../../i18n";
+import { LangSelector } from "./LangSelector";
 
 interface Props {
   mobile?: boolean;
@@ -32,10 +31,10 @@ interface Props {
 
 export function Sidebar({ mobile }: Props): VNode {
   // const config = useConfigContext();
-  const config = { version: 'none' }
+  const config = { version: "none" };
   // FIXME: add replacement for __VERSION__ with the current version
-  const process = { env: { __VERSION__: '0.0.0' } }
-  const reducer = useAnastasisContext()!
+  const process = { env: { __VERSION__: "0.0.0" } };
+  const reducer = useAnastasisContext()!;
 
   return (
     <aside class="aside is-placed-left is-expanded">
@@ -44,114 +43,235 @@ export function Sidebar({ mobile }: Props): VNode {
       </div>} */}
       <div class="aside-tools">
         <div class="aside-tools-label">
-          <div><b>Anastasis</b></div>
-          <div class="is-size-7 has-text-right" style={{ lineHeight: 0, marginTop: -10 }}>
+          <div>
+            <b>Anastasis</b>
+          </div>
+          <div
+            class="is-size-7 has-text-right"
+            style={{ lineHeight: 0, marginTop: -10 }}
+          >
             Version {process.env.__VERSION__} ({config.version})
           </div>
         </div>
       </div>
       <div class="menu is-menu-main">
-        {!reducer.currentReducerState &&
+        {!reducer.currentReducerState && (
           <p class="menu-label">
             <Translate>Backup or Recorver</Translate>
           </p>
-        }
+        )}
         <ul class="menu-list">
-          {!reducer.currentReducerState &&
+          {!reducer.currentReducerState && (
             <li>
               <div class="ml-4">
-                <span class="menu-item-label"><Translate>Select one option</Translate></span>
-              </div>
-            </li>
-          }
-          {reducer.currentReducerState && reducer.currentReducerState.backup_state ? <Fragment>
-            <li class={reducer.currentReducerState.backup_state === BackupStates.ContinentSelecting ||
-              reducer.currentReducerState.backup_state === BackupStates.CountrySelecting ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Location</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.backup_state === BackupStates.UserAttributesCollecting ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Personal information</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.backup_state === BackupStates.AuthenticationsEditing ? 'is-active' : ''}>
-              <div class="ml-4">
-
-                <span class="menu-item-label"><Translate>Authorization methods</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesReviewing ? 'is-active' : ''}>
-              <div class="ml-4">
-
-                <span class="menu-item-label"><Translate>Policies</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.backup_state === BackupStates.SecretEditing ? 'is-active' : ''}>
-              <div class="ml-4">
-
-                <span class="menu-item-label"><Translate>Secret input</Translate></span>
+                <span class="menu-item-label">
+                  <Translate>Select one option</Translate>
+                </span>
               </div>
             </li>
-            {/* <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesPaying ? 'is-active' : ''}>
+          )}
+          {reducer.currentReducerState &&
+          reducer.currentReducerState.backup_state ? (
+            <Fragment>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                    BackupStates.ContinentSelecting ||
+                  reducer.currentReducerState.backup_state ===
+                    BackupStates.CountrySelecting
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Location</Translate>
+                  </span>
+                </div>
+              </li>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                  BackupStates.UserAttributesCollecting
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Personal information</Translate>
+                  </span>
+                </div>
+              </li>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                  BackupStates.AuthenticationsEditing
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Authorization methods</Translate>
+                  </span>
+                </div>
+              </li>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                  BackupStates.PoliciesReviewing
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Policies</Translate>
+                  </span>
+                </div>
+              </li>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                  BackupStates.SecretEditing
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Secret input</Translate>
+                  </span>
+                </div>
+              </li>
+              {/* <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesPaying ? 'is-active' : ''}>
               <div class="ml-4">
 
                 <span class="menu-item-label"><Translate>Payment (optional)</Translate></span>
               </div>
             </li> */}
-            <li class={reducer.currentReducerState.backup_state === BackupStates.BackupFinished ? 'is-active' : ''}>
-              <div class="ml-4">
-
-                <span class="menu-item-label"><Translate>Backup completed</Translate></span>
-              </div>
-            </li>
-            {/* <li class={reducer.currentReducerState.backup_state === BackupStates.TruthsPaying ? 'is-active' : ''}>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                  BackupStates.BackupFinished
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Backup completed</Translate>
+                  </span>
+                </div>
+              </li>
+              {/* <li class={reducer.currentReducerState.backup_state === BackupStates.TruthsPaying ? 'is-active' : ''}>
               <div class="ml-4">
 
                 <span class="menu-item-label"><Translate>Truth Paying</Translate></span>
               </div>
             </li> */}
-          </Fragment> : (reducer.currentReducerState && reducer.currentReducerState?.recovery_state && <Fragment>
-            <li class={reducer.currentReducerState.recovery_state === RecoveryStates.ContinentSelecting ||
-              reducer.currentReducerState.recovery_state === RecoveryStates.CountrySelecting ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Location</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.recovery_state === RecoveryStates.UserAttributesCollecting ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Personal information</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.recovery_state === RecoveryStates.SecretSelecting ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Secret selection</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.recovery_state === RecoveryStates.ChallengeSelecting ||
-              reducer.currentReducerState.recovery_state === RecoveryStates.ChallengeSolving ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Solve Challenges</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.recovery_state === RecoveryStates.RecoveryFinished ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Secret recovered</Translate></span>
-              </div>
-            </li>
-          </Fragment>)}
-          {reducer.currentReducerState &&
+            </Fragment>
+          ) : (
+            reducer.currentReducerState &&
+            reducer.currentReducerState?.recovery_state && (
+              <Fragment>
+                <li
+                  class={
+                    reducer.currentReducerState.recovery_state ===
+                      RecoveryStates.ContinentSelecting ||
+                    reducer.currentReducerState.recovery_state ===
+                      RecoveryStates.CountrySelecting
+                      ? "is-active"
+                      : ""
+                  }
+                >
+                  <div class="ml-4">
+                    <span class="menu-item-label">
+                      <Translate>Location</Translate>
+                    </span>
+                  </div>
+                </li>
+                <li
+                  class={
+                    reducer.currentReducerState.recovery_state ===
+                    RecoveryStates.UserAttributesCollecting
+                      ? "is-active"
+                      : ""
+                  }
+                >
+                  <div class="ml-4">
+                    <span class="menu-item-label">
+                      <Translate>Personal information</Translate>
+                    </span>
+                  </div>
+                </li>
+                <li
+                  class={
+                    reducer.currentReducerState.recovery_state ===
+                    RecoveryStates.SecretSelecting
+                      ? "is-active"
+                      : ""
+                  }
+                >
+                  <div class="ml-4">
+                    <span class="menu-item-label">
+                      <Translate>Secret selection</Translate>
+                    </span>
+                  </div>
+                </li>
+                <li
+                  class={
+                    reducer.currentReducerState.recovery_state ===
+                      RecoveryStates.ChallengeSelecting ||
+                    reducer.currentReducerState.recovery_state ===
+                      RecoveryStates.ChallengeSolving
+                      ? "is-active"
+                      : ""
+                  }
+                >
+                  <div class="ml-4">
+                    <span class="menu-item-label">
+                      <Translate>Solve Challenges</Translate>
+                    </span>
+                  </div>
+                </li>
+                <li
+                  class={
+                    reducer.currentReducerState.recovery_state ===
+                    RecoveryStates.RecoveryFinished
+                      ? "is-active"
+                      : ""
+                  }
+                >
+                  <div class="ml-4">
+                    <span class="menu-item-label">
+                      <Translate>Secret recovered</Translate>
+                    </span>
+                  </div>
+                </li>
+              </Fragment>
+            )
+          )}
+          {reducer.currentReducerState && (
             <li>
               <div class="buttons ml-4">
-                <button class="button is-danger is-right" onClick={() => reducer.reset()}>Reset session</button>
+                <button
+                  class="button is-danger is-right"
+                  onClick={() => reducer.reset()}
+                >
+                  Reset session
+                </button>
               </div>
             </li>
-          }
-
+          )}
+          {/* <li>
+              <div class="buttons ml-4">
+                <button class="button is-info is-right" >Manage providers</button>
+              </div>
+            </li> */}
         </ul>
       </div>
     </aside>
   );
 }
-
diff --git a/packages/anastasis-webui/src/components/menu/index.tsx b/packages/anastasis-webui/src/components/menu/index.tsx
index fd4aab149..99d0f7646 100644
--- a/packages/anastasis-webui/src/components/menu/index.tsx
+++ b/packages/anastasis-webui/src/components/menu/index.tsx
@@ -85,8 +85,8 @@ export function NotificationCard({
               n.type === "ERROR"
                 ? "message is-danger"
                 : n.type === "WARN"
-                  ? "message is-warning"
-                  : "message is-info"
+                ? "message is-warning"
+                : "message is-info"
             }
           >
             <div class="message-header">
@@ -113,7 +113,7 @@ export function NotYetReadyAppMenu({
   return (
     <div
       class="has-aside-mobile-expanded"
-      // class={mobileOpen ? "has-aside-mobile-expanded" : ""} 
+      // class={mobileOpen ? "has-aside-mobile-expanded" : ""}
       onClick={() => setMobileOpen(false)}
     >
       <NavigationBar