Merge pull request #170 from simple-login/mac-app2

Communicate with Mac host app

.github/workflows/release.yaml

@@ -78,7 +78,7 @@ jobs:
     strategy:
       max-parallel: 4
       matrix:
-        variant: ['full', 'lite']
+        variant: ['full', 'lite', 'mac']
 
     steps:
       - name: Build info
@@ -136,6 +136,14 @@ jobs:
           npm run build
           npm run build-zip
 
+      - name: Build Mac version
+        if: matrix.variant == 'mac'
+        shell: bash
+        run: |
+          npm install
+          npm run build:mac
+          npm run build-zip
+
       - name: Package extension
         run: |
           ZIP_NAME=$(find dist-zip -type f -name '*.zip' | head -n 1)

README.md

@@ -74,6 +74,12 @@ In order to build the extension yourself, please follow these steps:
 
 - (Optional, only useful for beta build) Build beta version: change `betaRev` in `package.json`, then generate zip file using
 
+## How to build a version for Mac
+
+For the development, you can run `npm run start:mac` for the Mac app.
+
+For the production release, `npm run build:mac`
+
 ```bash
 npm run build:beta && npm run build-zip
 ```

package.json

@@ -13,11 +13,13 @@
     "build:lite": "cross-env NODE_ENV=production LITE=1 webpack",
     "build:beta": "cross-env NODE_ENV=production BETA=1 webpack",
     "build:dev": "cross-env NODE_ENV=development BETA=1 webpack",
+    "build:mac": "cross-env NODE_ENV=production MAC=1 webpack",
     "build-zip": "node scripts/build-zip.js",
     "generate:buildconfig": "node scripts/generateBuildConfig.js",
     "watch": "npm run build -- --watch",
     "watch:dev": "cross-env HMR=true npm run build:dev -- --watch",
-    "start": "cross-env HMR=true npm run build:dev -- --watch"
+    "start": "cross-env HMR=true npm run build:dev -- --watch",
+    "start:mac": "cross-env HMR=true MAC=1 npm run build:dev -- --watch"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",

src/popup/components/AppSettings.vue

@@ -5,6 +5,18 @@
         App Settings ({{ userEmail }})
       </p>
 
+      <div v-if="freeAccount">
+        <small>
+          Currently you have a free SimpleLogin account. Upgrade your account to
+          create unlimited aliases, add more mailboxes, create aliases
+          on-the-fly with your domain or SimpleLogin subdomain and more.
+        </small>
+        <button @click="upgrade" class="btn btn-primary btn-sm">
+          Upgrade your SimpleLogin account
+        </button>
+        <hr />
+      </div>
+
       <table class="settings-list">
         <tr>
           <td>
@@ -27,7 +39,9 @@
                 v-show="showSLButton"
                 target="_blank"
               >
-                <br /><font-awesome-icon icon="bug" /> Report an issue
+                <br />
+                <font-awesome-icon icon="bug" />
+                Report an issue
               </a>
             </small>
           </td>
@@ -114,6 +128,7 @@ export default {
       extension_version: "development",
       userEmail: "",
       theme: "",
+      freeAccount: false,
       THEMES,
       THEME_LABELS,
     };
@@ -136,6 +151,11 @@ export default {
       API_ON_ERR.TOAST
     );
     this.userEmail = userInfo.data.email;
