diff --git a/packages/main/src/backend/eventEmitters/EventEmitter.ts b/packages/main/src/backend/eventEmitters/EventEmitter.ts index 04152c19..d63289b0 100644 --- a/packages/main/src/backend/eventEmitters/EventEmitter.ts +++ b/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; diff --git a/packages/preload/src/eventsBridge.ts b/packages/preload/src/eventsBridge.ts index d11af647..e84142bf 100644 --- a/packages/preload/src/eventsBridge.ts +++ b/packages/preload/src/eventsBridge.ts @@ -91,3 +91,7 @@ export async function electronGoogleOAuth2Connector(): Promise { export async function createSpreadsheet(spreadsheetId: string, credentials: Credentials): Promise { return electron.ipcRenderer.invoke('createSpreadsheet', spreadsheetId, credentials); } + +export function sendOTPResponse(input: string) { + electron.ipcRenderer.invoke('get-otp-response', input); +} diff --git a/packages/renderer/src/components/GetOtp.tsx b/packages/renderer/src/components/GetOtp.tsx new file mode 100644 index 00000000..91d97bda --- /dev/null +++ b/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(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) => { + setInputText(e.target.value); + }; + + const sendInput = async (e: React.MouseEvent) => { + e.preventDefault(); + + closeModal(inputText); + }; + + if (!configStore.getOtp) { + return null; + } + + return ( + + + + + + + + ); +}; + +export default observer(GetOtp); diff --git a/packages/renderer/src/store/ConfigStore.tsx b/packages/renderer/src/store/ConfigStore.tsx index 49e5dcb0..6975b272 100644 --- a/packages/renderer/src/store/ConfigStore.tsx +++ b/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; @@ -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) {