show options page for everybody who hasn't seen it.

fiatjaf · Mar 18, 2017 · 9dd6751 · 9dd6751
1 parent eaee29e
commit 9dd6751
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 8 deletions.
diff --git a/background.js b/background.js
@@ -10,3 +10,19 @@ chrome.webNavigation.onHistoryStateUpdated.addListener(function (props) {
     }
   }
 })
+
+// show a page telling the user to input their token
+chrome.storage.sync.get('token', ({token}) => {
+  if (chrome.runtime.lastError) return
+
+  if (!token) {
+    chrome.storage.sync.get('seenOptions', ({seenOptions}) => {
+      if (chrome.runtime.lastError) return
+      if (!seenOptions) {
+        chrome.tabs.create({
+          url: '/options.html'
+        })
+      }
+    })
+  }
+})
diff --git a/options.html b/options.html
@@ -1,9 +1,45 @@
 <!doctype html>
 
 <title>Module Linker</title>
+<style>
+* {
+  font-size: 120%;
+  box-sizing: border-box;
+}
+body {
+  margin: auto;
+  width: 800px;
+  max-width: 97%;
+}
+header {
+  text-align: center;
+}
+input {
+  width: 100%;
+  padding: 5px;
+}
+footer {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+@media (max-height: 600px) {
+  footer { display: none }
+}
+</style>
 
-<p>get a personal GitHub API token at <a target=_blank href=https://github.com/settings/tokens>https://github.com/settings/tokens</a> and paste it here:</p>
+<header><img src=/icon128.png><h3>Module Linker</h3></header>
+
+<p>we need a GitHub token!</p>
+<p>this extension talks to the GitHub API for resolving relative paths and although it works a little without a token, GitHub starts limitting it very soon and this extension stops being useful for that purpose.</p>
+<p>you can get a personal GitHub API token at <a target=_blank href=https://github.com/settings/tokens>https://github.com/settings/tokens</a>, then just paste it here:</p>
 <input id=token placeholder="your GitHub API token">
 <p id=message></p>
 
+<br>
+<br>
+<footer><a href=https://github.com/fiatjaf/module-linker>https://github.com/fiatjaf/module-linker</a></footer>
+
 <script src=options.js></script>
diff --git a/options.js b/options.js
@@ -1,39 +1,66 @@
 /* global chrome */
 
+var currentToken
+
+function message (text) {
+  document.getElementById('message').innerHTML = text
+}
+
 chrome.storage.sync.get('token', ({token}) => {
+  if (chrome.runtime.lastError) {
+    message(chrome.runtime.lastError.message)
+    return
+  }
   if (document.getElementById('token').value === '' && token) {
     document.getElementById('token').value = token
+    currentToken = token
+  } else {
+    message('please input a token, otherwise this extension may (and probably will) fail to resolve relative module paths (maybe other unpredictable issues will happen also).')
   }
 })
 
 document.getElementById('token').addEventListener('input', function (e) {
-  document.getElementById('message').innerHTML = ''
+  message('')
 })
 
 document.getElementById('token').addEventListener('blur', function (e) {
   if (!e.target.value) {
-    document.getElementById('message').innerHTML = ''
+    if (currentToken) {
+      chrome.storage.sync.set({token: null}, () => {
+        if (chrome.runtime.lastError) {
+          message(chrome.runtime.lastError.message)
+          return
+        }
+        message('token removed.')
+      })
+    }
+
+    return
   }
 
   window.fetch('https://api.github.com/user', {
     headers: {'Authorization': 'token ' + e.target.value}
   })
   .then(r => r.json())
   .catch(() => {
-    document.getElementById('message').innerHTML = 'failed to verify token validity. do you have an internet connection?<br>nevermind, it will be saved anyway.'
+    message('failed to verify token validity. do you have an internet connection?<br>nevermind, it will be saved anyway.')
+    currentToken = e.target.value
     return new Promise((resolve, reject) => setTimeout(resolve, 4000))
   })
   .then(user => {
     if (user.login) {
+      currentToken = e.target.value
       chrome.storage.sync.set({token: e.target.value}, () => {
         if (chrome.runtime.lastError) {
-          document.getElementById('message').innerHTML = chrome.runtime.lastError.message
-        } else {
-          document.getElementById('message').innerHTML = 'hello, ' + user.login + '! your token is now saved!'
+          message(chrome.runtime.lastError.message)
+          return
         }
+        message('hello, ' + user.login + '! your token is now saved!')
       })
     } else {
-      document.getElementById('message').innerHTML = 'this is not a valid token, so we will not save it.'
+      message('this is not a valid token, so we will not save it.')
     }
   })
 })
+
+chrome.storage.sync.set({seenOptions: true})