Working options page

2022-10-20 18:19:21 -07:00
parent 0e0219bbcb
commit 825ad721f1
4 changed files with 168 additions and 3 deletions
--- a/manifest.json
+++ b/manifest.json
@@ -12,9 +12,9 @@

 		"permissions": [
 			"clipboardRead",
-		"storage",
-		"unlimitedStorage",
-		"<all_urls>"
+			"storage",
+			"unlimitedStorage",
+			"<all_urls>"
 		],

 		"browser_action": {
@@ -32,6 +32,10 @@
 			"scripts": ["background.js"]
 		},

+		"options_ui": {
+			"page": "options.html"
+		},
+
 		"browser_specific_settings": {
 			"gecko": {
 				"id": "{073d8528-4b24-11ed-9b73-c71d3da4ab37}"
--- a/options.css
+++ b/options.css
@@ -0,0 +1,17 @@
+body {
+	margin: 10px;
+	font-family: monospace;
+}
+
+ul {
+	margin-top: 0;
+}
+
+input {
+	font-family: monospace;
+	width: 53ch;
+}
+
+div {
+	margin-bottom: 5px;
+}
--- a/options.html
+++ b/options.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<link rel="stylesheet" href="options.css">
+</head>
+
+<body>
+	<div>
+		<ul>
+			<li>Click <a href="https://app.asana.com/0/my-apps">here</a></li>
+			<li>Click "+ Create new token"</li>
+			<li>Type "Quick Asana" in the "Token name" field</li>
+			<li>Check the box next to "I agree to the API terms and conditions"</li>
+			<li>Click "Create token"</li>
+			<li>Click "Copy"</li>
+			<li>Return to this tab</li>
+			<li>Paste the token into the field below</li>
+		</ul>
+		Personal access token: <input type="text" id="token">
+	</div>
+
+	<div>
+		Workspace: <select id="workspace"></select>
+	</div>
+
+	<div>
+		Assignee: <select id="assignee"></select>
+	</div>
+
+	<script src="options.js"></script>
+</body>
+</html>
+
--- a/options.js
+++ b/options.js
@@ -0,0 +1,110 @@
+async function onLoad() {
+	const cfg = await browser.storage.sync.get();
+
+	const token = document.getElementById('token');
+	token.value = cfg.token || '';
+	token.addEventListener('input', async () => {
+		set('token', token.value);
+		await populateWorkspaces();
+		await populateAssignees();
+	});
+
+	await populateWorkspaces();
+	await populateAssignees();
+
+	const workspace = document.getElementById('workspace');
+	workspace.addEventListener('change', async () => {
+		await set('workspace', workspace.value);
+	});
+
+	const assignee = document.getElementById('assignee');
+	assignee.addEventListener('change', async () => {
+		await set('assignee', assignee.value);
+	});
+}
+
+async function populateWorkspaces() {
+	const cfg = await browser.storage.sync.get();
+
+	if (!cfg.token) {
+		return;
+	}
+
+	const workspacesResp = await fetch(
+		'https://app.asana.com/api/1.0/workspaces',
+		{
+			method: 'GET',
+			headers: {
+				'Authorization': `Bearer ${cfg.token}`,
+				'Accept': 'application/json',
+			},
+			credentials: 'omit',
+		},
+	);
+
+	const workspaces = await workspacesResp.json();
+
+	const select = document.getElementById('workspace');
+	select.innerHTML = '';
+
+	for (const workspace of workspaces.data) {
+		const option = document.createElement('option');
+		option.innerText = workspace.name;
+		option.value = workspace.gid;
+		select.appendChild(option);
+
+		if (option.value == cfg.workspace) {
+			option.selected = true;
+		}
+	}
+
+	if (!cfg.workspace) {
+		await set('workspace', select.value);
+	}
+}
+
+async function populateAssignees() {
+	const cfg = await browser.storage.sync.get();
+
+	if (!cfg.token) {
+		return;
+	}
+
+	// TODO: Support other assignees
+
+	const meResp = await fetch(
+		'https://app.asana.com/api/1.0/users/me',
+		{
+			method: 'GET',
+			headers: {
+				'Authorization': `Bearer ${cfg.token}`,
+				'Accept': 'application/json',
+			},
+			credentials: 'omit',
+		},
+	);
+
+	const me = await meResp.json();
+
+	const select = document.getElementById('assignee');
+	select.innerHTML = '';
+
+	const option = document.createElement('option');
+	option.innerText = `${me.data.name} <${me.data.email}>`;
+	option.value = me.data.gid;
+	select.appendChild(option);
+
+	option.selected = true;
+
+	if (!cfg.assignee) {
+		await set('assignee', select.value);
+	}
+}
+
+async function set(key, val) {
+	const store = {};
+	store[key] = val;
+	await browser.storage.sync.set(store);
+}
+
+addEventListener('DOMContentLoaded', onLoad);