use access token to publish to gist

package.json

@@ -24,6 +24,7 @@
     "exorcist": "^0.4.0",
     "fast-async": "6.3.1",
     "fast-levenshtein": "^2.0.6",
+    "gists": "^1.0.1",
     "javascript-serialize": "^1.6.1",
     "jquery": "^3.3.1",
     "js-base64": "^2.1.9",

src/app/panels/file-panel.js

@@ -2,8 +2,8 @@
 var async = require('async')
 var $ = require('jquery')
 var yo = require('yo-yo')
-var minixhr = require('minixhr')  // simple and small cross-browser XMLHttpRequest (XHR)
 var remixLib = require('remix-lib')
+var Gists = require('gists')
 var EventManager = remixLib.EventManager
 var FileExplorer = require('../files/file-explorer')
 var modalDialog = require('../ui/modaldialog')
@@ -274,18 +274,16 @@ function filepanel (appAPI, filesProvider) {
   // ------------------ gist publish --------------
 
   function publishToGist (fileProviderName) {
-    function cb (data) {
-      if (data instanceof Error) {
-        console.log('fail', data.message)
-        modalDialogCustom.alert('Failed to create gist: ' + (data || 'Unknown transport error'))
+    function cb (error, data) {
+      if (error) {
+        modalDialogCustom.alert('Failed to create gist: ' + error)
       } else {
-        data = JSON.parse(data)
         if (data.html_url) {
           modalDialogCustom.confirm(null, `Created a gist at ${data.html_url}. Would you like to open it in a new window?`, () => {
             window.open(data.html_url, '_blank')
           })
         } else {
-          modalDialogCustom.alert(data.message + ' ' + data.documentation_url)
+          modalDialogCustom.alert(data.message + ' ' + data.documentation_url + ' ' + JSON.stringify(data.errors, null, '\t'))
         }
       }
     }
@@ -296,17 +294,22 @@ function filepanel (appAPI, filesProvider) {
           console.log(error)
           modalDialogCustom.alert('Failed to create gist: ' + error)
         } else {
-          var description = 'Created using remix-ide: Realtime Ethereum Contract Compiler and Runtime. \n Load this file by pasting this gists URL or ID at https://remix.ethereum.org/#version=' + queryParams.get().version + '&optimize=' + queryParams.get().optimize + '&gist='
-          console.log(packaged)
-          minixhr({
-            url: 'https://api.github.com/gists',
-            method: 'POST',
-            data: JSON.stringify({
+          var tokenAccess = appAPI.config.get('settings/gist-access-token')
+          if (!tokenAccess) {
+            modalDialogCustom.alert('Remix requires an access token (which includes gists creation permission). Please go to the settings tab for more information.')
+          } else {
+            var description = 'Created using remix-ide: Realtime Ethereum Contract Compiler and Runtime. \n Load this file by pasting this gists URL or ID at https://remix.ethereum.org/#version=' + queryParams.get().version + '&optimize=' + queryParams.get().optimize + '&gist='
+            var gists = new Gists({
+              token: tokenAccess
+            })
+            gists.create({
               description: description,
               public: true,
               files: packaged
+            }, (error, result) => {
+              cb(error, result)
             })
-          }, cb)
+          }
         }
       })
     }

src/app/tabs/settings-tab.js

@@ -9,6 +9,7 @@ var styleGuide = require('../ui/styles-guide/theme-chooser')
 var helper = require('../../lib/helper')
 var modal = require('../ui/modal-dialog-custom')
 var tooltip = require('../ui/tooltip')
+var copyToClipboard = require('../ui/copy-to-clipboard')
 
 var css = require('./styles/settings-tab-styles')
 
@@ -24,6 +25,13 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
   Remix never persist any passphrase.`
   var warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fa fa-exclamation-triangle" aria-hidden="true"></i>`
 
+   // Gist settings
+  var gistAccessToken = yo`<input id="gistaccesstoken" type="password">`
+  var token = appAPI.config.get('settings/gist-access-token')
+  if (token) gistAccessToken.value = token
+  var gistAddToken = yo`<input class="${css.savegisttoken}" id="savegisttoken" onclick=${() => { appAPI.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
+  var gistRemoveToken = yo`<input id="removegisttoken" onclick=${() => { gistAccessToken.value = ''; appAPI.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
+
   var el = yo`
     <div class="${css.settingsTabView} "id="settingsView">
       <div class="${css.info}">
@@ -48,8 +56,17 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
           <span class="${css.checkboxText}">Enable Optimization</span>
         </div>
         <div class="${css.crow}">
-          <div>${personal}></div>
-          <span class="${css.checkboxText}">Enable Personal Mode ${warnPersonalMode}></span>
+          <div>${personal}</div>
+          <span class="${css.checkboxText}">Enable Personal Mode ${warnPersonalMode}</span>
+        </div>
+      </div>
+      <div class="${css.info}">
+        <div class=${css.title}>Gist Access Token</div>
+        <div class="${css.crowNoFlex}">Manage the access token used to publish to Gist.</div>
+        <div class="${css.crowNoFlex}">Go to github token page (link below) to create a new token and save it in Remix. Make sure this token has only 'create gist' permission.</div>
+        <div class="${css.crowNoFlex}"><a target="_blank" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></div>
+        <div class="${css.crowNoFlex}">
+          <div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => appAPI.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>
         </div>
       </div>
       <div class="${css.info}">

src/app/tabs/styles/settings-tab-styles.js

@@ -74,6 +74,9 @@ var css = csjs`
     border-radius: 2px;
     margin-left: 5px;
   }
+  .savegisttoken {
+    margin-left: 5px;
+  }
 }
 `