work on #291, added Fine-grained personal access tokens

Drive4ik · Oct 7, 2024 · 6d91fca · 6d91fca
1 parent 3c8d450
commit 6d91fca
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 35 deletions.
diff --git a/addon/src/_locales/en/messages.json b/addon/src/_locales/en/messages.json
@@ -1271,14 +1271,6 @@
         "message": "Simple Tab Groups backup file for cloud sync",
         "description": "Simple Tab Groups backup file for cloud sync"
     },
-    "githubCantUploadBackupToGist": {
-        "message": "Failed to upload the backup to GitHub Gist. Please try again later.",
-        "description": "Failed to upload the backup to GitHub Gist. Please try again later."
-    },
-    "githubCantCreateBackupIntoGist": {
-        "message": "Cannot create a backup to GitHub Gist. Please try again later.",
-        "description": "Cannot create a backup to GitHub Gist. Please try again later."
-    },
     "githubInvalidGistContent": {
         "message": "GitHub Gist backup has incorrect data",
         "description": "GitHub Gist backup has incorrect data"

diff --git a/addon/src/js/mixins/sync-cloud.mixin.js b/addon/src/js/mixins/sync-cloud.mixin.js
@@ -60,8 +60,8 @@ export default {
             .$on('sync-end', () => {
                 //
             })
-            .$on('sync-error', ({message}) => {
-                this.synchronisationError = message;
+            .$on('sync-error', ({name, message}) => {
+                this.synchronisationError = `${name}: ${message}`;
             })
             .$on('sync-finish', ({action}) => {
                 const hideProgressMs = action === 'sync-error' ? 5000 : 600;

diff --git a/addon/src/js/sync/cloud/cloud.js b/addon/src/js/sync/cloud/cloud.js
@@ -23,7 +23,7 @@ export function CloudError(langId) {
     this.name = 'CloudError';
     this.message = browser.i18n.getMessage(langId) || langId;
 
-    this.toString = () => 'CloudError: ' + this.message;
+    this.toString = () => `${this.name}: ${this.message}`;
 }
 
 const TRUTH_LOCAL = 'local';
@@ -169,7 +169,7 @@ export async function sync(progressFunc = null) {
                 await GithubGistCloud.updateGist(syncResult.cloudData);
             } catch (e) {
                 log.stopError(e);
-                throw new CloudError('githubCantUploadBackupToGist');
+                throw new CloudError(e.message);
             }
         }
     } else {
@@ -179,7 +179,7 @@ export async function sync(progressFunc = null) {
             await saveNewGistId(result.id);
         } catch (e) {
             log.stopError(e);
-            throw new CloudError('githubCantCreateBackupIntoGist');
+            throw new CloudError(e.message);
         }
     }
 

diff --git a/addon/src/js/sync/cloud/githubgist.js b/addon/src/js/sync/cloud/githubgist.js
@@ -2,7 +2,6 @@
 import '/js/prefixed-storage.js';
 import JSON from '/js/json.js';
 import * as Urls from '/js/urls.js';
-import * as Utils from '/js/utils.js';
 
 const GISTS_PER_PAGE = 30; // max = 100
 
@@ -33,7 +32,17 @@ GithubGist.prototype.loadUser = async function() {
     return this.request('get', GITHUB_USER_URL);
 }
 
-GithubGist.prototype.checkToken = GithubGist.prototype.loadUser;
+GithubGist.prototype.checkToken = async function() {
+    try {
+        await this.request('post', [GISTS_URL, {}], undefined, undefined, true);
+    } catch (e) {
+        if (e.status === 422) {
+            return true;
+        }
+
+        throw e;
+    }
+};
 
 GithubGist.prototype.findGistId = async function() {
     this.gistId = '';
@@ -73,7 +82,7 @@ GithubGist.prototype.getGist = async function(onlyInfo = false) {
         const file = gist.files[this.fileName];
 
         if (!file) {
-            throw Error('githubNotFoundBackup');
+            throw Error('githubNotFound');
         }
 
         processGistInfo(gist);
@@ -94,14 +103,14 @@ GithubGist.prototype.getGist = async function(onlyInfo = false) {
             throw Error('githubInvalidGistContent');
         }
 
-        if (e.message === 'githubNotFoundBackup') {
+        if (e.message === 'githubNotFound') {
             if (!this.secondTry) {
                 this.secondTry = true;
 
                 await this.findGistId();
 
                 if (this.gistId) {
-                    return this.getGist();
+                    return this.getGist(onlyInfo);
                 }
             }
 
@@ -115,7 +124,7 @@ GithubGist.prototype.getGist = async function(onlyInfo = false) {
 }
 
 GithubGist.prototype.createGist = async function(content, description = '') {
-    const gist = this.request('post', GISTS_URL, {
+    const gist = await this.request('post', GISTS_URL, {
         public: false,
         description,
         files: {
@@ -152,7 +161,7 @@ GithubGist.prototype.renameGist = async function(newFileName) {
     return result;
 }
 
-GithubGist.prototype.request = async function(method, url, body = {}, reqOptions = {}) {
+GithubGist.prototype.request = async function(method, url, body = {}, reqOptions = {}, throwUnknownResponse = false) {
     if (!this.token) {
         throw Error('githubInvalidToken');
     }
@@ -200,26 +209,44 @@ GithubGist.prototype.request = async function(method, url, body = {}, reqOptions
 
     let response = await fetch(url, options);
 
+    if (response.ok) {
+        if (this.progressFunc) {
+            response = await readBody(response, this.progressFunc, contentLength);
+        }
+
+        if (options.method !== 'GET') {
+            delete storage.hasError;
+        }
+
+        return response.json();
+    }
+
+    if (!throwUnknownResponse) {
+        storage.hasError = true;
+    }
+
     if (isApi) {
-        const hasGistAccess = response.headers.get('x-oauth-scopes')?.split(/\s*,\s*/).includes('gist');
+        const classicScopes = response.headers.get('x-oauth-scopes');
 
-        if (!hasGistAccess) {
+        if (classicScopes && !classicScopes.includes('gist')) {
             throw Error('githubTokenNoAccess');
         }
     }
 
-    if (response.ok) {
-        if (this.progressFunc) {
-            response = await readBody(response, this.progressFunc, contentLength);
-        }
+    if (response.status === 401) {
+        throw Error('githubInvalidToken');
+    }
 
-        return response.json();
+    if (response.status === 403) {
+        throw Error('githubTokenNoAccess');
     }
 
     if (response.status === 404) {
-        throw Error('githubNotFoundBackup');
-    } else if (response.status === 401) {
-        throw Error('githubInvalidToken');
+        throw Error('githubNotFound');
+    }
+
+    if (throwUnknownResponse) {
+        throw response;
     }
 
     const result = await response.json();

diff --git a/addon/src/options/github-gist-fields.vue b/addon/src/options/github-gist-fields.vue
@@ -104,7 +104,7 @@ export default {
                     'is-loading': tokenLoading,
                     'has-icons-right': tokenCheched !== null,
                     }]">
-                    <input type="text" v-model.trim="internalToken" maxlength="40" class="input" />
+                    <input type="text" v-model.trim="internalToken" class="input" />
 
                     <span class="icon is-left">
                         <img class="size-16" src="/icons/key-solid.svg">

diff --git a/addon/src/options/github-gist.vue b/addon/src/options/github-gist.vue
@@ -130,6 +130,7 @@ export default {
 
         async loadGistInfo(area) {
             area.gist = null;
+            // area.error = '';
 
             if (!area.options.githubGistId) {
                 area.gist = false;

diff --git a/addon/src/popup/Popup.vue b/addon/src/popup/Popup.vue
@@ -137,6 +137,7 @@
                 multipleTabIds: [], // TODO try use Set Object
 
                 syncLastUpdateAgo: null,
+                syncHasError: false,
             };
         },
         components: {
@@ -1336,6 +1337,8 @@
                 if (githubStorage.updated_at) {
                     this.syncLastUpdateAgo = Utils.timeAgo(githubStorage.updated_at);
                 }
+
+                this.syncHasError = !!githubStorage.hasError;
             },
         },
     }
@@ -1792,6 +1795,7 @@
                     }"
                     >
                     <img class="size-16" src="/icons/cloud-arrow-up-solid.svg" />
+                    <img v-if="syncHasError" id="sync-error-icon" src="/icons/exclamation-triangle-yellow.svg">
                 </div>
             </div>
             <div class="is-flex is-align-items-center is-vertical-separator"></div>
@@ -2099,6 +2103,7 @@
                 --progress-color: hsl(from currentColor h s calc(l + 70));
                 --progress-background: var(--current-background-color);
 
+                position: relative;
                 height: calc(var(--footer-height) - var(--indent));
                 width: calc(var(--footer-height) - var(--indent));
                 border-radius: 50%;
@@ -2121,6 +2126,14 @@
                 &.is-danger {
                     --progress-color: red;
                 }
+
+                #sync-error-icon {
+                    position: absolute;
+                    right: 0;
+                    bottom: 0;
+                    width: 10px;
+                    height: 10px;
+                }
             }
         }
 

diff --git a/addon/src/stg-background.js b/addon/src/stg-background.js
@@ -2966,18 +2966,16 @@ async function cloudSync(auto = false) {
         sendMessage('sync-end');
         log.stop();
     } catch (e) {
-        const message = String(e);
-
         if (auto) {
-            Utils.notify(message, undefined, undefined, undefined, () => Urls.openOptionsPage('backup sync'));
+            Utils.notify(String(e), undefined, undefined, undefined, () => Urls.openOptionsPage('backup sync'));
         }
 
         log.logError('cant sync', e);
         log.stopError();
         sendMessage('sync-error', {
             id: e.id,
             name: e.name,
-            message: message,
+            message: e.message,
         });
     }
 }