diff options
Diffstat (limited to 'packages/anastasis-webui')
3 files changed, 73 insertions, 62 deletions
diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx index 0918c2db5..4b26c38b7 100644 --- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx @@ -6,6 +6,7 @@ import { DateInput } from "../../components/fields/DateInput"; import { PhoneNumberInput } from "../../components/fields/NumberInput"; import { TextInput } from "../../components/fields/TextInput"; import { useAnastasisContext } from "../../context/anastasis"; +import { ConfirmModal } from "./ConfirmModal"; import { AnastasisClientFrame, withProcessLabel } from "./index"; export function AttributeEntryScreen(): VNode { @@ -18,6 +19,7 @@ export function AttributeEntryScreen(): VNode { const [attrs, setAttrs] = useState<Record<string, string>>( currentIdentityAttributes, ); + const [askUserIfSure, setAskUserIfSure] = useState(false); if (!reducer) { return <div>no reducer in context</div>; @@ -51,12 +53,25 @@ export function AttributeEntryScreen(): VNode { <AnastasisClientFrame title={withProcessLabel(reducer, "Who are you?")} hideNext={hasErrors ? "Complete the form." : undefined} - onNext={() => - reducer.transition("enter_user_attributes", { - identity_attributes: attrs, - }) - } + onNext={async () => setAskUserIfSure(true) } > + {askUserIfSure ? ( + <ConfirmModal + active + onCancel={() => setAskUserIfSure(false)} + description="You can not forget what you had entered" + label="I am sure" + cancelLabel="Wait, I want to check" + onConfirm={() => reducer.transition("enter_user_attributes", { + identity_attributes: attrs, + })} + > + You personal information is used to define the location where your + secret will be safely stored. If you forget what you have entered or + if there is a misspell you will be unable to recover your secret again. + </ConfirmModal> + ) : null} + <div class="columns" style={{ maxWidth: "unset" }}> <div class="column">{fieldList}</div> <div class="column"> diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx index 1ef326773..2da7d52f3 100644 --- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx @@ -10,6 +10,7 @@ import { isKnownAuthMethods, KnownAuthMethods, } from "./authMethod"; +import { ConfirmModal } from "./ConfirmModal"; import { AnastasisClientFrame } from "./index"; const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>; @@ -246,60 +247,3 @@ function AuthMethodNotImplemented(props: AuthMethodSetupProps): VNode { ); } -function ConfirmModal({ - active, - description, - onCancel, - onConfirm, - children, - danger, - disabled, - label = "Confirm", -}: ConfirmModelProps): VNode { - return ( - <div class={active ? "modal is-active" : "modal"}> - <div class="modal-background " onClick={onCancel} /> - <div class="modal-card" style={{ maxWidth: 700 }}> - <header class="modal-card-head"> - {!description ? null : ( - <p class="modal-card-title"> - <b>{description}</b> - </p> - )} - <button class="delete " aria-label="close" onClick={onCancel} /> - </header> - <section class="modal-card-body">{children}</section> - <footer class="modal-card-foot"> - <button class="button" onClick={onCancel}> - Dismiss - </button> - <div class="buttons is-right" style={{ width: "100%" }}> - <button - class={danger ? "button is-danger " : "button is-info "} - disabled={disabled} - onClick={onConfirm} - > - {label} - </button> - </div> - </footer> - </div> - <button - class="modal-close is-large " - aria-label="close" - onClick={onCancel} - /> - </div> - ); -} - -interface ConfirmModelProps { - active?: boolean; - description?: string; - onCancel?: () => void; - onConfirm?: () => void; - label?: string; - children?: ComponentChildren; - danger?: boolean; - disabled?: boolean; -} diff --git a/packages/anastasis-webui/src/pages/home/ConfirmModal.tsx b/packages/anastasis-webui/src/pages/home/ConfirmModal.tsx new file mode 100644 index 000000000..cab70de63 --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/ConfirmModal.tsx @@ -0,0 +1,52 @@ +import { ComponentChildren, h, VNode } from "preact"; + +export interface ConfirmModelProps { + active?: boolean; + description?: string; + onCancel?: () => void; + onConfirm?: () => void; + label?: string; + cancelLabel?: string; + children?: ComponentChildren; + danger?: boolean; + disabled?: boolean; +} + +export function ConfirmModal({ + active, description, onCancel, onConfirm, children, danger, disabled, label = "Confirm", cancelLabel = "Dismiss" +}: ConfirmModelProps): VNode { + return ( + <div class={active ? "modal is-active" : "modal"}> + <div class="modal-background " onClick={onCancel} /> + <div class="modal-card" style={{ maxWidth: 700 }}> + <header class="modal-card-head"> + {!description ? null : ( + <p class="modal-card-title"> + <b>{description}</b> + </p> + )} + <button class="delete " aria-label="close" onClick={onCancel} /> + </header> + <section class="modal-card-body">{children}</section> + <footer class="modal-card-foot"> + <button class="button" onClick={onCancel}> + {cancelLabel} + </button> + <div class="buttons is-right" style={{ width: "100%" }}> + <button + class={danger ? "button is-danger " : "button is-info "} + disabled={disabled} + onClick={onConfirm} + > + {label} + </button> + </div> + </footer> + </div> + <button + class="modal-close is-large " + aria-label="close" + onClick={onCancel} /> + </div> + ); +} |