confirm personal information fix #7090

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>
+  );
+}