merge with slack Oauth

Author: Jeffrey Sul

.gitignore

@@ -1,3 +1,7 @@
+#secret Api keys, Webhook URLs etc
+slackApiStuff.js
+.env
+#
 .quasar
 .DS_Store
 .thumbs.db
@@ -32,4 +36,7 @@ build/
 dist/
 node_modules/
 aws-exports.js
-awsconfiguration.json
+awsconfiguration.json
+
+#secret Api keys, Webhook URLs etc
+slackApiStuff.js

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "overvue",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Vue Prototype DevTool",
   "productName": "OverVue",
   "cordovaId": "org.cordova.quasar.app",
@@ -26,6 +26,8 @@
     "aws-amplify-vue": "^0.2.13",
     "aws-appsync": "^1.8.1",
     "dot-prop": "^6.0.0",
+    "dotenv": "^10.0.0",
+    "electron-deeplink": "^1.0.8",
     "fs-extra": "^8.1.0",
     "localforage": "^1.7.3",
     "lodash": "^4.17.21",
@@ -59,6 +61,8 @@
     "electron-builder": "^22.11.10",
     "electron-debug": "^3.0.1",
     "electron-devtools-installer": "^2.2.4",
+    "electron-is-dev": "^2.0.0",
+    "electron-packager": "^14.2.1",
     "eslint": "^7.32.0",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-vue": "^5.0.0",

package.json

@@ -2,6 +2,7 @@
 // https://quasar.dev/quasar-cli/quasar-conf-js
 
 module.exports = function (ctx) {
+  console.log('webpack\'s context parameter: ', ctx)
   return {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
@@ -158,7 +159,7 @@ module.exports = function (ctx) {
     },
 
     electron: {
-      bundler: 'builder',
+      bundler: 'packager',
       // bundler: 'builder', // or 'packager'
 
       extendWebpack (cfg) {
@@ -170,10 +171,10 @@ module.exports = function (ctx) {
         // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
 
         // OS X / Mac App Store
-        // appBundleId: '',
+        appBundleId: 'overvue',
         // appCategoryType: '',
         // osxSign: '',
-        // protocol: 'myapp://path',
+        protocol: 'overvue'
 
         // Windows only
         // win32metadata: { ... }
@@ -185,7 +186,13 @@ module.exports = function (ctx) {
         appId: 'com.electron.OverVue',
         win: {
           target: 'nsis'
-        }
+        },
+        protocols: [
+          {
+            name: 'overvue',
+            schemes: ['overvue']
+          }
+        ]
       }
     }
   }

quasar.conf.js

@@ -0,0 +1,10 @@
+create a file, slackApiStuff.js, in this directory for sensitive variables like api keys, webhook urls, etc 
+and make it similar to this:
+
+const slackApiStuff = {};
+slackApiStuff.slackWebhookURL =
+  "ENTER WEBHOOK HERE";
+
+slackApiStuff.oauthURL = 'ENTER OAUTH URL HERE';
+
+export default slackApiStuff;

secretStuff/secretStuff_instructions.txt

@@ -1,21 +1,157 @@
-import { app, BrowserWindow } from 'electron'
+import { app, BrowserWindow, net, shell, ipcMain } from "electron";
+import { Deeplink } from "electron-deeplink";
+import isDev from "electron-is-dev";
+
+import slackApiStuff from "../../secretStuff/slackApiStuff";
+
+const clientId = slackApiStuff.clientId;
+const clientSecret = slackApiStuff.clientSecret;
+import dotenv from "dotenv";
+dotenv.config();
 
 /**
  * Set `__statics` path to static files in production;
  * The reason we are setting it here is that the path needs to be evaluated at runtime
  */
 if (process.env.PROD) {
-  global.__statics = require('path')
-    .join(__dirname, 'statics')
-    .replace(/\\/g, '\\\\')
+  global.__statics = require("path")
+    .join(__dirname, "statics")
+    .replace(/\\/g, "\\\\");
 }
 
-let mainWindow
+let mainWindow;
+let authCode;
+
+function logEverywhere(toBeLogged) {
+  if (isDev) {
+    console.log(toBeLogged);
+  } else {
+    console.log(toBeLogged);
+    if (mainWindow && mainWindow.webContents) {
+      mainWindow.webContents.executeJavaScript(
+        'console.log("' + toBeLogged + '" )'
+      );
+    }
+  }
+}
+
+const protocol = isDev ? "overvuedev" : "overvue";
+const deeplink = new Deeplink({
+  app,
+  mainWindow,
+  protocol,
+  isDev,
+  debugLogging: true,
+  electronPath: "../../node_modules/electron/dist/electron.exe"
+});
+// ipcMain.handle('slackAuth', slackAuth)
+
+// function customDeepLink() {
+//   let deeplinkingUrl;
+
+//   if (isDev && process.platform === 'win32') {
+//     // Set the path of electron.exe and your app.
+//     // These two additional parameters are only available on windows.
+//     // Setting this is required to get this working in dev mode.
+//     app.setAsDefaultProtocolClient('overvuedev', process.execPath, [
+//       resolve(process.argv[1])
+//     ]);
+//   } else {
+//     app.setAsDefaultProtocolClient('overvue');
+//   }
+
+//   app.on('open-url', function (event, url) {
+//     event.preventDefault();
+//     deeplinkingUrl = url;
+//   });
+
+//   // Force single application instance
+//   const gotTheLock = app.requestSingleInstanceLock();
 
-function createWindow () {
+//   if (!gotTheLock) {
+//     app.quit();
+//     return;
+//   } else {
+//     app.on('second-instance', (e, argv) => {
+//       if (process.platform !== 'darwin') {
+//         // Find the arg that is our custom protocol url and store it
+//         deeplinkingUrl = argv.find((arg) => arg.startsWith('overvuedev://test'));
+//       }
+
+//       if (myWindow) {
+//         if (myWindow.isMinimized()) myWindow.restore();
+//         myWindow.focus();
+//       }
+//     })
+//   }
+// }
+
+function getSlackAuth() {
+  logEverywhere("inside getSlackAuth");
+
+  const authData = {
+    client_id: clientId,
+    client_secret: clientSecret,
+    code: authCode,
+    redirect_uri: isDev ? "overvuedev://test" : "overvue://slack"
+  };
+  logEverywhere(authData.code);
+  // https://slack.com/api/openid.connect.token?client_id=2696943977700.2696948669268&client_secret=6a6206cc93da2e49243ee9683f958438&code=2696943977700.2713919388452.23b787dec24adec68eeca105f6b7d6e517425de1033a1b6bc5ba3e116b933619&redirect_uri=overvue://slack
+  const url =
+    "https://slack.com/api/openid.connect.token?" +
+    "client_id=" +
+    authData.client_id +
+    "&client_secret=" +
+    authData.client_secret +
+    "&code=" +
+    authData.code +
+    "&grant_type=authorization_key" +
+    "&redirect_uri=" +
+    authData.redirect_uri;
+  logEverywhere(url);
+  const request = net.request({
+    method: "POST",
+    url: url,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded"
+      // 'Content-Length': authData.length
+    }
+  });
+
+  request.on("response", response => {
+    let body;
+    logEverywhere("RESPONSE RECEIVED SON");
+    mainWindow.webContents.send("tokenReceived", response);
+    // logEverywhere('STATUS: ', response.statusCode)
+    // logEverywhere(`HEADERS: ${JSON.stringify(response.headers)}`)
+    response.on("data", data => {
+      // logEverywhere(`response.on datas CHUNK: ${chunk}`)
+      logEverywhere("chunked");
+      logEverywhere(data);
+      body = data;
+    });
+    response.on("end", () => {
+      logEverywhere("Response ended ");
+      mainWindow.webContents.send("tokenReceived", body);
+    });
+  });
+  request.end();
+}
+
+function getSlackToken() {
+  return deeplink.on("received", link => {
+    logEverywhere(`auth worked here link: ${link}`);
+    // authCode = link.split("=")[1];
+    authCode = link.split("=")[1].split(".")[2];
+    getSlackAuth();
+  });
+}
+
+function createWindow() {
   /**
    * Initial window options
    */
+
   mainWindow = new BrowserWindow({
     width: 1000,
     height: 600,
@@ -24,25 +160,32 @@ function createWindow () {
       nodeIntegration: true,
       webSecurity: false
     }
-  })
+  });
 
-  mainWindow.loadURL(process.env.APP_URL)
+  logEverywhere(`current protocol ${deeplink.getProtocol()}`);
+  mainWindow.loadURL(process.env.APP_URL);
 
-  mainWindow.on('closed', () => {
-    mainWindow = null
-  })
+  mainWindow.on("closed", () => {
+    mainWindow = null;
+  });
 }
 
