Show a message when user has installed app for multiple repos

4 files changed, 64 insertions, 26 deletions

diff --git a/application/components/app.vue b/application/components/app.vue
index eb0d942..a4573f4 100644
--- a/application/components/app.vue
+++ b/application/components/app.vue
@@ -3,6 +3,7 @@ import keyBy from 'lodash/keyBy'
 
 import Keymap from './keymap.vue'
 import Loader from './loader.vue'
+import Modal from './modal.vue'
 
 import * as config from '../config'
 import * as github from '../github'
@@ -15,7 +16,8 @@ import { loadKeycodes } from '../keycodes'
 export default {
   components: {
     keymap: Keymap,
-    Loader
+    Loader,
+    Modal
   },
   provide() {
     return {
@@ -32,6 +34,7 @@ export default {
       indexedKeycodes: {},
       behaviours: [],
       indexedBehaviours: {},
+      tooManyRepos: false,
       keymap: {},
       layout: [],
       layers: [],
@@ -47,6 +50,10 @@ export default {
   methods: {
     async loadData() {
       await github.init()
+      if (config.enableGitHub && github.isGitHubAuthorized() && github.repositories.length > 1) {
+        this.tooManyRepos = true
+        return
+      }
       const loadKeyboardData = async () => {
         if (config.enableGitHub && github.isGitHubAuthorized()) {
           return github.fetchLayoutAndKeymap()
@@ -104,6 +111,10 @@ export default {
         body: JSON.stringify(this.keymap)
       })
     },
+    getInstallationUrl() {
+      console.log(github.installation, github.repositories, github)
+      return `https://github.com/settings/installations/${github.installation.id}`
+    },
     async doReadyCheck() {
       await healthcheck()
       await this.loadData()
@@ -114,28 +125,43 @@ export default {
 
 <template>
   <loader :load="doReadyCheck">
-    <keymap :layout="layout" :keymap="keymap" @update="handleUpdateKeymap" />
-    <div id="actions">
-      <button
-        v-if="config.enableLocal"
-        v-text="`Save Local`"
-        id="compile"
-        @click="handleCompile"
-      />
-      <button
-        v-if="config.enableGitHub && !githubAuthorized"
-        v-text="`Authorize GitHub`"
-        @click="handleGithubAuthorize"
-        title="Install as a GitHub app to edit a zmk-config repository."
-
-      />
-      <button
-        v-if="config.enableGitHub && githubAuthorized"
-        v-text="`Commit Changes`"
-        @click="handleCommitChanges"
-        title="Commit keymap changes to GitHub repository"
-      />
+    <div v-if="tooManyRepos">
+      <modal>
+        <div class="dialog">
+          <h2>Hold up a second!</h2>
+          <p>The Keymap Editor app has been installed for more than one GitHub repository.</p>
+          <p>
+            I'm still working on things, including the ability to pick a specific
+            repo, but in the meantime you should go back to your <a :href="getInstallationUrl()">app configuration</a>
+            and select a single repository containing your keyboard's zmk-config.
+          </p>
+        </div>
+      </modal>
     </div>
+    <template v-else>
+      <keymap :layout="layout" :keymap="keymap" @update="handleUpdateKeymap" />
+      <div id="actions">
+        <button
+          v-if="config.enableLocal"
+          v-text="`Save Local`"
+          id="compile"
+          @click="handleCompile"
+        />
+        <button
+          v-if="config.enableGitHub && !githubAuthorized"
+          v-text="`Authorize GitHub`"
+          @click="handleGithubAuthorize"
+          title="Install as a GitHub app to edit a zmk-config repository."
+
+        />
+        <button
+          v-if="config.enableGitHub && githubAuthorized"
+          v-text="`Commit Changes`"
+          @click="handleCommitChanges"
+          title="Commit keymap changes to GitHub repository"
+        />
+      </div>
+    </template>
   </loader>
 </template>
 
@@ -152,4 +178,11 @@ button {
   margin: 2px;
 }
 
+.dialog {
+  background-color: white;
+  padding: 40px;
+  margin: 40px;
+  max-width: 500px;
+}
+
 </style>
diff --git a/application/components/modal.vue b/application/components/modal.vue
index 2eb5bf3..1f0ca3c 100644
--- a/application/components/modal.vue
+++ b/application/components/modal.vue
@@ -8,7 +8,9 @@ export default {
 <template>
   <teleport to="body">
     <div class="wrapper">
-      <slot />
+      <div class="content">
+        <slot />
+      </div>
     </div>
   </teleport>
 </template>
@@ -24,4 +26,7 @@ export default {
   justify-content: center;
   align-items: center;
 }
+.content {
+  display: block;
+}
 </style>
\ No newline at end of file
diff --git a/application/components/value-picker.vue b/application/components/value-picker.vue
index fca91f7..e4fdf52 100644
--- a/application/components/value-picker.vue
+++ b/application/components/value-picker.vue
@@ -141,7 +141,7 @@ export default {
   </div>
 </template>
 
-<style>
+<style scoped>
 
 .dialog {
 	position: absolute;
diff --git a/application/github.js b/application/github.js
index 51dafea..5a06f54 100644
--- a/application/github.js
+++ b/application/github.js
@@ -1,8 +1,8 @@
 import * as config from './config'
 
 let token
-let installation
-let repositories
+export let installation
+export let repositories
 
 function request (...args) {
   return fetch(...args).then(res => {