Refactor warning dialogs

3 files changed, 75 insertions, 41 deletions

diff --git a/application/components/app.vue b/application/components/app.vue
index ac4348d..d1207e6 100644
--- a/application/components/app.vue
+++ b/application/components/app.vue
@@ -2,8 +2,8 @@
 
 import Initialize from './initialize.vue'
 import Keymap from './keymap.vue'
-import Loader from './loader.vue'
-import Modal from './modal.vue'
+import TooManyRepos from './messages/too-many-repos.vue'
+import InvalidRepo from './messages/invalid-repo.vue'
 
 import * as config from '../config'
 import * as github from '../github'
@@ -12,8 +12,8 @@ export default {
   components: {
     keymap: Keymap,
     Initialize,
-    Loader,
-    Modal
+    TooManyRepos,
+    InvalidRepo
   },
   provide() {
     return {
@@ -115,9 +115,6 @@ export default {
         body: JSON.stringify(this.editingKeymap)
       })
     },
-    getInstallationUrl() {
-      return `https://github.com/settings/installations/${github.installation.id}`
-    },
     async doReadyCheck() {
       await healthcheck()
       await this.loadData()
@@ -128,33 +125,9 @@ export default {
 
 <template>
   <initialize v-slot="{ keymap, layout }">
-    <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>
-
-    <div v-else-if="loadKeyboardError === 'InvalidRepoError'">
-      <modal>
-        <div class="dialog">
-          <h2>Hold up a second!</h2>
-          <p>The selected repository does not contain <code>info.json</code> or <code>keymap.json</code>.</p>
-          <p>
-            This app depends on some additional metadata to render the keymap.
-            For an example repository ready to use now or metadata you can apply
-            to your own keyboard repo, have a look at <a href="https://github.com/nickcoutsos/zmk-config-corne-demo/">zmk-config-corne-demo</a>.
-          </p>
-        </div>
-      </modal>
-    </div>
+    <TooManyRepos v-if="tooManyRepos" />
+
+    <InvalidRepo v-else-if="loadKeyboardError === 'InvalidRepoError'" />
 
     <template v-else>
       <keymap
@@ -213,13 +186,6 @@ button[disabled] {
   cursor: not-allowed;
 }
 
-.dialog {
-  background-color: white;
-  padding: 40px;
-  margin: 40px;
-  max-width: 500px;
-}
-
 .github-link {
   display: inline-block;
   position: absolute;
diff --git a/application/components/messages/invalid-repo.vue b/application/components/messages/invalid-repo.vue
new file mode 100644
index 0000000..fc96256
--- /dev/null
+++ b/application/components/messages/invalid-repo.vue
@@ -0,0 +1,31 @@
+<template>
+  <modal>
+    <div class="dialog">
+      <h2>Hold up a second!</h2>
+      <p>The selected repository does not contain <code>info.json</code> or <code>keymap.json</code>.</p>
+      <p>
+        This app depends on some additional metadata to render the keymap.
+        For an example repository ready to use now or metadata you can apply
+        to your own keyboard repo, have a look at <a href="https://github.com/nickcoutsos/zmk-config-corne-demo/">zmk-config-corne-demo</a>.
+      </p>
+    </div>
+  </modal>
+</template>
+
+<script>
+import Modal from '../modal.vue'
+
+export default {
+  name: 'InvalidRepo',
+  components: { Modal },
+}
+</script>
+
+<style scoped>
+.dialog {
+  background-color: white;
+  padding: 40px;
+  margin: 40px;
+  max-width: 500px;
+}
+</style>
diff --git a/application/components/messages/too-many-repos.vue b/application/components/messages/too-many-repos.vue
new file mode 100644
index 0000000..086e471
--- /dev/null
+++ b/application/components/messages/too-many-repos.vue
@@ -0,0 +1,37 @@
+<template>
+  <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>
+</template>
+
+<script>
+import Modal from '../modal.vue'
+import * as github from '../../github'
+
+export default {
+  name: 'TooManyRepos',
+  components: { Modal },
+  methods: {
+    getInstallationUrl() {
+      return `https://github.com/settings/installations/${github.installation.id}`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog {
+  background-color: white;
+  padding: 40px;
+  margin: 40px;
+  max-width: 500px;
+}
+</style>
\ No newline at end of file