add Reverse-alias screen

src/popup/APIService.js

@@ -29,6 +29,7 @@ const API_ROUTE = {
   TOGGLE_ALIAS: { method: "POST", path: "/api/aliases/:alias_id/toggle" },
   EDIT_ALIAS: { method: "PUT", path: "/api/aliases/:alias_id" },
   DELETE_ALIAS: { method: "DELETE", path: "/api/aliases/:alias_id" },
+  CREATE_REVERSE_ALIAS: { method: "POST", path: "/api/aliases/:alias_id/contacts" },
   GET_API_KEY_FROM_COOKIE: { method: "POST", path: "/api/api_key" },
 };
 

src/popup/App.scss

@@ -159,6 +159,14 @@ em {
 .btn-svg {
   cursor: pointer;
   padding: 5px;
+  display: inline;
+}
+
+/* send btn*/
+.btn-send {
+  width: 14px;
+  height: 14px;
+  color: #b02a8f;
 }
 
 /* more options */

src/popup/App.vue

@@ -18,6 +18,7 @@ import SelfHostSetting from "./components/SelfHostSetting";
 import ApiKeySetting from "./components/ApiKeySetting";
 import Main from "./components/Main";
 import NewAliasResult from "./components/NewAliasResult";
+import ReverseAlias from "./components/ReverseAlias";
 import AppSettings from "./components/AppSettings";
 import Utils from "./Utils";
 import APIService from "./APIService";
@@ -30,6 +31,7 @@ const components = {
   ApiKeySetting,
   Main,
   NewAliasResult,
+  ReverseAlias,
   AppSettings,
 };
 

src/popup/Navigation.js

@@ -7,6 +7,7 @@ const PATH = {
   LOGIN: "/login",
   API_KEY_SETTING: "/api-key-setting",
   SELF_HOST_SETTING: "/self-host-setting",
+  REVERSE_ALIAS: "/reverse-alias",
   APP_SETTINGS: "/app-settings",
 };
 
@@ -39,6 +40,10 @@ class Navigation {
         path: Navigation.PATH.NEW_ALIAS_RESULT,
         component: components.NewAliasResult,
       },
+      {
+        path: Navigation.PATH.REVERSE_ALIAS,
+        component: components.ReverseAlias,
+      },
       {
         path: Navigation.PATH.APP_SETTINGS,
         component: components.AppSettings,

src/popup/components/AliasMoreOptions.vue

@@ -38,7 +38,7 @@
         From Name
         <font-awesome-icon
           v-b-tooltip.hover.top="
-            'This name is used when you send or reply from alias'
+            'This name is used when you send or reply from alias. You may need to use a pseudonym because the receiver can see it.'
           "
           icon="question-circle"
         />

src/popup/components/Main.vue

@@ -166,6 +166,10 @@
                     @change="toggleAlias(alias)"
                   />
 
+                  <div class="btn-svg btn-send" @click="goToReverseAlias(alias)">
+                    <font-awesome-icon icon="paper-plane" />
+                  </div>
+
                   <img
                     src="/images/icon-dropdown.svg"
                     v-if="alias"
@@ -493,6 +497,12 @@ export default {
       }
     },
 
+    // Reverse Alias
+    goToReverseAlias(alias) {
+      SLStorage.setTemporary("alias", alias);
+      Navigation.navigateTo(Navigation.PATH.REVERSE_ALIAS, true);
+    },
+
     // Clipboard
     clipboardSuccessHandler({ value, event }) {
       Utils.showSuccess(value + " copied to clipboard");

src/popup/components/ReverseAlias.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="content ">
+    <div class="p-2 container">
+      <!-- Reverse-alias screen -->
+      <div class="m-2 p-2" v-if="!createdReverseAlias">
+        <p>Create reverse-alias for <span class="font-weight-bold">{{ alias.email }}</span></p>
+        <small>
+          To send an email from your alias to a contact, you need to create a reverse-alias, a special email address. When you send an email to the reverse-alias, the email will be sent from your alias to the contact.<br/><br/>
+          This Youtube video can also quickly walk you through the steps: <a href="https://www.youtube.com/watch?v=VsypF-DBaow" target="_blank" rel="noopener noreferrer">How to send emails from an alias</a>
+        </small>
+        <br/><br/>
+        <label>
+          Receiver:
+          <font-awesome-icon
+            v-b-tooltip.hover.top="
+              'Where do you want to send the email?'
+            "
+            icon="question-circle"
+          />
+        </label>
+        <b-input
+          v-model="receiverEmail"
+          placeholder="First Last &lt;email@example.com&gt;"
+          :disabled="loading"
+        />
+      </div>
+
+      <!-- Created screen -->
+      <div class="m-2 p-2" v-else>
+        <p class="font-weight-bold">Reverse-alias is created:</p>
+        <p>
+          <a
+            v-clipboard="() => createdReverseAlias.reverse_alias_address"
+            v-clipboard:success="clipboardSuccessHandler"
+            v-clipboard:error="clipboardErrorHandler"
+            v-b-tooltip.hover
+            title="Click to Copy"
+            class="cursor"
+          >
+            <span class="text-success">
+              {{ createdReverseAlias.reverse_alias_address }}
+            </span>
+          </a>
+        </p>
+        <small>
+          Emails sent to this address will be forwarded to <b>{{ createdReverseAlias.contact }}</b>. The receiver will see <b>{{ alias.email }}</b> as your email.<br/>
+          You can use this reverse-alias from one of these mailbox(es):<br/>
+          <ul>
+            <li v-for="mailbox in alias.mailboxes" v-bind:key="mailbox.id">{{ mailbox.email }}</li>
+          </ul>
+        </small>
+      </div>
+
+      <div class="m-2 p-2">
+        <button
+          class="btn btn-sm btn-primary"
+          @click="createReverseAlias"
+          :disabled="loading || !receiverEmail"
+          v-if="!createdReverseAlias"
+        >
+          Create a reverse-alias
+        </button>
+
+        <button
+          class="btn btn-sm btn-primary"
+          @click="backToMainPage"
+          v-else
+        >
+          <font-awesome-icon icon="arrow-left" />
+          Back
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SLStorage from "../SLStorage";
+import Navigation from "../Navigation";
+import Utils from "../Utils";
+import { callAPI, API_ROUTE, API_ON_ERR } from "../APIService";
+
+export default {
+  data() {
+    return {
+      alias: SLStorage.getTemporary("alias"),
+      createdReverseAlias: null,
+      loading: false,
+      receiverEmail: '',
+    };
+  },
+  methods: {
+    // Clipboard
+    clipboardSuccessHandler({ value, event }) {
+      Utils.showSuccess(value + " copied to clipboard");
+    },
+
+    clipboardErrorHandler({ value, event }) {
+      console.error("error", value);
+    },
+
+    // Create reverse-alias
+    async createReverseAlias() {
+      const { data } = await callAPI(
+        API_ROUTE.CREATE_REVERSE_ALIAS,
+        {
+          alias_id: this.alias.id,
+        },
+        {
+          contact: this.receiverEmail,
+        },
+        API_ON_ERR.TOAST
+      );
+      this.createdReverseAlias = data;
+      console.log(this.createdReverseAlias)
+      this.loading = false;
+    },
+
+    backToMainPage() {
+      Navigation.navigateBack();
+    },
+  },
+  computed: {},
+};
+</script>

src/popup/popup.js

@@ -26,6 +26,8 @@ import {
   faBug,
   faQuestionCircle,
   faCog,
+  faPaperPlane,
+  faArrowLeft,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -39,7 +41,9 @@ library.add(
   faSave,
   faBug,
   faQuestionCircle,
-  faCog
+  faCog,
+  faPaperPlane,
+  faArrowLeft
 );
 
 global.browser = require("webextension-polyfill");