-
- {n.description && {n.message}
- {removeNotification &&
- {n.description}
-
}
-
-
-
;
+ return (
+
+
+
+ );
}
diff --git a/packages/anastasis-webui/src/components/app.tsx b/packages/anastasis-webui/src/components/app.tsx
index c6b4cfc14..4c6683c0c 100644
--- a/packages/anastasis-webui/src/components/app.tsx
+++ b/packages/anastasis-webui/src/components/app.tsx
@@ -1,6 +1,5 @@
import { FunctionalComponent, h } from "preact";
import { TranslationProvider } from "../context/translation";
-
import AnastasisClient from "../pages/home";
const App: FunctionalComponent = () => {
diff --git a/packages/anastasis-webui/src/components/fields/DateInput.tsx b/packages/anastasis-webui/src/components/fields/DateInput.tsx
index 3148c953f..0b6a7e316 100644
--- a/packages/anastasis-webui/src/components/fields/DateInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/DateInput.tsx
@@ -19,56 +19,66 @@ export function DateInput(props: DateInputProps): VNode {
inputRef.current?.focus();
}
}, [props.grabFocus]);
- const [opened, setOpened] = useState(false)
+ const [opened, setOpened] = useState(false);
const value = props.bind[0] || "";
- const [dirty, setDirty] = useState(false)
- const showError = dirty && props.error
+ const [dirty, setDirty] = useState(false);
+ const showError = dirty && props.error;
- const calendar = subYears(new Date(), 30)
-
- return
-
-
-
- setOpened(false)}
- dateReceiver={(d) => {
- setDirty(true)
- const v = format(d, 'yyyy-MM-dd')
- props.bind[1](v);
- }}
- />
-
- ;
-
+ );
}
diff --git a/packages/anastasis-webui/src/components/fields/EmailInput.tsx b/packages/anastasis-webui/src/components/fields/EmailInput.tsx
index e21418fea..fe676f284 100644
--- a/packages/anastasis-webui/src/components/fields/EmailInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/EmailInput.tsx
@@ -18,27 +18,34 @@ export function EmailInput(props: TextInputProps): VNode {
}
}, [props.grabFocus]);
const value = props.bind[0];
- const [dirty, setDirty] = useState(false)
- const showError = dirty && props.error
- return (- { - const text = e.currentTarget.value - setDirty(true) - props.bind[1](text); - }} - ref={inputRef} /> -
- + const calendar = subYears(new Date(), 30); + + return ( +
+
+ setOpened(false)}
+ dateReceiver={(d) => {
+ setDirty(true);
+ const v = format(d, "yyyy-MM-dd");
+ props.bind[1](v);
+ }}
+ />
-
+
+
+
+ { + const text = e.currentTarget.value; + setDirty(true); + props.bind[1](text); + }} + ref={inputRef} + /> +
+ +Using the format yyyy-mm-dd
+ {showError &&{props.error}
} +Using the format yyyy-mm-dd
- {showError &&{props.error}
} -
-
- (null);
@@ -34,48 +34,54 @@ export function FileInput(props: TextInputProps): VNode {
const value = props.bind[0];
// const [dirty, setDirty] = useState(false)
- const image = useRef(null)
- const [sizeError, setSizeError] = useState(false)
+ const image = useRef(null);
+ const [sizeError, setSizeError] = useState(false);
function onChange(v: string): void {
// setDirty(true);
props.bind[1](v);
}
- return
- {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
- ref={inputRef}
- style={{ display: "block" }} />
+ const [dirty, setDirty] = useState(false);
+ const showError = dirty && props.error;
+ return (
+
);
}
diff --git a/packages/anastasis-webui/src/components/fields/FileInput.tsx b/packages/anastasis-webui/src/components/fields/FileInput.tsx
index 8b144ea43..52d6eab4a 100644
--- a/packages/anastasis-webui/src/components/fields/FileInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/FileInput.tsx
@@ -15,14 +15,14 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
import { h, VNode } from "preact";
import { useLayoutEffect, useRef, useState } from "preact/hooks";
import { TextInputProps } from "./TextInput";
-const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024
+const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
export function FileInput(props: TextInputProps): VNode {
const inputRef = useRef
+
+
- {showError &&
+ {
+ setDirty(true);
+ props.bind[1]((e.target as HTMLInputElement).value);
+ }}
+ ref={inputRef}
+ style={{ display: "block" }}
+ />
+
+ {showError && {props.error}
}{props.error}
} -
-
- (null);
@@ -35,47 +35,59 @@ export function ImageInput(props: TextInputProps): VNode {
const value = props.bind[0];
// const [dirty, setDirty] = useState(false)
- const image = useRef(null)
- const [sizeError, setSizeError] = useState(false)
+ const image = useRef(null);
+ const [sizeError, setSizeError] = useState(false);
function onChange(v: string): void {
// setDirty(true);
props.bind[1](v);
}
- return
- {
- const f: FileList | null = e.currentTarget.files
- if (!f || f.length != 1) {
- return onChange("")
- }
- if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
- setSizeError(true)
- return onChange("")
- }
- setSizeError(false)
- return f[0].arrayBuffer().then(b => {
- const b64 = btoa(
- new Uint8Array(b)
- .reduce((data, byte) => data + String.fromCharCode(byte), '')
- )
- return onChange(`data:${f[0].type};base64,${b64}` as any)
- })
- }} />
- {props.error &&
+ );
}
-
diff --git a/packages/anastasis-webui/src/components/fields/ImageInput.tsx b/packages/anastasis-webui/src/components/fields/ImageInput.tsx
index d5bf643d4..3f8cc58dd 100644
--- a/packages/anastasis-webui/src/components/fields/ImageInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/ImageInput.tsx
@@ -15,15 +15,15 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
import { h, VNode } from "preact";
import { useLayoutEffect, useRef, useState } from "preact/hooks";
import emptyImage from "../../assets/empty.png";
import { TextInputProps } from "./TextInput";
-const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024
+const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
export function ImageInput(props: TextInputProps): VNode {
const inputRef = useRef{props.error}
} - {sizeError &&- File should be smaller than 1 MB -
} + return ( +
+
+
-
+ {
+ const f: FileList | null = e.currentTarget.files;
+ if (!f || f.length != 1) {
+ return onChange("");
+ }
+ if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
+ setSizeError(true);
+ return onChange("");
+ }
+ setSizeError(false);
+ return f[0].arrayBuffer().then((b) => {
+ const b64 = btoa(
+ new Uint8Array(b).reduce(
+ (data, byte) => data + String.fromCharCode(byte),
+ "",
+ ),
+ );
+ return onChange(`data:${f[0].type};base64,${b64}` as any);
+ });
+ }}
+ />
+ {props.error &&
{props.error}
} + {sizeError && ( +File should be smaller than 1 MB
+ )} +
-
-
- 
image.current?.click()} />
- {
- const f: FileList | null = e.currentTarget.files
- if (!f || f.length != 1) {
- return onChange(emptyImage)
- }
- if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
- setSizeError(true)
- return onChange(emptyImage)
- }
- setSizeError(false)
- return f[0].arrayBuffer().then(b => {
- const b64 = btoa(
- new Uint8Array(b)
- .reduce((data, byte) => data + String.fromCharCode(byte), '')
- )
- return onChange(`data:${f[0].type};base64,${b64}` as any)
- })
- }} />
- {props.error &&
+ );
}
-
diff --git a/packages/anastasis-webui/src/components/fields/TextInput.tsx b/packages/anastasis-webui/src/components/fields/TextInput.tsx
index c093689c5..fd0c658ed 100644
--- a/packages/anastasis-webui/src/components/fields/TextInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/TextInput.tsx
@@ -18,25 +18,32 @@ export function TextInput(props: TextInputProps): VNode {
}
}, [props.grabFocus]);
const value = props.bind[0];
- const [dirty, setDirty] = useState(false)
- const showError = dirty && props.error
- return ({props.error}
} - {sizeError &&- Image should be smaller than 1 MB -
} + return ( +
+
+
-
+ image.current?.click()}
+ />
+ {
+ const f: FileList | null = e.currentTarget.files;
+ if (!f || f.length != 1) {
+ return onChange(emptyImage);
+ }
+ if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
+ setSizeError(true);
+ return onChange(emptyImage);
+ }
+ setSizeError(false);
+ return f[0].arrayBuffer().then((b) => {
+ const b64 = btoa(
+ new Uint8Array(b).reduce(
+ (data, byte) => data + String.fromCharCode(byte),
+ "",
+ ),
+ );
+ return onChange(`data:${f[0].type};base64,${b64}` as any);
+ });
+ }}
+ />
+ {props.error &&
{props.error}
} + {sizeError && ( +Image should be smaller than 1 MB
+ )} +
-
-
- {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
- ref={inputRef}
- style={{ display: "block" }} />
+ const [dirty, setDirty] = useState(false);
+ const showError = dirty && props.error;
+ return (
+
);
}
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
+
+
- {showError &&
+ {
+ setDirty(true);
+ props.bind[1]((e.target as HTMLInputElement).value);
+ }}
+ ref={inputRef}
+ style={{ display: "block" }}
+ />
+
+ {showError && {props.error}
}{props.error}
} -
-
} */}
-
-
- {updatingLang &&
-
+ );
+}
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 (
- {Object.keys(messages)
- .filter((l) => l !== lang)
- .map(l => { changeLanguage(l); setUpdatingLang(false) }}>{getLangName(l)})}
+ return (
+
-}
\ No newline at end of file
+ {updatingLang && (
+
+
}
-
+
-
+
+ )}
+
+ {Object.keys(messages)
+ .filter((l) => l !== lang)
+ .map((l) => (
+ {
+ changeLanguage(l);
+ setUpdatingLang(false);
+ }}
+ >
+ {getLangName(l)}
+
+ ))}
+
+
-
Anastasis
-
+
+ Anastasis
+
+
Version {process.env.__VERSION__} ({config.version})
- {!reducer.currentReducerState &&
+ {!reducer.currentReducerState && (
);
}
-
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"
}
>
-
- {!reducer.currentReducerState &&
+ {!reducer.currentReducerState && (
-
-
Select one option + +Select one option +
- }
- {reducer.currentReducerState && reducer.currentReducerState.backup_state ? -
- --
Location -
- -
- --
Personal information -
- -
- - --
Authorization methods -
- -
- - --
Policies -
- -
- - --
Secret input -
- {/* -
+ )}
+ {reducer.currentReducerState &&
+ reducer.currentReducerState.backup_state ? (
+
+ : (reducer.currentReducerState && reducer.currentReducerState?.recovery_state &&- +
++ ++Location + +- +
++ ++Personal information + +- +
++ ++Authorization methods + +- +
++ ++Policies + +- +
+ {/*+ ++Secret input + +Payment (optional) - -
- {/*- --Backup completed -- +
- +
+ {/*+ ++Backup completed + +Truth Paying - )} - {reducer.currentReducerState && +- -
---Location -- -
---Personal information -- -
---Secret selection -- -
---Solve Challenges -- -
---Secret recovered - - +
-
+ + ++
Location + +
+ -
+ + ++
Personal information + +
+ -
+ + ++
Secret selection + +
+ -
+ + ++
Solve Challenges + +
+ -
+ + ++
Secret recovered + +
+ -
- +
- }
-
+ )}
+ {/*
-
+ + ++ */}
@@ -113,7 +113,7 @@ export function NotYetReadyAppMenu({
return (
setMobileOpen(false)}
>
{
-
closeDatePicker() {
this.props.closeFunction && this.props.closeFunction(); // Function gets passed by parent
}
/**
- * Gets fired when a day gets clicked.
- * @param {object} e The event thrown by the element clicked
- */
+ * Gets fired when a day gets clicked.
+ * @param {object} e The event thrown by the element clicked
+ */
dayClicked(e: any) {
-
const element = e.target; // the actual element clicked
- if (element.innerHTML === '') return false; // don't continue if empty
+ if (element.innerHTML === "") return false; // don't continue if empty
// get date from clicked element (gets attached when rendered)
- const date = new Date(element.getAttribute('data-value'));
+ const date = new Date(element.getAttribute("data-value"));
// update the state
this.setState({ currentDate: date });
- this.passDateToParent(date)
+ this.passDateToParent(date);
}
/**
- * returns days in month as array
- * @param {number} month the month to display
- * @param {number} year the year to display
- */
+ * returns days in month as array
+ * @param {number} month the month to display
+ * @param {number} year the year to display
+ */
getDaysByMonth(month: number, year: number) {
-
const calendar = [];
const date = new Date(year, month, 1); // month to display
@@ -122,15 +110,17 @@ export class DatePicker extends Component {
// the calendar is 7*6 fields big, so 42 loops
for (let i = 0; i < 42; i++) {
-
if (i >= firstDay && day !== null) day = day + 1;
if (day !== null && day > lastDate) day = null;
// append the calendar Array
calendar.push({
- day: (day === 0 || day === null) ? null : day, // null or number
- date: (day === 0 || day === null) ? null : new Date(year, month, day), // null or Date()
- today: (day === now.getDate() && month === now.getMonth() && year === now.getFullYear()) // boolean
+ day: day === 0 || day === null ? null : day, // null or number
+ date: day === 0 || day === null ? null : new Date(year, month, day), // null or Date()
+ today:
+ day === now.getDate() &&
+ month === now.getMonth() &&
+ year === now.getFullYear(), // boolean
});
}
@@ -138,51 +128,48 @@ export class DatePicker extends Component {
}
/**
- * Display previous month by updating state
- */
+ * Display previous month by updating state
+ */
displayPrevMonth() {
if (this.state.displayedMonth <= 0) {
this.setState({
displayedMonth: 11,
- displayedYear: this.state.displayedYear - 1
+ displayedYear: this.state.displayedYear - 1,
});
- }
- else {
+ } else {
this.setState({
- displayedMonth: this.state.displayedMonth - 1
+ displayedMonth: this.state.displayedMonth - 1,
});
}
}
/**
- * Display next month by updating state
- */
+ * Display next month by updating state
+ */
displayNextMonth() {
if (this.state.displayedMonth >= 11) {
this.setState({
displayedMonth: 0,
- displayedYear: this.state.displayedYear + 1
+ displayedYear: this.state.displayedYear + 1,
});
- }
- else {
+ } else {
this.setState({
- displayedMonth: this.state.displayedMonth + 1
+ displayedMonth: this.state.displayedMonth + 1,
});
}
}
/**
- * Display the selected month (gets fired when clicking on the date string)
- */
+ * Display the selected month (gets fired when clicking on the date string)
+ */
displaySelectedMonth() {
if (this.state.selectYearMode) {
this.toggleYearSelector();
- }
- else {
+ } else {
if (!this.state.currentDate) return false;
this.setState({
displayedMonth: this.state.currentDate.getMonth(),
- displayedYear: this.state.currentDate.getFullYear()
+ displayedYear: this.state.currentDate.getFullYear(),
});
}
}
@@ -194,17 +181,21 @@ export class DatePicker extends Component {
changeDisplayedYear(e: any) {
const element = e.target;
this.toggleYearSelector();
- this.setState({ displayedYear: parseInt(element.innerHTML, 10), displayedMonth: 0 });
+ this.setState({
+ displayedYear: parseInt(element.innerHTML, 10),
+ displayedMonth: 0,
+ });
}
/**
- * Pass the selected date to parent when 'OK' is clicked
- */
+ * Pass the selected date to parent when 'OK' is clicked
+ */
passSavedDateDateToParent() {
- this.passDateToParent(this.state.currentDate)
+ this.passDateToParent(this.state.currentDate);
}
passDateToParent(date: Date) {
- if (typeof this.props.dateReceiver === 'function') this.props.dateReceiver(date);
+ if (typeof this.props.dateReceiver === "function")
+ this.props.dateReceiver(date);
this.closeDatePicker();
}
@@ -233,94 +224,133 @@ export class DatePicker extends Component {
currentDate: initial,
displayedMonth: initial.getMonth(),
displayedYear: initial.getFullYear(),
- selectYearMode: false
- }
+ selectYearMode: false,
+ };
}
render() {
-
- const { currentDate, displayedMonth, displayedYear, selectYearMode } = this.state;
+ const {
+ currentDate,
+ displayedMonth,
+ displayedYear,
+ selectYearMode,
+ } = this.state;
return (
-
-
+
- )
+ );
}
}
-
for (let i = 2010; i <= now.getFullYear() + 10; i++) {
yearArr.push(i);
}
diff --git a/packages/anastasis-webui/src/components/picker/DurationPicker.stories.tsx b/packages/anastasis-webui/src/components/picker/DurationPicker.stories.tsx
index 275c80fa6..7f96cc15b 100644
--- a/packages/anastasis-webui/src/components/picker/DurationPicker.stories.tsx
+++ b/packages/anastasis-webui/src/components/picker/DurationPicker.stories.tsx
@@ -15,36 +15,41 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { h, FunctionalComponent } from 'preact';
-import { useState } from 'preact/hooks';
-import { DurationPicker as TestedComponent } from './DurationPicker';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { h, FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { DurationPicker as TestedComponent } from "./DurationPicker";
export default {
- title: 'Components/Picker/Duration',
+ title: "Components/Picker/Duration",
component: TestedComponent,
argTypes: {
- onCreate: { action: 'onCreate' },
- goBack: { action: 'goBack' },
- }
+ onCreate: { action: "onCreate" },
+ goBack: { action: "goBack" },
+ },
};
-function createExample(Component: FunctionalComponent, props: Partial) {
- const r = (args: any) => (
+ Component: FunctionalComponent,
+ props: Partial,
+) {
+ const r = (args: any) => (1000000)
- return (1000000);
+ return (initial)
+const Context = createContext(initial);
interface Props {
value: AnastasisReducerApi;
@@ -36,6 +36,6 @@ interface Props {
export const AnastasisProvider = ({ value, children }: Props): VNode => {
return h(Context.Provider, { value, children });
-}
+};
-export const useAnastasisContext = (): Type => useContext(Context);
\ No newline at end of file
+export const useAnastasisContext = (): Type => useContext(Context);
diff --git a/packages/anastasis-webui/src/context/translation.ts b/packages/anastasis-webui/src/context/translation.ts
index 5ceb5d428..a47864d75 100644
--- a/packages/anastasis-webui/src/context/translation.ts
+++ b/packages/anastasis-webui/src/context/translation.ts
@@ -15,13 +15,13 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
-import { createContext, h, VNode } from 'preact'
-import { useContext, useEffect } from 'preact/hooks'
-import { useLang } from '../hooks'
+import { createContext, h, VNode } from "preact";
+import { useContext, useEffect } from "preact/hooks";
+import { useLang } from "../hooks";
import * as jedLib from "jed";
import { strings } from "../i18n/strings";
@@ -31,13 +31,13 @@ interface Type {
changeLanguage: (l: string) => void;
}
const initial = {
- lang: 'en',
+ lang: "en",
handler: null,
changeLanguage: () => {
// do not change anything
- }
-}
-const Context = createContext(initial)
+ },
+};
+const Context = createContext(initial);
interface Props {
initial?: string;
@@ -45,15 +45,22 @@ interface Props {
forceLang?: string;
}
-export const TranslationProvider = ({ initial, children, forceLang }: Props): VNode => {
- const [lang, changeLanguage] = useLang(initial)
+export const TranslationProvider = ({
+ initial,
+ children,
+ forceLang,
+}: Props): VNode => {
+ const [lang, changeLanguage] = useLang(initial);
useEffect(() => {
if (forceLang) {
- changeLanguage(forceLang)
+ changeLanguage(forceLang);
}
- })
- const handler = new jedLib.Jed(strings[lang] || strings['en']);
- return h(Context.Provider, { value: { lang, handler, changeLanguage }, children });
-}
+ });
+ const handler = new jedLib.Jed(strings[lang] || strings["en"]);
+ return h(Context.Provider, {
+ value: { lang, handler, changeLanguage },
+ children,
+ });
+};
-export const useTranslationContext = (): Type => useContext(Context);
\ No newline at end of file
+export const useTranslationContext = (): Type => useContext(Context);
diff --git a/packages/anastasis-webui/src/declaration.d.ts b/packages/anastasis-webui/src/declaration.d.ts
index 2c4b7cb3a..00b3d41d5 100644
--- a/packages/anastasis-webui/src/declaration.d.ts
+++ b/packages/anastasis-webui/src/declaration.d.ts
@@ -1,20 +1,20 @@
declare module "*.css" {
- const mapping: Record;
- export default mapping;
+ const mapping: Record;
+ export default mapping;
}
-declare module '*.svg' {
- const content: any;
- export default content;
+declare module "*.svg" {
+ const content: any;
+ export default content;
}
-declare module '*.jpeg' {
- const content: any;
- export default content;
+declare module "*.jpeg" {
+ const content: any;
+ export default content;
}
-declare module '*.png' {
- const content: any;
- export default content;
+declare module "*.png" {
+ const content: any;
+ export default content;
}
-declare module 'jed' {
- const x: any;
- export = x;
+declare module "jed" {
+ const x: any;
+ export = x;
}
diff --git a/packages/anastasis-webui/src/hooks/async.ts b/packages/anastasis-webui/src/hooks/async.ts
index ea3ff6acf..0fc197554 100644
--- a/packages/anastasis-webui/src/hooks/async.ts
+++ b/packages/anastasis-webui/src/hooks/async.ts
@@ -15,9 +15,9 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
import { useState } from "preact/hooks";
// import { cancelPendingRequest } from "./backend";
@@ -34,36 +34,39 @@ export interface AsyncOperationApi {
error: string | undefined;
}
-export function useAsync(fn?: (...args: any) => Promise, { slowTolerance: tooLong }: Options = { slowTolerance: 1000 }): AsyncOperationApi {
+export function useAsync(
+ fn?: (...args: any) => Promise,
+ { slowTolerance: tooLong }: Options = { slowTolerance: 1000 },
+): AsyncOperationApi {
const [data, setData] = useState(undefined);
const [isLoading, setLoading] = useState(false);
const [error, setError] = useState(undefined);
- const [isSlow, setSlow] = useState(false)
+ const [isSlow, setSlow] = useState(false);
const request = async (...args: any) => {
if (!fn) return;
setLoading(true);
const handler = setTimeout(() => {
- setSlow(true)
- }, tooLong)
+ setSlow(true);
+ }, tooLong);
try {
- console.log("calling async", args)
+ console.log("calling async", args);
const result = await fn(...args);
- console.log("async back", result)
+ console.log("async back", result);
setData(result);
} catch (error) {
setError(error);
}
setLoading(false);
- setSlow(false)
- clearTimeout(handler)
+ setSlow(false);
+ clearTimeout(handler);
};
function cancel() {
// cancelPendingRequest()
setLoading(false);
- setSlow(false)
+ setSlow(false);
}
return {
@@ -72,6 +75,6 @@ export function useAsync(fn?: (...args: any) => Promise, { slowTolerance:
data,
isSlow,
isLoading,
- error
+ error,
};
}
diff --git a/packages/anastasis-webui/src/hooks/index.ts b/packages/anastasis-webui/src/hooks/index.ts
index 15df4f154..9a1b50a11 100644
--- a/packages/anastasis-webui/src/hooks/index.ts
+++ b/packages/anastasis-webui/src/hooks/index.ts
@@ -15,81 +15,110 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
import { StateUpdater, useState } from "preact/hooks";
-export type ValueOrFunction = T | ((p: T) => T)
-
+export type ValueOrFunction = T | ((p: T) => T);
const calculateRootPath = () => {
- const rootPath = typeof window !== undefined ? window.location.origin + window.location.pathname : '/'
- return rootPath
-}
+ const rootPath =
+ typeof window !== undefined
+ ? window.location.origin + window.location.pathname
+ : "/";
+ return rootPath;
+};
-export function useBackendURL(url?: string): [string, boolean, StateUpdater, () => void] {
- const [value, setter] = useNotNullLocalStorage('backend-url', url || calculateRootPath())
- const [triedToLog, setTriedToLog] = useLocalStorage('tried-login')
+export function useBackendURL(
+ url?: string,
+): [string, boolean, StateUpdater, () => void] {
+ const [value, setter] = useNotNullLocalStorage(
+ "backend-url",
+ url || calculateRootPath(),
+ );
+ const [triedToLog, setTriedToLog] = useLocalStorage("tried-login");
const checkedSetter = (v: ValueOrFunction) => {
- setTriedToLog('yes')
- return setter(p => (v instanceof Function ? v(p) : v).replace(/\/$/, ''))
- }
+ setTriedToLog("yes");
+ return setter((p) => (v instanceof Function ? v(p) : v).replace(/\/$/, ""));
+ };
const resetBackend = () => {
- setTriedToLog(undefined)
- }
- return [value, !!triedToLog, checkedSetter, resetBackend]
+ setTriedToLog(undefined);
+ };
+ return [value, !!triedToLog, checkedSetter, resetBackend];
}
-export function useBackendDefaultToken(): [string | undefined, StateUpdater] {
- return useLocalStorage('backend-token')
+export function useBackendDefaultToken(): [
+ string | undefined,
+ StateUpdater,
+] {
+ return useLocalStorage("backend-token");
}
-export function useBackendInstanceToken(id: string): [string | undefined, StateUpdater] {
- const [token, setToken] = useLocalStorage(`backend-token-${id}`)
- const [defaultToken, defaultSetToken] = useBackendDefaultToken()
+export function useBackendInstanceToken(
+ id: string,
+): [string | undefined, StateUpdater] {
+ const [token, setToken] = useLocalStorage(`backend-token-${id}`);
+ const [defaultToken, defaultSetToken] = useBackendDefaultToken();
// instance named 'default' use the default token
- if (id === 'default') {
- return [defaultToken, defaultSetToken]
+ if (id === "default") {
+ return [defaultToken, defaultSetToken];
}
- return [token, setToken]
+ return [token, setToken];
}
export function useLang(initial?: string): [string, StateUpdater] {
- const browserLang = typeof window !== "undefined" ? navigator.language || (navigator as any).userLanguage : undefined;
- const defaultLang = (browserLang || initial || 'en').substring(0, 2)
- return useNotNullLocalStorage('lang-preference', defaultLang)
+ const browserLang =
+ typeof window !== "undefined"
+ ? navigator.language || (navigator as any).userLanguage
+ : undefined;
+ const defaultLang = (browserLang || initial || "en").substring(0, 2);
+ return useNotNullLocalStorage("lang-preference", defaultLang);
}
-export function useLocalStorage(key: string, initialValue?: string): [string | undefined, StateUpdater] {
- const [storedValue, setStoredValue] = useState((): string | undefined => {
- return typeof window !== "undefined" ? window.localStorage.getItem(key) || initialValue : initialValue;
+export function useLocalStorage(
+ key: string,
+ initialValue?: string,
+): [string | undefined, StateUpdater] {
+ const [storedValue, setStoredValue] = useState(():
+ | string
+ | undefined => {
+ return typeof window !== "undefined"
+ ? window.localStorage.getItem(key) || initialValue
+ : initialValue;
});
- const setValue = (value?: string | ((val?: string) => string | undefined)) => {
- setStoredValue(p => {
- const toStore = value instanceof Function ? value(p) : value
+ const setValue = (
+ value?: string | ((val?: string) => string | undefined),
+ ) => {
+ setStoredValue((p) => {
+ const toStore = value instanceof Function ? value(p) : value;
if (typeof window !== "undefined") {
if (!toStore) {
- window.localStorage.removeItem(key)
+ window.localStorage.removeItem(key);
} else {
window.localStorage.setItem(key, toStore);
}
}
- return toStore
- })
+ return toStore;
+ });
};
return [storedValue, setValue];
}
-export function useNotNullLocalStorage(key: string, initialValue: string): [string, StateUpdater] {
+export function useNotNullLocalStorage(
+ key: string,
+ initialValue: string,
+): [string, StateUpdater] {
const [storedValue, setStoredValue] = useState((): string => {
- return typeof window !== "undefined" ? window.localStorage.getItem(key) || initialValue : initialValue;
+ return typeof window !== "undefined"
+ ? window.localStorage.getItem(key) || initialValue
+ : initialValue;
});
const setValue = (value: string | ((val: string) => string)) => {
@@ -97,7 +126,7 @@ export function useNotNullLocalStorage(key: string, initialValue: string): [stri
setStoredValue(valueToStore);
if (typeof window !== "undefined") {
if (!valueToStore) {
- window.localStorage.removeItem(key)
+ window.localStorage.removeItem(key);
} else {
window.localStorage.setItem(key, valueToStore);
}
@@ -106,5 +135,3 @@ export function useNotNullLocalStorage(key: string, initialValue: string): [stri
return [storedValue, setValue];
}
-
-
diff --git a/packages/anastasis-webui/src/i18n/index.tsx b/packages/anastasis-webui/src/i18n/index.tsx
index 63c8e1934..6e2c4e79a 100644
--- a/packages/anastasis-webui/src/i18n/index.tsx
+++ b/packages/anastasis-webui/src/i18n/index.tsx
@@ -27,23 +27,25 @@ import { useTranslationContext } from "../context/translation";
export function useTranslator() {
const ctx = useTranslationContext();
- const jed = ctx.handler
- return function str(stringSeq: TemplateStringsArray, ...values: any[]): string {
+ const jed = ctx.handler;
+ return function str(
+ stringSeq: TemplateStringsArray,
+ ...values: any[]
+ ): string {
const s = toI18nString(stringSeq);
- if (!s) return s
+ if (!s) return s;
const tr = jed
.translate(s)
.ifPlural(1, s)
.fetch(...values);
return tr;
- }
+ };
}
-
/**
* Convert template strings to a msgid
*/
- function toI18nString(stringSeq: ReadonlyArray): string {
+function toI18nString(stringSeq: ReadonlyArray): string {
let s = "";
for (let i = 0; i < stringSeq.length; i++) {
s += stringSeq[i];
@@ -54,7 +56,6 @@ export function useTranslator() {
return s;
}
-
interface TranslateSwitchProps {
target: number;
children: ComponentChildren;
@@ -110,7 +111,7 @@ function getTranslatedChildren(
// Text
result.push(tr[i]);
} else {
- const childIdx = Number.parseInt(tr[i],10) - 1;
+ const childIdx = Number.parseInt(tr[i], 10) - 1;
result.push(placeholderChildren[childIdx]);
}
}
@@ -131,9 +132,9 @@ function getTranslatedChildren(
*/
export function Translate({ children }: TranslateProps): VNode {
const s = stringifyChildren(children);
- const ctx = useTranslationContext()
+ const ctx = useTranslationContext();
const translation: string = ctx.handler.ngettext(s, s, 1);
- const result = getTranslatedChildren(translation, children)
+ const result = getTranslatedChildren(translation, children);
return {result} ;
}
@@ -154,14 +155,16 @@ export function TranslateSwitch({ children, target }: TranslateSwitchProps) {
let plural: VNode | undefined;
// const children = this.props.children;
if (children) {
- (children instanceof Array ? children : [children]).forEach((child: any) => {
- if (child.type === TranslatePlural) {
- plural = child;
- }
- if (child.type === TranslateSingular) {
- singular = child;
- }
- });
+ (children instanceof Array ? children : [children]).forEach(
+ (child: any) => {
+ if (child.type === TranslatePlural) {
+ plural = child;
+ }
+ if (child.type === TranslateSingular) {
+ singular = child;
+ }
+ },
+ );
}
if (!singular || !plural) {
console.error("translation not found");
@@ -182,9 +185,12 @@ interface TranslationPluralProps {
/**
* See [[TranslateSwitch]].
*/
-export function TranslatePlural({ children, target }: TranslationPluralProps): VNode {
+export function TranslatePlural({
+ children,
+ target,
+}: TranslationPluralProps): VNode {
const s = stringifyChildren(children);
- const ctx = useTranslationContext()
+ const ctx = useTranslationContext();
const translation = ctx.handler.ngettext(s, s, 1);
const result = getTranslatedChildren(translation, children);
return {result} ;
@@ -193,11 +199,13 @@ export function TranslatePlural({ children, target }: TranslationPluralProps): V
/**
* See [[TranslateSwitch]].
*/
-export function TranslateSingular({ children, target }: TranslationPluralProps): VNode {
+export function TranslateSingular({
+ children,
+ target,
+}: TranslationPluralProps): VNode {
const s = stringifyChildren(children);
- const ctx = useTranslationContext()
+ const ctx = useTranslationContext();
const translation = ctx.handler.ngettext(s, s, target);
const result = getTranslatedChildren(translation, children);
return {result} ;
-
}
diff --git a/packages/anastasis-webui/src/i18n/strings.ts b/packages/anastasis-webui/src/i18n/strings.ts
index b4f376ce0..d12e63e88 100644
--- a/packages/anastasis-webui/src/i18n/strings.ts
+++ b/packages/anastasis-webui/src/i18n/strings.ts
@@ -15,30 +15,30 @@
*/
/*eslint quote-props: ["error", "consistent"]*/
-export const strings: {[s: string]: any} = {};
+export const strings: { [s: string]: any } = {};
-strings['de'] = {
- "domain": "messages",
- "locale_data": {
- "messages": {
+strings["de"] = {
+ domain: "messages",
+ locale_data: {
+ messages: {
"": {
- "domain": "messages",
- "plural_forms": "nplurals=2; plural=(n != 1);",
- "lang": ""
+ domain: "messages",
+ plural_forms: "nplurals=2; plural=(n != 1);",
+ lang: "",
},
- }
- }
+ },
+ },
};
-strings['en'] = {
- "domain": "messages",
- "locale_data": {
- "messages": {
+strings["en"] = {
+ domain: "messages",
+ locale_data: {
+ messages: {
"": {
- "domain": "messages",
- "plural_forms": "nplurals=2; plural=(n != 1);",
- "lang": ""
+ domain: "messages",
+ plural_forms: "nplurals=2; plural=(n != 1);",
+ lang: "",
},
- }
- }
+ },
+ },
};
diff --git a/packages/anastasis-webui/src/index.ts b/packages/anastasis-webui/src/index.ts
index e78b9c194..4bd7b28f3 100644
--- a/packages/anastasis-webui/src/index.ts
+++ b/packages/anastasis-webui/src/index.ts
@@ -1,4 +1,4 @@
-import App from './components/app';
-import './scss/main.scss';
+import App from "./components/app";
+import "./scss/main.scss";
export default App;
diff --git a/packages/anastasis-webui/src/manifest.json b/packages/anastasis-webui/src/manifest.json
index 6b44a2b31..2752dad77 100644
--- a/packages/anastasis-webui/src/manifest.json
+++ b/packages/anastasis-webui/src/manifest.json
@@ -18,4 +18,4 @@
"sizes": "512x512"
}
]
-}
\ No newline at end of file
+}
diff --git a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.stories.tsx
index 08e2b4371..9b067127d 100644
--- a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.stories.tsx
@@ -15,24 +15,23 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { ReducerState } from 'anastasis-core';
-import { createExample, reducerStatesExample } from '../../utils';
-import { AddingProviderScreen as TestedComponent } from './AddingProviderScreen';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { ReducerState } from "anastasis-core";
+import { createExample, reducerStatesExample } from "../../utils";
+import { AddingProviderScreen as TestedComponent } from "./AddingProviderScreen";
export default {
- title: 'Pages/ManageProvider',
+ title: "Pages/ManageProvider",
component: TestedComponent,
args: {
order: 1,
},
argTypes: {
- onUpdate: { action: 'onUpdate' },
- onBack: { action: 'onBack' },
+ onUpdate: { action: "onUpdate" },
+ onBack: { action: "onBack" },
},
};
@@ -40,20 +39,31 @@ export const NewProvider = createExample(TestedComponent, {
...reducerStatesExample.authEditing,
} as ReducerState);
-
export const NewProviderWithoutProviderList = createExample(TestedComponent, {
...reducerStatesExample.authEditing,
- authentication_providers: {}
+ authentication_providers: {},
} as ReducerState);
-export const NewVideoProvider = createExample(TestedComponent, {
- ...reducerStatesExample.authEditing,
-} as ReducerState, { providerType: 'video'});
+export const NewVideoProvider = createExample(
+ TestedComponent,
+ {
+ ...reducerStatesExample.authEditing,
+ } as ReducerState,
+ { providerType: "video" },
+);
-export const NewSmsProvider = createExample(TestedComponent, {
- ...reducerStatesExample.authEditing,
-} as ReducerState, { providerType: 'sms'});
+export const NewSmsProvider = createExample(
+ TestedComponent,
+ {
+ ...reducerStatesExample.authEditing,
+ } as ReducerState,
+ { providerType: "sms" },
+);
-export const NewIBANProvider = createExample(TestedComponent, {
- ...reducerStatesExample.authEditing,
-} as ReducerState, { providerType: 'iban' });
+export const NewIBANProvider = createExample(
+ TestedComponent,
+ {
+ ...reducerStatesExample.authEditing,
+ } as ReducerState,
+ { providerType: "iban" },
+);
diff --git a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx
index 7504f4d2b..96b38e92d 100644
--- a/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx
@@ -11,185 +11,250 @@ interface Props {
onCancel: () => void;
}
-
-async function testProvider(url: string, expectedMethodType?: string): Promise {
+async function testProvider(
+ url: string,
+ expectedMethodType?: string,
+): Promise {
try {
- const response = await fetch(new URL("config", url).href)
- const json = await (response.json().catch(d => ({})))
+ const response = await fetch(new URL("config", url).href);
+ const json = await response.json().catch((d) => ({}));
if (!("methods" in json) || !Array.isArray(json.methods)) {
- throw Error("This provider doesn't have authentication method. Check the provider URL")
+ throw Error(
+ "This provider doesn't have authentication method. Check the provider URL",
+ );
}
- console.log("expected", expectedMethodType)
+ console.log("expected", expectedMethodType);
if (!expectedMethodType) {
- return
+ return;
}
- let found = false
+ let found = false;
for (let i = 0; i < json.methods.length && !found; i++) {
- found = json.methods[i].type === expectedMethodType
+ found = json.methods[i].type === expectedMethodType;
}
if (!found) {
- throw Error(`This provider does not support authentication method ${expectedMethodType}`)
+ throw Error(
+ `This provider does not support authentication method ${expectedMethodType}`,
+ );
}
- return
+ return;
} catch (e) {
- console.log("error", e)
- const error = e instanceof Error ?
- Error(`There was an error testing this provider, try another one. ${e.message}`) :
- Error(`There was an error testing this provider, try another one.`)
- throw error
+ console.log("error", e);
+ const error =
+ e instanceof Error
+ ? Error(
+ `There was an error testing this provider, try another one. ${e.message}`,
+ )
+ : Error(`There was an error testing this provider, try another one.`);
+ throw error;
}
-
}
export function AddingProviderScreen({ providerType, onCancel }: Props): VNode {
const reducer = useAnastasisContext();
const [providerURL, setProviderURL] = useState("");
- const [error, setError] = useState()
- const [testing, setTesting] = useState(false)
- const providerLabel = providerType ? authMethods[providerType].label : undefined
+ const [error, setError] = useState();
+ const [testing, setTesting] = useState(false);
+ const providerLabel = providerType
+ ? authMethods[providerType].label
+ : undefined;
//FIXME: move this timeout logic into a hook
const timeout = useRef(undefined);
useEffect(() => {
- if (timeout) window.clearTimeout(timeout.current)
+ if (timeout) window.clearTimeout(timeout.current);
timeout.current = window.setTimeout(async () => {
- const url = providerURL.endsWith('/') ? providerURL : (providerURL + '/')
+ const url = providerURL.endsWith("/") ? providerURL : providerURL + "/";
if (!providerURL || authProviders.includes(url)) return;
try {
- setTesting(true)
- await testProvider(url, providerType)
+ setTesting(true);
+ await testProvider(url, providerType);
// this is use as tested but everything when ok
// undefined will mean that the field is not dirty
- setError("")
+ setError("");
} catch (e) {
- console.log("tuvieja", e)
- if (e instanceof Error) setError(e.message)
+ console.log("tuvieja", e);
+ if (e instanceof Error) setError(e.message);
}
- setTesting(false)
+ setTesting(false);
}, 200);
- }, [providerURL, reducer])
-
+ }, [providerURL, reducer]);
if (!reducer) {
return {
- await reducer?.transition("add_provider", { provider_url })
- onCancel()
+ await reducer?.transition("add_provider", { provider_url });
+ onCancel();
}
function deleteProvider(provider_url: string): void {
- reducer?.transition("delete_provider", { provider_url })
+ reducer?.transition("delete_provider", { provider_url });
}
- const allAuthProviders = reducer.currentReducerState.authentication_providers || {}
- const authProviders = Object.keys(allAuthProviders).filter(provUrl => {
+ const allAuthProviders =
+ reducer.currentReducerState.authentication_providers || {};
+ const authProviders = Object.keys(allAuthProviders).filter((provUrl) => {
const p = allAuthProviders[provUrl];
if (!providerLabel) {
- return p && ("currency" in p)
+ return p && "currency" in p;
} else {
- return p && ("currency" in p) && p.methods.findIndex(m => m.type === providerType) !== -1
+ return (
+ p &&
+ "currency" in p &&
+ p.methods.findIndex((m) => m.type === providerType) !== -1
+ );
}
- })
+ });
- let errors = !providerURL ? 'Add provider URL' : undefined
+ let errors = !providerURL ? "Add provider URL" : undefined;
let url: string | undefined;
try {
- url = new URL("",providerURL).href
+ url = new URL("", providerURL).href;
} catch {
- errors = 'Check the URL'
+ errors = "Check the URL";
}
if (!!error && !errors) {
- errors = error
+ errors = error;
}
if (!errors && authProviders.includes(url!)) {
- errors = 'That provider is already known'
+ errors = "That provider is already known";
}
return (
-
+ hideNext={errors}
+ >
-
- {dayArr[currentDate.getDay()]}, {monthArrShort[currentDate.getMonth()]} {currentDate.getDate()}
+
- {!selectYearMode && }
+ {!selectYearMode && (
+
+ )}
{currentDate.getFullYear()}
-
- {dayArr[currentDate.getDay()]}, {monthArrShort[currentDate.getMonth()]} {currentDate.getDate()}
+
+ {currentDate.getFullYear()}
+
+
+ {dayArr[currentDate.getDay()]},{" "}
+ {monthArrShort[currentDate.getMonth()]} {currentDate.getDate()}
+ {!selectYearMode && (
+
-
-
+
+ {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
+ {day}
+ ))}
+
- {!selectYearMode &&
-
-
}
-
- {selectYearMode &&
- {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day,i) => {day})}
-
-
-
-
- {/*
+
+ )}
-
+ {/*
Loop through the calendar object returned by getDaysByMonth().
*/}
- {this.getDaysByMonth(this.state.displayedMonth, this.state.displayedYear)
- .map(
- day => {
- let selected = false;
+ {this.getDaysByMonth(
+ this.state.displayedMonth,
+ this.state.displayedYear,
+ ).map((day) => {
+ let selected = false;
- if (currentDate && day.date) selected = (currentDate.toLocaleDateString() === day.date.toLocaleDateString());
+ if (currentDate && day.date)
+ selected =
+ currentDate.toLocaleDateString() ===
+ day.date.toLocaleDateString();
- return (
{day.day}
- )
- }
- )
- }
-
+
+ );
+ })}
+
- {(this.props.years || yearArr).map(year => (
-
- {year}
-
- ))}
-
-
}
-
+ {selectYearMode && (
+
+ {(this.props.years || yearArr).map((year) => (
+
+ {year}
+
+ ))}
+
+ )}
- {days && = ds ? () => onChange(value - ds) : undefined}
- onIncrease={value < 99 * ds ? () => onChange(value + ds) : undefined}
- onChange={diff => onChange(value + diff * ds)}
- />}
- {hours && = hs ? () => onChange(value - hs) : undefined}
- onIncrease={value < 99 * ds ? () => onChange(value + hs) : undefined}
- onChange={diff => onChange(value + diff * hs)}
- />}
- {minutes && = ms ? () => onChange(value - ms) : undefined}
- onIncrease={value < 99 * ds ? () => onChange(value + ms) : undefined}
- onChange={diff => onChange(value + diff * ms)}
- />}
- {seconds && = ss ? () => onChange(value - ss) : undefined}
- onIncrease={value < 99 * ds ? () => onChange(value + ss) : undefined}
- onChange={diff => onChange(value + diff * ss)}
- />}
-
+export function DurationPicker({
+ days,
+ hours,
+ minutes,
+ seconds,
+ onChange,
+ value,
+}: Props): VNode {
+ const ss = 1000;
+ const ms = ss * 60;
+ const hs = ms * 60;
+ const ds = hs * 24;
+ const i18n = useTranslator();
+
+ return (
+
+ {days && (
+ = ds ? () => onChange(value - ds) : undefined}
+ onIncrease={value < 99 * ds ? () => onChange(value + ds) : undefined}
+ onChange={(diff) => onChange(value + diff * ds)}
+ />
+ )}
+ {hours && (
+ = hs ? () => onChange(value - hs) : undefined}
+ onIncrease={value < 99 * ds ? () => onChange(value + hs) : undefined}
+ onChange={(diff) => onChange(value + diff * hs)}
+ />
+ )}
+ {minutes && (
+ = ms ? () => onChange(value - ms) : undefined}
+ onIncrease={value < 99 * ds ? () => onChange(value + ms) : undefined}
+ onChange={(diff) => onChange(value + diff * ms)}
+ />
+ )}
+ {seconds && (
+ = ss ? () => onChange(value - ss) : undefined}
+ onIncrease={value < 99 * ds ? () => onChange(value + ss) : undefined}
+ onChange={(diff) => onChange(value + diff * ss)}
+ />
+ )}
+
+ );
}
interface ColProps {
- unit: string,
- min?: number,
- max: number,
- value: number,
+ unit: string;
+ min?: number;
+ max: number;
+ value: number;
onIncrease?: () => void;
onDecrease?: () => void;
onChange?: (diff: number) => void;
}
-function InputNumber({ initial, onChange }: { initial: number, onChange: (n: number) => void }) {
- const [value, handler] = useState<{v:string}>({
- v: toTwoDigitString(initial)
- })
+function InputNumber({
+ initial,
+ onChange,
+}: {
+ initial: number;
+ onChange: (n: number) => void;
+}) {
+ const [value, handler] = useState<{ v: string }>({
+ v: toTwoDigitString(initial),
+ });
- return onChange(parseInt(value.v, 10))}
- onInput={(e) => {
- e.preventDefault()
- const n = Number.parseInt(e.currentTarget.value, 10);
- if (isNaN(n)) return handler({v:toTwoDigitString(initial)})
- return handler({v:toTwoDigitString(n)})
- }}
- style={{ width: 50, border: 'none', fontSize: 'inherit', background: 'inherit' }} />
+ return (
+ onChange(parseInt(value.v, 10))}
+ onInput={(e) => {
+ e.preventDefault();
+ const n = Number.parseInt(e.currentTarget.value, 10);
+ if (isNaN(n)) return handler({ v: toTwoDigitString(initial) });
+ return handler({ v: toTwoDigitString(n) });
+ }}
+ style={{
+ width: 50,
+ border: "none",
+ fontSize: "inherit",
+ background: "inherit",
+ }}
+ />
+ );
}
-function DurationColumn({ unit, min = 0, max, value, onIncrease, onDecrease, onChange }: ColProps): VNode {
-
- const cellHeight = 35
+function DurationColumn({
+ unit,
+ min = 0,
+ max,
+ value,
+ onIncrease,
+ onDecrease,
+ onChange,
+}: ColProps): VNode {
+ const cellHeight = 35;
return (
@@ -106,49 +154,58 @@ function DurationColumn({ unit, min = 0, max, value, onIncrease, onDecrease, onC
-
- {onDecrease && }
+ {onDecrease && (
+
+ )}
- {value > min ? toTwoDigitString(value - 1) : ''}
+ {value > min ? toTwoDigitString(value - 1) : ""}
- {onChange ?
- onChange(n - value)} /> :
+ {onChange ? (
+ onChange(n - value)}
+ />
+ ) : (
toTwoDigitString(value)
- }
+ )}
{unit}
- {value < max ? toTwoDigitString(value + 1) : ''}
+ {value < max ? toTwoDigitString(value + 1) : ""}
- {onIncrease && }
+ {onIncrease && (
+
+ )}
-
no reducer in context
;
}
- if (!reducer.currentReducerState || !("authentication_providers" in reducer.currentReducerState)) {
- return invalid state
+ if (
+ !reducer.currentReducerState ||
+ !("authentication_providers" in reducer.currentReducerState)
+ ) {
+ return invalid state
;
}
async function addProvider(provider_url: string): Promise
- {!providerLabel ?
-
- Add a provider url -
: -- Add a provider url for a {providerLabel} service -
- } + {!providerLabel ? ( +Add a provider url
+ ) : ( +Add a provider url for a {providerLabel} service
+ )}- Example: https://kudos.demo.anastasis.lu -
+Example: https://kudos.demo.anastasis.lu
{testing &&Testing
} - -
-
+
+
);
}
-function TableRow({ url, info, onDelete }: { onDelete: (s: string) => void, url: string, info: AuthenticationProviderStatusOk }) {
- const [status, setStatus] = useState("checking")
+function TableRow({
+ url,
+ info,
+ onDelete,
+}: {
+ onDelete: (s: string) => void;
+ url: string;
+ info: AuthenticationProviderStatusOk;
+}) {
+ const [status, setStatus] = useState("checking");
useEffect(function () {
- testProvider(url.endsWith('/') ? url.substring(0, url.length - 1) : url)
- .then(function () { setStatus('responding') })
- .catch(function () { setStatus('failed to contact') })
- })
- return
+
-
+
{authProviders.length > 0 ? (
- !providerLabel ?
+ !providerLabel ? (
+ Current providers
+ ) : (- Current providers -
:Current providers for {providerLabel} service
+ ) + ) : !providerLabel ? ( +No known providers, add one.
) : ( - !providerLabel ?- No known providers, add one. -
:- No known providers for {providerLabel} service -
+No known providers for {providerLabel} service
)} - {authProviders.map(k => { - const p = allAuthProviders[k] as AuthenticationProviderStatusOk - return
- >(currentIdentityAttributes);
+ const reducer = useAnastasisContext();
+ const state = reducer?.currentReducerState;
+ const currentIdentityAttributes =
+ state && "identity_attributes" in state
+ ? state.identity_attributes || {}
+ : {};
+ const [attrs, setAttrs] = useState>(
+ currentIdentityAttributes,
+ );
if (!reducer) {
- return setAttrs({ ...attrs, [spec.name]: v })}
spec={spec}
errorMessage={error}
- value={value} />
+ value={value}
+ />
);
- })
+ });
return (
reducer.transition("enter_user_attributes", {
- identity_attributes: attrs,
- })}
+ onNext={() =>
+ reducer.transition("enter_user_attributes", {
+ identity_attributes: attrs,
+ })
+ }
>
-
-
-}
\ No newline at end of file
+ );
+}
diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx
index 9cdd132ef..d48e94403 100644
--- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx
@@ -15,76 +15,83 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { ReducerState } from 'anastasis-core';
-import { createExample, reducerStatesExample } from '../../utils';
-import { AttributeEntryScreen as TestedComponent } from './AttributeEntryScreen';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { ReducerState } from "anastasis-core";
+import { createExample, reducerStatesExample } from "../../utils";
+import { AttributeEntryScreen as TestedComponent } from "./AttributeEntryScreen";
export default {
- title: 'Pages/PersonalInformation',
+ title: "Pages/PersonalInformation",
component: TestedComponent,
args: {
order: 3,
},
argTypes: {
- onUpdate: { action: 'onUpdate' },
- onBack: { action: 'onBack' },
+ onUpdate: { action: "onUpdate" },
+ onBack: { action: "onBack" },
},
};
export const Backup = createExample(TestedComponent, {
...reducerStatesExample.backupAttributeEditing,
- required_attributes: [{
- name: 'first name',
- label: 'first',
- type: 'string',
- uuid: 'asdasdsa1',
- widget: 'wid',
- }, {
- name: 'last name',
- label: 'second',
- type: 'string',
- uuid: 'asdasdsa2',
- widget: 'wid',
- }, {
- name: 'birthdate',
- label: 'birthdate',
- type: 'date',
- uuid: 'asdasdsa3',
- widget: 'calendar',
- }]
+ required_attributes: [
+ {
+ name: "first name",
+ label: "first",
+ type: "string",
+ uuid: "asdasdsa1",
+ widget: "wid",
+ },
+ {
+ name: "last name",
+ label: "second",
+ type: "string",
+ uuid: "asdasdsa2",
+ widget: "wid",
+ },
+ {
+ name: "birthdate",
+ label: "birthdate",
+ type: "date",
+ uuid: "asdasdsa3",
+ widget: "calendar",
+ },
+ ],
} as ReducerState);
export const Recovery = createExample(TestedComponent, {
...reducerStatesExample.recoveryAttributeEditing,
- required_attributes: [{
- name: 'first',
- label: 'first',
- type: 'string',
- uuid: 'asdasdsa1',
- widget: 'wid',
- }, {
- name: 'pepe',
- label: 'second',
- type: 'string',
- uuid: 'asdasdsa2',
- widget: 'wid',
- }, {
- name: 'pepe2',
- label: 'third',
- type: 'date',
- uuid: 'asdasdsa3',
- widget: 'calendar',
- }]
+ required_attributes: [
+ {
+ name: "first",
+ label: "first",
+ type: "string",
+ uuid: "asdasdsa1",
+ widget: "wid",
+ },
+ {
+ name: "pepe",
+ label: "second",
+ type: "string",
+ uuid: "asdasdsa2",
+ widget: "wid",
+ },
+ {
+ name: "pepe2",
+ label: "third",
+ type: "date",
+ uuid: "asdasdsa3",
+ widget: "calendar",
+ },
+ ],
} as ReducerState);
export const WithNoRequiredAttribute = createExample(TestedComponent, {
...reducerStatesExample.backupAttributeEditing,
- required_attributes: undefined
+ required_attributes: undefined,
} as ReducerState);
const allWidgets = [
@@ -107,23 +114,22 @@ const allWidgets = [
"anastasis_gtk_ia_tax_de",
"anastasis_gtk_xx_prime",
"anastasis_gtk_xx_square",
-]
+];
function typeForWidget(name: string): string {
- if (["anastasis_gtk_xx_prime",
- "anastasis_gtk_xx_square",
- ].includes(name)) return "number";
- if (["anastasis_gtk_ia_birthdate"].includes(name)) return "date"
+ if (["anastasis_gtk_xx_prime", "anastasis_gtk_xx_square"].includes(name))
+ return "number";
+ if (["anastasis_gtk_ia_birthdate"].includes(name)) return "date";
return "string";
}
export const WithAllPosibleWidget = createExample(TestedComponent, {
...reducerStatesExample.backupAttributeEditing,
- required_attributes: allWidgets.map(w => ({
+ required_attributes: allWidgets.map((w) => ({
name: w,
label: `widget: ${w}`,
type: typeForWidget(w),
uuid: `uuid-${w}`,
- widget: w
- }))
+ widget: w,
+ })),
} as ReducerState);
diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
index 557718458..0918c2db5 100644
--- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
@@ -9,24 +9,32 @@ import { useAnastasisContext } from "../../context/anastasis";
import { AnastasisClientFrame, withProcessLabel } from "./index";
export function AttributeEntryScreen(): VNode {
- const reducer = useAnastasisContext()
- const state = reducer?.currentReducerState
- const currentIdentityAttributes = state && "identity_attributes" in state ? (state.identity_attributes || {}) : {}
- const [attrs, setAttrs] = useState{url}
- -
-
- Business Name -
- {info.business_name} -
- Supported methods -
- {info.methods.map(m => m.type).join(',')} -
- Maximum storage -
- {info.storage_limit_in_megabytes} Mb -
- Status -
- {status} -
+
-
+
+ {url}
+ -
+
- + Business Name + +
- {info.business_name} +
- + Supported methods + +
- {info.methods.map((m) => m.type).join(",")} +
- + Maximum storage + +
- {info.storage_limit_in_megabytes} Mb +
- + Status + +
- {status} +
+
+
-
-
- no reducer in context
+ return no reducer in context
;
}
- if (!reducer.currentReducerState || !("required_attributes" in reducer.currentReducerState)) {
- return invalid state
+ if (
+ !reducer.currentReducerState ||
+ !("required_attributes" in reducer.currentReducerState)
+ ) {
+ return invalid state
;
}
- const reqAttr = reducer.currentReducerState.required_attributes || []
+ const reqAttr = reducer.currentReducerState.required_attributes || [];
let hasErrors = false;
const fieldList: VNode[] = reqAttr.map((spec, i: number) => {
- const value = attrs[spec.name]
- const error = checkIfValid(value, spec)
- hasErrors = hasErrors || error !== undefined
+ const value = attrs[spec.name];
+ const error = checkIfValid(value, spec);
+ hasErrors = hasErrors || error !== undefined;
return (
+ = []
+const possibleBirthdayYear: Array = [];
for (let i = 0; i < 100; i++) {
- possibleBirthdayYear.push(2020 - i)
+ possibleBirthdayYear.push(2020 - i);
}
function AttributeEntryField(props: AttributeEntryFieldProps): VNode {
-
return (
+
-
- The non-hashed version is not shared
+
+
+
+
+ The non-hashed version is not shared
+
@@ -78,22 +90,22 @@ interface AttributeEntryFieldProps {
spec: UserAttributeSpec;
errorMessage: string | undefined;
}
-const possibleBirthdayYear: Array{fieldList}
- {fieldList}
-
- This personal information will help to locate your secret.
This stays private
The information you have entered here:
@@ -61,9 +70,12 @@ export function AttributeEntryScreen(): VNode { Will be hashed, and therefore unreadable -
- {props.spec.type === 'date' &&
+ {props.spec.type === "date" &&
(undefined)
+ const [manageProvider, setManageProvider] = useState(
+ undefined,
+ );
// const [addingProvider, setAddingProvider] = useState(undefined)
const reducer = useAnastasisContext();
@@ -68,11 +70,14 @@ export function AuthenticationEditorScreen(): VNode {
}
if (manageProvider !== undefined) {
-
- return setManageProvider(undefined)}
- providerType={isKnownAuthMethods(manageProvider) ? manageProvider : undefined}
- />
+ return (
+ setManageProvider(undefined)}
+ providerType={
+ isKnownAuthMethods(manageProvider) ? manageProvider : undefined
+ }
+ />
+ );
}
if (selectedMethod) {
@@ -100,7 +105,7 @@ export function AuthenticationEditorScreen(): VNode {
description="No providers founds"
label="Add a provider manually"
onConfirm={() => {
- setManageProvider(selectedMethod)
+ setManageProvider(selectedMethod);
}}
>
- {reducer.currentReducerState.secret_name ?
+ {reducer.currentReducerState.secret_name ? (
+ );
+ {details && (
+
+ );
}
diff --git a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx
index 46c574cf2..56aee8763 100644
--- a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx
@@ -19,7 +19,11 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { ChallengeFeedbackStatus, RecoveryStates, ReducerState } from "anastasis-core";
+import {
+ ChallengeFeedbackStatus,
+ RecoveryStates,
+ ReducerState,
+} from "anastasis-core";
import { createExample, reducerStatesExample } from "../../utils";
import { ChallengeOverviewScreen as TestedComponent } from "./ChallengeOverviewScreen";
@@ -247,20 +251,20 @@ export const OnePolicyWithAllTheChallengesInDifferentState = createExample(
"uuid-1": { state: ChallengeFeedbackStatus.Solved.toString() },
"uuid-2": {
state: ChallengeFeedbackStatus.Message.toString(),
- message: 'Challenge should be solved'
+ message: "Challenge should be solved",
},
"uuid-3": {
state: ChallengeFeedbackStatus.AuthIban.toString(),
challenge_amount: "EUR:1",
credit_iban: "DE12345789000",
business_name: "Data Loss Incorporated",
- wire_transfer_subject: "Anastasis 987654321"
+ wire_transfer_subject: "Anastasis 987654321",
},
"uuid-4": {
state: ChallengeFeedbackStatus.Payment.toString(),
taler_pay_uri: "taler://pay/...",
provider: "https://localhost:8080/",
- payment_secret: "3P4561HAMHRRYEYD6CM6J7TS5VTD5SR2K2EXJDZEFSX92XKHR4KG"
+ payment_secret: "3P4561HAMHRRYEYD6CM6J7TS5VTD5SR2K2EXJDZEFSX92XKHR4KG",
},
"uuid-5": {
state: ChallengeFeedbackStatus.RateLimitExceeded.toString(),
@@ -269,7 +273,7 @@ export const OnePolicyWithAllTheChallengesInDifferentState = createExample(
"uuid-6": {
state: ChallengeFeedbackStatus.Redirect.toString(),
redirect_url: "https://videoconf.example.com/",
- http_status: 303
+ http_status: 303,
},
"uuid-7": {
state: ChallengeFeedbackStatus.ServerFailure.toString(),
diff --git a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
index ae03dd4d4..c6de00e98 100644
--- a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
@@ -11,23 +11,34 @@ function OverviewFeedbackDisplay(props: { feedback?: ChallengeFeedback }) {
}
switch (feedback.state) {
case ChallengeFeedbackStatus.Message:
- return (
-
- {!policies.length ? (
+ {!policiesWithInfo.length ? (
This stays private
@@ -119,40 +131,43 @@ function AttributeEntryField(props: AttributeEntryFieldProps): VNode {
);
}
-const YEAR_REGEX = /^[0-9]+-[0-9]+-[0-9]+$/
+const YEAR_REGEX = /^[0-9]+-[0-9]+-[0-9]+$/;
-
-function checkIfValid(value: string, spec: UserAttributeSpec): string | undefined {
- const pattern = spec['validation-regex']
+function checkIfValid(
+ value: string,
+ spec: UserAttributeSpec,
+): string | undefined {
+ const pattern = spec["validation-regex"];
if (pattern) {
- const re = new RegExp(pattern)
- if (!re.test(value)) return 'The value is invalid'
+ const re = new RegExp(pattern);
+ if (!re.test(value)) return "The value is invalid";
}
- const logic = spec['validation-logic']
+ const logic = spec["validation-logic"];
if (logic) {
const func = (validators as any)[logic];
- if (func && typeof func === 'function' && !func(value)) return 'Please check the value'
+ if (func && typeof func === "function" && !func(value))
+ return "Please check the value";
}
- const optional = spec.optional
+ const optional = spec.optional;
if (!optional && !value) {
- return 'This value is required'
+ return "This value is required";
}
if ("date" === spec.type) {
if (!YEAR_REGEX.test(value)) {
- return "The date doesn't follow the format"
+ return "The date doesn't follow the format";
}
try {
- const v = parse(value, 'yyyy-MM-dd', new Date());
+ const v = parse(value, "yyyy-MM-dd", new Date());
if (Number.isNaN(v.getTime())) {
- return "Some numeric values seems out of range for a date"
+ return "Some numeric values seems out of range for a date";
}
if ("birthdate" === spec.name && isAfter(v, new Date())) {
- return "A birthdate cannot be in the future"
+ return "A birthdate cannot be in the future";
}
} catch (e) {
- return "Could not parse the date"
+ return "Could not parse the date";
}
}
- return undefined
+ return undefined;
}
diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx
index 2712522ce..8acf1c8c8 100644
--- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx
@@ -15,73 +15,84 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { ReducerState } from 'anastasis-core';
-import { createExample, reducerStatesExample } from '../../utils';
-import { AuthenticationEditorScreen as TestedComponent } from './AuthenticationEditorScreen';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { ReducerState } from "anastasis-core";
+import { createExample, reducerStatesExample } from "../../utils";
+import { AuthenticationEditorScreen as TestedComponent } from "./AuthenticationEditorScreen";
export default {
- title: 'Pages/backup/AuthorizationMethod',
+ title: "Pages/backup/AuthorizationMethod",
component: TestedComponent,
args: {
order: 4,
},
argTypes: {
- onUpdate: { action: 'onUpdate' },
- onBack: { action: 'onBack' },
+ onUpdate: { action: "onUpdate" },
+ onBack: { action: "onBack" },
},
};
-export const InitialState = createExample(TestedComponent, reducerStatesExample.authEditing);
+export const InitialState = createExample(
+ TestedComponent,
+ reducerStatesExample.authEditing,
+);
export const OneAuthMethodConfigured = createExample(TestedComponent, {
...reducerStatesExample.authEditing,
- authentication_methods: [{
- type: 'question',
- instructions: 'what time is it?',
- challenge: 'asd',
- }]
+ authentication_methods: [
+ {
+ type: "question",
+ instructions: "what time is it?",
+ challenge: "asd",
+ },
+ ],
} as ReducerState);
-
export const SomeMoreAuthMethodConfigured = createExample(TestedComponent, {
...reducerStatesExample.authEditing,
- authentication_methods: [{
- type: 'question',
- instructions: 'what time is it?',
- challenge: 'asd',
- },{
- type: 'question',
- instructions: 'what time is it?',
- challenge: 'qwe',
- },{
- type: 'sms',
- instructions: 'what time is it?',
- challenge: 'asd',
- },{
- type: 'email',
- instructions: 'what time is it?',
- challenge: 'asd',
- },{
- type: 'email',
- instructions: 'what time is it?',
- challenge: 'asd',
- },{
- type: 'email',
- instructions: 'what time is it?',
- challenge: 'asd',
- },{
- type: 'email',
- instructions: 'what time is it?',
- challenge: 'asd',
- }]
+ authentication_methods: [
+ {
+ type: "question",
+ instructions: "what time is it?",
+ challenge: "asd",
+ },
+ {
+ type: "question",
+ instructions: "what time is it?",
+ challenge: "qwe",
+ },
+ {
+ type: "sms",
+ instructions: "what time is it?",
+ challenge: "asd",
+ },
+ {
+ type: "email",
+ instructions: "what time is it?",
+ challenge: "asd",
+ },
+ {
+ type: "email",
+ instructions: "what time is it?",
+ challenge: "asd",
+ },
+ {
+ type: "email",
+ instructions: "what time is it?",
+ challenge: "asd",
+ },
+ {
+ type: "email",
+ instructions: "what time is it?",
+ challenge: "asd",
+ },
+ ],
} as ReducerState);
export const NoAuthMethodProvided = createExample(TestedComponent, {
...reducerStatesExample.authEditing,
authentication_providers: {},
- authentication_methods: []
+ authentication_methods: [],
} as ReducerState);
diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
index 00eb54d4d..1ef326773 100644
--- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
@@ -20,7 +20,9 @@ export function AuthenticationEditorScreen(): VNode {
KnownAuthMethods | undefined
>(undefined);
const [tooFewAuths, setTooFewAuths] = useState(false);
- const [manageProvider, setManageProvider] = useState@@ -193,7 +198,7 @@ export function AuthenticationEditorScreen(): VNode { description="No providers founds" label="Add a provider manually" onConfirm={() => { - setManageProvider("") + setManageProvider(""); }} >
@@ -214,7 +219,10 @@ export function AuthenticationEditorScreen(): VNode { authentication method is defined by the backup provider list.
-
diff --git a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx index 306adacbb..0789ee6ad 100644 --- a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx @@ -15,48 +15,51 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ - -import { ReducerState } from 'anastasis-core'; -import { createExample, reducerStatesExample } from '../../utils'; -import { BackupFinishedScreen as TestedComponent } from './BackupFinishedScreen'; + * + * @author Sebastian Javier Marchano (sebasjm) + */ +import { ReducerState } from "anastasis-core"; +import { createExample, reducerStatesExample } from "../../utils"; +import { BackupFinishedScreen as TestedComponent } from "./BackupFinishedScreen"; export default { - title: 'Pages/backup/Finished', + title: "Pages/backup/Finished", component: TestedComponent, args: { order: 8, }, argTypes: { - onUpdate: { action: 'onUpdate' }, - onBack: { action: 'onBack' }, + onUpdate: { action: "onUpdate" }, + onBack: { action: "onBack" }, }, }; -export const WithoutName = createExample(TestedComponent, reducerStatesExample.backupFinished); +export const WithoutName = createExample( + TestedComponent, + reducerStatesExample.backupFinished, +); -export const WithName = createExample(TestedComponent, {...reducerStatesExample.backupFinished, - secret_name: 'super_secret', +export const WithName = createExample(TestedComponent, { + ...reducerStatesExample.backupFinished, + secret_name: "super_secret", } as ReducerState); export const WithDetails = createExample(TestedComponent, { ...reducerStatesExample.backupFinished, - secret_name: 'super_secret', + secret_name: "super_secret", success_details: { - 'http://anastasis.net': { + "http://anastasis.net": { policy_expiration: { - t_ms: 'never' + t_ms: "never", }, - policy_version: 0 + policy_version: 0, }, - 'http://taler.net': { + "http://taler.net": { policy_expiration: { - t_ms: new Date().getTime() + 60*60*24*1000 + t_ms: new Date().getTime() + 60 * 60 * 24 * 1000, }, - policy_version: 1 + policy_version: 1, }, - } + }, } as ReducerState); diff --git a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.tsx b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.tsx index 7938baca4..825ec5dc0 100644 --- a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.tsx @@ -4,41 +4,62 @@ import { useAnastasisContext } from "../../context/anastasis"; import { AnastasisClientFrame } from "./index"; export function BackupFinishedScreen(): VNode { - const reducer = useAnastasisContext() + const reducer = useAnastasisContext(); if (!reducer) { - returnno reducer in context
+ return no reducer in context
;
}
- if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) {
- return invalid state
+ if (
+ !reducer.currentReducerState ||
+ reducer.currentReducerState.backup_state === undefined
+ ) {
+ return invalid state
;
}
- const details = reducer.currentReducerState.success_details
+ const details = reducer.currentReducerState.success_details;
- return (- Your backup of secret "{reducer.currentReducerState.secret_name}" was - successful. -
: -- Your secret was successfully backed up. -
} + return ( ++ Your backup of secret{" "} + "{reducer.currentReducerState.secret_name}" was successful. +
+ ) : ( +Your secret was successfully backed up.
+ )} - {details &&
-
}
- The backup is stored by the following providers:
- {Object.keys(details).map((x, i) => { - const sd = details[x]; - return ( -
- {x}
-
- );
- })}
- - version {sd.policy_version} - {sd.policy_expiration.t_ms !== 'never' ? ` expires at: ${format(sd.policy_expiration.t_ms, 'dd-MM-yyyy')}` : ' without expiration date'} -
-
-
-
-
+
+ )}
+ The backup is stored by the following providers:
+ {Object.keys(details).map((x, i) => { + const sd = details[x]; + return ( +
+ {x}
+
+ );
+ })}
+ + version {sd.policy_version} + {sd.policy_expiration.t_ms !== "never" + ? ` expires at: ${format( + sd.policy_expiration.t_ms, + "dd-MM-yyyy", + )}` + : " without expiration date"} +
+
+
+
+ {feedback.message}
- );
+ return {feedback.message}
;
case ChallengeFeedbackStatus.Solved:
- return
+ return ;
case ChallengeFeedbackStatus.Pending:
- case ChallengeFeedbackStatus.Solved:
case ChallengeFeedbackStatus.AuthIban:
return null;
case ChallengeFeedbackStatus.ServerFailure:
return Server error.
;
case ChallengeFeedbackStatus.RateLimitExceeded:
- return There were to many failed attempts.
;
+ return (
+
+ There were to many failed attempts.
+
+ );
case ChallengeFeedbackStatus.Unsupported:
- return This client doesn't support solving this type of challenge. Use another version or contact the provider.
;
+ return (
+
+ This client doesn't support solving this type of challenge. Use
+ another version or contact the provider.
+
+ );
case ChallengeFeedbackStatus.TruthUnknown:
- return Provider doesn't recognize the challenge of the policy. Contact the provider for further information.
;
+ return (
+
+ Provider doesn't recognize the challenge of the policy. Contact the
+ provider for further information.
+
+ );
case ChallengeFeedbackStatus.Redirect:
default:
return ;
@@ -70,19 +81,25 @@ export function ChallengeOverviewScreen(): VNode {
feedback: challengeFeedback[ch.uuid],
};
}
- const policiesWithInfo = policies.map((row) => {
- let isPolicySolved = true;
- const challenges = row
- .map(({ uuid }) => {
- const info = knownChallengesMap[uuid];
- const isChallengeSolved = info?.feedback?.state === "solved";
- isPolicySolved = isPolicySolved && isChallengeSolved;
- return { info, uuid, isChallengeSolved };
- })
- .filter((ch) => ch.info !== undefined);
+ const policiesWithInfo = policies
+ .map((row) => {
+ let isPolicySolved = true;
+ const challenges = row
+ .map(({ uuid }) => {
+ const info = knownChallengesMap[uuid];
+ const isChallengeSolved = info?.feedback?.state === "solved";
+ isPolicySolved = isPolicySolved && isChallengeSolved;
+ return { info, uuid, isChallengeSolved };
+ })
+ .filter((ch) => ch.info !== undefined);
- return { isPolicySolved, challenges };
- });
+ return {
+ isPolicySolved,
+ challenges,
+ corrupted: row.length > challenges.length,
+ };
+ })
+ .filter((p) => !p.corrupted);
const atLeastThereIsOnePolicySolved =
policiesWithInfo.find((p) => p.isPolicySolved) !== undefined;
@@ -92,19 +109,19 @@ export function ChallengeOverviewScreen(): VNode {
: undefined;
return (
No policies found, try with another version of the secret
- ) : policies.length === 1 ? ( + ) : policiesWithInfo.length === 1 ? (One policy found for this secret. You need to solve all the challenges in order to recover your secret.
) : (- We have found {policies.length} polices. You need to solve all the - challenges from one policy in order to recover your secret. + We have found {policiesWithInfo.length} polices. You need to solve all + the challenges from one policy in order to recover your secret.
)} {policiesWithInfo.map((policy, policy_index) => { @@ -113,74 +130,100 @@ export function ChallengeOverviewScreen(): VNode { const method = authMethods[info.type as KnownAuthMethods]; if (!method) { - return
-
+
- unknown challenge
+ return (
+
+ );
}
- function ChallengeButton({ id, feedback }: { id: string; feedback?: ChallengeFeedback }): VNode {
+ function ChallengeButton({
+ id,
+ feedback,
+ }: {
+ id: string;
+ feedback?: ChallengeFeedback;
+ }): VNode {
function selectChallenge(): void {
- if (reducer) reducer.transition("select_challenge", { uuid: id })
+ if (reducer) reducer.transition("select_challenge", { uuid: id });
}
if (!feedback) {
- return
+
-
-
+ unknown challenge
+
-
-
+ return (
+
+
+
+ );
}
switch (feedback.state) {
case ChallengeFeedbackStatus.ServerFailure:
case ChallengeFeedbackStatus.Unsupported:
case ChallengeFeedbackStatus.TruthUnknown:
- case ChallengeFeedbackStatus.RateLimitExceeded: return
+ case ChallengeFeedbackStatus.RateLimitExceeded:
+ return ;
case ChallengeFeedbackStatus.AuthIban:
- case ChallengeFeedbackStatus.Payment: return
-
-
- case ChallengeFeedbackStatus.Redirect: return
-
-
- case ChallengeFeedbackStatus.Solved: return
-
- default: return
- Solved
-
-
-
-
-
+ case ChallengeFeedbackStatus.Payment:
+ return (
+
+
+
+ );
+ case ChallengeFeedbackStatus.Redirect:
+ return (
+
+
+
+ );
+ case ChallengeFeedbackStatus.Solved:
+ return (
+
+
+ );
+ default:
+ return (
+ Solved
+
+
+
+ );
}
- // return
- // {feedback.state !== "solved" ? (
- //
-
- // }
- // >
- // {isFree ? "Solve" : `Pay and Solve`}
- //
- // ) : null}
- // {feedback.state === "solved" ? (
- // //
}
return (
Solved
- // Solved
-
- // ) : null}
- // no reducer in context
+ return no reducer in context
;
}
- if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) {
- return invalid state
+ if (
+ !reducer.currentReducerState ||
+ reducer.currentReducerState.recovery_state === undefined
+ ) {
+ return invalid state
;
}
- const payments = ['']; //reducer.currentReducerState.payments ??
+ const payments = [""]; //reducer.currentReducerState.payments ??
return (
-
Some of the providers require a payment to store the encrypted
authentication information.
diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx
index 6bdb3515d..0948d603e 100644
--- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx
@@ -16,37 +16,42 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { ReducerState } from 'anastasis-core';
-import { createExample, reducerStatesExample } from '../../utils';
-import { ContinentSelectionScreen as TestedComponent } from './ContinentSelectionScreen';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { ReducerState } from "anastasis-core";
+import { createExample, reducerStatesExample } from "../../utils";
+import { ContinentSelectionScreen as TestedComponent } from "./ContinentSelectionScreen";
export default {
- title: 'Pages/Location',
+ title: "Pages/Location",
component: TestedComponent,
args: {
order: 2,
},
argTypes: {
- onUpdate: { action: 'onUpdate' },
- onBack: { action: 'onBack' },
+ onUpdate: { action: "onUpdate" },
+ onBack: { action: "onBack" },
},
};
-export const BackupSelectContinent = createExample(TestedComponent, reducerStatesExample.backupSelectContinent);
+export const BackupSelectContinent = createExample(
+ TestedComponent,
+ reducerStatesExample.backupSelectContinent,
+);
export const BackupSelectCountry = createExample(TestedComponent, {
...reducerStatesExample.backupSelectContinent,
- selected_continent: 'Testcontinent',
+ selected_continent: "Testcontinent",
} as ReducerState);
-export const RecoverySelectContinent = createExample(TestedComponent, reducerStatesExample.recoverySelectContinent);
+export const RecoverySelectContinent = createExample(
+ TestedComponent,
+ reducerStatesExample.recoverySelectContinent,
+);
export const RecoverySelectCountry = createExample(TestedComponent, {
...reducerStatesExample.recoverySelectContinent,
- selected_continent: 'Testcontinent',
+ selected_continent: "Testcontinent",
} as ReducerState);
diff --git a/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.stories.tsx
index 3d5fcce55..4cbeb8308 100644
--- a/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.stories.tsx
@@ -16,94 +16,126 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { ReducerState } from 'anastasis-core';
-import { createExample, reducerStatesExample } from '../../utils';
-import { EditPoliciesScreen as TestedComponent } from './EditPoliciesScreen';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { ReducerState } from "anastasis-core";
+import { createExample, reducerStatesExample } from "../../utils";
+import { EditPoliciesScreen as TestedComponent } from "./EditPoliciesScreen";
export default {
- title: 'Pages/backup/ReviewPolicies/EditPolicies',
+ title: "Pages/backup/ReviewPolicies/EditPolicies",
args: {
order: 6,
},
component: TestedComponent,
argTypes: {
- onUpdate: { action: 'onUpdate' },
- onBack: { action: 'onBack' },
+ onUpdate: { action: "onUpdate" },
+ onBack: { action: "onBack" },
},
};
-export const EditingAPolicy = createExample(TestedComponent, {
- ...reducerStatesExample.policyReview,
- policies: [{
- methods: [{
- authentication_method: 1,
- provider: 'https://anastasis.demo.taler.net/'
- }, {
- authentication_method: 2,
- provider: 'http://localhost:8086/'
- }]
- }, {
- methods: [{
- authentication_method: 1,
- provider: 'http://localhost:8086/'
- }]
- }],
- authentication_methods: [{
- type: "email",
- instructions: "Email to qwe@asd.com",
- challenge: "E5VPA"
- }, {
- type: "totp",
- instructions: "Response code for 'Anastasis'",
- challenge: "E5VPA"
- }, {
- type: "sms",
- instructions: "SMS to 6666-6666",
- challenge: ""
- }, {
- type: "question",
- instructions: "How did the chicken cross the road?",
- challenge: "C5SP8"
- }]
-} as ReducerState, { index : 0});
-
-export const CreatingAPolicy = createExample(TestedComponent, {
- ...reducerStatesExample.policyReview,
- policies: [{
- methods: [{
- authentication_method: 1,
- provider: 'https://anastasis.demo.taler.net/'
- }, {
- authentication_method: 2,
- provider: 'http://localhost:8086/'
- }]
- }, {
- methods: [{
- authentication_method: 1,
- provider: 'http://localhost:8086/'
- }]
- }],
- authentication_methods: [{
- type: "email",
- instructions: "Email to qwe@asd.com",
- challenge: "E5VPA"
- }, {
- type: "totp",
- instructions: "Response code for 'Anastasis'",
- challenge: "E5VPA"
- }, {
- type: "sms",
- instructions: "SMS to 6666-6666",
- challenge: ""
- }, {
- type: "question",
- instructions: "How did the chicken cross the road?",
- challenge: "C5SP8"
- }]
-} as ReducerState, { index : 3});
+export const EditingAPolicy = createExample(
+ TestedComponent,
+ {
+ ...reducerStatesExample.policyReview,
+ policies: [
+ {
+ methods: [
+ {
+ authentication_method: 1,
+ provider: "https://anastasis.demo.taler.net/",
+ },
+ {
+ authentication_method: 2,
+ provider: "http://localhost:8086/",
+ },
+ ],
+ },
+ {
+ methods: [
+ {
+ authentication_method: 1,
+ provider: "http://localhost:8086/",
+ },
+ ],
+ },
+ ],
+ authentication_methods: [
+ {
+ type: "email",
+ instructions: "Email to qwe@asd.com",
+ challenge: "E5VPA",
+ },
+ {
+ type: "totp",
+ instructions: "Response code for 'Anastasis'",
+ challenge: "E5VPA",
+ },
+ {
+ type: "sms",
+ instructions: "SMS to 6666-6666",
+ challenge: "",
+ },
+ {
+ type: "question",
+ instructions: "How did the chicken cross the road?",
+ challenge: "C5SP8",
+ },
+ ],
+ } as ReducerState,
+ { index: 0 },
+);
+export const CreatingAPolicy = createExample(
+ TestedComponent,
+ {
+ ...reducerStatesExample.policyReview,
+ policies: [
+ {
+ methods: [
+ {
+ authentication_method: 1,
+ provider: "https://anastasis.demo.taler.net/",
+ },
+ {
+ authentication_method: 2,
+ provider: "http://localhost:8086/",
+ },
+ ],
+ },
+ {
+ methods: [
+ {
+ authentication_method: 1,
+ provider: "http://localhost:8086/",
+ },
+ ],
+ },
+ ],
+ authentication_methods: [
+ {
+ type: "email",
+ instructions: "Email to qwe@asd.com",
+ challenge: "E5VPA",
+ },
+ {
+ type: "totp",
+ instructions: "Response code for 'Anastasis'",
+ challenge: "E5VPA",
+ },
+ {
+ type: "sms",
+ instructions: "SMS to 6666-6666",
+ challenge: "",
+ },
+ {
+ type: "question",
+ instructions: "How did the chicken cross the road?",
+ challenge: "C5SP8",
+ },
+ ],
+ } as ReducerState,
+ { index: 3 },
+);
diff --git a/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.tsx b/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.tsx
index 85cc96c46..198209399 100644
--- a/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/EditPoliciesScreen.tsx
@@ -20,7 +20,6 @@ interface Props {
index: number;
cancel: () => void;
confirm: (changes: MethodProvider[]) => void;
-
}
export interface MethodProvider {
@@ -28,106 +27,151 @@ export interface MethodProvider {
provider: string;
}
-export function EditPoliciesScreen({ index: policy_index, cancel, confirm }: Props): VNode {
- const [changedProvider, setChangedProvider] = useState
- Creating a new policy #{policy_index}
-
- Editing policy #{policy_index}
- Creating a new policy #{policy_index} Editing policy #{policy_index}
- Some of the providers require a payment to store the encrypted
- recovery document.
+ Some of the providers require a payment to store the encrypted recovery
+ document.
- Secret not found
- Secret not found
- Secret: {secret}
- Your secret: {secret}
- Based on your configured authentication method you have created, some policies
- have been configured. In order to recover your secret you have to solve all the
- challenges of at least one policy.
-
- No policies had been created. Go back and add more authentication methods.
-
+ Based on your configured authentication method you have created, some
+ policies have been configured. In order to recover your secret you
+ have to solve all the challenges of at least one policy.
+
+ No policies had been created. Go back and add more authentication
+ methods.
+
- No auth method found
- No auth method found
+
{authMethods[m.type as KnownAuthMethods]?.icon}
- {m.instructions} recovery provided by {m.provider}
+ {m.instructions} recovery provided by{" "}
+ {m.provider}
- Set to recover the latest version
-
- Set to recover the version number {currentVersion}
- Set to recover the latest version Set to recover the version number {currentVersion} Secret found, you can select another version or continue to the challenges solving
-
+
+ Secret found, you can select another version or continue to the
+ challenges solving
+ No recovery document found, try with another providerno reducer in context
+ return no reducer in context;
}
- if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) {
- return invalid state
+ if (
+ !reducer.currentReducerState ||
+ reducer.currentReducerState.backup_state === undefined
+ ) {
+ return invalid state;
}
- const selectableProviders: ProviderInfoByType = {}
- const allProviders = Object.entries(reducer.currentReducerState.authentication_providers || {})
+ const selectableProviders: ProviderInfoByType = {};
+ const allProviders = Object.entries(
+ reducer.currentReducerState.authentication_providers || {},
+ );
for (let index = 0; index < allProviders.length; index++) {
- const [url, status] = allProviders[index]
+ const [url, status] = allProviders[index];
if ("methods" in status) {
- status.methods.map(m => {
- const type: KnownAuthMethods = m.type as KnownAuthMethods
- const values = selectableProviders[type] || []
- const isFree = !m.usage_fee || m.usage_fee.endsWith(":0")
- values.push({ url, cost: m.usage_fee, isFree })
- selectableProviders[type] = values
- })
+ status.methods.map((m) => {
+ const type: KnownAuthMethods = m.type as KnownAuthMethods;
+ const values = selectableProviders[type] || [];
+ const isFree = !m.usage_fee || m.usage_fee.endsWith(":0");
+ values.push({ url, cost: m.usage_fee, isFree });
+ selectableProviders[type] = values;
+ });
}
}
- const allAuthMethods = reducer.currentReducerState.authentication_methods ?? [];
+ const allAuthMethods =
+ reducer.currentReducerState.authentication_methods ?? [];
const policies = reducer.currentReducerState.policies ?? [];
- const policy = policies[policy_index]
-
- for(let method_index = 0; method_index < allAuthMethods.length; method_index++ ) {
- policy?.methods.find(m => m.authentication_method === method_index)?.provider
+ const policy = policies[policy_index];
+
+ for (
+ let method_index = 0;
+ method_index < allAuthMethods.length;
+ method_index++
+ ) {
+ policy?.methods.find((m) => m.authentication_method === method_index)
+ ?.provider;
}
function sendChanges(): void {
- const newMethods: MethodProvider[] = []
+ const newMethods: MethodProvider[] = [];
allAuthMethods.forEach((method, index) => {
- const oldValue = policy?.methods.find(m => m.authentication_method === index)
+ const oldValue = policy?.methods.find(
+ (m) => m.authentication_method === index,
+ );
if (changedProvider[index] === undefined && oldValue !== undefined) {
- newMethods.push(oldValue)
+ newMethods.push(oldValue);
}
- if (changedProvider[index] !== undefined && changedProvider[index] !== "") {
+ if (
+ changedProvider[index] !== undefined &&
+ changedProvider[index] !== ""
+ ) {
newMethods.push({
authentication_method: index,
- provider: changedProvider[index]
- })
+ provider: changedProvider[index],
+ });
}
- })
- confirm(newMethods)
+ });
+ confirm(newMethods);
}
- return
-
- {authMethods[type]?.icon}
-
-
- {method.instructions}
-
-
-
-
+ );
+ })}
+
+
+
+
+
+
+
+ no reducer in context
+ return no reducer in context;
}
- if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) {
- return invalid state
+ if (
+ !reducer.currentReducerState ||
+ reducer.currentReducerState.backup_state === undefined
+ ) {
+ return invalid state;
}
const payments = reducer.currentReducerState.policy_payment_requests ?? [];
-
+
return (
{payments.map((x, i) => {
diff --git a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
index e92a231a8..47860db29 100644
--- a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
@@ -16,30 +16,32 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { ReducerState } from 'anastasis-core';
-import { createExample, reducerStatesExample } from '../../utils';
-import { RecoveryFinishedScreen as TestedComponent } from './RecoveryFinishedScreen';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { ReducerState } from "anastasis-core";
+import { createExample, reducerStatesExample } from "../../utils";
+import { RecoveryFinishedScreen as TestedComponent } from "./RecoveryFinishedScreen";
export default {
- title: 'Pages/recovery/Finished',
+ title: "Pages/recovery/Finished",
args: {
order: 7,
},
component: TestedComponent,
argTypes: {
- onUpdate: { action: 'onUpdate' },
- onBack: { action: 'onBack' },
+ onUpdate: { action: "onUpdate" },
+ onBack: { action: "onBack" },
},
};
export const GoodEnding = createExample(TestedComponent, {
...reducerStatesExample.recoveryFinished,
- core_secret: { mime: 'text/plain', value: 'hello' }
+ core_secret: { mime: "text/plain", value: "hello" },
} as ReducerState);
-export const BadEnding = createExample(TestedComponent, reducerStatesExample.recoveryFinished);
+export const BadEnding = createExample(
+ TestedComponent,
+ reducerStatesExample.recoveryFinished,
+);
diff --git a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx
index a61ef9efa..11ae09d4f 100644
--- a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx
@@ -1,39 +1,53 @@
-import {
- bytesToString,
- decodeCrock
-} from "@gnu-taler/taler-util";
+import { bytesToString, decodeCrock } from "@gnu-taler/taler-util";
import { h, VNode } from "preact";
import { useAnastasisContext } from "../../context/anastasis";
import { AnastasisClientFrame } from "./index";
export function RecoveryFinishedScreen(): VNode {
- const reducer = useAnastasisContext()
+ const reducer = useAnastasisContext();
if (!reducer) {
- return
no reducer in context
+ return no reducer in context;
}
- if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) {
- return invalid state
+ if (
+ !reducer.currentReducerState ||
+ reducer.currentReducerState.recovery_state === undefined
+ ) {
+ return invalid state;
}
- const encodedSecret = reducer.currentReducerState.core_secret
+ const encodedSecret = reducer.currentReducerState.core_secret;
if (!encodedSecret) {
- return
-
-
-
+
+
+
-
+
+
);
diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx
index e348101ee..4a1cba6a8 100644
--- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx
@@ -15,44 +15,51 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { ReducerState } from 'anastasis-core';
-import { createExample, reducerStatesExample } from '../../utils';
-import { ReviewPoliciesScreen as TestedComponent } from './ReviewPoliciesScreen';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { ReducerState } from "anastasis-core";
+import { createExample, reducerStatesExample } from "../../utils";
+import { ReviewPoliciesScreen as TestedComponent } from "./ReviewPoliciesScreen";
export default {
- title: 'Pages/backup/ReviewPolicies',
+ title: "Pages/backup/ReviewPolicies",
args: {
order: 6,
},
component: TestedComponent,
argTypes: {
- onUpdate: { action: 'onUpdate' },
- onBack: { action: 'onBack' },
+ onUpdate: { action: "onUpdate" },
+ onBack: { action: "onBack" },
},
};
export const HasPoliciesButMethodListIsEmpty = createExample(TestedComponent, {
...reducerStatesExample.policyReview,
- policies: [{
- methods: [{
- authentication_method: 0,
- provider: 'asd'
- }, {
- authentication_method: 1,
- provider: 'asd'
- }]
- }, {
- methods: [{
- authentication_method: 1,
- provider: 'asd'
- }]
- }],
- authentication_methods: []
+ policies: [
+ {
+ methods: [
+ {
+ authentication_method: 0,
+ provider: "asd",
+ },
+ {
+ authentication_method: 1,
+ provider: "asd",
+ },
+ ],
+ },
+ {
+ methods: [
+ {
+ authentication_method: 1,
+ provider: "asd",
+ },
+ ],
+ },
+ ],
+ authentication_methods: [],
} as ReducerState);
export const SomePoliciesWithMethods = createExample(TestedComponent, {
@@ -62,186 +69,193 @@ export const SomePoliciesWithMethods = createExample(TestedComponent, {
methods: [
{
authentication_method: 0,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 1,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 2,
- provider: "https://kudos.demo.anastasis.lu/"
- }
- ]
+ provider: "https://kudos.demo.anastasis.lu/",
+ },
+ ],
},
{
methods: [
{
authentication_method: 0,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 1,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 3,
- provider: "https://anastasis.demo.taler.net/"
- }
- ]
+ provider: "https://anastasis.demo.taler.net/",
+ },
+ ],
},
{
methods: [
{
authentication_method: 0,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 1,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 4,
- provider: "https://anastasis.demo.taler.net/"
- }
- ]
+ provider: "https://anastasis.demo.taler.net/",
+ },
+ ],
},
{
methods: [
{
authentication_method: 0,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 2,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 3,
- provider: "https://anastasis.demo.taler.net/"
- }
- ]
+ provider: "https://anastasis.demo.taler.net/",
+ },
+ ],
},
{
methods: [
{
authentication_method: 0,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 2,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 4,
- provider: "https://anastasis.demo.taler.net/"
- }
- ]
+ provider: "https://anastasis.demo.taler.net/",
+ },
+ ],
},
{
methods: [
{
authentication_method: 0,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 3,
- provider: "https://anastasis.demo.taler.net/"
+ provider: "https://anastasis.demo.taler.net/",
},
{
authentication_method: 4,
- provider: "https://anastasis.demo.taler.net/"
- }
- ]
+ provider: "https://anastasis.demo.taler.net/",
+ },
+ ],
},
{
methods: [
{
authentication_method: 1,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 2,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 3,
- provider: "https://anastasis.demo.taler.net/"
- }
- ]
+ provider: "https://anastasis.demo.taler.net/",
+ },
+ ],
},
{
methods: [
{
authentication_method: 1,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 2,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 4,
- provider: "https://anastasis.demo.taler.net/"
- }
- ]
+ provider: "https://anastasis.demo.taler.net/",
+ },
+ ],
},
{
methods: [
{
authentication_method: 1,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 3,
- provider: "https://anastasis.demo.taler.net/"
+ provider: "https://anastasis.demo.taler.net/",
},
{
authentication_method: 4,
- provider: "https://anastasis.demo.taler.net/"
- }
- ]
+ provider: "https://anastasis.demo.taler.net/",
+ },
+ ],
},
{
methods: [
{
authentication_method: 2,
- provider: "https://kudos.demo.anastasis.lu/"
+ provider: "https://kudos.demo.anastasis.lu/",
},
{
authentication_method: 3,
- provider: "https://anastasis.demo.taler.net/"
+ provider: "https://anastasis.demo.taler.net/",
},
{
authentication_method: 4,
- provider: "https://anastasis.demo.taler.net/"
- }
- ]
- }
+ provider: "https://anastasis.demo.taler.net/",
+ },
+ ],
+ },
+ ],
+ authentication_methods: [
+ {
+ type: "email",
+ instructions: "Email to qwe@asd.com",
+ challenge: "E5VPA",
+ },
+ {
+ type: "sms",
+ instructions: "SMS to 555-555",
+ challenge: "",
+ },
+ {
+ type: "question",
+ instructions: "Does P equal NP?",
+ challenge: "C5SP8",
+ },
+ {
+ type: "totp",
+ instructions: "Response code for 'Anastasis'",
+ challenge: "E5VPA",
+ },
+ {
+ type: "sms",
+ instructions: "SMS to 6666-6666",
+ challenge: "",
+ },
+ {
+ type: "question",
+ instructions: "How did the chicken cross the road?",
+ challenge: "C5SP8",
+ },
],
- authentication_methods: [{
- type: "email",
- instructions: "Email to qwe@asd.com",
- challenge: "E5VPA"
- }, {
- type: "sms",
- instructions: "SMS to 555-555",
- challenge: ""
- }, {
- type: "question",
- instructions: "Does P equal NP?",
- challenge: "C5SP8"
- },{
- type: "totp",
- instructions: "Response code for 'Anastasis'",
- challenge: "E5VPA"
- }, {
- type: "sms",
- instructions: "SMS to 6666-6666",
- challenge: ""
- }, {
- type: "question",
- instructions: "How did the chicken cross the road?",
- challenge: "C5SP8"
-}]
} as ReducerState);
diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
index aa98b5dd9..c43f0cdea 100644
--- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
@@ -6,16 +6,20 @@ import { EditPoliciesScreen } from "./EditPoliciesScreen";
import { AnastasisClientFrame } from "./index";
export function ReviewPoliciesScreen(): VNode {
- const [editingPolicy, setEditingPolicy] = useStateno reducer in context
+ return no reducer in context;
}
- if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) {
- return invalid state
+ if (
+ !reducer.currentReducerState ||
+ reducer.currentReducerState.backup_state === undefined
+ ) {
+ return invalid state;
}
- const configuredAuthMethods = reducer.currentReducerState.authentication_methods ?? [];
+ const configuredAuthMethods =
+ reducer.currentReducerState.authentication_methods ?? [];
const policies = reducer.currentReducerState.policies ?? [];
if (editingPolicy !== undefined) {
@@ -28,58 +32,109 @@ export function ReviewPoliciesScreen(): VNode {
policy_index: editingPolicy,
policy: newMethods,
});
- setEditingPolicy(undefined)
+ setEditingPolicy(undefined);
}}
/>
- )
+ );
}
- const errors = policies.length < 1 ? 'Need more policies' : undefined
+ const errors = policies.length < 1 ? "Need more policies" : undefined;
return (
-
-
+
+
{policies.map((p, policy_index) => {
const methods = p.methods
- .map(x => configuredAuthMethods[x.authentication_method] && ({ ...configuredAuthMethods[x.authentication_method], provider: x.provider }))
- .filter(x => !!x)
+ .map(
+ (x) =>
+ configuredAuthMethods[x.authentication_method] && {
+ ...configuredAuthMethods[x.authentication_method],
+ provider: x.provider,
+ },
+ )
+ .filter((x) => !!x);
- const policyName = methods.map(x => x.type).join(" + ");
+ const policyName = methods.map((x) => x.type).join(" + ");
+
+ if (p.methods.length > methods.length) {
+ //there is at least one authentication method that is corrupted
+ return null;
+ }
return (
-
+
-
Policy #{policy_index + 1}: {policyName}
- {!methods.length &&
-
-
+
);
diff --git a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx
index db061d936..3f2c6a245 100644
--- a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx
@@ -15,30 +15,29 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { ReducerState } from 'anastasis-core';
-import { createExample, reducerStatesExample } from '../../utils';
-import { SecretEditorScreen as TestedComponent } from './SecretEditorScreen';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { ReducerState } from "anastasis-core";
+import { createExample, reducerStatesExample } from "../../utils";
+import { SecretEditorScreen as TestedComponent } from "./SecretEditorScreen";
export default {
- title: 'Pages/backup/SecretInput',
+ title: "Pages/backup/SecretInput",
component: TestedComponent,
args: {
order: 7,
},
argTypes: {
- onUpdate: { action: 'onUpdate' },
- onBack: { action: 'onBack' },
+ onUpdate: { action: "onUpdate" },
+ onBack: { action: "onBack" },
},
};
export const WithSecretNamePreselected = createExample(TestedComponent, {
...reducerStatesExample.secretEdition,
- secret_name: 'someSecretName',
+ secret_name: "someSecretName",
} as ReducerState);
export const WithoutName = createExample(TestedComponent, {
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
index 8d02ebfbe..01ce3f0a7 100644
--- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
@@ -15,37 +15,35 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { ReducerState } from 'anastasis-core';
-import { createExample, reducerStatesExample } from '../../utils';
-import { SecretSelectionScreen as TestedComponent } from './SecretSelectionScreen';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { ReducerState } from "anastasis-core";
+import { createExample, reducerStatesExample } from "../../utils";
+import { SecretSelectionScreen as TestedComponent } from "./SecretSelectionScreen";
export default {
- title: 'Pages/recovery/SecretSelection',
+ title: "Pages/recovery/SecretSelection",
component: TestedComponent,
args: {
order: 4,
},
argTypes: {
- onUpdate: { action: 'onUpdate' },
- onBack: { action: 'onBack' },
+ onUpdate: { action: "onUpdate" },
+ onBack: { action: "onBack" },
},
};
export const Example = createExample(TestedComponent, {
...reducerStatesExample.secretSelection,
recovery_document: {
- provider_url: 'https://kudos.demo.anastasis.lu/',
- secret_name: 'secretName',
+ provider_url: "https://kudos.demo.anastasis.lu/",
+ secret_name: "secretName",
version: 1,
},
} as ReducerState);
-
export const NoRecoveryDocumentFound = createExample(TestedComponent, {
...reducerStatesExample.secretSelection,
recovery_document: undefined,
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
+
+
no reducer in context
+ return no reducer in context;
}
- if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) {
- return invalid state
+ if (
+ !reducer.currentReducerState ||
+ reducer.currentReducerState.recovery_state === undefined
+ ) {
+ return invalid state;
}
async function doSelectVersion(p: string, n: number): Promise
-
);
}
-
-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 (
-
+
{recoveryDocument.provider_url}
- {currentVersion === 0 ?
-
+
-
-