confirm personal information fix #7090

1 files changed, 52 insertions, 0 deletions

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