working api key settings

This commit is contained in:
benjaminramey
2019-11-11 11:39:09 -06:00
parent 708eed82e5
commit 7549e0a41c
5 changed files with 60 additions and 57 deletions

60
package-lock.json generated
View File

@@ -859,16 +859,6 @@
"to-fast-properties": "^2.0.0"
}
},
"@nuxt/opencollective": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.0.tgz",
"integrity": "sha512-Vf09BxCdj1iT2IRqVwX5snaY2WCTkvM0O4cWWSO1ThCFuc4if0Q/nNwAgCxRU0FeYHJ7DdyMUNSdswCLKlVqeg==",
"requires": {
"chalk": "^2.4.2",
"consola": "^2.10.1",
"node-fetch": "^2.6.0"
}
},
"@types/anymatch": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
@@ -1269,6 +1259,7 @@
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"requires": {
"color-convert": "^1.9.0"
}
@@ -1724,18 +1715,6 @@
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
"integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
},
"bootstrap-vue": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.0.4.tgz",
"integrity": "sha512-/5WXa3ir5uajcs7ze7jz7QXpYuJGWHjvJ8biMq0+e0IIIxw2jSdh4LsiFKD7C7qtgKre28hhXOfx79RmZX4wcQ==",
"requires": {
"@nuxt/opencollective": "^0.3.0",
"bootstrap": ">=4.3.1 <5.0.0",
"popper.js": "^1.15.0",
"portal-vue": "^2.1.6",
"vue-functional-data-merge": "^3.1.0"
}
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1981,6 +1960,7 @@
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
@@ -2161,6 +2141,7 @@
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
@@ -2168,7 +2149,8 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
},
"colors": {
"version": "1.4.0",
@@ -2267,11 +2249,6 @@
}
}
},
"consola": {
"version": "2.10.1",
"resolved": "https://registry.npmjs.org/consola/-/consola-2.10.1.tgz",
"integrity": "sha512-4sxpH6SGFYLADfUip4vuY65f/gEogrzJoniVhNUYkJHtng0l8ZjnDCqxxrSVRHOHwKxsy8Vm5ONZh1wOR3/l/w=="
},
"console-browserify": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
@@ -2932,7 +2909,8 @@
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
"dev": true
},
"eslint": {
"version": "5.16.0",
@@ -4591,7 +4569,8 @@
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true
},
"has-symbols": {
"version": "1.0.0",
@@ -5895,11 +5874,6 @@
"integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
"dev": true
},
"node-fetch": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
"integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
},
"node-gyp": {
"version": "3.8.0",
"resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
@@ -6547,16 +6521,6 @@
"find-up": "^3.0.0"
}
},
"popper.js": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz",
"integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw=="
},
"portal-vue": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.6.tgz",
"integrity": "sha512-lvCF85D4e8whd0nN32D8FqKwwkk7nYUI3Ku8UAEx4Z1reomu75dv5evRUTZNaj1EalxxWNXiNl0EHRq36fG8WA=="
},
"posix-character-classes": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -7824,6 +7788,7 @@
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
@@ -8477,11 +8442,6 @@
}
}
},
"vue-functional-data-merge": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
"integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
},
"vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

View File

@@ -16,7 +16,6 @@
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.4",
"vue": "^2.6.10"
},
"devDependencies": {

View File

@@ -1,6 +1,6 @@
chrome.runtime.onInstalled.addListener(function() {
var data = {
apiKey: "the key",
apiKey: null,
groupings: []
};

View File

@@ -1,6 +1,27 @@
<template>
<div class="fluid-container p-2">
<div class="app">
<div class="fluid-container">
<h1>Pinboard Groupings</h1>
<div class="card">
<div class="card-body">
<h5 class="card-title">API key</h5>
<form @submit.prevent="save" class="form">
<div class="input-group mb-2" v-if="!apiKey">
<label class="sr-only" for="apiKey">Pinboard API Key</label>
<input type="text" class="form-control" id="apiKey"
v-model="form.apiKey"
placeholder="Enter Pinboard API key">
</div>
<p class="card-text" v-else>
{{ apiKey }}
</p>
<button type="submit" class="btn btn-primary btn-sm" v-if="!apiKey">save</button>
<button type="button" class="btn btn-secondary btn-sm" @click.prevent="edit" v-else>edit</button>
</form>
</div>
</div>
</div>
</div>
</template>
@@ -8,8 +29,27 @@
export default {
data () {
return {
apiKey: "bob",
groupings: []
apiKey: null,
groupings: [],
form: {
apiKey: null
}
}
},
methods: {
save(event) {
var data = {
apiKey: this.form.apiKey,
groupings: this.groupings
};
chrome.storage.sync.set(data, () => {
this.apiKey = data.apiKey;
this.groupings = data.groupings;
});
},
edit(event) {
this.form.apiKey = this.apiKey;
this.apiKey = null;
}
},
created() {
@@ -22,5 +62,10 @@ export default {
</script>
<style lang="scss" scoped>
@import 'node_modules/bootstrap/scss/bootstrap';
.app {
font-size: 1rem;
}
</style>

View File

@@ -4,6 +4,5 @@ import App from './App'
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})