Add field for github api token to options page (#330)

* Tweak options layout * Add github token field * Do not track sensitive data * Do request with token * Pull primer-css from npm * Set default token option to empty string. This way, it won't look like it's already filled in, even though it's really just 'undefined'. Screenshot: ![](https://cloud.githubusercontent.com/assets/6473925/24378551/5a5c23d2-1311-11e7-84cc-ee19b371294b.png)
OctoLinker · Mar 27, 2017 · 25b64d9 · 25b64d9
1 parent 7c785a5
commit 25b64d9
Show file tree

Hide file tree

Showing 12 changed files with 153 additions and 40 deletions.
diff --git a/assets/options.css b/assets/options.css
@@ -0,0 +1,12 @@
+body {
+  user-select: none;
+  padding: 0 15px;
+}
+
+label {
+  font-size: 12px;
+}
+
+.form-checkbox input[type=checkbox], .form-checkbox input[type=radio] {
+  margin-top: 2px;
+}
diff --git a/assets/options.html b/assets/options.html
@@ -2,24 +2,12 @@
 <head>
   <meta charset="UTF-8">
   <title></title>
-  <style type="text/css">
-    body {
-      user-select: none;
-    }
-    label {
-      display: block;
-      margin: 12px 0;
-    }
-
-    #options {
-      margin-bottom: 36px;
-    }
-  </style>
+  <link href="core.css" media="all" rel="stylesheet" />
+  <link href="form.css" media="all" rel="stylesheet" />
+  <link href="options.css" media="all" rel="stylesheet" />
 </head>
 <body>
   <div id="options"></div>
-
-  <iframe src="http://ghbtns.com/github-btn.html?user=octolinker&amp;repo=browser-extension&amp;type=watch&amp;count=true&amp;size=small" style="background-color: transparent; border: none; overflow:hidden" width="120" height="20"></iframe>
   <script src="options.js"></script>
 </body>
 </html>
diff --git a/lib/options/components/checkbox.js b/lib/options/components/checkbox.js
@@ -1,9 +1,11 @@
-export default ({ name, label, value, defaultValue }) => {
+export default ({ name, label, value, defaultValue, description }) => {
   const val = (value === undefined) ? defaultValue : value;
+  const note = description ? `<p class="note">${description}</p>` : '';
 
-  return `<section>
+  return `<div class="form-checkbox">
     <label>
-      <input type="checkbox" name="${name}" ${val ? 'checked' : ''} /> ${label}
-    </label>
-  </section>`;
+      <input type="checkbox" name="${name}" ${val ? 'checked' : ''}>
+      ${label}
+    </label>${note}
+  </div>`;
 };
diff --git a/lib/options/components/index.js b/lib/options/components/index.js
@@ -1,7 +1,10 @@
 import checkbox from './checkbox';
+import input from './input';
 
 export default function ({ type, ...rest }) {
   if (type === 'checkbox') {
     return checkbox(rest);
+  } else if (type === 'text' || type === 'password') {
+    return input({ type, ...rest });
   }
 }
diff --git a/lib/options/components/input.js b/lib/options/components/input.js
@@ -0,0 +1,9 @@
+export default ({ type, name, label, value, defaultValue, description }) => {
+  const val = (value === undefined) ? defaultValue : value;
+  const note = description ? `<p class="note">${description}</p>` : '';
+
+  return `<dl class="form-group">
+    <dt><label>${label}</label></dt>
+    <dd><input class="form-control" type="${type}" name="${name}" value="${val}">${note}</dd>
+  </dl>`;
+};
diff --git a/lib/options/options.js b/lib/options/options.js
@@ -1,44 +1,45 @@
 export const options = [
+  {
+    type: 'password',
+    name: 'githubToken',
+    label: 'Access token',
+    sensitiveData: true,
+    description: 'If you want better <strong>Sass, Less or Haskell support</strong> for private repositories, you\'ll need to <a href="https://github.com/settings/tokens/new?scopes=repo&description=OctoLinker%20browser%20extension">create a token</a> with the repo permissions.',
+    defaultValue: '',
+  },
   {
     type: 'checkbox',
     name: 'newWindow',
-    label: 'Open link in new tab',
-    value: undefined,
+    label: 'New tab',
+    description: 'Open link in a new tab.',
     defaultValue: false,
   },
   {
     type: 'checkbox',
     name: 'newWindowActive',
-    label: 'Focus new tabs',
-    value: undefined,
+    label: 'Focus new tab',
+    description: 'Focus new tab when opening a link.',
     defaultValue: true,
   },
   {
     type: 'checkbox',
     name: 'showLinkIndicator',
-    label: 'Show indicator if line contains OctoLinker links',
-    value: undefined,
-    defaultValue: true,
-  },
-  {
-    type: 'checkbox',
-    name: 'doTrack',
-    label: 'Send anonymous usage reports to Google Analytics',
-    value: undefined,
+    label: 'Line indicator',
+    description: 'Show an indicator if line contains OctoLinker links.',
     defaultValue: true,
   },
   {
     type: 'checkbox',
     name: 'showUpdateNotification',
-    label: 'Show update notification',
-    value: undefined,
+    label: 'Update notification',
+    description: 'Show a notification if a new version is available.',
     defaultValue: true,
   },
   {
     type: 'checkbox',
-    name: 'debugMode',
-    label: 'Debug mode',
-    value: undefined,
-    defaultValue: false,
+    name: 'doTrack',
+    label: 'Usage reports',
+    description: 'Send anonymous usage reports to Google Analytics.',
+    defaultValue: true,
   },
 ];
diff --git a/lib/options/page.js b/lib/options/page.js
@@ -13,10 +13,12 @@ storage.load().then(() => {
   });
 });
 
