Settings input box for user key #12 #29

sonph · Apr 23, 2020 · d67b2e5 · d67b2e5
1 parent 03a5f36
commit d67b2e5
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 16 deletions.
diff --git a/pug/settings.pug b/pug/settings.pug
@@ -84,17 +84,32 @@ div.row
 hr.invisible.small
 div.form-row
   div.col
-    label(for='pastebinkey')
+    label(for='apikey')
       | PasteBin API Key
       span(v-if='app.storage.savedShown')
         span &nbsp;✅
         span.sr-only success
-    input#pastebinkey.form-control(
+    input#apikey.form-control(
         type='text' placeholder='API KEY'
-        v-model='app.storage.pasteBinKey'
+        v-model='app.storage.apiKey'
         v-bind:disabled='!app.storage.available'
         v-on:click='!app.storage.available && window.alert("Local Storage is not available")'
-        v-on:change='appStorePasteBinKey()')
+        v-on:change='appStoreKeys()')
+
+hr.invisible.small
+div.form-row
+  div.col
+    label(for='userkey')
+      | User Session Key
+      span(v-if='app.storage.savedShown')
+        span &nbsp;✅
+        span.sr-only success
+    input#userkey.form-control(
+        type='text' placeholder='USER KEY'
+        v-model='app.storage.userKey'
+        v-bind:disabled='!app.storage.available'
+        v-on:click='!app.storage.available && window.alert("Local Storage is not available")'
+        v-on:change='appStoreKeys()')
 
 hr
 div.row

diff --git a/src/js/app.js b/src/js/app.js
@@ -13,7 +13,8 @@ export default class App {
       },
       storage: {
         available: this.storage.isStorageAvailable(),
-        pasteBinKey: this.storage.getPasteBinKey(),
+        apiKey: this.storage.getApiKey(),
+        userKey: this.storage.getUserKey(),
         // Control the `saved!` text when saving api key from input.
         savedShown: false
       }
@@ -28,15 +29,17 @@ export default class App {
     this.uiData.settings.visible = false;
   }
 
-  storePasteBinKey() {
+  storeKeys() {
     this.uiData.storage.savedShown = false;
     if (this.storage.isStorageAvailable()
-        && this.storage.storePasteBinKey(this.uiData.storage.pasteBinKey)) {
+        && this.storage.storeKeys(
+            this.uiData.storage.userKey,
+            this.uiData.storage.apiKey)) {
       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 :(');
+      this.window.alert('Failed to store keys in local storage :(');
     }
   }
 

diff --git a/src/js/main.js b/src/js/main.js
@@ -55,7 +55,7 @@ window.init = function() {
 
       appShowSettings: (() => { app.showSettings(); }),
       appHideSettings: (() => { app.hideSettings(); }),
-      appStorePasteBinKey: (() => { app.storePasteBinKey(); }),
+      appStoreKeys: (() => { app.storeKeys(); }),
 
       audioMaybeLoadSample: (() => { audio.maybeLoadSample(); })
     }

diff --git a/src/js/storage.js b/src/js/storage.js
@@ -27,6 +27,7 @@ function storageAvailable(window, type) {
 }
 
 const API_KEY = 'API_KEY';
+const USER_KEY = 'USER_KEY';
 
 export default class Storage {
   constructor(window) {
@@ -38,27 +39,39 @@ export default class Storage {
     return this.storageAvailable;
   }
 
-  storePasteBinKey(key) {
+  store(name, value) {
     if (this.isStorageAvailable()) {
       try {
-        this.window.localStorage.setItem(API_KEY, key);
+        this.window.localStorage.setItem(name, value);
         return true;
       } catch (e) {
-        console.warn('Failed to set store api key in storage: ' + e);
+        console.warn('Failed to store ' + name + ' in storage: ' + e);
         return false;
       }
     }
     return false;
   }
 
-  getPasteBinKey() {
+  get(name) {
     if (this.isStorageAvailable()) {
       // getItem() returns null if value is not stored.
-      let key = this.window.localStorage.getItem(API_KEY);
-      if (key) {
-        return key;
+      let value = this.window.localStorage.getItem(name);
+      if (value) {
+        return value;
       }
     }
     return '';
   }
+
+  getUserKey() {
+    return this.get(USER_KEY);
+  }
+
+  getApiKey() {
+    return this.get(API_KEY);
+  }
+
+  storeKeys(userKey, apiKey) {
+    return this.store(USER_KEY, userKey) && this.store(API_KEY, apiKey);
+  }
 }