Upgrade dependencies

.jshintrc

@@ -1,3 +1,3 @@
 {
-  "esversion": 8
+  "esversion": 9
 }

package.json

@@ -9,9 +9,9 @@
     "prettier": "prettier \"src/**/*.{js,vue}\"",
     "prettier:write": "npm run prettier -- --write",
     "prettier:check": "prettier --check \"src/**/*.{js,vue}\"",
-    "build": "cross-env NODE_ENV=production webpack --hide-modules",
-    "build:beta": "cross-env NODE_ENV=production BETA=1 webpack --hide-modules",
-    "build:dev": "cross-env NODE_ENV=development BETA=1 webpack --hide-modules",
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:beta": "cross-env NODE_ENV=production BETA=1 webpack",
+    "build:dev": "cross-env NODE_ENV=development BETA=1 webpack",
     "build-zip": "node scripts/build-zip.js",
     "watch": "npm run build -- --watch",
     "watch:dev": "cross-env HMR=true npm run build:dev -- --watch",
@@ -23,18 +23,17 @@
     "@fortawesome/vue-fontawesome": "^0.1.10",
     "@sentry/browser": "^5.25.0",
     "@sentry/integrations": "^5.30.0",
-    "axios": "^0.21.3",
-    "bootstrap": "^4.5.2",
+    "axios": "^0.27.2",
+    "bootstrap": "^4.6.1",
     "bootstrap-vue": "^2.21.2",
-    "tippy.js": "^6.3.2",
+    "tippy.js": "^6.3.7",
     "v-clipboard": "^2.2.3",
     "vue": "^2.6.14",
     "vue-js-modal": "^1.3.35",
     "vue-js-toggle-button": "^1.3.3",
     "vue-router": "^3.5.2",
-    "vue-textarea-autosize": "^1.1.1",
     "vue-toasted": "^1.1.28",
-    "webextension-polyfill": "^0.6.0"
+    "webextension-polyfill": "^0.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",
@@ -44,21 +43,21 @@
     "@babel/runtime-corejs3": "^7.4.0",
     "archiver": "^3.0.0",
     "babel-loader": "^8.0.2",
-    "copy-webpack-plugin": "^4.5.3",
-    "core-js": "^3.0.1",
+    "copy-webpack-plugin": "^6.4.1",
+    "core-js": "^3.22.7",
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",
-    "ejs": "^2.6.1",
-    "file-loader": "^1.1.11",
+    "ejs": "^3.1.8",
+    "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^0.4.4",
-    "prettier": "^2.0.5",
+    "prettier": "^2.6.2",
     "sass": "^1.52.1",
     "sass-loader": "^10.1.1",
     "vue-loader": "^15.4.2",
     "vue-template-compiler": "^2.6.14",
     "web-ext-types": "^2.1.0",
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.2",
-    "webpack-extension-reloader": "^1.1.0"
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-extension-reloader": "^1.1.4"
   }
 }

src/popup/components/AliasMoreOptions.vue

@@ -1,3 +1,10 @@
+<!--
+Original implementation:
+https://github.com/devstark-com/vue-textarea-autosize/blob/8e767ea21863b3e8607b1808b89e7b5a0e3aa98c/src/components/TextareaAutosize.vue
+
+MIT License
+-->
+
 <template>
   <expand-transition>
     <div class="more-options" v-if="show">
@@ -26,13 +33,13 @@
       </div>
 
       <label>Alias Note</label>
-      <textarea-autosize
+      <TextareaAutosize
         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>
+      ></TextareaAutosize>
 
       <label>
         From Name
@@ -69,7 +76,7 @@
 
         <button
           class="btn btn-sm btn-delete"
-          style="color: #dc3545;"
+          style="color: #dc3545"
           v-on:click="handleClickDelete"
           :disabled="loading"
         >
@@ -83,10 +90,8 @@
 
 <script>
 import Utils from "../Utils";
-import SLStorage from "../SLStorage";
-import EventManager from "../EventManager";
-import Navigation from "../Navigation";
 import ExpandTransition from "./ExpandTransition";
+import TextareaAutosize from "./TextareaAutosize";
 import { callAPI, API_ROUTE, API_ON_ERR } from "../APIService";
 
 export default {
@@ -112,6 +117,7 @@ export default {
     },
   },
   components: {
+    TextareaAutosize,
     "expand-transition": ExpandTransition,
   },
   data() {

src/popup/components/AppSettings.vue

@@ -62,7 +62,7 @@
 
       <div
         class="font-weight-light"
-        style="position: fixed; bottom: 0; right: 2px; font-size: 0.8rem;"
+        style="position: fixed; bottom: 0; right: 2px; font-size: 0.8rem"
       >
         Version: {{ extension_version }}
       </div>

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">
@@ -29,7 +29,7 @@
           <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,7 +80,7 @@
         </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>
@@ -89,7 +89,7 @@
       <div class="text-center">
         <button
           :disabled="loading || !canCreate"
-          style="margin-left: 15px;"
+          style="margin-left: 15px"
           class="btn btn-outline-primary btn-sm"
           @click="createRandomAlias"
         >
@@ -98,7 +98,7 @@
       </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>
@@ -148,7 +148,7 @@
                   </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"
@@ -183,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>
@@ -204,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>

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>

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 />