diff --git a/src/popup/APIService.js b/src/popup/APIService.js index caceee1..9e7b766 100644 --- a/src/popup/APIService.js +++ b/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" }, }; diff --git a/src/popup/App.scss b/src/popup/App.scss index a4362a0..7ded3be 100644 --- a/src/popup/App.scss +++ b/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 */ diff --git a/src/popup/App.vue b/src/popup/App.vue index cbcf310..7716489 100644 --- a/src/popup/App.vue +++ b/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, }; diff --git a/src/popup/Navigation.js b/src/popup/Navigation.js index 1bba2ab..cc769f0 100644 --- a/src/popup/Navigation.js +++ b/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, diff --git a/src/popup/components/AliasMoreOptions.vue b/src/popup/components/AliasMoreOptions.vue index 38bfa74..8f159eb 100644 --- a/src/popup/components/AliasMoreOptions.vue +++ b/src/popup/components/AliasMoreOptions.vue @@ -38,7 +38,7 @@ From Name diff --git a/src/popup/components/Main.vue b/src/popup/components/Main.vue index 3ff52b0..d1984c1 100644 --- a/src/popup/components/Main.vue +++ b/src/popup/components/Main.vue @@ -166,6 +166,10 @@ @change="toggleAlias(alias)" /> +
+ +
+ +
+
+ +
+

Create reverse-alias for {{ alias.email }}

+ + 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.

+ This Youtube video can also quickly walk you through the steps: How to send emails from an alias +
+

+ + +
+ + +
+

Reverse-alias is created:

+

+ + + {{ createdReverseAlias.reverse_alias_address }} + + +

+ + Emails sent to this address will be forwarded to {{ createdReverseAlias.contact }}. The receiver will see {{ alias.email }} as your email.
+ You can use this reverse-alias from one of these mailbox(es):
+
    +
  • {{ mailbox.email }}
  • +
+
+
+ +
+ + + +
+
+
+ + + diff --git a/src/popup/popup.js b/src/popup/popup.js index 2a407f5..794a992 100644 --- a/src/popup/popup.js +++ b/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");