Update packages.

src/onboarding/Onboarding.vue

@@ -67,12 +67,12 @@
             <img
               v-if="isChrome"
               src="../images/chrome-permission-screenshot.png"
-              style="width: 400px;"
+              style="width: 400px"
             />
             <img
               v-else
               src="../images/firefox-permission-screenshot.png"
-              style="width: 400px;"
+              style="width: 400px"
             />
 
             <p>
@@ -84,7 +84,7 @@
             <img
               alt="SimpleLogin Button demo"
               src="../images/sl-button-demo.png"
-              style="width: 400px;"
+              style="width: 400px"
               class="mb-3"
             />
 
@@ -106,7 +106,7 @@
             <button
               @click="nextStep()"
               class="btn"
-              style="color: #888; font-size: 0.8em;"
+              style="color: #888; font-size: 0.8em"
             >
               Skip
             </button>
@@ -119,20 +119,20 @@
               <img
                 alt="SimpleLogin"
                 src="../images/icon-simplelogin.png"
-                style="height: 1.2em;"
+                style="height: 1.2em"
               />
               icon at the corner of your browser.
             </p>
             <p
               v-if="isChrome"
               class="alert alert-primary"
-              style="border-left: 5px #467fcf solid;"
+              style="border-left: 5px #467fcf solid"
             >
               Note: this icon maybe hidden under
               <img
                 alt="Extension Menu"
                 src="../images/icon-puzzle.png"
-                style="height: 1.2em;"
+                style="height: 1.2em"
               />
               button.
             </p>

src/popup/components/AliasMoreOptions.vue

@@ -29,7 +29,7 @@
       <textarea-autosize
         placeholder="Note, can be anything to help you remember why you created this alias. This field is optional."
         class="form-control"
-        style="width: 100%;"
+        style="width: 100%"
         v-model="moreOptions.note"
         :disabled="loading"
       ></textarea-autosize>
@@ -69,7 +69,7 @@
 
         <button
           class="btn btn-sm btn-delete"
-          style="color: #dc3545;"
+          style="color: #dc3545"
           v-on:click="handleClickDelete"
           :disabled="loading"
         >

src/popup/components/Header.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="header">
-    <div class="row mt-2 pb-2 ml-3 mr-2" style="border-bottom: 1px #eee solid;">
+    <div class="row mt-2 pb-2 ml-3 mr-2" style="border-bottom: 1px #eee solid">
       <div>
         <div
           v-on:click="navigateBack()"
           v-bind:class="{ back: canBack }"
-          style="display: inline-block;"
+          style="display: inline-block"
         >
           <img
             v-if="canBack"
             src="/images/back-button.svg"
-            style="height: 20px;"
+            style="height: 20px"
           />
           <img
             class="sl-logo"
             src="/images/horizontal-logo.svg"
-            style="height: 18px;"
+            style="height: 18px"
           />
         </div>
         <div class="beta-badge" v-if="isBeta">BETA</div>
@@ -53,7 +53,7 @@
           :href="apiUrl + '/dashboard/'"
           target="_blank"
           class="dashboard-btn float-right"
-          style="padding: 0.25rem 0.5rem; font-size: 0.875rem;"
+          style="padding: 0.25rem 0.5rem; font-size: 0.875rem"
           title="Dashboard"
           v-b-tooltip.hover
           :disabled="!useCompactLayout"

src/popup/components/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <!-- Login/register screen -->
-    <div v-if="!isShowMfa" class="p-6 container" style="min-height: 350px;">
+    <div v-if="!isShowMfa" class="p-6 container" style="min-height: 350px">
       <h1 class="h5 mb-3">
         Welcome to
         <a href="https://simplelogin.io" target="_blank"
@@ -52,7 +52,7 @@
     <!-- END Login/register screen -->
 
     <!-- MFA screen -->
-    <div v-else class="p-6 container" style="min-height: 350px;">
+    <div v-else class="p-6 container" style="min-height: 350px">
       <div class="p-3">
         <div class="mb-2">
           Your account is protected with Two Factor Authentication. <br />
@@ -63,7 +63,7 @@
           <p>Please enter the 2FA code from your 2FA authenticator</p>
         </div>
 
-        <div style="margin: auto;">
+        <div style="margin: auto">
           <input
             v-model="mfaCode"
             v-on:keyup.enter="submitMfaCode"

src/popup/components/Main.vue

@@ -5,7 +5,7 @@
     <!-- Main Page -->
     <div class="container">
       <div v-if="recommendation.show" class="text-center">
-        <div class="" style="font-size: 14px;">
+        <div class="" style="font-size: 14px">
           You created this alias on this website before:
         </div>
         <div class="flex-grow-1">
@@ -15,21 +15,21 @@
             v-clipboard:error="clipboardErrorHandler"
             class="cursor"
           >
-            <span class="text-success recommended-alias">{{ recommendation.alias }}</span>
+            <span class="text-success recommended-alias">{{
+              recommendation.alias
+            }}</span>
           </a>
         </div>
 
         <hr />
       </div>
 
-
-
       <div>
         <form @submit.prevent="createCustomAlias">
           <div class="row mb-2">
             <div
               class="col align-self-start input-group-sm"
-              style="padding-right: 0;"
+              style="padding-right: 0"
             >
               <input
                 v-model="aliasPrefix"
@@ -43,7 +43,7 @@
 
             <div
               class="col align-self-start input-group-sm"
-              style="padding-left: 5px; padding-right: 5px;"
+              style="padding-left: 5px; padding-right: 5px"
             >
               <select
                 v-model="signedSuffix"
@@ -62,15 +62,15 @@
 
             <button
               :disabled="loading || !canCreate"
