Add quasar-dotenv files for Slack OAuth & configure env in quasar config file; Add contextBridge for shell, used in SlackLoginWindow

Author: Shanon Lee

.env

@@ -0,0 +1,3 @@
+SLACK_CLIENT_SECRET = "6a6206cc93da2e49243ee9683f958438"
+SLACK_CLIENT_ID = "2696943977700.2696948669268"
+SLACK_REDIRECT_URI = "overvue://slack"

.env.development

@@ -0,0 +1,3 @@
+SLACK_CLIENT_SECRET = "6a6206cc93da2e49243ee9683f958438"
+SLACK_CLIENT_ID = "2696943977700.2696948669268"
+SLACK_REDIRECT_URI = "overvuedev://test"

.env.example

@@ -0,0 +1,13 @@
+#DO NOT DELETE THIS FILE, and follow instructions:
+# Required for Slack Oauth features
+# Create TWO files, one named ".env" and the second named ".env.development" in this directory, and give them the following variables
+# Any environment variables you create MUST also be created here in .env.example
+
+SLACK_CLIENT_SECRET = "ENTER_CLIENT_SECRET_HERE"
+SLACK_CLIENT_ID = "ENTER_CLIENT_ID_HERE"
+SLACK_REDIRECT_URI = "REDIRECT URL HERE"
+
+# https://www.npmjs.com/package/dotenv
+# https://www.npmjs.com/package/quasar-dotenv 
+# https://v1.quasar.dev/quasar-cli/handling-process-env 
+# https://v1.quasar.dev/quasar-cli/quasar-conf-js#using-dotenv 

package-lock.json

@@ -1,10 +1,15 @@
 {
   "name": "overvue",
-  "version": "0.0.1",
-  "description": "A Quasar Framework app",
-  "productName": "OverVue5.0",
-  "author": "",
+  "version": "5.0.0",
+  "description": "Vue Prototype DevTool",
+  "productName": "OverVue",
+  "cordovaId": "org.cordova.quasar.app",
+  "author": "Team OverVue, Team Vuetiful, Team Vuelociraptors, TeamVueTopia",
   "private": true,
+  "bugs": {
+    "url": "https://github.com/TeamOverVue/OverVue/issues"
+  },
+  "homepage": "https://github.com/TeamOverVue/OverVue",
   "scripts": {
     "lint": "eslint --ext .js,.vue ./",
     "test": "echo \"No test specified\" && exit 0",
@@ -21,6 +26,7 @@
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "quasar": "^2.0.0",
+    "quasar-dotenv": "^1.0.5",
     "vue-draggable-resizable": "^2.3.0",
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vued3tree": "^5.1.0",

package.json

@@ -11,6 +11,10 @@ const ESLintPlugin = require('eslint-webpack-plugin')
 const { configure } = require('quasar/wrappers');
 
 module.exports = configure(function (ctx) {
+  const env = ctx.dev
+    ? require("quasar-dotenv").config({ path: '.env.development' })
+    : require("quasar-dotenv").config()
+
   return {
     // https://quasar.dev/quasar-cli/supporting-ts
     supportTS: false,
@@ -46,6 +50,7 @@ module.exports = configure(function (ctx) {
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
       vueRouterMode: 'history', // available values: 'hash', 'history'
+      env: env,
       // Potential fix for fs errors
       // extendWebpack(cfg) {
       //   // cfg.target = ['electron-main', 'electron-renderer']
@@ -214,7 +219,8 @@ module.exports = configure(function (ctx) {
       // bundler: 'packager', // 'packager' or 'builder'
       bundler: 'builder',
       packager: {
-        protocols: ["overvue"], 
+        // protocols: ["overvue"], 
+        protocol: "overvue",
         appBundleId: "overvue",
         // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
 

quasar.conf.js

@@ -133,6 +133,7 @@ function createWindow () {
     useContentSize: true,
     webPreferences: {
       contextIsolation: true,
+      nodeIntegration: true,
       // More info: /quasar-cli/developing-electron-apps/electron-preload-script
       preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
     }
@@ -156,7 +157,17 @@ function createWindow () {
   })
 }
 
-app.whenReady().then(createWindow)
+// Default from quasar
+// app.whenReady().then(createWindow)
+// New 
+app.whenReady()
+  .then(() => {
+    createWindow();
+    setOauthListener();
+  })
+  .catch((err) => {
+    console.log(err);
+  })
 
 app.on('window-all-closed', () => {
   if (platform !== 'darwin') {

src-electron/electron-main.js

@@ -15,3 +15,17 @@
  *     doAThing: () => {}
  *   })
  */
+
+
+ const {ipcRenderer, shell, contextBridge} = require('electron');
+ // ipcRenderer contextBridge
+ contextBridge.exposeInMainWorld("ipcRenderer",{
+     on: (channel, func) => ipcRenderer.on(
+         channel,
+         (event, ...args) => func(args)
+     )
+ });
+
+ contextBridge.exposeInMainWorld("shell", {
+     openExternal: (url, options) => shell.openExternal(url, options)
+ })

src-electron/electron-preload.js

@@ -92,6 +92,8 @@
 // import { mapState, mapActions } from 'vuex'
 import localforage from "localforage";
 // import { shell, ipcRenderer } from "electron";
+const { ipcRenderer, shell } = window;
+
 
 export default {
   name: "SlackLoginWindow",
@@ -103,30 +105,30 @@ export default {
     };
   },
   created() {
-    // ipcRenderer.on("tokenReceived", (event, data) => {
-    //   // console.log("data in SlackLoginWindow: ", data);
-    //   // localforage.setItem('slackWebhookURL', data.incoming_webhook.url)
-    //   //   .then(data => this.closeLogin())
-    //   return this.saveToLocalForage(
-    //     "slackWebhookURL",
-    //     data.incoming_webhook.url
-    //   );
-    // });
-    // ipcRenderer.on("slackUser", (event, user) => {
-    //   // console.log("user received in SlackLoginWindow: ", user);
-    //   // localforage.setItem('slackUser', user)
-    //   //   .then(data => this.closeLogin())
-    //   //   .catch(err => {
-    //   //     console.log('localforage caught an error when trying to set slackUser: ', err)
-    //   //     this.errorMessage = err
-    //   //   })
-    //   return this.saveToLocalForage("slackUser", user);
-    // });
-    // ipcRenderer.on("slackError", (event, err) => {
-    //   // console.log("err received in SlackLoginWindow: ", err);
-    //   this.printErrorMessage();
-    // });
-    // // console.log(`process.env: ${process.env}`);
+    ipcRenderer.on("tokenReceived", (event, data) => {
+      // console.log("data in SlackLoginWindow: ", data);
+      // localforage.setItem('slackWebhookURL', data.incoming_webhook.url)
+      //   .then(data => this.closeLogin())
+      return this.saveToLocalForage(
+        "slackWebhookURL",
+        data.incoming_webhook.url
+      );
+    });
+    ipcRenderer.on("slackUser", (event, user) => {
+      // console.log("user received in SlackLoginWindow: ", user);
+      // localforage.setItem('slackUser', user)
+      //   .then(data => this.closeLogin())
+      //   .catch(err => {
+      //     console.log('localforage caught an error when trying to set slackUser: ', err)
+      //     this.errorMessage = err
+      //   })
+      return this.saveToLocalForage("slackUser", user);
+    });
+    ipcRenderer.on("slackError", (event, err) => {
+      // console.log("err received in SlackLoginWindow: ", err);
+      this.printErrorMessage();
+    });
+    // console.log(`process.env: ${process.env}`);
   },
   methods: {
     slackOauth: function() {