aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx91
-rw-r--r--packages/anastasis-webui/src/pages/home/index.tsx99
2 files changed, 119 insertions, 71 deletions
diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
index 0e43f982d..464950b60 100644
--- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
@@ -1,58 +1,81 @@
/* eslint-disable @typescript-eslint/camelcase */
+import { BackupStates, RecoveryStates } from "anastasis-core";
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
import { useAnastasisContext } from "../../context/anastasis";
import { AnastasisClientFrame, withProcessLabel } from "./index";
export function ContinentSelectionScreen(): VNode {
- const reducer = useAnastasisContext()
+ const reducer = useAnastasisContext();
- //FIXME: remove this when #7056 is fixed
- const countryFromReducer = (reducer?.currentReducerState as any).selected_country || ""
- const [countryCode, setCountryCode] = useState( countryFromReducer )
+ // FIXME: remove this when #7056 is fixed
+ const countryFromReducer =
+ (reducer?.currentReducerState as any).selected_country || "";
+ const [countryCode, setCountryCode] = useState(countryFromReducer);
- if (!reducer || !reducer.currentReducerState || !("continents" in reducer.currentReducerState)) {
- return <div />
+ if (
+ !reducer ||
+ !reducer.currentReducerState ||
+ !("continents" in reducer.currentReducerState)
+ ) {
+ return <div />;
}
const selectContinent = (continent: string): void => {
- reducer.transition("select_continent", { continent })
+ reducer.transition("select_continent", { continent });
};
const selectCountry = (country: string): void => {
- setCountryCode(country)
+ setCountryCode(country);
};
-
-
+
const continentList = reducer.currentReducerState.continents || [];
const countryList = reducer.currentReducerState.countries || [];
- const theContinent = reducer.currentReducerState.selected_continent || ""
+ const theContinent = reducer.currentReducerState.selected_continent || "";
// const cc = reducer.currentReducerState.selected_country || "";
- const theCountry = countryList.find(c => c.code === countryCode)
+ const theCountry = countryList.find((c) => c.code === countryCode);
const selectCountryAction = () => {
//selection should be when the select box changes it value
if (!theCountry) return;
reducer.transition("select_country", {
country_code: countryCode,
currencies: [theCountry.currency],
- })
- }
+ });
+ };
// const step1 = reducer.currentReducerState.backup_state === BackupStates.ContinentSelecting ||
// reducer.currentReducerState.recovery_state === RecoveryStates.ContinentSelecting;
- const errors = !theCountry ? "Select a country" : undefined
+ const errors = !theCountry ? "Select a country" : undefined;
- return (
- <AnastasisClientFrame hideNext={errors} title={withProcessLabel(reducer, "Where do you live?")} onNext={selectCountryAction}>
+ const handleBack = async () => {
+ // We want to go to the start, even if we already selected
+ // a country.
+ // FIXME: What if we don't want to lose all information here?
+ // Can we do some kind of soft reset?
+ reducer.reset();
+ };
- <div class="columns" >
+ return (
+ <AnastasisClientFrame
+ hideNext={errors}
+ title={withProcessLabel(reducer, "Where do you live?")}
+ onNext={selectCountryAction}
+ onBack={handleBack}
+ >
+ <div class="columns">
<div class="column is-one-third">
<div class="field">
<label class="label">Continent</label>
<div class="control is-expanded has-icons-left">
- <div class="select is-fullwidth" >
- <select onChange={(e) => selectContinent(e.currentTarget.value)} value={theContinent} >
- <option key="none" disabled selected value=""> Choose a continent </option>
- {continentList.map(prov => (
+ <div class="select is-fullwidth">
+ <select
+ onChange={(e) => selectContinent(e.currentTarget.value)}
+ value={theContinent}
+ >
+ <option key="none" disabled selected value="">
+ {" "}
+ Choose a continent{" "}
+ </option>
+ {continentList.map((prov) => (
<option key={prov.name} value={prov.name}>
{prov.name}
</option>
@@ -68,10 +91,17 @@ export function ContinentSelectionScreen(): VNode {
<div class="field">
<label class="label">Country</label>
<div class="control is-expanded has-icons-left">
- <div class="select is-fullwidth" >
- <select onChange={(e) => selectCountry((e.target as any).value)} disabled={!theContinent} value={theCountry?.code || ""}>
- <option key="none" disabled selected value=""> Choose a country </option>
- {countryList.map(prov => (
+ <div class="select is-fullwidth">
+ <select
+ onChange={(e) => selectCountry((e.target as any).value)}
+ disabled={!theContinent}
+ value={theCountry?.code || ""}
+ >
+ <option key="none" disabled selected value="">
+ {" "}
+ Choose a country{" "}
+ </option>
+ {countryList.map((prov) => (
<option key={prov.name} value={prov.code}>
{prov.name}
</option>
@@ -93,12 +123,15 @@ export function ContinentSelectionScreen(): VNode {
</div>
<div class="column is-two-third">
<p>
- Your location will help us to determine which personal information
- ask you for the next step.
+ Your location will help us to determine which personal information
+ to ask you for the next step.
+ </p>
+ <p>
+ You should choose the country that issued most of your long-term
+ legal documents or personal identifiers.
</p>
</div>
</div>
-
</AnastasisClientFrame>
);
}
diff --git a/packages/anastasis-webui/src/pages/home/index.tsx b/packages/anastasis-webui/src/pages/home/index.tsx
index cd8d6c842..74320b6b5 100644
--- a/packages/anastasis-webui/src/pages/home/index.tsx
+++ b/packages/anastasis-webui/src/pages/home/index.tsx
@@ -1,23 +1,22 @@
+import { BackupStates, RecoveryStates } from "anastasis-core";
import {
- BackupStates,
- RecoveryStates
-} from "anastasis-core";
-import {
- ComponentChildren, Fragment,
+ ComponentChildren,
+ Fragment,
FunctionalComponent,
h,
- VNode
+ VNode,
} from "preact";
-import {
- useErrorBoundary
-} from "preact/hooks";
+import { useErrorBoundary } from "preact/hooks";
import { AsyncButton } from "../../components/AsyncButton";
import { Menu } from "../../components/menu";
import { Notifications } from "../../components/Notifications";
-import { AnastasisProvider, useAnastasisContext } from "../../context/anastasis";
+import {
+ AnastasisProvider,
+ useAnastasisContext,
+} from "../../context/anastasis";
import {
AnastasisReducerApi,
- useAnastasisReducer
+ useAnastasisReducer,
} from "../../hooks/use-anastasis-reducer";
import { AttributeEntryScreen } from "./AttributeEntryScreen";
import { AuthenticationEditorScreen } from "./AuthenticationEditorScreen";
@@ -50,6 +49,10 @@ export function withProcessLabel(
interface AnastasisClientFrameProps {
onNext?(): void;
+ /**
+ * Override for the "back" functionality.
+ */
+ onBack?(): Promise<void>;
title: string;
children: ComponentChildren;
/**
@@ -116,9 +119,27 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode {
<section class="section is-main-section">
{props.children}
{!props.hideNav ? (
- <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
- <button class="button" onClick={() => reducer.back()}>Back</button>
- <AsyncButton class="button is-info" data-tooltip={props.hideNext} onClick={next} disabled={props.hideNext !== undefined}>Next</AsyncButton>
+ <div
+ style={{
+ marginTop: "2em",
+ display: "flex",
+ justifyContent: "space-between",
+ }}
+ >
+ <button
+ class="button"
+ onClick={() => (props.onBack ?? reducer.back)()}
+ >
+ Back
+ </button>
+ <AsyncButton
+ class="button is-info"
+ data-tooltip={props.hideNext}
+ onClick={next}
+ disabled={props.hideNext !== undefined}
+ >
+ Next
+ </AsyncButton>
</div>
) : null}
</section>
@@ -139,7 +160,7 @@ const AnastasisClient: FunctionalComponent = () => {
};
function AnastasisClientImpl(): VNode {
- const reducer = useAnastasisContext()
+ const reducer = useAnastasisContext();
if (!reducer) {
return <p>Fatal: Reducer must be in context.</p>;
}
@@ -155,27 +176,19 @@ function AnastasisClientImpl(): VNode {
state.backup_state === BackupStates.CountrySelecting ||
state.recovery_state === RecoveryStates.CountrySelecting
) {
- return (
- <ContinentSelectionScreen />
- );
+ return <ContinentSelectionScreen />;
}
if (
state.backup_state === BackupStates.UserAttributesCollecting ||
state.recovery_state === RecoveryStates.UserAttributesCollecting
) {
- return (
- <AttributeEntryScreen />
- );
+ return <AttributeEntryScreen />;
}
if (state.backup_state === BackupStates.AuthenticationsEditing) {
- return (
- <AuthenticationEditorScreen />
- );
+ return <AuthenticationEditorScreen />;
}
if (state.backup_state === BackupStates.PoliciesReviewing) {
- return (
- <ReviewPoliciesScreen />
- );
+ return <ReviewPoliciesScreen />;
}
if (state.backup_state === BackupStates.SecretEditing) {
return <SecretEditorScreen />;
@@ -194,15 +207,11 @@ function AnastasisClientImpl(): VNode {
}
if (state.recovery_state === RecoveryStates.SecretSelecting) {
- return (
- <SecretSelectionScreen />
- );
+ return <SecretSelectionScreen />;
}
if (state.recovery_state === RecoveryStates.ChallengeSelecting) {
- return (
- <ChallengeOverviewScreen />
- );
+ return <ChallengeOverviewScreen />;
}
if (state.recovery_state === RecoveryStates.ChallengeSolving) {
@@ -210,9 +219,7 @@ function AnastasisClientImpl(): VNode {
}
if (state.recovery_state === RecoveryStates.RecoveryFinished) {
- return (
- <RecoveryFinishedScreen />
- );
+ return <RecoveryFinishedScreen />;
}
if (state.recovery_state === RecoveryStates.ChallengePaying) {
return <ChallengePayingScreen />;
@@ -222,7 +229,9 @@ function AnastasisClientImpl(): VNode {
<AnastasisClientFrame hideNav title="Bug">
<p>Bug: Unknown state.</p>
<div class="buttons is-right">
- <button class="button" onClick={() => reducer.reset()}>Reset</button>
+ <button class="button" onClick={() => reducer.reset()}>
+ Reset
+ </button>
</div>
</AnastasisClientFrame>
);
@@ -234,11 +243,17 @@ function AnastasisClientImpl(): VNode {
function ErrorBanner(): VNode | null {
const reducer = useAnastasisContext();
if (!reducer || !reducer.currentError) return null;
- return (<Notifications removeNotification={reducer.dismissError} notifications={[{
- type: "ERROR",
- message: `Error code: ${reducer.currentError.code}`,
- description: reducer.currentError.hint
- }]} />
+ return (
+ <Notifications
+ removeNotification={reducer.dismissError}
+ notifications={[
+ {
+ type: "ERROR",
+ message: `Error code: ${reducer.currentError.code}`,
+ description: reducer.currentError.hint,
+ },
+ ]}
+ />
);
}