From 21b60c8f6ff69bf114779a767a3ac3355f69a34f Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 26 Oct 2021 12:08:03 -0300 Subject: added core validators, worked on look and feel --- packages/anastasis-webui/.storybook/preview.js | 6 + packages/anastasis-webui/package.json | 1 + .../src/components/fields/DateInput.tsx | 63 ++++ .../src/components/fields/LabeledInput.tsx | 40 +++ .../src/components/menu/SideBar.tsx | 18 +- .../src/components/picker/DatePicker.tsx | 324 +++++++++++++++++++++ .../components/picker/DurationPicker.stories.tsx | 50 ++++ .../src/components/picker/DurationPicker.tsx | 154 ++++++++++ .../pages/home/AttributeEntryScreen.stories.tsx | 67 ++++- .../src/pages/home/AttributeEntryScreen.tsx | 112 +++++-- .../src/pages/home/AuthMethodEmailSetup.tsx | 3 +- .../src/pages/home/AuthMethodPostSetup.tsx | 2 +- .../src/pages/home/AuthMethodQuestionSetup.tsx | 3 +- .../home/AuthenticationEditorScreen.stories.tsx | 5 +- .../pages/home/BackupFinishedScreen.stories.tsx | 5 +- .../pages/home/ChallengeOverviewScreen.stories.tsx | 35 ++- .../pages/home/ChallengePayingScreen.stories.tsx | 38 +++ .../src/pages/home/ChallengePayingScreen.tsx | 33 +++ .../home/ContinentSelectionScreen.stories.tsx | 7 +- .../src/pages/home/ContinentSelectionScreen.tsx | 4 +- .../pages/home/CountrySelectionScreen.stories.tsx | 3 + .../src/pages/home/CountrySelectionScreen.tsx | 14 +- .../pages/home/PoliciesPayingScreen.stories.tsx | 5 +- .../pages/home/RecoveryFinishedScreen.stories.tsx | 5 +- .../pages/home/ReviewPoliciesScreen.stories.tsx | 5 +- .../src/pages/home/SecretEditorScreen.stories.tsx | 5 +- .../src/pages/home/SecretEditorScreen.tsx | 5 +- .../pages/home/SecretSelectionScreen.stories.tsx | 5 +- .../src/pages/home/SolveEmailEntry.tsx | 3 +- .../src/pages/home/SolvePostEntry.tsx | 3 +- .../src/pages/home/SolveQuestionEntry.tsx | 3 +- .../src/pages/home/SolveScreen.stories.tsx | 5 +- .../src/pages/home/SolveSmsEntry.tsx | 3 +- .../src/pages/home/StartScreen.stories.tsx | 3 + .../anastasis-webui/src/pages/home/StartScreen.tsx | 15 +- .../src/pages/home/TruthsPayingScreen.stories.tsx | 5 +- .../src/pages/home/TruthsPayingScreen.tsx | 2 +- packages/anastasis-webui/src/pages/home/index.tsx | 42 +-- .../anastasis-webui/src/scss/_custom-calendar.scss | 4 + packages/anastasis-webui/src/utils/index.tsx | 20 +- 40 files changed, 998 insertions(+), 127 deletions(-) create mode 100644 packages/anastasis-webui/src/components/fields/DateInput.tsx create mode 100644 packages/anastasis-webui/src/components/fields/LabeledInput.tsx create mode 100644 packages/anastasis-webui/src/components/picker/DatePicker.tsx create mode 100644 packages/anastasis-webui/src/components/picker/DurationPicker.stories.tsx create mode 100644 packages/anastasis-webui/src/components/picker/DurationPicker.tsx create mode 100644 packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx create mode 100644 packages/anastasis-webui/src/pages/home/ChallengePayingScreen.tsx (limited to 'packages/anastasis-webui') diff --git a/packages/anastasis-webui/.storybook/preview.js b/packages/anastasis-webui/.storybook/preview.js index 7cb9405ba..9ab4d9404 100644 --- a/packages/anastasis-webui/.storybook/preview.js +++ b/packages/anastasis-webui/.storybook/preview.js @@ -21,6 +21,12 @@ import { h } from 'preact'; export const parameters = { controls: { expanded: true }, + options: { + storySort: (a, b) => { + return (a[1].args.order ?? 0) - (b[1].args.order ?? 0) + // return a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }) + } + }, } export const globalTypes = { diff --git a/packages/anastasis-webui/package.json b/packages/anastasis-webui/package.json index 57cfdd8d4..4cdb00243 100644 --- a/packages/anastasis-webui/package.json +++ b/packages/anastasis-webui/package.json @@ -25,6 +25,7 @@ "dependencies": { "@gnu-taler/taler-util": "workspace:^0.8.3", "anastasis-core": "workspace:^0.0.1", + "date-fns": "2.22.1", "jed": "1.1.1", "preact": "^10.3.1", "preact-render-to-string": "^5.1.4", diff --git a/packages/anastasis-webui/src/components/fields/DateInput.tsx b/packages/anastasis-webui/src/components/fields/DateInput.tsx new file mode 100644 index 000000000..c45acc6d2 --- /dev/null +++ b/packages/anastasis-webui/src/components/fields/DateInput.tsx @@ -0,0 +1,63 @@ +import { format } from "date-fns"; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; +import { DatePicker } from "../picker/DatePicker"; + +export interface DateInputProps { + label: string; + grabFocus?: boolean; + tooltip?: string; + error?: string; + bind: [string, (x: string) => void]; +} + +export function DateInput(props: DateInputProps): VNode { + const inputRef = useRef(null); + useLayoutEffect(() => { + if (props.grabFocus) { + inputRef.current?.focus(); + } + }, [props.grabFocus]); + const [opened, setOpened2] = useState(false) + function setOpened(v: boolean) { + console.log('dale', v) + setOpened2(v) + } + + const value = props.bind[0]; + const [dirty, setDirty] = useState(false) + const showError = dirty && props.error + + return
+ +
+ { setOpened(true) }} + value={value} + ref={inputRef} /> + + + + +
+ {showError &&

{props.error}

} + 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/LabeledInput.tsx b/packages/anastasis-webui/src/components/fields/LabeledInput.tsx new file mode 100644 index 000000000..96d634a4f --- /dev/null +++ b/packages/anastasis-webui/src/components/fields/LabeledInput.tsx @@ -0,0 +1,40 @@ +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; + +export interface LabeledInputProps { + label: string; + grabFocus?: boolean; + error?: string; + tooltip?: string; + bind: [string, (x: string) => void]; +} + +export function LabeledInput(props: LabeledInputProps): VNode { + const inputRef = useRef(null); + useLayoutEffect(() => { + if (props.grabFocus) { + inputRef.current?.focus(); + } + }, [props.grabFocus]); + const value = props.bind[0]; + const [dirty, setDirty] = useState(false) + const showError = dirty && props.error + return (
+ +
+ {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}} + ref={inputRef} + style={{ display: "block" }} /> +
+ {showError &&

{props.error}

} +
+ ); +} diff --git a/packages/anastasis-webui/src/components/menu/SideBar.tsx b/packages/anastasis-webui/src/components/menu/SideBar.tsx index df582a5d0..12223d473 100644 --- a/packages/anastasis-webui/src/components/menu/SideBar.tsx +++ b/packages/anastasis-webui/src/components/menu/SideBar.tsx @@ -59,25 +59,21 @@ export function Sidebar({ mobile }: Props): VNode { {!reducer.currentReducerState &&
  • - Start one options + Select one option
    • } {reducer.currentReducerState && reducer.currentReducerState.backup_state ? -
  • +
  • - Continent selection -
    -
    • -
  • -
    - Country selection + Location & Currency
  • - - User attributes + Personal information
  • @@ -119,7 +115,7 @@ export function Sidebar({ mobile }: Props): VNode { : (reducer.currentReducerState && reducer.currentReducerState?.recovery_state &&
  • - TruthsPaying + ContinentSelecting
  • diff --git a/packages/anastasis-webui/src/components/picker/DatePicker.tsx b/packages/anastasis-webui/src/components/picker/DatePicker.tsx new file mode 100644 index 000000000..e51b3db68 --- /dev/null +++ b/packages/anastasis-webui/src/components/picker/DatePicker.tsx @@ -0,0 +1,324 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { h, Component } from "preact"; + +interface Props { + closeFunction?: () => void; + dateReceiver?: (d: Date) => void; + opened?: boolean; +} +interface State { + displayedMonth: number; + displayedYear: number; + selectYearMode: boolean; + currentDate: Date; +} +const now = new Date() + +const monthArrShortFull = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December' +] + +const monthArrShort = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec' +] + +const dayArr = [ + 'Sun', + 'Mon', + 'Tue', + 'Wed', + 'Thu', + 'Fri', + 'Sat' +] + +const yearArr: number[] = [] + + +// inspired by https://codepen.io/m4r1vs/pen/MOOxyE +export class DatePicker extends Component { + + 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 + */ + dayClicked(e: any) { + + const element = e.target; // the actual element clicked + + 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')); + + // update the state + this.setState({ currentDate: date }); + this.passDateToParent(date) + } + + /** + * 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 + + const firstDay = new Date(year, month, 1).getDay(); // first weekday of month + const lastDate = new Date(year, month + 1, 0).getDate(); // last date of month + + let day: number | null = 0; + + // 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 + }); + } + + return calendar; + } + + /** + * Display previous month by updating state + */ + displayPrevMonth() { + if (this.state.displayedMonth <= 0) { + this.setState({ + displayedMonth: 11, + displayedYear: this.state.displayedYear - 1 + }); + } + else { + this.setState({ + displayedMonth: this.state.displayedMonth - 1 + }); + } + } + + /** + * Display next month by updating state + */ + displayNextMonth() { + if (this.state.displayedMonth >= 11) { + this.setState({ + displayedMonth: 0, + displayedYear: this.state.displayedYear + 1 + }); + } + else { + this.setState({ + displayedMonth: this.state.displayedMonth + 1 + }); + } + } + + /** + * Display the selected month (gets fired when clicking on the date string) + */ + displaySelectedMonth() { + if (this.state.selectYearMode) { + this.toggleYearSelector(); + } + else { + if (!this.state.currentDate) return false; + this.setState({ + displayedMonth: this.state.currentDate.getMonth(), + displayedYear: this.state.currentDate.getFullYear() + }); + } + } + + toggleYearSelector() { + this.setState({ selectYearMode: !this.state.selectYearMode }); + } + + changeDisplayedYear(e: any) { + const element = e.target; + this.toggleYearSelector(); + this.setState({ displayedYear: parseInt(element.innerHTML, 10), displayedMonth: 0 }); + } + + /** + * Pass the selected date to parent when 'OK' is clicked + */ + passSavedDateDateToParent() { + this.passDateToParent(this.state.currentDate) + } + passDateToParent(date: Date) { + if (typeof this.props.dateReceiver === 'function') this.props.dateReceiver(date); + this.closeDatePicker(); + } + + componentDidUpdate() { + if (this.state.selectYearMode) { + document.getElementsByClassName('selected')[0].scrollIntoView(); // works in every browser incl. IE, replace with scrollIntoViewIfNeeded when browsers support it + } + } + + constructor() { + super(); + + this.closeDatePicker = this.closeDatePicker.bind(this); + this.dayClicked = this.dayClicked.bind(this); + this.displayNextMonth = this.displayNextMonth.bind(this); + this.displayPrevMonth = this.displayPrevMonth.bind(this); + this.getDaysByMonth = this.getDaysByMonth.bind(this); + this.changeDisplayedYear = this.changeDisplayedYear.bind(this); + this.passDateToParent = this.passDateToParent.bind(this); + this.toggleYearSelector = this.toggleYearSelector.bind(this); + this.displaySelectedMonth = this.displaySelectedMonth.bind(this); + + + this.state = { + currentDate: now, + displayedMonth: now.getMonth(), + displayedYear: now.getFullYear(), + selectYearMode: false + } + } + + render() { + + const { currentDate, displayedMonth, displayedYear, selectYearMode } = this.state; + + return ( +
    +
    + +
    +

    {currentDate.getFullYear()}

    +

    + {dayArr[currentDate.getDay()]}, {monthArrShort[currentDate.getMonth()]} {currentDate.getDate()} +

    +
    + + {!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; + + if (currentDate && day.date) selected = (currentDate.toLocaleDateString() === day.date.toLocaleDateString()); + + return ( + {day.day} + ) + } + ) + } + +
    + +
    } + + {selectYearMode &&
    + + {yearArr.map(year => ( + + {year} + + ))} + +
    } + +
    +
    + +
    + +
    + ) + } +} + + +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 new file mode 100644 index 000000000..275c80fa6 --- /dev/null +++ b/packages/anastasis-webui/src/components/picker/DurationPicker.stories.tsx @@ -0,0 +1,50 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see + */ + +/** +* +* @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', + component: TestedComponent, + argTypes: { + onCreate: { action: 'onCreate' }, + goBack: { action: 'goBack' }, + } +}; + +function createExample(Component: FunctionalComponent, props: Partial) { + const r = (args: any) => + r.args = props + return r +} + +export const Example = createExample(TestedComponent, { + days: true, minutes: true, hours: true, seconds: true, + value: 10000000 +}); + +export const WithState = () => { + const [v,s] = useState(1000000) + return +} diff --git a/packages/anastasis-webui/src/components/picker/DurationPicker.tsx b/packages/anastasis-webui/src/components/picker/DurationPicker.tsx new file mode 100644 index 000000000..235a63e2d --- /dev/null +++ b/packages/anastasis-webui/src/components/picker/DurationPicker.tsx @@ -0,0 +1,154 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { h, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { useTranslator } from "../../i18n"; +import "../../scss/DurationPicker.scss"; + +export interface Props { + hours?: boolean; + minutes?: boolean; + seconds?: boolean; + days?: boolean; + onChange: (value: number) => void; + value: number +} + +// inspiration taken from https://github.com/flurmbo/react-duration-picker +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, + 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) + }) + + 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 + return ( +
    +
    +
    +
    + +
    + +
    + {onDecrease && } +
    +
    + {value > min ? toTwoDigitString(value - 1) : ''} +
    +
    + {onChange ? + onChange(n - value)} /> : + toTwoDigitString(value) + } +
    {unit}
    +
    + +
    + {value < max ? toTwoDigitString(value + 1) : ''} +
    + +
    + {onIncrease && } +
    + +
    +
    +
    + ); +} + + +function toTwoDigitString(n: number) { + if (n < 10) { + return `0${n}`; + } + return `${n}`; +} \ 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 d28a6df43..d9be48fb4 100644 --- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx @@ -28,14 +28,40 @@ import { AttributeEntryScreen as TestedComponent } from './AttributeEntryScreen' export default { title: 'Pages/AttributeEntryScreen', component: TestedComponent, + args: { + order: 4, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, }, }; -export const WithSomeAttributes = createExample(TestedComponent, { - ...reducerStatesExample.attributeEditing, +export const Backup = createExample(TestedComponent, { + ...reducerStatesExample.backupAttributeEditing, + required_attributes: [{ + name: 'first', + label: 'first', + type: 'type', + uuid: 'asdasdsa1', + widget: 'wid', + }, { + name: 'pepe', + label: 'second', + type: 'type', + uuid: 'asdasdsa2', + widget: 'wid', + }, { + name: 'pepe2', + label: 'third', + type: 'type', + uuid: 'asdasdsa3', + widget: 'calendar', + }] +} as ReducerState); + +export const Recovery = createExample(TestedComponent, { + ...reducerStatesExample.recoveryAttributeEditing, required_attributes: [{ name: 'first', label: 'first', @@ -57,7 +83,40 @@ export const WithSomeAttributes = createExample(TestedComponent, { }] } as ReducerState); -export const Empty = createExample(TestedComponent, { - ...reducerStatesExample.attributeEditing, +export const WithNoRequiredAttribute = createExample(TestedComponent, { + ...reducerStatesExample.backupAttributeEditing, required_attributes: undefined } as ReducerState); + +const allWidgets = [ + "anastasis_gtk_ia_aadhar_in", + "anastasis_gtk_ia_ahv", + "anastasis_gtk_ia_birthdate", + "anastasis_gtk_ia_birthnumber_cz", + "anastasis_gtk_ia_birthnumber_sk", + "anastasis_gtk_ia_birthplace", + "anastasis_gtk_ia_cf_it", + "anastasis_gtk_ia_cpr_dk", + "anastasis_gtk_ia_es_dni", + "anastasis_gtk_ia_es_ssn", + "anastasis_gtk_ia_full_name", + "anastasis_gtk_ia_my_jp", + "anastasis_gtk_ia_nid_al", + "anastasis_gtk_ia_nid_be", + "anastasis_gtk_ia_ssn_de", + "anastasis_gtk_ia_ssn_us", + "anastasis_gtk_ia_tax_de", + "anastasis_gtk_xx_prime", + "anastasis_gtk_xx_square", +] + +export const WithAllPosibleWidget = createExample(TestedComponent, { + ...reducerStatesExample.backupAttributeEditing, + required_attributes: allWidgets.map(w => ({ + name: w, + label: `widget: ${w}`, + type: 'type', + uuid: `uuid-${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 2f804f940..3b39cf9c4 100644 --- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx @@ -1,10 +1,11 @@ /* eslint-disable @typescript-eslint/camelcase */ +import { UserAttributeSpec, validators } from "anastasis-core"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { ReducerStateRecovery, ReducerStateBackup, UserAttributeSpec } from "anastasis-core/lib"; import { useAnastasisContext } from "../../context/anastasis"; -import { AnastasisReducerApi } from "../../hooks/use-anastasis-reducer"; -import { AnastasisClientFrame, withProcessLabel, LabeledInput } from "./index"; +import { AnastasisClientFrame, withProcessLabel } from "./index"; +import { LabeledInput } from "../../components/fields/LabeledInput"; +import { DateInput } from "../../components/fields/DateInput"; export function AttributeEntryScreen(): VNode { const reducer = useAnastasisContext() @@ -18,48 +19,105 @@ export function AttributeEntryScreen(): VNode { if (!reducer.currentReducerState || !("required_attributes" in reducer.currentReducerState)) { return
    invalid state
    } - + + return ( reducer.transition("enter_user_attributes", { identity_attributes: attrs, })} > - {reducer.currentReducerState.required_attributes?.map((x, i: number) => { - return ( - setAttrs({ ...attrs, [x.name]: v })} - spec={x} - value={attrs[x.name]} /> - ); - })} +
    +
    + + {reducer.currentReducerState.required_attributes?.map((x, i: number) => { + const value = attrs[x.name] + function checkIfValid(): string | undefined { + const pattern = x['validation-regex'] + if (pattern) { + const re = new RegExp(pattern) + if (!re.test(value)) return 'The value is invalid' + } + const logic = x['validation-logic'] + if (logic) { + const func = (validators as any)[logic]; + if (func && typeof func === 'function' && !func(value)) return 'Please check the value' + } + const optional = x.optional + console.log('optiona', optional) + if (!optional && !value) { + return 'This value is required' + } + return undefined + } + + return ( + setAttrs({ ...attrs, [x.name]: v })} + spec={x} + isValid={checkIfValid} + value={value} /> + ); + })} + +
    +
    +

    This stay private

    +

    The information you have entered here: +

    +
      +
    • + + + + Will be hashed, and therefore unreadable +
      • +
    • + + The non-hashed version is not shared
      • +
    +
    +
    ); } -interface AttributeEntryProps { - reducer: AnastasisReducerApi; - reducerState: ReducerStateRecovery | ReducerStateBackup; -} - -export interface AttributeEntryFieldProps { +interface AttributeEntryFieldProps { isFirst: boolean; value: string; setValue: (newValue: string) => void; spec: UserAttributeSpec; + isValid: () => string | undefined; } -export function AttributeEntryField(props: AttributeEntryFieldProps): VNode { +function AttributeEntryField(props: AttributeEntryFieldProps): VNode { + const errorMessage = props.isValid() + return (
    - + {props.spec.type === 'date' ? + : + + } + + + + + This stay private +
    ); } diff --git a/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx b/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx index 9567e0ef7..5243c5259 100644 --- a/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx +++ b/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx @@ -6,7 +6,8 @@ import { import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { AuthMethodSetupProps } from "./AuthenticationEditorScreen"; -import { AnastasisClientFrame, LabeledInput } from "./index"; +import { AnastasisClientFrame } from "./index"; +import { LabeledInput } from "../../components/fields/LabeledInput"; export function AuthMethodEmailSetup(props: AuthMethodSetupProps): VNode { const [email, setEmail] = useState(""); diff --git a/packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx b/packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx index 55e37a968..1c2a9a92e 100644 --- a/packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx +++ b/packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx @@ -6,7 +6,7 @@ import { import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { AuthMethodSetupProps } from "./AuthenticationEditorScreen"; -import { LabeledInput } from "./index"; +import { LabeledInput } from "../../components/fields/LabeledInput"; export function AuthMethodPostSetup(props: AuthMethodSetupProps): VNode { const [fullName, setFullName] = useState(""); diff --git a/packages/anastasis-webui/src/pages/home/AuthMethodQuestionSetup.tsx b/packages/anastasis-webui/src/pages/home/AuthMethodQuestionSetup.tsx index 7699cdf34..c2bd24ef9 100644 --- a/packages/anastasis-webui/src/pages/home/AuthMethodQuestionSetup.tsx +++ b/packages/anastasis-webui/src/pages/home/AuthMethodQuestionSetup.tsx @@ -6,7 +6,8 @@ import { import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { AuthMethodSetupProps } from "./AuthenticationEditorScreen"; -import { AnastasisClientFrame, LabeledInput } from "./index"; +import { AnastasisClientFrame } from "./index"; +import { LabeledInput } from "../../components/fields/LabeledInput"; export function AuthMethodQuestionSetup(props: AuthMethodSetupProps): VNode { const [questionText, setQuestionText] = useState(""); diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx index 44d3795b2..8f86831a9 100644 --- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx @@ -24,8 +24,11 @@ import { AuthenticationEditorScreen as TestedComponent } from './AuthenticationE export default { - title: 'Pages/AuthenticationEditorScreen', + title: 'Pages/backup/AuthenticationEditorScreen', component: TestedComponent, + args: { + order: 5, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, diff --git a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx index 65a2b7e13..0c9d007bc 100644 --- a/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx @@ -26,8 +26,11 @@ import { BackupFinishedScreen as TestedComponent } from './BackupFinishedScreen' export default { - title: 'Pages/BackupFinishedScreen', + title: 'Pages/backup/FinishedScreen', component: TestedComponent, + args: { + order: 9, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, diff --git a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx index 4f186c031..def44c5a6 100644 --- a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx @@ -20,23 +20,27 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { ReducerState } from 'anastasis-core'; +import { RecoveryStates, ReducerState } from 'anastasis-core'; import { createExample, reducerStatesExample } from '../../utils'; import { ChallengeOverviewScreen as TestedComponent } from './ChallengeOverviewScreen'; export default { - title: 'Pages/ChallengeOverviewScreen', + title: 'Pages/recovery/ChallengeOverviewScreen', component: TestedComponent, + args: { + order: 5, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, }, }; -export const OneChallenge = createExample(TestedComponent, {...reducerStatesExample.challengeSelecting, +export const OneChallenge = createExample(TestedComponent, { + ...reducerStatesExample.challengeSelecting, recovery_information: { - policies: [[{uuid:'1'}]], + policies: [[{ uuid: '1' }]], challenges: [{ cost: 'USD:1', instructions: 'just go for it', @@ -46,37 +50,44 @@ export const OneChallenge = createExample(TestedComponent, {...reducerStatesExam }, } as ReducerState); -export const MoreChallenges = createExample(TestedComponent, {...reducerStatesExample.challengeSelecting, +export const MoreChallenges = createExample(TestedComponent, { + ...reducerStatesExample.challengeSelecting, recovery_information: { - policies: [[{uuid:'1'}, {uuid:'2'}],[{uuid:'3'}]], + policies: [[{ uuid: '1' }, { uuid: '2' }], [{ uuid: 'uuid-3' }]], challenges: [{ cost: 'USD:1', instructions: 'just go for it', type: 'question', uuid: '1', - },{ + }, { cost: 'USD:1', instructions: 'just go for it', type: 'question', uuid: '2', - },{ + }, { cost: 'USD:1', instructions: 'just go for it', type: 'question', - uuid: '3', + uuid: 'uuid-3', }] }, + challenge_feedback: { + 'uuid-3': { + state: 'solved' + } + } } as ReducerState); -export const OneBadConfiguredPolicy = createExample(TestedComponent, {...reducerStatesExample.challengeSelecting, +export const OneBadConfiguredPolicy = createExample(TestedComponent, { + ...reducerStatesExample.challengeSelecting, recovery_information: { - policies: [[{uuid:'2'}]], + policies: [[{ uuid: '2' }]], challenges: [{ cost: 'USD:1', instructions: 'just go for it', type: 'sasd', uuid: '1', - }] + }], }, } as ReducerState); diff --git a/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx new file mode 100644 index 000000000..e5fe09e99 --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx @@ -0,0 +1,38 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { createExample, reducerStatesExample } from '../../utils'; +import { ChallengePayingScreen as TestedComponent } from './ChallengePayingScreen'; + + +export default { + title: 'Pages/recovery/__ChallengePayingScreen', + component: TestedComponent, + args: { + order: 10, + }, + argTypes: { + onUpdate: { action: 'onUpdate' }, + onBack: { action: 'onBack' }, + }, +}; + +export const Example = createExample(TestedComponent, reducerStatesExample.challengePaying); diff --git a/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.tsx b/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.tsx new file mode 100644 index 000000000..d87afdf46 --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/ChallengePayingScreen.tsx @@ -0,0 +1,33 @@ +import { h, VNode } from "preact"; +import { useAnastasisContext } from "../../context/anastasis"; +import { AnastasisClientFrame } from "./index"; + +export function ChallengePayingScreen(): VNode { + const reducer = useAnastasisContext() + if (!reducer) { + return
    no reducer in context
    + } + if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) { + return
    invalid state
    + } + const payments = ['']; //reducer.currentReducerState.payments ?? + return ( + +

    + Some of the providers require a payment to store the encrypted + authentication information. +

    +
      + {payments.map((x, i) => { + return
    • {x}
      • ; + })} +
    + +     + ); +} diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx index aad37cd7f..8744a2b79 100644 --- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx @@ -26,11 +26,14 @@ import { ContinentSelectionScreen as TestedComponent } from './ContinentSelectio export default { title: 'Pages/ContinentSelectionScreen', component: TestedComponent, + args: { + order: 2, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, }, }; -export const Backup = createExample(TestedComponent, reducerStatesExample.backupSelectCountry); -export const Recovery = createExample(TestedComponent, reducerStatesExample.recoverySelectCountry); +export const Backup = createExample(TestedComponent, reducerStatesExample.backupSelectContinent); +export const Recovery = createExample(TestedComponent, reducerStatesExample.recoverySelectContinent); diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx index ad529a4a7..94c0409da 100644 --- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx @@ -7,11 +7,11 @@ export function ContinentSelectionScreen(): VNode { if (!reducer || !reducer.currentReducerState || !("continents" in reducer.currentReducerState)) { return
    } - const sel = (x: string): void => reducer.transition("select_continent", { continent: x }); + const select = (continent: string) => (): void => reducer.transition("select_continent", { continent }); return ( {reducer.currentReducerState.continents.map((x: any) => ( - ))} diff --git a/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx index adf36980f..3a642748a 100644 --- a/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.stories.tsx @@ -26,6 +26,9 @@ import { CountrySelectionScreen as TestedComponent } from './CountrySelectionScr export default { title: 'Pages/CountrySelectionScreen', component: TestedComponent, + args: { + order: 3, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, diff --git a/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx index 555622c1d..417c08633 100644 --- a/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/CountrySelectionScreen.tsx @@ -17,11 +17,15 @@ export function CountrySelectionScreen(): VNode { }); return ( - {reducer.currentReducerState.countries.map((x: any) => ( - - ))} +
    + {reducer.currentReducerState.countries.map((x: any) => ( +
    + +
    + ))} +
    ); } diff --git a/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx index 1a9462b88..e952ab28d 100644 --- a/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx @@ -26,8 +26,11 @@ import { PoliciesPayingScreen as TestedComponent } from './PoliciesPayingScreen' export default { - title: 'Pages/PoliciesPayingScreen', + title: 'Pages/backup/PoliciesPayingScreen', component: TestedComponent, + args: { + order: 8, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, diff --git a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx index 0c1842420..b5933db17 100644 --- a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx @@ -26,7 +26,10 @@ import { RecoveryFinishedScreen as TestedComponent } from './RecoveryFinishedScr export default { - title: 'Pages/RecoveryFinishedScreen', + title: 'Pages/recovery/FinishedScreen', + args: { + order: 7, + }, component: TestedComponent, argTypes: { onUpdate: { action: 'onUpdate' }, diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx index b52699e7b..91855b023 100644 --- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx @@ -26,7 +26,10 @@ import { ReviewPoliciesScreen as TestedComponent } from './ReviewPoliciesScreen' export default { - title: 'Pages/ReviewPoliciesScreen', + title: 'Pages/backup/ReviewPoliciesScreen', + args: { + order: 6, + }, component: TestedComponent, argTypes: { onUpdate: { action: 'onUpdate' }, diff --git a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx index 18560356a..49dd8fca8 100644 --- a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx @@ -26,8 +26,11 @@ import { SecretEditorScreen as TestedComponent } from './SecretEditorScreen'; export default { - title: 'Pages/SecretEditorScreen', + title: 'Pages/backup/SecretEditorScreen', component: TestedComponent, + args: { + order: 7, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, diff --git a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx index a5235d66c..f5fd7c0d1 100644 --- a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx @@ -4,9 +4,8 @@ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { useAnastasisContext } from "../../context/anastasis"; import { - AnastasisClientFrame, - LabeledInput -} from "./index"; + AnastasisClientFrame} from "./index"; +import { LabeledInput } from "../../components/fields/LabeledInput"; export function SecretEditorScreen(): VNode { const reducer = useAnastasisContext() diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx index e9c597023..f56939090 100644 --- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx @@ -26,8 +26,11 @@ import { SecretSelectionScreen as TestedComponent } from './SecretSelectionScree export default { - title: 'Pages/SecretSelectionScreen', + title: 'Pages/recovery/SecretSelectionScreen', component: TestedComponent, + args: { + order: 4, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, diff --git a/packages/anastasis-webui/src/pages/home/SolveEmailEntry.tsx b/packages/anastasis-webui/src/pages/home/SolveEmailEntry.tsx index 2c27895c2..0d70405e5 100644 --- a/packages/anastasis-webui/src/pages/home/SolveEmailEntry.tsx +++ b/packages/anastasis-webui/src/pages/home/SolveEmailEntry.tsx @@ -1,7 +1,8 @@ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { useAnastasisContext } from "../../context/anastasis"; -import { AnastasisClientFrame, LabeledInput } from "./index"; +import { AnastasisClientFrame } from "./index"; +import { LabeledInput } from "../../components/fields/LabeledInput"; import { SolveEntryProps } from "./SolveScreen"; export function SolveEmailEntry({ challenge, feedback }: SolveEntryProps): VNode { diff --git a/packages/anastasis-webui/src/pages/home/SolvePostEntry.tsx b/packages/anastasis-webui/src/pages/home/SolvePostEntry.tsx index 1a824acb8..22b8d470b 100644 --- a/packages/anastasis-webui/src/pages/home/SolvePostEntry.tsx +++ b/packages/anastasis-webui/src/pages/home/SolvePostEntry.tsx @@ -1,7 +1,8 @@ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { useAnastasisContext } from "../../context/anastasis"; -import { AnastasisClientFrame, LabeledInput } from "./index"; +import { AnastasisClientFrame } from "./index"; +import { LabeledInput } from "../../components/fields/LabeledInput"; import { SolveEntryProps } from "./SolveScreen"; export function SolvePostEntry({ challenge, feedback }: SolveEntryProps): VNode { diff --git a/packages/anastasis-webui/src/pages/home/SolveQuestionEntry.tsx b/packages/anastasis-webui/src/pages/home/SolveQuestionEntry.tsx index 72dadbe89..319289381 100644 --- a/packages/anastasis-webui/src/pages/home/SolveQuestionEntry.tsx +++ b/packages/anastasis-webui/src/pages/home/SolveQuestionEntry.tsx @@ -1,7 +1,8 @@ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { useAnastasisContext } from "../../context/anastasis"; -import { AnastasisClientFrame, LabeledInput } from "./index"; +import { AnastasisClientFrame } from "./index"; +import { LabeledInput } from "../../components/fields/LabeledInput"; import { SolveEntryProps } from "./SolveScreen"; export function SolveQuestionEntry({ challenge, feedback }: SolveEntryProps): VNode { diff --git a/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx index 69af9be42..c05c36b07 100644 --- a/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx @@ -26,8 +26,11 @@ import { SolveScreen as TestedComponent } from './SolveScreen'; export default { - title: 'Pages/SolveScreen', + title: 'Pages/recovery/SolveScreen', component: TestedComponent, + args: { + order: 6, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, diff --git a/packages/anastasis-webui/src/pages/home/SolveSmsEntry.tsx b/packages/anastasis-webui/src/pages/home/SolveSmsEntry.tsx index 163e0d1f3..c4cf3a680 100644 --- a/packages/anastasis-webui/src/pages/home/SolveSmsEntry.tsx +++ b/packages/anastasis-webui/src/pages/home/SolveSmsEntry.tsx @@ -1,7 +1,8 @@ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { useAnastasisContext } from "../../context/anastasis"; -import { AnastasisClientFrame, LabeledInput } from "./index"; +import { AnastasisClientFrame } from "./index"; +import { LabeledInput } from "../../components/fields/LabeledInput"; import { SolveEntryProps } from "./SolveScreen"; export function SolveSmsEntry({ challenge, feedback }: SolveEntryProps): VNode { diff --git a/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx index ad84cd8f2..657a2dd74 100644 --- a/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx @@ -26,6 +26,9 @@ import { StartScreen as TestedComponent } from './StartScreen'; export default { title: 'Pages/StartScreen', component: TestedComponent, + args: { + order: 1, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, diff --git a/packages/anastasis-webui/src/pages/home/StartScreen.tsx b/packages/anastasis-webui/src/pages/home/StartScreen.tsx index 6625ec5b8..c751ad9e4 100644 --- a/packages/anastasis-webui/src/pages/home/StartScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/StartScreen.tsx @@ -16,12 +16,21 @@ export function StartScreen(): VNode {
    -
    +
    - + + +
    diff --git a/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx index e2f3d521e..7568ccd69 100644 --- a/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx @@ -25,8 +25,11 @@ import { TruthsPayingScreen as TestedComponent } from './TruthsPayingScreen'; export default { - title: 'Pages/TruthsPayingScreen', + title: 'Pages/backup/__TruthsPayingScreen', component: TestedComponent, + args: { + order: 10, + }, argTypes: { onUpdate: { action: 'onUpdate' }, onBack: { action: 'onBack' }, diff --git a/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.tsx b/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.tsx index 319f590a0..098a8ba8d 100644 --- a/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/TruthsPayingScreen.tsx @@ -14,7 +14,7 @@ export function TruthsPayingScreen(): VNode { return (

    Some of the providers require a payment to store the encrypted diff --git a/packages/anastasis-webui/src/pages/home/index.tsx b/packages/anastasis-webui/src/pages/home/index.tsx index 4cec47ec8..5cef4ee9c 100644 --- a/packages/anastasis-webui/src/pages/home/index.tsx +++ b/packages/anastasis-webui/src/pages/home/index.tsx @@ -11,10 +11,7 @@ import { VNode } from "preact"; import { - useErrorBoundary, - useLayoutEffect, - useRef -} from "preact/hooks"; + useErrorBoundary} from "preact/hooks"; import { Menu } from "../../components/menu"; import { AnastasisProvider, useAnastasisContext } from "../../context/anastasis"; import { @@ -25,6 +22,7 @@ import { AttributeEntryScreen } from "./AttributeEntryScreen"; import { AuthenticationEditorScreen } from "./AuthenticationEditorScreen"; import { BackupFinishedScreen } from "./BackupFinishedScreen"; import { ChallengeOverviewScreen } from "./ChallengeOverviewScreen"; +import { ChallengePayingScreen } from "./ChallengePayingScreen"; import { ContinentSelectionScreen } from "./ContinentSelectionScreen"; import { CountrySelectionScreen } from "./CountrySelectionScreen"; import { PoliciesPayingScreen } from "./PoliciesPayingScreen"; @@ -118,9 +116,9 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode { {props.children} {!props.hideNav ? ( -

    - - {!props.hideNext ? : null} +
    + + {!props.hideNext ? : null}
    ) : null}
    @@ -222,7 +220,9 @@ const AnastasisClientImpl: FunctionalComponent = () => { ); } - + if (state.recovery_state === RecoveryStates.ChallengePaying) { + return ; + } console.log("unknown state", reducer.currentReducerState); return ( @@ -234,32 +234,6 @@ const AnastasisClientImpl: FunctionalComponent = () => { ); }; -interface LabeledInputProps { - label: string; - grabFocus?: boolean; - bind: [string, (x: string) => void]; -} - -export function LabeledInput(props: LabeledInputProps): VNode { - const inputRef = useRef(null); - useLayoutEffect(() => { - if (props.grabFocus) { - inputRef.current?.focus(); - } - }, [props.grabFocus]); - return ( - - ); -} - /** * Show a dismissible error banner if there is a current error. */ diff --git a/packages/anastasis-webui/src/scss/_custom-calendar.scss b/packages/anastasis-webui/src/scss/_custom-calendar.scss index 9ac877ce0..bff68cf79 100644 --- a/packages/anastasis-webui/src/scss/_custom-calendar.scss +++ b/packages/anastasis-webui/src/scss/_custom-calendar.scss @@ -41,6 +41,10 @@ } +.home .datePicker div { + margin-top: 0px; + margin-bottom: 0px; +} .datePicker { text-align: left; background: var(--primary-card-color); diff --git a/packages/anastasis-webui/src/utils/index.tsx b/packages/anastasis-webui/src/utils/index.tsx index d1d861469..670e229cd 100644 --- a/packages/anastasis-webui/src/utils/index.tsx +++ b/packages/anastasis-webui/src/utils/index.tsx @@ -115,15 +115,9 @@ export const reducerStatesExample = { recoverySelectCountry: {...base, recovery_state: RecoveryStates.CountrySelecting } as ReducerState, - backupSelectCountry: {...base, - backup_state: BackupStates.CountrySelecting - } as ReducerState, recoverySelectContinent: {...base, recovery_state: RecoveryStates.ContinentSelecting, } as ReducerState, - backupSelectContinent: {...base, - backup_state: BackupStates.ContinentSelecting, - } as ReducerState, secretSelection: {...base, recovery_state: RecoveryStates.SecretSelecting, } as ReducerState, @@ -136,6 +130,18 @@ export const reducerStatesExample = { challengeSolving: {...base, recovery_state: RecoveryStates.ChallengeSolving, } as ReducerState, + challengePaying: {...base, + recovery_state: RecoveryStates.ChallengePaying, + } as ReducerState, + recoveryAttributeEditing: {...base, + recovery_state: RecoveryStates.UserAttributesCollecting + } as ReducerState, + backupSelectCountry: {...base, + backup_state: BackupStates.CountrySelecting + } as ReducerState, + backupSelectContinent: {...base, + backup_state: BackupStates.ContinentSelecting, + } as ReducerState, secretEdition: {...base, backup_state: BackupStates.SecretEditing, } as ReducerState, @@ -151,7 +157,7 @@ export const reducerStatesExample = { authEditing: {...base, backup_state: BackupStates.AuthenticationsEditing } as ReducerState, - attributeEditing: {...base, + backupAttributeEditing: {...base, backup_state: BackupStates.UserAttributesCollecting } as ReducerState, truthsPaying: {...base, -- cgit v1.2.3