Skip to content

Commit 25b64d9

Browse files
stefanbuckstefanbuck
authored
Add field for github api token to options page (OctoLinker#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)
1 parent 7c785a5 commit 25b64d9

File tree

12 files changed

+153
-40
lines changed

12 files changed

+153
-40
lines changed

‎assets/options.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
body {
2+
user-select: none;
3+
padding: 0 15px;
4+
}
5+
6+
label {
7+
font-size: 12px;
8+
}
9+
10+
.form-checkbox input[type=checkbox], .form-checkbox input[type=radio] {
11+
margin-top: 2px;
12+
}

‎assets/options.html

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,12 @@
22
<head>
33
<meta charset="UTF-8">
44
<title></title>
5-
<style type="text/css">
6-
body {
7-
user-select: none;
8-
}
9-
label {
10-
display: block;
11-
margin: 12px 0;
12-
}
13-
14-
#options {
15-
margin-bottom: 36px;
16-
}
17-
</style>
5+
<link href="core.css" media="all" rel="stylesheet" />
6+
<link href="form.css" media="all" rel="stylesheet" />
7+
<link href="options.css" media="all" rel="stylesheet" />
188
</head>
199
<body>
2010
<div id="options"></div>
21-
22-
<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>
2311
<script src="options.js"></script>
2412
</body>
2513
</html>

‎lib/options/components/checkbox.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
export default ({ name, label, value, defaultValue }) => {
1+
export default ({ name, label, value, defaultValue, description }) => {
22
const val = (value === undefined) ? defaultValue : value;
3+
const note = description ? `<p class="note">${description}</p>` : '';
34

4-
return `<section>
5+
return `<div class="form-checkbox">
56
<label>
6-
<input type="checkbox" name="${name}" ${val ? 'checked' : ''} /> ${label}
7-
</label>
8-
</section>`;
7+
<input type="checkbox" name="${name}" ${val ? 'checked' : ''}>
8+
${label}
9+
</label>${note}
10+
</div>`;
911
};

‎lib/options/components/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import checkbox from './checkbox';
2+
import input from './input';
23

34
export default function ({ type, ...rest }) {
45
if (type === 'checkbox') {
56
return checkbox(rest);
7+
} else if (type === 'text' || type === 'password') {
8+
return input({ type, ...rest });
69
}
710
}

‎lib/options/components/input.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default ({ type, name, label, value, defaultValue, description }) => {
2+
const val = (value === undefined) ? defaultValue : value;
3+
const note = description ? `<p class="note">${description}</p>` : '';
4+
5+
return `<dl class="form-group">
6+
<dt><label>${label}</label></dt>
7+
<dd><input class="form-control" type="${type}" name="${name}" value="${val}">${note}</dd>
8+
</dl>`;
9+
};

‎lib/options/options.js

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,45 @@
11
export const options = [
2+
{
3+
type: 'password',
4+
name: 'githubToken',
5+
label: 'Access token',
6+
sensitiveData: true,
7+
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.',
8+
defaultValue: '',
9+
},
210
{
311
type: 'checkbox',
412
name: 'newWindow',
5-
label: 'Open link in new tab',
6-
value: undefined,
13+
label: 'New tab',
14+
description: 'Open link in a new tab.',
715
defaultValue: false,
816
},
917
{
1018
type: 'checkbox',
1119
name: 'newWindowActive',
12-
label: 'Focus new tabs',
13-
value: undefined,
20+
label: 'Focus new tab',
21+
description: 'Focus new tab when opening a link.',
1422
defaultValue: true,
1523
},
1624
{
1725
type: 'checkbox',
1826
name: 'showLinkIndicator',
19-
label: 'Show indicator if line contains OctoLinker links',
20-
value: undefined,
21-
defaultValue: true,
22-
},
23-
{
24-
type: 'checkbox',
25-
name: 'doTrack',
26-
label: 'Send anonymous usage reports to Google Analytics',
27-
value: undefined,
27+
label: 'Line indicator',
28+
description: 'Show an indicator if line contains OctoLinker links.',
2829
defaultValue: true,
2930
},
3031
{
3132
type: 'checkbox',
3233
name: 'showUpdateNotification',
33-
label: 'Show update notification',
34-
value: undefined,
34+
label: 'Update notification',
35+
description: 'Show a notification if a new version is available.',
3536
defaultValue: true,
3637
},
3738
{
3839
type: 'checkbox',
39-
name: 'debugMode',
40-
label: 'Debug mode',
41-
value: undefined,
42-
defaultValue: false,
40+
name: 'doTrack',
41+
label: 'Usage reports',
42+
description: 'Send anonymous usage reports to Google Analytics.',
43+
defaultValue: true,
4344
},
4445
];

‎lib/options/page.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ storage.load().then(() => {
1313
});
1414
});
1515

