New: Add the Otp Modal

packages/main/src/backend/eventEmitters/EventEmitter.ts

@@ -11,6 +11,7 @@ export enum EventNames {
   IMPORTER_ERROR = 'IMPORTER_ERROR',
   IMPORTER_END = 'IMPORTER_END',
   IMPORT_PROCESS_END = 'IMPORT_PROCESS_END',
+  GET_OTP = 'GET_OTP',
   EXPORT_PROCESS_START = 'EXPORT_PROCESS_START',
   EXPORTER_START = 'EXPORTER_START',
   EXPORTER_PROGRESS = 'EXPORTER_PROGRESS',
@@ -131,6 +132,7 @@ export interface EventDataMap {
   [EventNames.IMPORTER_PROGRESS]: ImporterEvent;
   [EventNames.IMPORTER_ERROR]: ImporterEvent;
   [EventNames.IMPORTER_END]: ImporterEvent;
+  [EventNames.GET_OTP]: undefined;
   [EventNames.IMPORT_PROCESS_END]: undefined;
   [EventNames.EXPORT_PROCESS_START]: undefined;
   [EventNames.EXPORT_PROCESS_END]: undefined;

packages/preload/src/eventsBridge.ts

@@ -91,3 +91,7 @@ export async function electronGoogleOAuth2Connector(): Promise<Credentials> {
 export async function createSpreadsheet(spreadsheetId: string, credentials: Credentials): Promise<string> {
   return electron.ipcRenderer.invoke('createSpreadsheet', spreadsheetId, credentials);
 }
+
+export function sendOTPResponse(input: string) {
+  electron.ipcRenderer.invoke('get-otp-response', input);
+}

packages/renderer/src/components/GetOtp.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import { Button, FormControl, Modal } from 'react-bootstrap';
+import { observer } from 'mobx-react-lite';
+import { useConfigStore } from '/@/store/ConfigStore';
+import { sendOTPResponse } from '#preload';
+
+const GetOtp = () => {
+  const configStore = useConfigStore();
+  const [modalStatus, setModalStatus] = useState<boolean>(false);
+  const [inputText, setInputText] = useState('');
+
+  const closeModal = (inputText = '') => {
+    sendOTPResponse(inputText);
+    setModalStatus(false);
+  };
+
+  useEffect(() => {
+    if (configStore.getOtp !== undefined) {
+      setModalStatus(configStore.getOtp);
+    }
+  }, [configStore.getOtp]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputText(e.target.value);
+  };
+
+  const sendInput = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    closeModal(inputText);
+  };
+
+  if (!configStore.getOtp) {
+    return null;
+  }
+
+  return (
+    <Modal show={modalStatus} onHide={closeModal}>
+      <Modal.Header closeButton></Modal.Header>
+      <Modal.Body>
+        <FormControl
+          type="text"
+          placeholder="Enter text here"
+          value={inputText}
+          onChange={handleInputChange}
+          className="mb-3"
+        />
+        <Button variant="dark" name="send-report" type="submit" onClick={sendInput}>
+          הכנס קוד
+        </Button>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default observer(GetOtp);

packages/renderer/src/store/ConfigStore.tsx

@@ -71,6 +71,7 @@ export class ConfigStore {
   config: Config;
 
   chromeDownloadPercent = 0;
+  getOtp: boolean | undefined = undefined;
 
   // TODO: move this to a separate store
   accountScrapingData: Map<CompanyTypes | OutputVendorName, AccountScrapingData>;
@@ -155,6 +156,9 @@ export class ConfigStore {
     if (eventName === 'DOWNLOAD_CHROME') {
       this.updateChromeDownloadPercent((budgetTrackingEvent as DownloadChromeEvent)?.percent);
     }
+    if (eventName == 'GET_OTP') {
+      this.getOtp = true;
+    }
     if (budgetTrackingEvent) {
       const accountId = budgetTrackingEvent.vendorId;
       if (accountId) {