aboutsummaryrefslogtreecommitdiff
path: root/packages/anastasis-webui
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2021-11-10 18:10:45 -0300
committerSebastian <sebasjm@gmail.com>2021-11-10 18:11:12 -0300
commit0ac7433ea7fa952c46062daef1c3de535d92b7f3 (patch)
tree42ac2856ef47073113bc3c30c600bdf1d6fd73bb /packages/anastasis-webui
parentea13e19ece2deeb4ab9731373f68b1dcf5b6fa88 (diff)
confirm personal information fix #7090
Diffstat (limited to 'packages/anastasis-webui')
-rw-r--r--packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx25
-rw-r--r--packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx58
-rw-r--r--packages/anastasis-webui/src/pages/home/ConfirmModal.tsx52
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>
+ );
+}