diff options
Diffstat (limited to 'packages/anastasis-webui/src/components/menu/SideBar.tsx')
| -rw-r--r-- | packages/anastasis-webui/src/components/menu/SideBar.tsx | 404 |
1 files changed, 282 insertions, 122 deletions
diff --git a/packages/anastasis-webui/src/components/menu/SideBar.tsx b/packages/anastasis-webui/src/components/menu/SideBar.tsx index df582a5d0..31bc3c7a7 100644 --- a/packages/anastasis-webui/src/components/menu/SideBar.tsx +++ b/packages/anastasis-webui/src/components/menu/SideBar.tsx @@ -1,169 +1,329 @@ /* - This file is part of GNU Taler - (C) 2021 Taler Systems S.A. + This file is part of GNU Anastasis + (C) 2021-2022 Anastasis SARL - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software + GNU Anastasis is free software; you can redistribute it and/or modify it under the + terms of the GNU Affero General Public License as published by the Free Software Foundation; either version 3, or (at your option) any later version. - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + GNU Anastasis is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. + A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + You should have received a copy of the GNU Affero General Public License along with + GNU Anastasis; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ /** -* -* @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 { BackupStates, RecoveryStates } from "@gnu-taler/anastasis-core"; +import { Fragment, h, VNode } from "preact"; +import { useAnastasisContext } from "../../context/anastasis.js"; +import { useTranslationContext } from "../../context/translation.js"; interface Props { mobile?: boolean; } +const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : "dev"; +const GIT_HASH = + typeof __GIT_HASH__ !== "undefined" + ? __GIT_HASH__.substring(0, 7) + : undefined; +const VERSION_WITH_HASH = GIT_HASH ? `${VERSION}-${GIT_HASH}` : VERSION; + export function Sidebar({ mobile }: Props): VNode { - // const config = useConfigContext(); - const config = { version: 'none' } - const process = { env: { __VERSION__: '0.0.0' } } - const reducer = useAnastasisContext()! + const reducer = useAnastasisContext()!; + const { i18n } = useTranslationContext(); + + function saveSession(): void { + const state = reducer.exportState(); + const link = document.createElement("a"); + link.download = "anastasis.json"; + link.href = `data:text/plain,${state}`; + link.click(); + } return ( <aside class="aside is-placed-left is-expanded"> - {mobile && <div class="footer" onClick={(e) => { return e.stopImmediatePropagation() }}> + {/* {mobile && <div class="footer" onClick={(e) => { return e.stopImmediatePropagation() }}> <LangSelector /> - </div>} + </div>} */} <div class="aside-tools"> <div class="aside-tools-label"> - <div><b>Anastasis</b> Reducer</div> - <div class="is-size-7 has-text-right" style={{ lineHeight: 0, marginTop: -10 }}> - {process.env.__VERSION__} ({config.version}) + <div> + <b>Anastasis</b> + </div> + <div + class="is-size-7 has-text-right" + style={{ lineHeight: 0, marginTop: -10 }} + > + Version {VERSION_WITH_HASH} </div> </div> </div> <div class="menu is-menu-main"> - {!reducer.currentReducerState && + {!reducer.currentReducerState && ( <p class="menu-label"> - <Translate>Backup or Recorver</Translate> + <i18n.Translate>Backup or Recorver</i18n.Translate> </p> - } + )} <ul class="menu-list"> - {!reducer.currentReducerState && + {!reducer.currentReducerState && ( <li> <div class="ml-4"> - <span class="menu-item-label"><Translate>Start one options</Translate></span> - </div> - </li> - } - {reducer.currentReducerState && reducer.currentReducerState.backup_state ? <Fragment> - <li class={reducer.currentReducerState.backup_state === BackupStates.ContinentSelecting ? 'is-active' : ''}> - <div class="ml-4"> - <span class="menu-item-label"><Translate>Continent selection</Translate></span> + <span class="menu-item-label"> + <i18n.Translate>Select one option</i18n.Translate> + </span> </div> </li> - <li class={reducer.currentReducerState.backup_state === BackupStates.CountrySelecting ? 'is-active' : ''}> - <div class="ml-4"> - <span class="menu-item-label"><Translate>Country selection</Translate></span> - </div> - </li> - <li class={reducer.currentReducerState.backup_state === BackupStates.UserAttributesCollecting ? 'is-active' : ''}> + )} + {reducer.currentReducerState?.reducer_type === "backup" ? ( + <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"> + <i18n.Translate>Location</i18n.Translate> + </span> + </div> + </li> + <li + class={ + reducer.currentReducerState.backup_state === + BackupStates.UserAttributesCollecting + ? "is-active" + : "" + } + > + <div class="ml-4"> + <span class="menu-item-label"> + <i18n.Translate>Personal information</i18n.Translate> + </span> + </div> + </li> + <li + class={ + reducer.currentReducerState.backup_state === + BackupStates.AuthenticationsEditing + ? "is-active" + : "" + } + > + <div class="ml-4"> + <span class="menu-item-label"> + <i18n.Translate>Authorization methods</i18n.Translate> + </span> + </div> + </li> + <li + class={ + reducer.currentReducerState.backup_state === + BackupStates.PoliciesReviewing + ? "is-active" + : "" + } + > + <div class="ml-4"> + <span class="menu-item-label"> + <i18n.Translate>Policies</i18n.Translate> + </span> + </div> + </li> + <li + class={ + reducer.currentReducerState.backup_state === + BackupStates.SecretEditing + ? "is-active" + : "" + } + > + <div class="ml-4"> + <span class="menu-item-label"> + <i18n.Translate>Secret input</i18n.Translate> + </span> + </div> + </li> + {/* <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesPaying ? 'is-active' : ''}> <div class="ml-4"> - <span class="menu-item-label"><Translate>User attributes</Translate></span> + <span class="menu-item-label"><i18n.Translate>Payment (optional)</i18n.Translate></span> </div> - </li> - <li class={reducer.currentReducerState.backup_state === BackupStates.AuthenticationsEditing ? 'is-active' : ''}> + </li> */} + <li + class={ + reducer.currentReducerState.backup_state === + BackupStates.BackupFinished + ? "is-active" + : "" + } + > + <div class="ml-4"> + <span class="menu-item-label"> + <i18n.Translate>Backup completed</i18n.Translate> + </span> + </div> + </li> + {/* <li class={reducer.currentReducerState.backup_state === BackupStates.TruthsPaying ? 'is-active' : ''}> <div class="ml-4"> - <span class="menu-item-label"><Translate>Auth methods</Translate></span> + <span class="menu-item-label"><i18n.Translate>Truth Paying</i18n.Translate></span> </div> - </li> - <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesReviewing ? 'is-active' : ''}> - <div class="ml-4"> + </li> */} + {reducer.currentReducerState.backup_state !== + BackupStates.BackupFinished && ( + <li> + <div class="buttons ml-4"> + <button + class="button is-primary is-right" + onClick={saveSession} + > + Save backup session + </button> + </div> + </li> + )} + {reducer.currentReducerState.backup_state !== + BackupStates.BackupFinished && ( + <li> + <div class="buttons ml-4"> + <button + class="button is-danger is-right" + onClick={() => reducer.reset()} + > + Reset session + </button> + </div> + </li> + )} + </Fragment> + ) : ( + reducer.currentReducerState?.reducer_type === "recovery" && ( + <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"> + <i18n.Translate>Location</i18n.Translate> + </span> + </div> + </li> + <li + class={ + reducer.currentReducerState.recovery_state === + RecoveryStates.UserAttributesCollecting + ? "is-active" + : "" + } + > + <div class="ml-4"> + <span class="menu-item-label"> + <i18n.Translate>Personal information</i18n.Translate> + </span> + </div> + </li> + <li + class={ + reducer.currentReducerState.recovery_state === + RecoveryStates.SecretSelecting + ? "is-active" + : "" + } + > + <div class="ml-4"> + <span class="menu-item-label"> + <i18n.Translate>Secret selection</i18n.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"> + <i18n.Translate>Solve Challenges</i18n.Translate> + </span> + </div> + </li> + <li + class={ + reducer.currentReducerState.recovery_state === + RecoveryStates.RecoveryFinished + ? "is-active" + : "" + } + > + <div class="ml-4"> + <span class="menu-item-label"> + <i18n.Translate>Secret recovered</i18n.Translate> + </span> + </div> + </li> + {reducer.currentReducerState.recovery_state !== + RecoveryStates.RecoveryFinished && ( + <li> + <div class="buttons ml-4"> + <button + class="button is-primary is-right" + onClick={saveSession} + > + Save recovery session + </button> + </div> + </li> + )} + {reducer.currentReducerState.recovery_state === + RecoveryStates.RecoveryFinished ? ( + <Fragment /> + ) : ( + <li> + <div class="buttons ml-4"> + <button + class="button is-danger is-right" + onClick={() => reducer.reset()} + > + Reset session + </button> + </div> + </li> + )} + </Fragment> + ) + )} - <span class="menu-item-label"><Translate>PoliciesReviewing</Translate></span> - </div> - </li> - <li class={reducer.currentReducerState.backup_state === BackupStates.SecretEditing ? 'is-active' : ''}> - <div class="ml-4"> - - <span class="menu-item-label"><Translate>SecretEditing</Translate></span> - </div> - </li> - <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesPaying ? 'is-active' : ''}> - <div class="ml-4"> - - <span class="menu-item-label"><Translate>PoliciesPaying</Translate></span> - </div> - </li> - <li class={reducer.currentReducerState.backup_state === BackupStates.BackupFinished ? 'is-active' : ''}> - <div class="ml-4"> - - <span class="menu-item-label"><Translate>BackupFinished</Translate></span> - </div> - </li> - <li class={reducer.currentReducerState.backup_state === BackupStates.TruthsPaying ? 'is-active' : ''}> - <div class="ml-4"> - - <span class="menu-item-label"><Translate>TruthsPaying</Translate></span> - </div> - </li> - </Fragment> : (reducer.currentReducerState && reducer.currentReducerState?.recovery_state && <Fragment> - <li class={reducer.currentReducerState.recovery_state === RecoveryStates.ContinentSelecting ? 'is-active' : ''}> - <div class="ml-4"> - <span class="menu-item-label"><Translate>TruthsPaying</Translate></span> - </div> - </li> - <li class={reducer.currentReducerState.recovery_state === RecoveryStates.CountrySelecting ? 'is-active' : ''}> - <div class="ml-4"> - <span class="menu-item-label"><Translate>CountrySelecting</Translate></span> - </div> - </li> - <li class={reducer.currentReducerState.recovery_state === RecoveryStates.UserAttributesCollecting ? 'is-active' : ''}> - <div class="ml-4"> - <span class="menu-item-label"><Translate>UserAttributesCollecting</Translate></span> - </div> - </li> - <li class={reducer.currentReducerState.recovery_state === RecoveryStates.SecretSelecting ? 'is-active' : ''}> - <div class="ml-4"> - <span class="menu-item-label"><Translate>SecretSelecting</Translate></span> - </div> - </li> - <li class={reducer.currentReducerState.recovery_state === RecoveryStates.ChallengeSelecting ? 'is-active' : ''}> - <div class="ml-4"> - <span class="menu-item-label"><Translate>ChallengeSelecting</Translate></span> - </div> - </li> - <li class={reducer.currentReducerState.recovery_state === RecoveryStates.ChallengeSolving ? 'is-active' : ''}> - <div class="ml-4"> - <span class="menu-item-label"><Translate>ChallengeSolving</Translate></span> - </div> - </li> - <li class={reducer.currentReducerState.recovery_state === RecoveryStates.RecoveryFinished ? 'is-active' : ''}> - <div class="ml-4"> - <span class="menu-item-label"><Translate>RecoveryFinished</Translate></span> - </div> - </li> - </Fragment>)} - {reducer.currentReducerState && - <li> + {/* <li> <div class="buttons ml-4"> - <button class="button is-danger is-right" onClick={() => reducer.reset()}>Reset session</button> + <button class="button is-info is-right" >Manage providers</button> </div> - </li> - } - + </li> */} </ul> </div> </aside> ); } - |