Initial MVP of GitHub gist support

components/collections/import-export-collections.vue

@@ -6,6 +6,35 @@
           <div class="row-wrapper">
             <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
             <div>
+              <v-popover>
+                <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+                  <i class="material-icons">more_vert</i>
+                </button>
+                <template slot="popover">
+                  <div
+                    v-tooltip="{
+                      content:
+                        !fb.currentUser &&
+                        this.$store.state.postwoman.providerInfo.providerId !== 'github.com'
+                          ? $t('login_with_github_to') + $t('create_secret_gist')
+                          : null,
+                    }"
+                  >
+                    <button
+                      :disabled="
+                        !fb.currentUser &&
+                        this.$store.state.postwoman.providerInfo.providerId !== 'github.com'
+                      "
+                      class="icon"
+                      @click="createCollectionGist"
+                      v-close-popover
+                    >
+                      <i class="material-icons">code</i>
+                      <span>{{ $t("create_secret_gist") }}</span>
+                    </button>
+                  </div>
+                </template>
+              </v-popover>
               <button class="icon" @click="hideModal">
                 <closeIcon class="material-icons" />
               </button>
@@ -97,6 +126,37 @@ export default {
     },
   },
   methods: {
+    async createCollectionGist() {
+      await this.$axios
+        .$post(
+          "https://api.github.com/gists",
+          {
+            files: {
+              "hoppscotch-collections.json": {
+                content: this.collectionJson,
+              },
+            },
+          },
+          {
+            headers: {
+              Authorization: `token ${this.$store.state.postwoman.providerInfo.accessToken}`,
+              Accept: "application/vnd.github.v3+json",
+            },
+          }
+        )
+        .then((response) => {
+          this.$toast.success(this.$t("gist_created"), {
+            icon: "done",
+          })
+          window.open(response.html_url)
+        })
+        .catch((error) => {
+          this.$toast.error(this.$t("something_went_wrong"), {
+            icon: "error",
+          })
+          console.log(error)
+        })
+    },
     hideModal() {
       this.$emit("hide-modal")
     },

components/firebase/login.vue

@@ -109,7 +109,12 @@ export default {
     },
     async signInWithGithub() {
       try {
-        const { additionalUserInfo } = await fb.signInUserWithGithub()
+        const { credential, additionalUserInfo } = await fb.signInUserWithGithub()
+
+        this.$store.commit("postwoman/setProviderInfo", {
+          providerId: "github.com",
+          accessToken: credential.accessToken,
+        })
 
         if (additionalUserInfo.isNewUser) {
           this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {

helpers/fb.js

@@ -131,7 +131,7 @@ export class FirebaseInstance {
   }
 
   async signInUserWithGithub() {
-    return await this.app.auth().signInWithPopup(this.authProviders.github())
+    return await this.app.auth().signInWithPopup(this.authProviders.github().addScope("repo gist"))
   }
 
   async signInWithEmailAndPassword(email, password) {

lang/en-US.json

@@ -294,5 +294,8 @@
   "experiments": "Experiments",
   "experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, ",
   "use_experimental_url_bar": "Use experimental URL bar with environment highlighting",
-  "select_environment": "Select environment"
+  "select_environment": "Select environment",
+  "login_with_github_to": "Login with GitHub to ",
+  "create_secret_gist": "Create secret Gist",
+  "gist_created": "Gist created"
 }

store/postwoman.js

@@ -64,6 +64,7 @@ export const state = () => ({
   editingEnvironment: {},
   selectedRequest: {},
   editingRequest: {},
+  providerInfo: {},
 })
 
 export const mutations = {
@@ -335,6 +336,10 @@ export const mutations = {
       }
     }
   },
+
+  setProviderInfo(state, value) {
+    state.providerInfo = value
+  },
 }
 
 function testValue(myValue) {