diff --git a/background/style-manager.js b/background/style-manager.js index 8c9c6f3c..062a1ef1 100644 --- a/background/style-manager.js +++ b/background/style-manager.js @@ -7,6 +7,7 @@ /* global tabMan */ /* global usercssMan */ /* global tokenMan */ +/* global retrieveStyleInformation uploadStyle */// usw-api.js 'use strict'; /* @@ -48,7 +49,7 @@ const styleMan = (() => { name: style => `ID: ${style.id}`, _id: () => uuidv4(), _rev: () => Date.now(), - _uswToken: () => '', + _usw: () => ({}), }; const DELETE_IF_NULL = ['id', 'customName', 'md5Url', 'originalMd5']; /** @type {Promise|boolean} will be `true` to avoid wasting a microtask tick on each `await` */ @@ -361,15 +362,26 @@ const styleMan = (() => { } switch (reason) { case 'link': - style._uswToken = await tokenMan.getToken('userstylesworld', true, style.id); + style._usw = { + token: await tokenMan.getToken('userstylesworld', true, style.id), + }; + for (const [k, v] of Object.entries(await retrieveStyleInformation(style._usw.token))) { + style._usw[k] = v; + } handleSave(await saveStyle(style), 'success-linking', true); break; case 'revoke': await tokenMan.revokeToken('userstylesworld', style.id); - style._uswToken = ''; + style._usw = {}; handleSave(await saveStyle(style), 'success-revoke', true); break; + + case 'upload': + if (!style._usw.token) { + return; + } + uploadStyle(style._usw.token, style); } }); } @@ -449,7 +461,7 @@ const styleMan = (() => { style.id = newId; } uuidIndex.set(style._id, style.id); - API.sync.put(style._id, style._rev, style._uswToken); + API.sync.put(style._id, style._rev, style._usw); } async function saveStyle(style) { diff --git a/background/usw-api.js b/background/usw-api.js new file mode 100644 index 00000000..bc9f4887 --- /dev/null +++ b/background/usw-api.js @@ -0,0 +1,29 @@ +/* global URLS */ // toolbox.js + +'use strict'; + +/* exported retrieveStyleInformation */ +async function retrieveStyleInformation(token) { + return (await (await fetch(`${URLS.usw}api/style`, { + method: 'GET', + headers: new Headers({ + 'Authorization': `Bearer ${token}`, + }), + credentials: 'omit', + })).json()).data; +} + +/* exported uploadStyle */ +async function uploadStyle(token, style) { + return (await (await fetch(`${URLS.usw}api/style/${style._usw.id}`, { + method: 'POST', + headers: new Headers({ + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json', + }), + body: JSON.stringify({ + code: style.sourceCode, + }), + credentials: 'omit', + })).json()).data; +} diff --git a/edit.html b/edit.html index ad1fffd7..43279f2e 100644 --- a/edit.html +++ b/edit.html @@ -392,14 +392,16 @@ -
+

-

This style has been linked.

- +
+ + +
diff --git a/edit/edit.js b/edit/edit.js index 602fa242..26efff25 100644 --- a/edit/edit.js +++ b/edit/edit.js @@ -11,7 +11,7 @@ /* global linterMan */ /* global prefs */ /* global t */// localization.js -/* global updateUI, linkToUSW revokeLinking */// usw-linking.js +/* global updateUI linkToUSW revokeLinking uploadStyle */// usw-linking.js 'use strict'; //#region init @@ -46,6 +46,7 @@ baseInit.ready.then(async () => { require(['/edit/linter-dialogs'], () => linterMan.showLintHelp()); $('#link-style').onclick = () => linkToUSW(); $('#revoke-style').onclick = () => revokeLinking(); + $('#upload-style').onclick = () => uploadStyle(); require([ '/edit/autocomplete', '/edit/global-search', @@ -64,7 +65,6 @@ msg.onExtension(request => { if (['success-linking', 'success-revoke'].includes(request.reason)) { updateUI(newStyle); - console.log(editor.style._uswToken); } }); } diff --git a/edit/usw-linking.js b/edit/usw-linking.js index cd72347a..7d14b660 100644 --- a/edit/usw-linking.js +++ b/edit/usw-linking.js @@ -1,4 +1,4 @@ -/* global $ */// dom.js +/* global $ $create $remove */// dom.js /* global editor */ 'use strict'; @@ -28,13 +28,28 @@ function revokeLinking() { uswPort.postMessage({reason: 'revoke', data: editor.style}); } +/* exported uploadStyle */ +function uploadStyle() { + connectToPort(); + const data = Object.assign(editor.style, {sourceCode: editor.getEditors()[0].getValue()}); + uswPort.postMessage({reason: 'upload', data}); +} + /* exported updateUI */ function updateUI(useStyle) { const style = useStyle || editor.style; - if (style._uswToken) { - $('#after-linking').style = ''; + if (style._usw && style._usw.token) { + const afterLinking = $('#after-linking'); + afterLinking.style = ''; $('#pre-linking').style = 'display: none;'; + + const linkInformation = $create('div', {id: 'link-info'}, [ + $create('p', `Style name: ${style._usw.name}`), + $create('p', `Description: ${style._usw.description}`), + ]); + $remove('#link-info'); + afterLinking.insertBefore(linkInformation, afterLinking.firstChild); } else { $('#after-linking').style = 'display: none;'; $('#pre-linking').style = ''; diff --git a/manifest.json b/manifest.json index aafb0dcc..46f3c017 100644 --- a/manifest.json +++ b/manifest.json @@ -44,6 +44,7 @@ "background/sync-manager.js", "background/tab-manager.js", "background/token-manager.js", + "background/usw-api.js", "background/update-manager.js", "background/usercss-install-helper.js", "background/usercss-manager.js",