Add support for personal access tokens (refined-github#1375)

saulcosta · fregante · commit 42b4759e489a · 2018-06-17T14:47:02.000+02:00
diff --git a/source/background.js b/source/background.js
@@ -7,6 +7,7 @@ new OptionsSync().define({
 	defaults: {
 		disabledFeatures: '',
 		customCSS: '',
+		personalToken: '',
 		logging: false
 	},
 	migrations: [
diff --git a/source/libs/api.js b/source/libs/api.js
@@ -1,11 +1,18 @@
+import OptionsSync from 'webext-options-sync';
+
 const cache = new Map();
 
 export default async endpoint => {
 	if (cache.has(endpoint)) {
 		return cache.get(endpoint);
 	}
+	const headers = {};
+	const {personalToken} = await new OptionsSync().getAll();
+	if (personalToken) {
+		headers.Authorization = `token ${personalToken}`;
+	}
 	const api = location.hostname === 'github.com' ? 'https://api.github.com/' : `${location.origin}/api/`;
-	const response = await fetch(api + endpoint);
+	const response = await fetch(api + endpoint, {headers});
 	const json = await response.json();
 	cache.set(endpoint, json);
 	return json;
diff --git a/source/options.css b/source/options.css
@@ -1,6 +1,19 @@
 body {
 	min-width: 430px; /* Required to size the Browser Action popup */
 }
+:root {
+	--github-green: #28a745;
+	--github-red: #cb2431;
+}
+input:not([type='checkbox']):not(:placeholder-shown):valid {
+	color: var(--github-green);
+	border: 1px solid;
+}
+input:not([type='checkbox']):invalid {
+	color: var(--github-red);
+	border: 1px solid;
+}
+input:not([type='checkbox']),
 textarea {
 	display: block;
 	width: 100%;
diff --git a/source/options.html b/source/options.html
@@ -23,6 +23,18 @@ <h2 class="only-firefox">Options</h2>
 		</label>
 	</p>
 
+	<hr>
+
+	<p>
+		<label>
+			<strong>Personal token</strong>, <a href="https://github.com/settings/tokens/new?description=Refined%20GitHub" target="_blank">found here</a> (for high rate API calls and private repos)<br>
+			<!-- placeholder is set to enable use of :placeholder-shown CSS selector -->
+			<input name="personalToken" spellcheck="false" autocomplete="off" size="40" maxlength="40" pattern="[\da-f]{40}" placeholder=" "></input>
+		</label>
+	</p>
+
+	<hr>
+
 	<p>
 		<label>
 			<input type="checkbox" name="logging">
