diff --git a/manifest.json b/manifest.json index 5f276e9..a49ed09 100644 --- a/manifest.json +++ b/manifest.json @@ -12,9 +12,9 @@ "permissions": [ "clipboardRead", - "storage", - "unlimitedStorage", - "" + "storage", + "unlimitedStorage", + "" ], "browser_action": { @@ -32,6 +32,10 @@ "scripts": ["background.js"] }, + "options_ui": { + "page": "options.html" + }, + "browser_specific_settings": { "gecko": { "id": "{073d8528-4b24-11ed-9b73-c71d3da4ab37}" diff --git a/options.css b/options.css new file mode 100644 index 0000000..1ec0732 --- /dev/null +++ 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; +} diff --git a/options.html b/options.html new file mode 100644 index 0000000..5849595 --- /dev/null +++ b/options.html @@ -0,0 +1,34 @@ + + + + + + + + +
+
    +
  • Click here
    • +
  • Click "+ Create new token"
    • +
  • Type "Quick Asana" in the "Token name" field
    • +
  • Check the box next to "I agree to the API terms and conditions"
    • +
  • Click "Create token"
    • +
  • Click "Copy"
    • +
  • Return to this tab
    • +
  • Paste the token into the field below
    • +
+ Personal access token: +
+ +
+ Workspace: +
+ +
+ Assignee: +
+ + + + + diff --git a/options.js b/options.js new file mode 100644 index 0000000..1dbd6ae --- /dev/null +++ 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);