-formEl.addEventListener('click', ({ target }) => {
+formEl.addEventListener('change', ({ target }) => {
   const tag = target.tagName.toLowerCase();
 
   if (tag === 'input' && target.type === 'checkbox') {
     storage.set(target.name, target.checked);
+  } else {
+    storage.set(target.name, target.value);
   }
 });
diff --git a/lib/options/storage.js b/lib/options/storage.js
@@ -7,6 +7,10 @@ const store = {};
 const defaults = {};
 
 options.forEach((item) => {
+  if (item.sensitiveData) {
+    return;
+  }
+
   defaults[item.name] = item.defaultValue;
 });
 

diff --git a/lib/resolver/github-search.js b/lib/resolver/github-search.js
@@ -1,4 +1,5 @@
 import { extname } from 'path';
+import * as storage from '../options/storage.js';
 
 export default function ({ path, target }) {
   const [, user, repo] = path.split('/');
@@ -9,6 +10,11 @@ export default function ({ path, target }) {
     params += `+extension:${extension}`;
   }
 
+  const token = storage.get('githubToken');
+  if (token) {
+    params += `&access_token=${token}`;
+  }
+
   const url = `https://api.github.com/search/code?${params}`;
 
   return async function githubSearch() {

diff --git a/package.json b/package.json
@@ -67,6 +67,8 @@
     "jquery": "^3.1.1",
     "path-parse": "^1.0.5",
     "pop-zip": "^1.0.0",
+    "primer-core": "^2.0.0",
+    "primer-forms": "^1.0.6",
     "querystring": "^0.2.0",
     "semver": "^5.3.0",
     "semver-regex": "^1.0.0",

diff --git a/webpack.config.js b/webpack.config.js
@@ -17,6 +17,10 @@ module.exports = {
     ], {
       ignore: ['manifest.json'],
     }),
+    new CopyWebpackPlugin([
+      { from: 'node_modules/primer-core/build/', to: 'core.css' },
+      { from: 'node_modules/primer-forms/build/', to: 'form.css' },
+    ]),
   ],
   module: {
     loaders: [

diff --git a/yarn.lock b/yarn.lock
@@ -4147,6 +4147,86 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
+primer-base@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/primer-base/-/primer-base-0.4.2.tgz#10bea7bdd454c447b1ed6e801595f3888b30f01f"
+  dependencies:
+    primer-support "*"
+
+primer-box@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/primer-box/-/primer-box-2.1.2.tgz#e48a38a76035395895b8fe316facc2d135b3f194"
+  dependencies:
+    primer-support "*"
+
+primer-buttons@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/primer-buttons/-/primer-buttons-1.0.1.tgz#69910797b2e846275b85792f4979b77956de6727"
+  dependencies:
+    primer-support "*"
+
+primer-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/primer-core/-/primer-core-2.0.0.tgz#d53a7443f2706de53c69269ea2a6b904ebce1e53"
+  dependencies:
+    primer-base "^0.4.0"
+    primer-box "^2.1.1"
+    primer-buttons "^1.0.0"
+    primer-forms "^1.0.4"
+    primer-layout "^0.3.0"
+    primer-navigation "^0.6.0"
+    primer-support "^3.0.1"
+    primer-table-object "^1.0.0"
+    primer-tooltips "^0.5.0"
+    primer-truncate "^0.3.0"
+    primer-utilities "^4.0.1"
+
+primer-forms@^1.0.4, primer-forms@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/primer-forms/-/primer-forms-1.0.6.tgz#473db3826146ffd8da1698f86a5517a560b63590"
+  dependencies:
+    primer-support "*"
+
+primer-layout@^0.3.0:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/primer-layout/-/primer-layout-0.3.2.tgz#7f607ac1fad5942f646a05f6a4122a1577407118"
+  dependencies:
+    primer-support "*"
+
+primer-navigation@^0.6.0:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/primer-navigation/-/primer-navigation-0.6.3.tgz#be3ab0fcf8c3aaf505ff063c696830f10086ae56"
+  dependencies:
+    primer-support "*"
+
+primer-support@*, primer-support@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/primer-support/-/primer-support-3.0.2.tgz#53ab794dc7e492e66f60f3bae73c92ab0c030537"
+
+primer-table-object@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/primer-table-object/-/primer-table-object-1.0.3.tgz#6684eea0bf639bffd9879565d0dcc1c7486fc0b3"
+  dependencies:
+    primer-support "*"
+
+primer-tooltips@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/primer-tooltips/-/primer-tooltips-0.5.3.tgz#7045dc49ea24d1bbb89d3d7df29f77fe1e4d7fac"
+  dependencies:
+    primer-support "*"
+
+primer-truncate@^0.3.0:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/primer-truncate/-/primer-truncate-0.3.2.tgz#ffecd0199ab06ea4d3e45c221a8408bc14210a11"
+  dependencies:
+    primer-support "*"
+
+primer-utilities@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/primer-utilities/-/primer-utilities-4.1.1.tgz#f02d8168c7c30aa4419114e0abe4259c90e1542f"
+  dependencies:
+    primer-support "*"
+
 private@^0.1.6:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"