+    if (userInfo.data.in_trial) {
+      this.freeAccount = true;
+    } else {
+      this.freeAccount = !userInfo.data.is_premium;
+    }
   },
   methods: {
     async handleToggleSLButton() {
@@ -165,6 +185,16 @@ export default {
       await SLStorage.remove(SLStorage.SETTINGS.API_KEY);
       EventManager.broadcast(EventManager.EVENT.SETTINGS_CHANGED);
       Navigation.clearHistoryAndNavigateTo(Navigation.PATH.LOGIN);
+
+      if (process.env.MAC) {
+        console.log("send log out event to host app");
+        await browser.runtime.sendNativeMessage(
+          "application.id",
+          JSON.stringify({
+            logged_out: {},
+          })
+        );
+      }
     },
 
     async setMailToUri() {
@@ -175,6 +205,22 @@ export default {
       );
       this.reportURISLButton = `mailto:extension@simplelogin.io?subject=${subject}&body=${body}`;
     },
+    async upgrade() {
+      if (process.env.MAC) {
+        console.log("send upgrade event to host app");
+        await browser.runtime.sendNativeMessage(
+          "application.id",
+          JSON.stringify({
+            upgrade: {},
+          })
+        );
+      } else {
+        console.info("can't send data to native app", error);
+        let apiUrl = await SLStorage.get(SLStorage.SETTINGS.API_URL);
+        let upgradeURL = apiUrl + "/dashboard/pricing";
+        browser.tabs.create({ url: upgradeURL });
+      }
+    },
   },
   computed: {},
   watch: {

src/popup/components/Main.vue

@@ -93,14 +93,19 @@
           class="btn btn-outline-primary btn-sm"
           @click="createRandomAlias"
         >
-          <font-awesome-icon icon="random" /> OR create a totally random alias
+          <font-awesome-icon icon="random" />
+          OR create a totally random alias
         </button>
       </div>
 
       <div v-if="!canCreate">
         <p class="text-danger" style="font-size: 14px">
           You have reached limit number of email aliases in free plan, please
-          <a :href="apiUrl + '/dashboard/pricing'" target="_blank">upgrade</a>
+          <span
+            @click="upgrade"
+            style="cursor: pointer; color: blue; text-decoration: underline"
+            >upgrade</span
+          >
           or reuse one of the existing aliases.
         </p>
       </div>
@@ -257,6 +262,21 @@ export default {
     this.apiUrl = await SLStorage.get(SLStorage.SETTINGS.API_URL);
     this.apiKey = await SLStorage.get(SLStorage.SETTINGS.API_KEY);
 
+    if (this.apiKey && process.env.MAC) {
+      console.log("send api key to host app");
+      await browser.runtime.sendNativeMessage(
+        "application.id",
+        JSON.stringify({
+          logged_in: {
+            data: {
+              api_key: this.apiKey,
+              api_url: this.apiUrl,
+            },
+          },
+        })
+      );
+    }
+
     this.contentElem = document.querySelector(".app > .content");
 
     await this.getUserOptions();
@@ -503,6 +523,22 @@ export default {
       Navigation.navigateTo(Navigation.PATH.REVERSE_ALIAS, true);
     },
 
+    async upgrade() {
+      if (process.env.MAC) {
+        console.log("send upgrade event to host app");
+        await browser.runtime.sendNativeMessage(
+          "application.id",
+          JSON.stringify({
+            upgrade: {},
+          })
+        );
+      } else {
+        console.info("can't send data to native app", error);
+        let upgradeURL = this.apiUrl + "/dashboard/pricing";
+        browser.tabs.create({ url: upgradeURL });
+      }
+    },
+
     // Clipboard
     clipboardSuccessHandler({ value, event }) {
       Utils.showSuccess(value + " copied to clipboard");

webpack.config.js

@@ -138,6 +138,10 @@ const config = {
               jsonContent.short_name = "SimpleLogin Without SL icon";
             }
 
+            if (process.env.MAC) {
+              jsonContent.permissions.push("nativeMessaging");
+            }
+
             return JSON.stringify(jsonContent, null, 2);
           },
         },
@@ -155,6 +159,14 @@ if (config.mode === 'development') {
   ]);
 }
 
+if (process.env.MAC){
+  config.plugins = (config.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env.MAC': JSON.stringify(!!process.env.MAC),
+    }),
+  ]);
+}
+
 if (config.mode === 'production') {
   config.plugins = (config.plugins || []).concat([
     new webpack.DefinePlugin({