-              style="margin-right: 15px;"
+              style="margin-right: 15px"
               class="btn btn-primary btn-sm align-self-start"
             >
               Create
             </button>
           </div>
           <div
             class="row text-danger"
-            style="font-size: 12px;"
+            style="font-size: 12px"
             v-if="aliasPrefixError != ''"
           >
             <div class="col">
@@ -80,25 +80,25 @@
         </form>
       </div>
 
-      <div class="mb-1 text-center" v-if="aliasPrefix" style="font-size: 14px;">
+      <div class="mb-1 text-center" v-if="aliasPrefix" style="font-size: 14px">
         You're about to create alias
         <span class="text-primary">{{ aliasPrefix }}{{ signedSuffix[0] }}</span>
       </div>
 
       <hr />
       <div class="text-center">
         <button
-            :disabled="loading || !canCreate"
-            style="margin-left: 15px;"
-            class="btn btn-outline-primary btn-sm"
-            @click="createRandomAlias"
+          :disabled="loading || !canCreate"
+          style="margin-left: 15px"
+          class="btn btn-outline-primary btn-sm"
+          @click="createRandomAlias"
         >
           <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;">
+        <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>
           or reuse one of the existing aliases.
@@ -111,7 +111,7 @@
           OR use an existing alias
         </div>
 
-        <div class="mx-auto" style="max-width: 60%;">
+        <div class="mx-auto" style="max-width: 60%">
           <input
             v-model="searchString"
             v-on:keyup.enter="loadAlias"
@@ -125,7 +125,7 @@
               v-if="searchString"
               @click="resetSearch"
               class="float-right"
-              style="color: blue; border: none; padding: 0; background: none;"
+              style="color: blue; border: none; padding: 0; background: none"
             >
               Reset
             </button>
@@ -142,14 +142,13 @@
                   v-clipboard="() => alias.email"
                   v-clipboard:success="clipboardSuccessHandler"
                   v-clipboard:error="clipboardErrorHandler"
-
                 >
                   <a class="cursor" v-b-tooltip.hover.top="'Click to Copy'">
                     {{ alias.email }}
                   </a>
                   <div class="list-item-email-fade" />
                 </div>
-                <div style="white-space: nowrap;">
+                <div style="white-space: nowrap">
                   <toggle-button
                     :value="alias.enabled"
                     color="#b02a8f"
@@ -184,7 +183,7 @@
                 {{ alias.note }}
               </div>
 
-              <div class="font-weight-lighter" style="font-size: 11px;">
+              <div class="font-weight-lighter" style="font-size: 11px">
                 {{ alias.nb_forward }} forwards, {{ alias.nb_reply }} replies,
                 {{ alias.nb_block }} blocks.
               </div>
@@ -205,7 +204,7 @@
       <div v-if="isFetchingAlias" class="text-secondary mx-auto text-center">
         <img
           src="/images/loading-three-dots.svg"
-          style="width: 80px; margin: 20px;"
+          style="width: 80px; margin: 20px"
         />
       </div>
     </div>
@@ -220,7 +219,7 @@ import EventManager from "../EventManager";
 import Navigation from "../Navigation";
 import AliasMoreOptions from "./AliasMoreOptions";
 import { callAPI, API_ROUTE, API_ON_ERR } from "../APIService";
-import tippy from 'tippy.js';
+import tippy from "tippy.js";
 
 const ALIAS_PREFIX_REGEX = /^[0-9a-z-_.]+$/;
 
@@ -296,9 +295,9 @@ export default {
 
       await this.loadAlias();
 
-      tippy('.recommended-alias', {
-        content: 'Click to copy',
-        placement: 'bottom',
+      tippy(".recommended-alias", {
+        content: "Click to copy",
+        placement: "bottom",
       });
     },
 

src/popup/components/NewAliasResult.vue

@@ -39,7 +39,7 @@
           <a
             @click="doNotAskRateAgain"
             class="text-secondary cursor"
-            style="font-size: 0.7em;"
+            style="font-size: 0.7em"
           >
             Do not ask again
           </a>
@@ -56,7 +56,7 @@ import EventManager from "../EventManager";
 import Utils from "../Utils";
 import AliasMoreOptions from "./AliasMoreOptions";
 import { callAPI, API_ROUTE, API_ON_ERR } from "../APIService";
-import tippy from 'tippy.js';
+import tippy from "tippy.js";
 
 export default {
   components: {
@@ -77,9 +77,9 @@ export default {
     // TODO showVoteScreen 1 day after user installed plugin
     else this.showVoteScreen = Utils.getRandomIntBetween(0, 10) % 2 === 0;
 
-    tippy('.new-alias', {
-      content: 'Click to copy',
-      trigger: 'manual',
+    tippy(".new-alias", {
+      content: "Click to copy",
+      trigger: "manual",
       showOnCreate: true,
     });
   },

src/popup/components/ReverseAlias.vue

@@ -61,7 +61,7 @@
         </p>
         <small>
           You can send email from one of these mailbox(es):
-          <ul style="margin-bottom: 0;">
+          <ul style="margin-bottom: 0">
             <li v-for="mailbox in alias.mailboxes" v-bind:key="mailbox.id">
               {{ mailbox.email }}
             </li>

src/popup/components/SelfHostSetting.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="mb-2">The default API URL is https://app.simplelogin.io</div>
 
-      <div style="margin: auto;">
+      <div style="margin: auto">
         <input
           v-model="apiUrl"
           v-on:keyup.enter="saveApiUrl"

src/popup/components/SplashScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" style="height: 400px;">
+  <div v-if="show" style="height: 400px">
     <div class="splash overlay">
       <div class="overlay-content">
         <img class="logo" src="/images/horizontal-logo.svg" /><br />