[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, 29 insertions, 15 deletions

diff --git a/frontend/src/components/settings/pages/general/StoreSelect.tsx b/frontend/src/components/settings/pages/general/StoreSelect.tsx
index 9cc7d5c9..80bc4930 100644
--- a/frontend/src/components/settings/pages/general/StoreSelect.tsx
+++ b/frontend/src/components/settings/pages/general/StoreSelect.tsx
@@ -1,17 +1,21 @@
-import { Dropdown, Field, TextField } from '@decky/ui';
+import { Dropdown, Field, TextField, showModal } from '@decky/ui';
 import { FunctionComponent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaShapes } from 'react-icons/fa';
 
 import Logger from '../../../../logger';
 import { Store } from '../../../../store';
+import { WarnThirdPartyType } from '../../../../utils/globalTypes';
 import { useSetting } from '../../../../utils/hooks/useSetting';
+import WarnThirdParty from '../../../modals/WarnThirdParty';
 
 const logger = new Logger('StoreSelect');
 
 const StoreSelect: FunctionComponent<{}> = () => {
   const [selectedStore, setSelectedStore] = useSetting<Store>('store', Store.Default);
   const [selectedStoreURL, setSelectedStoreURL] = useSetting<string | null>('store-url', null);
+  const [acceptedWarning, setAcceptedWarning] = useSetting<boolean>('store_select.warn.third_party', false);
+  const waitTime = acceptedWarning ? 0 : 5;
   const { t } = useTranslation();
   const tStores = [
     t('StoreSelect.store_channel.default'),
@@ -38,20 +42,30 @@ const StoreSelect: FunctionComponent<{}> = () => {
           }}
         />
       </Field>
-      {selectedStore == Store.Custom && (
-        <Field
-          label={t('StoreSelect.custom_store.label')}
-          indentLevel={1}
-          description={
-            <TextField
-              label={t('StoreSelect.custom_store.url_label')}
-              value={selectedStoreURL || undefined}
-              onChange={(e) => setSelectedStoreURL(e?.target.value || null)}
-            />
-          }
-          icon={<FaShapes style={{ display: 'block' }} />}
-        ></Field>
-      )}
+      {selectedStore == Store.Custom &&
+        showModal(
+          <WarnThirdParty
+            type={WarnThirdPartyType.REPO}
+            seconds={waitTime}
+            onOK={() => {
+              setAcceptedWarning(true);
+            }}
+            onCancel={() => setSelectedStore(Store.Default)}
+          />,
+        ) && (
+          <Field
+            label={t('StoreSelect.custom_store.label')}
+            indentLevel={1}
+            description={
+              <TextField
+                label={t('StoreSelect.custom_store.url_label')}
+                value={selectedStoreURL || undefined}
+                onChange={(e) => setSelectedStoreURL(e?.target.value || null)}
+              />
+            }
+            icon={<FaShapes style={{ display: 'block' }} />}
+          ></Field>
+        )}
     </>
   );
 };