[Rebase] Warn users on possible risks on installing third party unvetted plugins (#676)

Co-authored-by: Marco Rodolfi <marco.rodolfi.1992@gmail.com>

1 files changed, 78 insertions, 0 deletions

diff --git a/frontend/src/components/modals/WarnThirdParty.tsx b/frontend/src/components/modals/WarnThirdParty.tsx
new file mode 100644
index 00000000..e7ff4561
--- /dev/null
+++ b/frontend/src/components/modals/WarnThirdParty.tsx
@@ -0,0 +1,78 @@
+import { ConfirmModal } from '@decky/ui';
+import { FC, useEffect, useState } from 'react';
+import { FaExclamationTriangle } from 'react-icons/fa';
+
+import { WarnThirdPartyType } from '../../utils/globalTypes';
+import TranslationHelper, { TranslationClass } from '../../utils/TranslationHelper';
+
+interface WarnThirdPartyProps {
+  seconds?: number;
+  type: WarnThirdPartyType;
+  onOK(): void;
+  onCancel(): void;
+  closeModal?(): void;
+}
+
+const WarnThirdParty: FC<WarnThirdPartyProps> = ({ seconds = 5, type, onOK, onCancel, closeModal }) => {
+  const [waitTimer, setWaitTimer] = useState(seconds);
+
+  useEffect(() => {
+    // exit early when we reach 0
+    if (waitTimer <= 0) return;
+
+    // save intervalId to clear the interval when the
+    // component re-renders
+    const intervalId = setInterval(() => {
+      setWaitTimer(waitTimer - 1);
+    }, 1000);
+
+    // clear interval on re-render to avoid memory leaks
+    return () => clearInterval(intervalId);
+    // add waitTimer as a dependency to re-rerun the effect
+    // when we update it
+  }, [waitTimer]);
+
+  return (
+    <ConfirmModal
+      bOKDisabled={waitTimer > 0}
+      closeModal={closeModal}
+      onOK={async () => {
+        await onOK();
+      }}
+      onCancel={async () => {
+        await onCancel();
+      }}
+      strTitle={
+        <div>
+          <FaExclamationTriangle />
+          <TranslationHelper transClass={TranslationClass.WARN_THIRD_PARTY} transText="title" warnType={type} />
+        </div>
+      }
+      strOKButtonText={
+        waitTimer > 0 ? (
+          <div>
+            <TranslationHelper
+              transClass={TranslationClass.WARN_THIRD_PARTY}
+              transText="button_processing"
+              i18nArgs={{
+                timer: waitTimer,
+              }}
+            />
+          </div>
+        ) : (
+          <div>
+            <TranslationHelper transClass={TranslationClass.WARN_THIRD_PARTY} transText="button_idle" />
+          </div>
+        )
+      }
+    >
+      <span style={{ color: 'red' }}>
+        <div>
+          <TranslationHelper transClass={TranslationClass.WARN_THIRD_PARTY} transText="desc" warnType={type} />
+        </div>
+      </span>
+    </ConfirmModal>
+  );
+};
+
+export default WarnThirdParty;