From e045fb171055164885e2dd29b0aefa9bcfff6987 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Thu, 14 Oct 2021 23:53:48 +0200
Subject: [PATCH] feat: Introduce openWithPopup auth step

---
 packages/backend/src/apps/twitter/info.json   |  7 ++-
 .../src/components/AddAppConnection/index.tsx | 48 ++++++++++++++++---
 2 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/packages/backend/src/apps/twitter/info.json b/packages/backend/src/apps/twitter/info.json
index f42a5363..6cdbe542 100644
--- a/packages/backend/src/apps/twitter/info.json
+++ b/packages/backend/src/apps/twitter/info.json
@@ -84,7 +84,12 @@
       "step": 3,
       "type": "openWithPopup",
       "name": "openTwitterAuthPopup",
-      "fields": null
+      "fields": [
+        {
+          "name": "url",
+          "value": "{createAuthLink.url}"
+        }
+      ]
     }
   ]
 }
diff --git a/packages/web/src/components/AddAppConnection/index.tsx b/packages/web/src/components/AddAppConnection/index.tsx
index aad286c9..223e6f45 100644
--- a/packages/web/src/components/AddAppConnection/index.tsx
+++ b/packages/web/src/components/AddAppConnection/index.tsx
@@ -1,4 +1,5 @@
-import { useApolloClient, useMutation  } from '@apollo/client';
+import { useEffect } from 'react';
+import { useApolloClient } from '@apollo/client';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
@@ -21,12 +22,31 @@ type Response = {
   [key: string]: any;
 }
 
+const BASE_URL = 'http://localhost:3001';
+
+const parseData = (event: any) => {
+  // Do we trust the sender of this message? (might be
+  // different from what we originally opened, for example).
+  if (event.origin !== BASE_URL) {
+    return;
+  }
+
+  return new URLSearchParams(event.data);
+};
+
 export default function AddAppConnection(props: AddAppConnectionProps){
   const { application, onClose } = props;
   const { key, fields, authenticationSteps } = application;
 
   const apollo = useApolloClient();
 
+  useEffect(() => {
+    if (window.opener) {
+      window.opener.postMessage(window.location.search);
+      window.close();
+    }
+  });
+
   const submitHandler: SubmitHandler<FieldValues> = async (data) => {
     const response: Response = {
       key,
@@ -34,15 +54,29 @@ export default function AddAppConnection(props: AddAppConnectionProps){
     };
 
     for await (const authenticationStep of authenticationSteps) {
-      const mutation = MUTATIONS[authenticationStep.name as string];
       const variables = computeAuthStepVariables(authenticationStep, response);
 
-      const mutationResponse: any = await apollo.mutate({
-        mutation,
-        variables,
-      });
+      if (authenticationStep.type === 'mutation') {
+        const mutation = MUTATIONS[authenticationStep.name as string];
 
-      response[authenticationStep.name] = mutationResponse.data[authenticationStep.name];
+        const mutationResponse: any = await apollo.mutate({
+          mutation,
+          variables,
+        });
+
+        const responseData = mutationResponse.data[authenticationStep.name];
+        response[authenticationStep.name] = responseData;
+      }
+
+      if (authenticationStep.type === 'openWithPopup') {
+        const windowFeatures = 'toolbar=no, menubar=no, width=600, height=700, top=100, left=100';
+        const url = variables.url;
+
+        const popup: any = window.open(url, '_blank', windowFeatures);
+        popup?.focus();
+
+        window.addEventListener('message', parseData, false);
+      }
     }
   };