-app.on('ready', createWindow)
+app.on("ready", () => {
+  createWindow();
+  getSlackToken();
+  logEverywhere(`process.env.CLIENT_ID:  ${process.env.CLIENT_ID}`);
+});
 
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
   }
-})
+});
 
-app.on('activate', () => {
+app.on("activate", () => {
   if (mainWindow === null) {
-    createWindow()
+    createWindow();
+    getSlackToken();
+    logEverywhere(`process.env:  ${process.env}`);
   }
-})
+});

src-electron/main-process/electron-main.js

@@ -16,6 +16,10 @@ import fs from 'fs-extra'
 const { remote } = require('electron')
 const Mousetrap = require('mousetrap')
 
+// might not be optimal to import like this, since entire slackApiStuff object is imported while only one of its properties is used
+import slackApiStuff from '../../../secretStuff/slackApiStuff.js'
+const slackWebhookURL = slackApiStuff.slackWebhookURL
+
 export default {
   name: 'SaveProjetComponent',
   methods: {
@@ -110,8 +114,29 @@ export default {
           //   console.log('saved ', fileName, 'to local forage')
           //   console.log('result is', result)
           // })
+
         // console.log('PROJECT SAVED AS A JSON OBJECT!')
+        this.notifySlack()
       }
+    },
+    // creates a popup dialog box, where if you click on yes, it will send a message to our test Slack workspace
+    // still must refactor to dynamically work with user's Slack
+    notifySlack () {
+      remote.dialog.showMessageBox({
+        title: 'Notify Slack?',
+        message: 'Save successful. Would you like to notify your team on Slack?',
+        buttons: ['No', 'Yes'],
+        defaultId: 1
+      },
+      response => {
+        if (response === 1) {
+          fetch(slackWebhookURL, {
+            method: 'POST',
+            body: JSON.stringify({ 'text': 'A team member saved an OverVue project file!' }),
+            headers: { 'Content-Type': 'application/json' }
+          })
+        }
+      })
     }
   },
   // on components creation these key presses will trigger save project