benjaminramey/PinboardGroupings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working api key workflow

Browse Source
This commit is contained in:
benjaminramey
2019-11-12 12:44:46 -06:00
parent 878ce7350f
commit 560150f657
2 changed files with 44 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/manifest.json
View File

@@ -10,7 +10,10 @@
"browser_action": { "browser_action": {
"default_title": "Open Pinboard Groupings page" "default_title": "Open Pinboard Groupings page"
}, },
"permissions": ["storage", "tabs"], "permissions": [
"storage",
"tabs",
"https://api.pinboard.in/"],
"background": { "background": {
"scripts": [ "scripts": [
"background.js" "background.js"

51
src/page/App.vue
View File

@@ -1,38 +1,41 @@
<template> <template>
<div class="app"> <div class="app">
<div class="fluid-container"> <div class="fluid-container">
<div class="alert alert-danger" role="alert" v-if="error"> <div class="d-flex justify-content-between">
{{ error }} <h1 class="py-2 pr-2">Pinboard Groupings</h1>
</div> <div class="api-key py-2 pl-2">
<h1>Pinboard Groupings</h1> <form @submit.prevent="save" class="form-inline">
<div class="card"> <div class="form-group" v-if="!apiKey">
<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> <label class="sr-only" for="apiKey">Pinboard API Key</label>
<input type="text" class="form-control" id="apiKey" <input type="text" class="form-control" id="apiKey"
v-model="form.apiKey" v-model="form.apiKey"
placeholder="Enter Pinboard API key"> placeholder="Enter Pinboard API key">
</div> </div>
<p class="card-text" v-else> <div v-else>
{{ apiKey }} {{ apiKey }}
</p> </div>
<button type="submit" class="btn btn-primary btn-sm" v-if="!apiKey">save</button> <button type="submit" class="btn btn-link p-0 pl-2" v-if="!apiKey">save</button>
<button type="button" class="btn btn-secondary btn-sm" @click.prevent="edit" v-else>edit</button> <button type="button" class="btn btn-link p-0 pl-2" @click.prevent="edit" v-else>edit</button>
</form> </form>
</div> </div>
</div> </div>
<div class="alert alert-danger" role="alert" v-if="error">
{{ error }}
</div>
<div class="py-2">
<div v-for="pin in pins" v-bind:key="pin.hash"> <div v-for="pin in pins" v-bind:key="pin.hash">
{{ pin.hash }} {{ pin.hash }}
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import axios from 'axios' import axios from 'axios'
export default { export default {
data () { data () {
return { return {
@@ -41,14 +44,16 @@ export default {
form: { form: {
apiKey: null apiKey: null
}, },
pins: [],
error: null error: null
} }
}, },
methods: { methods: {
getPins() { getPins() {
axios.get("https://api.pinboard.in/v1/posts/all?auth_token=" + this.apiKey) axios.get("https://api.pinboard.in/v1/posts/all?format=json&results=10&auth_token=" + this.apiKey)
.then(response => { .then(response => {
this.pins = response; console.log(response.data);
this.pins = response.data;
var data = { pins: this.pins }; var data = { pins: this.pins };
chrome.storage.sync.set(data, () => { chrome.storage.sync.set(data, () => {
console.log('done'); console.log('done');
@@ -60,11 +65,15 @@ export default {
}, },
save(event) { save(event) {
var data = { var data = {
apiKey: this.form.apiKey apiKey: this.form.apiKey,
pins: []
}; };
chrome.storage.sync.set(data, () => { chrome.storage.sync.set(data, () => {
this.apiKey = data.apiKey; this.apiKey = data.apiKey;
this.pins = data.pins;
if (this.apiKey) {
this.getPins(); this.getPins();
}
}); });
}, },
edit(event) { edit(event) {
@@ -93,4 +102,14 @@ export default {
font-size: 1rem; font-size: 1rem;
} }
h1 {
font-size: 1rem;
}
.api-key * {
font-size: 0.8rem;
}
.api-key input.form-control {
width: 17rem;
}
</style> </style>