16-
formEl.addEventListener('click', ({ target }) => {
16+
formEl.addEventListener('change', ({ target }) => {
1717
const tag = target.tagName.toLowerCase();
1818

1919
if (tag === 'input' && target.type === 'checkbox') {
2020
storage.set(target.name, target.checked);
21+
} else {
22+
storage.set(target.name, target.value);
2123
}
2224
});

‎lib/options/storage.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ const store = {};
77
const defaults = {};
88

99
options.forEach((item) => {
10+
if (item.sensitiveData) {
11+
return;
12+
}
13+
1014
defaults[item.name] = item.defaultValue;
1115
});
1216

‎lib/resolver/github-search.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { extname } from 'path';
2+
import * as storage from '../options/storage.js';
23

34
export default function ({ path, target }) {
45
const [, user, repo] = path.split('/');
@@ -9,6 +10,11 @@ export default function ({ path, target }) {
910
params += `+extension:${extension}`;
1011
}
1112

13+
const token = storage.get('githubToken');
14+
if (token) {
15+
params += `&access_token=${token}`;
16+
}
17+
1218
const url = `https://api.github.com/search/code?${params}`;
1319

1420
return async function githubSearch() {

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@
6767
"jquery": "^3.1.1",
6868
"path-parse": "^1.0.5",
6969
"pop-zip": "^1.0.0",
70+
"primer-core": "^2.0.0",
71+
"primer-forms": "^1.0.6",
7072
"querystring": "^0.2.0",
7173
"semver": "^5.3.0",
7274
"semver-regex": "^1.0.0",

‎webpack.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ module.exports = {
1717
], {
1818
ignore: ['manifest.json'],
1919
}),
20+
new CopyWebpackPlugin([
21+
{ from: 'node_modules/primer-core/build/', to: 'core.css' },
22+
{ from: 'node_modules/primer-forms/build/', to: 'form.css' },
23+
]),
2024
],
2125
module: {
2226
loaders: [

‎yarn.lock

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4147,6 +4147,86 @@ preserve@^0.2.0:
41474147
version "0.2.0"
41484148
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
41494149

4150+
primer-base@^0.4.0:
4151+
version "0.4.2"
4152+
resolved "https://registry.yarnpkg.com/primer-base/-/primer-base-0.4.2.tgz#10bea7bdd454c447b1ed6e801595f3888b30f01f"
4153+
dependencies:
4154+
primer-support "*"
4155+
4156+
primer-box@^2.1.1:
4157+
version "2.1.2"
4158+
resolved "https://registry.yarnpkg.com/primer-box/-/primer-box-2.1.2.tgz#e48a38a76035395895b8fe316facc2d135b3f194"
4159+
dependencies:
4160+
primer-support "*"
4161+
4162+
primer-buttons@^1.0.0:
4163+
version "1.0.1"
4164+
resolved "https://registry.yarnpkg.com/primer-buttons/-/primer-buttons-1.0.1.tgz#69910797b2e846275b85792f4979b77956de6727"
4165+
dependencies:
4166+
primer-support "*"
4167+
4168+
primer-core@^2.0.0:
4169+
version "2.0.0"
4170+
resolved "https://registry.yarnpkg.com/primer-core/-/primer-core-2.0.0.tgz#d53a7443f2706de53c69269ea2a6b904ebce1e53"
4171+
dependencies:
4172+
primer-base "^0.4.0"
4173+
primer-box "^2.1.1"
4174+
primer-buttons "^1.0.0"
4175+
primer-forms "^1.0.4"
4176+
primer-layout "^0.3.0"
4177+
primer-navigation "^0.6.0"
4178+
primer-support "^3.0.1"
4179+
primer-table-object "^1.0.0"
4180+
primer-tooltips "^0.5.0"
4181+
primer-truncate "^0.3.0"
4182+
primer-utilities "^4.0.1"
4183+
4184+
primer-forms@^1.0.4, primer-forms@^1.0.6:
4185+
version "1.0.6"
4186+
resolved "https://registry.yarnpkg.com/primer-forms/-/primer-forms-1.0.6.tgz#473db3826146ffd8da1698f86a5517a560b63590"
4187+
dependencies:
4188+
primer-support "*"
4189+
4190+
primer-layout@^0.3.0:
4191+
version "0.3.2"
4192+
resolved "https://registry.yarnpkg.com/primer-layout/-/primer-layout-0.3.2.tgz#7f607ac1fad5942f646a05f6a4122a1577407118"
4193+
dependencies:
4194+
primer-support "*"
4195+
4196+
primer-navigation@^0.6.0:
4197+
version "0.6.3"
4198+
resolved "https://registry.yarnpkg.com/primer-navigation/-/primer-navigation-0.6.3.tgz#be3ab0fcf8c3aaf505ff063c696830f10086ae56"
4199+
dependencies:
4200+
primer-support "*"
4201+
4202+
primer-support@*, primer-support@^3.0.1:
4203+
version "3.0.2"
4204+
resolved "https://registry.yarnpkg.com/primer-support/-/primer-support-3.0.2.tgz#53ab794dc7e492e66f60f3bae73c92ab0c030537"
4205+
4206+
primer-table-object@^1.0.0:
4207+
version "1.0.3"
4208+
resolved "https://registry.yarnpkg.com/primer-table-object/-/primer-table-object-1.0.3.tgz#6684eea0bf639bffd9879565d0dcc1c7486fc0b3"
4209+
dependencies:
4210+
primer-support "*"
4211+
4212+
primer-tooltips@^0.5.0:
4213+
version "0.5.3"
4214+
resolved "https://registry.yarnpkg.com/primer-tooltips/-/primer-tooltips-0.5.3.tgz#7045dc49ea24d1bbb89d3d7df29f77fe1e4d7fac"
4215+
dependencies:
4216+
primer-support "*"
4217+
4218+
primer-truncate@^0.3.0:
4219+
version "0.3.2"
4220+
resolved "https://registry.yarnpkg.com/primer-truncate/-/primer-truncate-0.3.2.tgz#ffecd0199ab06ea4d3e45c221a8408bc14210a11"
4221+
dependencies:
4222+
primer-support "*"
4223+
4224+
primer-utilities@^4.0.1:
4225+
version "4.1.1"
4226+
resolved "https://registry.yarnpkg.com/primer-utilities/-/primer-utilities-4.1.1.tgz#f02d8168c7c30aa4419114e0abe4259c90e1542f"
4227+
dependencies:
4228+
primer-support "*"
4229+
41504230
private@^0.1.6:
41514231
version "0.1.7"
41524232
resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"

0 commit comments

Comments
 (0)