diff options
Diffstat (limited to 'packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx')
-rw-r--r-- | packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx new file mode 100644 index 000000000..4df99db9a --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx @@ -0,0 +1,55 @@ +/* eslint-disable @typescript-eslint/camelcase */ +import { h, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { AnastasisReducerApi, ReducerStateRecovery, ReducerStateBackup } from "../../hooks/use-anastasis-reducer"; +import { AnastasisClientFrame, withProcessLabel, LabeledInput } from "./index"; + +export function AttributeEntryScreen(props: AttributeEntryProps): VNode { + const { reducer, reducerState: backupState } = props; + const [attrs, setAttrs] = useState<Record<string, string>>( + props.reducerState.identity_attributes ?? {} + ); + return ( + <AnastasisClientFrame + title={withProcessLabel(reducer, "Select Country")} + onNext={() => reducer.transition("enter_user_attributes", { + identity_attributes: attrs, + })} + > + {backupState.required_attributes.map((x: any, i: number) => { + return ( + <AttributeEntryField + key={i} + isFirst={i == 0} + setValue={(v: string) => setAttrs({ ...attrs, [x.name]: v })} + spec={x} + value={attrs[x.name]} /> + ); + })} + </AnastasisClientFrame> + ); +} + +interface AttributeEntryProps { + reducer: AnastasisReducerApi; + reducerState: ReducerStateRecovery | ReducerStateBackup; +} + +export interface AttributeEntryFieldProps { + isFirst: boolean; + value: string; + setValue: (newValue: string) => void; + spec: any; +} + +export function AttributeEntryField(props: AttributeEntryFieldProps): VNode { + return ( + <div> + <LabeledInput + grabFocus={props.isFirst} + label={props.spec.label} + bind={[props.value, props.setValue]} + /> + </div> + ); +} |