Initial commit

anonaddy · Oct 7, 2019 · a312587 · a312587
commit a312587
Show file tree

Hide file tree

Showing 18 changed files with 11,285 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+dist-zip
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+dist/
+dist-zip/
+node_modules/
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "semi": false
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# Anonymous Email Forwarding
+
+This is the source code for the AnonAddy browser extension.
diff --git a/mix-manifest.json b/mix-manifest.json
@@ -0,0 +1,6 @@
+{
+    "/dist/app.js": "/dist/app.js",
+    "/dist/app.css": "/dist/app.css",
+    "/dist/app.html": "/dist/app.html",
+    "/dist/manifest.json": "/dist/manifest.json"
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "anonaddy-extension",
+  "version": "1.0.0",
+  "description": "AnonAddy browser extension.",
+  "main": "app.js",
+  "scripts": {
+    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "build": "npm run production && npm run zip",
+    "format": "prettier --write 'src/assets/**/*.{css,js,vue}'",
+    "zip": "node scripts/build-zip.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "archiver": "^3.1.1",
+    "husky": "^3.0.8",
+    "laravel-mix": "^5.0.0",
+    "laravel-mix-purgecss": "^4.2.0",
+    "lint-staged": "^9.4.1",
+    "postcss-import": "^12.0.1",
+    "postcss-nesting": "^7.0.1",
+    "prettier": "^1.18.2",
+    "tailwindcss": "^1.1.2",
+    "v-clipboard": "^2.2.2",
+    "vue": "^2.6.10",
+    "vue-template-compiler": "^2.6.10",
+    "webextension-polyfill": "^0.5.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{css,js,vue}": [
+      "npm run format --",
+      "git add"
+    ]
+  }
+}
diff --git a/scripts/build-zip.js b/scripts/build-zip.js
@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+const fs = require('fs')
+const path = require('path')
+// eslint-disable-next-line
+var archiver = require('archiver')
+
+const extPackageJson = require('../package.json')
+
+const DEST_DIR = path.join(__dirname, '../dist')
+const DEST_ZIP_DIR = path.join(__dirname, '../dist-zip')
+
+const extractExtensionData = () => ({
+  name: extPackageJson.name,
+  version: extPackageJson.version,
+})
+
+const makeDestZipDirIfNotExists = () => {
+  if (!fs.existsSync(DEST_ZIP_DIR)) {
+    fs.mkdirSync(DEST_ZIP_DIR)
+  }
+}
+
+const buildZip = (src, dist, zipFilename) => {
+  console.info(`Building ${zipFilename}...`)
+
+  const output = fs.createWriteStream(path.join(dist, zipFilename))
+  const archive = archiver('zip')
+  archive.pipe(output)
+  archive.directory(src, false)
+  archive.finalize()
+}
+
+const main = () => {
+  const { name, version } = extractExtensionData()
+  const zipFilename = `${name}-v${version}.zip`
+
+  makeDestZipDirIfNotExists()
+
+  buildZip(DEST_DIR, DEST_ZIP_DIR, zipFilename)
+}
+
+main()
diff --git a/src/app.html b/src/app.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link href="./app.css" rel="stylesheet">
+  </head>
+  <body class="bg-indigo-900">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="app"></div>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/src/assets/css/app.css b/src/assets/css/app.css
@@ -0,0 +1,14 @@
+@tailwind base;
+
+html {
+  @apply font-sans;
+  font-size: 14px;
+}
+
+body {
+  width: 348px;
+}
+
+@tailwind components;
+
+@tailwind utilities;
diff --git a/src/assets/img/icon.png b/src/assets/img/icon.png
diff --git a/src/assets/img/icon@2x.png b/src/assets/img/icon@2x.png
diff --git a/src/assets/js/app.js b/src/assets/js/app.js
@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import App from './components/App.vue'
+import Clipboard from 'v-clipboard'
+
+// Mozilla's polyfill
+window.browser = require('webextension-polyfill')
+
+Vue.use(Clipboard)
+
+new Vue({
+  el: '#app',
+  render: h => h(App),
+})
diff --git a/src/assets/js/components/App.vue b/src/assets/js/components/App.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="px-3 pb-3 pt-4">
+    <div v-if="!apiToken">
+      <input
+        v-model="tokenInput"
+        type="text"
+        name="token"
+        placeholder="Enter your API token..."
+        required="required"
+        autofocus="autofocus"
+        class="appearance-none bg-white rounded-sm w-full p-2 text-grey-700 focus:shadow-outline mb-3"
+      />
+
+      <p v-if="error" class="text-white text-xs italic mb-3">
+        {{ error }}
+      </p>
+
+      <button
+        @click="saveApiToken"
+        class="px-3 py-2 w-full text-sm text-cyan-900 font-semibold bg-cyan-400 hover:bg-cyan-300 border border-transparent rounded-sm focus:outline-none"
+      >
+        Add API Token
+      </button>
+
+      <p class="w-full text-xs text-center text-indigo-100 mt-3">
+        Don't have an account?
+        <a
+          href="https://app.anonaddy.com/register"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+          class="text-white hover:text-indigo-50 cursor-pointer"
+        >
+          Register
+        </a>
+      </p>
+    </div>
+
+    <div v-else>
+      <div v-if="newAlias" class="text-white text-sm mb-3">
+        {{ newAlias }}
+      </div>
+
+      <p v-if="error" class="text-white text-xs italic mb-3">
+        {{ error }}
+      </p>
+
+      <button
+        v-if="newAlias"
+        v-clipboard="() => newAlias"
+        v-clipboard:success="clipboardSuccess"
+        v-clipboard:error="clipboardError"
+        class="px-3 py-2 w-full text-sm text-cyan-900 font-semibold bg-cyan-400 hover:bg-cyan-300 border border-transparent rounded-sm focus:outline-none"
+      >
+        {{ clipboardButtonText }}
+      </button>
+
+      <button
+        v-else
+        @click="generateAlias"
+        class="px-3 py-2 w-full text-sm text-cyan-900 font-semibold bg-cyan-400 hover:bg-cyan-300 border border-transparent rounded-sm focus:outline-none"
+        :class="loading ? 'cursor-not-allowed' : ''"
+        :disabled="loading"
+      >
+        Generate UUID Alias
+        <loader v-if="loading" />
+      </button>
+
+      <p class="w-full text-xs text-center text-indigo-100 mt-3">
+        <a @click="deleteApiToken" class="text-grey-50 hover:text-indigo-50 cursor-pointer">
+          Logout
+        </a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import Loader from './Loader'
+
+export default {
+  name: 'app',
+  components: {
+    Loader,
+  },
+  data() {
+    return {
+      tokenInput: '',
+      apiToken: '',
+      currentTabHostname: '',
+      loading: false,
+      newAlias: '',
+      clipboardButtonText: 'Copy To Clipboard',
+      error: '',
+    }
+  },
+  async mounted() {
+    this.apiToken = await this.getApiToken()
+    this.currentTabHostname = await this.getCurrentTabHostname()
+  },
+  watch: {
+    apiToken: {
+      async handler(val) {
+        try {
+          await browser.storage.sync.set({ apiToken: val })
+        } catch (error) {
+          console.log(error)
+        }
+      },
+    },
+    tokenInput: function() {
+      this.error = ''
+    },
+  },
+  methods: {
+    async getApiToken() {
+      try {
+        var result = await browser.storage.sync.get({ apiToken: '' })
+        return result.apiToken
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async getCurrentTabHostname() {
+      try {
+        var result = await browser.tabs.query({ active: true, currentWindow: true })
+        var url = new URL(result[0].url)
+
+        return url.hostname
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async saveApiToken() {
+      this.error = ''
+
+      if (!this.tokenInput) {
+        this.error = 'API token is required'
+        return
+      }
+
+      if (this.tokenInput.length !== 60) {
+        this.error = 'Invalid API Token'
+        return
+      }
+
+      this.apiToken = this.tokenInput
+    },
+    async deleteApiToken() {
+      this.error = ''
+
+      try {
+        await browser.storage.sync.remove('apiToken')
+        this.apiToken = await this.getApiToken()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async generateAlias() {
+      this.loading = true
+      this.error = ''
+
+      try {
+        const response = await fetch('https://app.anonaddy.com/api/v1/aliases', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.apiToken}`,
+          },
+          body: JSON.stringify({
+            domain: 'anonaddy.me',
+            description: this.currentTabHostname,
+          }),
+        })
+
+        this.loading = false
+
+        if (response.status === 403) {
+          this.error = 'You have reached your UUID alias limit'
+        } else if (response.status === 429) {
+          this.error = 'You have reached your hourly limit for creating new aliases'
+        } else if (response.status === 200) {
+          let data = await response.json()
+          this.newAlias = data.data.email
+        } else {
+          this.error = 'An Error Has Occurred'
+          console.log(error)
+        }
+      } catch (error) {
+        this.loading = false
+        this.error = 'An Error Has Occurred'
+        console.log(error)
+      }
+    },
+    clipboardSuccess() {
+      this.clipboardButtonText = 'Copied!'
+    },
+    clipboardError() {
+      this.clipboardButtonText = 'Something Went Wrong'
+    },
+  },
+}
+</script>
diff --git a/src/assets/js/components/Loader.vue b/src/assets/js/components/Loader.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="loader inline-block ml-1">
+    <svg
+      version="1.1"
+      class="fill-current h-5 w-5 inline-block"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      viewBox="0 0 50 50"
+      style="enable-background:new 0 0 50 50;"
+      xml:space="preserve"
+    >
+      <path
+        d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
+      >
+        <animateTransform
+          attributeType="xml"
+          attributeName="transform"
+          type="rotate"
+          from="0 25 25"
+          to="360 25 25"
+          dur="0.6s"
+          repeatCount="indefinite"
+        />
+      </path>
+    </svg>
+  </div>
+</template>