Settings input box for pastebin api key #12 #29

pug/settings.pug

@@ -81,6 +81,21 @@ div.row
       option(value='beep' selected) Beep
       option(value='hihat') Hi-hat
 
+hr.invisible.small
+div.form-row
+  div.col
+    label(for='pastebinkey')
+      | PasteBin API Key
+      span(v-if='app.storage.savedShown')
+        span  ✅
+        span.sr-only success
+    input#pastebinkey.form-control(
+        type='text' placeholder='API KEY'
+        v-model='app.storage.pasteBinKey'
+        v-bind:disabled='!app.storage.available'
+        v-on:click='!app.storage.available && window.alert("Local Storage is not available")'
+        v-on:change='appStorePasteBinKey()')
+
 hr
 div.row
   div.col

src/js/app.js

@@ -1,10 +1,21 @@
+import Storage from './storage.js';
+
 export default class App {
-  constructor() {
+  constructor(window) {
+    this.window = window;
+    this.storage = new Storage(window);
+
     this.uiData = {
       settings: {
         visible: false,
         flashRedOnFirstBeat: true,
-        hidePastSections: true
+        hidePastSections: true,
+      },
+      storage: {
+        available: this.storage.isStorageAvailable(),
+        pasteBinKey: this.storage.getPasteBinKey(),
+        // Control the `saved!` text when saving api key from input.
+        savedShown: false
       }
     };
   }
@@ -17,6 +28,18 @@ export default class App {
     this.uiData.settings.visible = false;
   }
 
+  storePasteBinKey() {
+    this.uiData.storage.savedShown = false;
+    if (this.storage.isStorageAvailable()
+        && this.storage.storePasteBinKey(this.uiData.storage.pasteBinKey)) {
+      this.uiData.storage.savedShown = true;
+      this.window.setTimeout(() => {
+          this.uiData.storage.savedShown = false; }, 5000);
+    } else {
+      this.window.alert('Failed to store PasteBin key in storage :(');
+    }
+  }
+
   getUiData() {
     return this.uiData;
   }

src/js/main.js

@@ -25,7 +25,7 @@ window.init = function() {
   let metronome = new metronomeclass.Metronome(audio, viz);
   metronome.setSongChart(songChart);
 
-  let app = new App();
+  let app = new App(window);
 
   let vueApp = new Vue({
     el: '#vueApp',
@@ -34,6 +34,7 @@ window.init = function() {
       metronome: metronome.getUiData(),
       songChart: songChart.getUiData(),
       app: app.getUiData(),
+      window: window
     },
     methods: {
       metronomeToggle: (() => { metronome.toggle(); }),
@@ -54,6 +55,7 @@ window.init = function() {
 
       appShowSettings: (() => { app.showSettings(); }),
       appHideSettings: (() => { app.hideSettings(); }),
+      appStorePasteBinKey: (() => { app.storePasteBinKey(); }),
 
       audioMaybeLoadSample: (() => { audio.maybeLoadSample(); })
     }

src/js/storage.js

@@ -0,0 +1,64 @@
+/* Check if local storage is available.
+ * From https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
+ */
+function storageAvailable(window, type) {
+  var storage;
+  try {
+    storage = window[type];
+    var x = '__storage_test__';
+    storage.setItem(x, x);
+    storage.removeItem(x);
+    return true;
+  }
+  catch(e) {
+    return e instanceof DOMException && (
+      // everything except Firefox
+      e.code === 22 ||
+      // Firefox
+      e.code === 1014 ||
+      // test name field too, because code might not be present
+      // everything except Firefox
+      e.name === 'QuotaExceededError' ||
+      // Firefox
+      e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+      // acknowledge QuotaExceededError only if there's something already stored
+      (storage && storage.length !== 0);
+  }
+}
+
+const API_KEY = 'API_KEY';
+
+export default class Storage {
+  constructor(window) {
+    this.storageAvailable = storageAvailable(window, 'localStorage');
+    this.window = window;
+  }
+
+  isStorageAvailable() {
+    return this.storageAvailable;
+  }
+
+  storePasteBinKey(key) {
+    if (this.isStorageAvailable()) {
+      try {
+        this.window.localStorage.setItem(API_KEY, key);
+        return true;
+      } catch (e) {
+        console.warn('Failed to set store api key in storage: ' + e);
+        return false;
+      }
+    }
+    return false;
+  }
+
+  getPasteBinKey() {
+    if (this.isStorageAvailable()) {
+      // getItem() returns null if value is not stored.
+      let key = this.window.localStorage.getItem(API_KEY);
+      if (key) {
+        return key;
+      }
+    }
+    return '';
+  }
+}