From 53150c3f981b201eb27bd977f30c1c09bd0a5a5f Mon Sep 17 00:00:00 2001 From: ngxson Date: Mon, 6 Jul 2020 01:38:23 +0200 Subject: [PATCH] (WIP) Login + setting screen are now working --- package-lock.json | 189 +++- package.json | 2 + src/popup/App.css | 49 + src/popup/App.vue | 1038 ++-------------------- src/popup/components/ApiKeySetting.vue | 92 ++ src/popup/components/Header.vue | 68 ++ src/popup/components/Login.vue | 176 ++++ src/popup/components/SelfHostSetting.vue | 54 ++ src/popup/popup.js | 21 +- webpack.config.js | 6 + 10 files changed, 701 insertions(+), 994 deletions(-) create mode 100644 src/popup/App.css create mode 100644 src/popup/components/ApiKeySetting.vue create mode 100644 src/popup/components/Header.vue create mode 100644 src/popup/components/Login.vue create mode 100644 src/popup/components/SelfHostSetting.vue diff --git a/package-lock.json b/package-lock.json index 6445da0..56e29d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "simplelogin-extension", - "version": "1.6.0", + "version": "1.7.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -77,6 +77,164 @@ "@babel/types": "^7.7.4" } }, + "@babel/helper-create-class-features-plugin": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.4.tgz", + "integrity": "sha512-9raUiOsXPxzzLjCXeosApJItoMnX3uyT4QdM2UldffuGApNrF8e938MwNpDCK9CPoyxrEoCgT+hObJc3mZa6lQ==", + "dev": true, + "requires": { + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-member-expression-to-functions": "^7.10.4", + "@babel/helper-optimise-call-expression": "^7.10.4", + "@babel/helper-plugin-utils": "^7.10.4", + "@babel/helper-replace-supers": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.10.4" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", + "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", + "dev": true, + "requires": { + "@babel/highlight": "^7.10.4" + } + }, + "@babel/generator": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.4.tgz", + "integrity": "sha512-toLIHUIAgcQygFZRAQcsLQV3CBuX6yOIru1kJk/qqqvcRmZrYe6WavZTSG+bB8MxhnL9YPf+pKQfuiP161q7ng==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4", + "jsesc": "^2.5.1", + "lodash": "^4.17.13", + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz", + "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.10.4", + "@babel/template": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz", + "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.4.tgz", + "integrity": "sha512-m5j85pK/KZhuSdM/8cHUABQTAslV47OjfIB9Cc7P+PvlAoBzdb79BGNfw8RhT5Mq3p+xGd0ZfAKixbrUZx0C7A==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz", + "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-plugin-utils": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz", + "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==", + "dev": true + }, + "@babel/helper-replace-supers": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz", + "integrity": "sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.10.4", + "@babel/helper-optimise-call-expression": "^7.10.4", + "@babel/traverse": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz", + "integrity": "sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==", + "dev": true, + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/highlight": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", + "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.4.tgz", + "integrity": "sha512-8jHII4hf+YVDsskTF6WuMB3X4Eh+PsUkC2ljq22so5rHvH+T8BzyL94VOdyFLNR8tBSVXOTbNHOKpR4TfRxVtA==", + "dev": true + }, + "@babel/template": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz", + "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/parser": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/traverse": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.4.tgz", + "integrity": "sha512-aSy7p5THgSYm4YyxNGz6jZpXf+Ok40QF3aA2LyIONkDHpAcJzDUqlCKXv6peqYUs2gmic849C/t2HKw2a2K20Q==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.10.4", + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.10.4", + "@babel/parser": "^7.10.4", + "@babel/types": "^7.10.4", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.13" + } + }, + "@babel/types": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.4.tgz", + "integrity": "sha512-UTCFOxC3FsFHb7lkRMVvgLzaRVamXuAs2Tz4wajva4WxtVY82eZeaUBtC2Zt95FU9TiznuC0Zk35tsim8jeVpg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + } + } + }, "@babel/helper-create-regexp-features-plugin": { "version": "7.7.4", "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.7.4.tgz", @@ -237,6 +395,12 @@ "@babel/types": "^7.7.4" } }, + "@babel/helper-validator-identifier": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", + "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==", + "dev": true + }, "@babel/helper-wrap-function": { "version": "7.7.4", "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz", @@ -288,6 +452,24 @@ "@babel/plugin-syntax-async-generators": "^7.7.4" } }, + "@babel/plugin-proposal-class-properties": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz", + "integrity": "sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==", + "dev": true, + "requires": { + "@babel/helper-create-class-features-plugin": "^7.10.4", + "@babel/helper-plugin-utils": "^7.10.4" + }, + "dependencies": { + "@babel/helper-plugin-utils": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz", + "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==", + "dev": true + } + } + }, "@babel/plugin-proposal-dynamic-import": { "version": "7.7.4", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.7.4.tgz", @@ -7347,6 +7529,11 @@ "vue-style-loader": "^4.1.0" } }, + "vue-router": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz", + "integrity": "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg==" + }, "vue-style-loader": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", diff --git a/package.json b/package.json index acbdf9d..f602890 100644 --- a/package.json +++ b/package.json @@ -22,11 +22,13 @@ "v-clipboard": "^2.2.2", "vue": "^2.6.10", "vue-js-modal": "^1.3.31", + "vue-router": "^3.3.4", "vue-toasted": "^1.1.27", "webextension-polyfill": "^0.3.1" }, "devDependencies": { "@babel/core": "^7.1.2", + "@babel/plugin-proposal-class-properties": "^7.10.4", "@babel/plugin-proposal-optional-chaining": "^7.0.0", "@babel/preset-env": "^7.1.0", "@babel/runtime-corejs3": "^7.4.0", diff --git a/src/popup/App.css b/src/popup/App.css new file mode 100644 index 0000000..a793666 --- /dev/null +++ b/src/popup/App.css @@ -0,0 +1,49 @@ +body { + margin: 0 0; +} + +.app { + width: 470px; + height: 600px; +} + +em { + font-style: normal; + background-color: #ffff00; +} + +.small-text { + font-size: 12px; + font-weight: lighter; +} + +.copy-btn { + font-size: 0.6rem; + line-height: 0.75; + position: absolute; + right: 0; + transform: translateX(-50%); +} + +.cursor { + cursor: pointer; +} + +.list-item-email { + margin-right: 40px !important; + position: relative; + overflow: hidden; +} + +.list-item-email > a { + white-space: nowrap; +} + +.list-item-email-fade { + right: 0; + width: 30px; + height: 100%; + background: linear-gradient(to right, transparent, white); + top: 0; + position: absolute; +} \ No newline at end of file diff --git a/src/popup/App.vue b/src/popup/App.vue index 86d274c..ef91878 100644 --- a/src/popup/App.vue +++ b/src/popup/App.vue @@ -1,978 +1,60 @@ - - - - - + + + \ No newline at end of file diff --git a/src/popup/components/ApiKeySetting.vue b/src/popup/components/ApiKeySetting.vue new file mode 100644 index 0000000..caa4368 --- /dev/null +++ b/src/popup/components/ApiKeySetting.vue @@ -0,0 +1,92 @@ + + + + diff --git a/src/popup/components/Header.vue b/src/popup/components/Header.vue new file mode 100644 index 0000000..b601237 --- /dev/null +++ b/src/popup/components/Header.vue @@ -0,0 +1,68 @@ + + + + diff --git a/src/popup/components/Login.vue b/src/popup/components/Login.vue new file mode 100644 index 0000000..83becb1 --- /dev/null +++ b/src/popup/components/Login.vue @@ -0,0 +1,176 @@ + + + + diff --git a/src/popup/components/SelfHostSetting.vue b/src/popup/components/SelfHostSetting.vue new file mode 100644 index 0000000..2fab6aa --- /dev/null +++ b/src/popup/components/SelfHostSetting.vue @@ -0,0 +1,54 @@ + + + diff --git a/src/popup/popup.js b/src/popup/popup.js index a578b6d..7d76a61 100644 --- a/src/popup/popup.js +++ b/src/popup/popup.js @@ -1,12 +1,13 @@ -import Vue from 'vue' -import App from './App' -import Clipboard from 'v-clipboard' +import Vue from 'vue'; +import App from './App'; +import Clipboard from 'v-clipboard'; import Toasted from 'vue-toasted'; -import BootstrapVue from 'bootstrap-vue' +import BootstrapVue from 'bootstrap-vue'; import * as Sentry from '@sentry/browser'; import * as Integrations from '@sentry/integrations'; import VModal from 'vue-js-modal'; +import VueRouter from 'vue-router'; global.browser = require('webextension-polyfill') Vue.prototype.$browser = global.browser @@ -15,23 +16,13 @@ Vue.use(Clipboard) Vue.use(Toasted, { duration: 1000 }) Vue.use(BootstrapVue) Vue.use(VModal) - +Vue.use(VueRouter); Sentry.init({ dsn: 'https://dfc7a7727433452fbe5741b602058cc5@sentry.io/1839562', integrations: [new Integrations.Vue({ Vue, attachProps: true, logErrors: true })], }); -var filter = function(text, length, clamp){ - // Thanks to: https://stackoverflow.com/questions/35070271/vue-js-components-how-to-truncate-the-text-in-the-slot-element-in-a-component - clamp = clamp || '...'; - var node = document.createElement('div'); - node.innerHTML = text; - var content = node.textContent; - return content.length > length ? content.slice(0, length) + clamp : content; -}; - -Vue.filter('truncate', filter); /* eslint-disable no-new */ new Vue({ el: '#app', diff --git a/webpack.config.js b/webpack.config.js index ca1f8e1..41fd6bf 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -30,6 +30,12 @@ const config = { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, + options: { + presets: [ + {'plugins': ['@babel/plugin-proposal-class-properties'] + } + ] + } }, { test: /\.css$/,