feat: add error and info message box

src/components/CodeBlock.vue

@@ -22,6 +22,7 @@ import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-markdown'
 import 'prismjs/themes/prism-tomorrow.css'
 import { computed, ref, toRefs } from 'vue'
+import { msg } from '../store.js'
 
 export default {
   props: {
@@ -57,6 +58,9 @@ export default {
     const copyCode = async () => {
       try {
         await navigator.clipboard.writeText(code.value)
+        msg.color = '#0000ff'
+        msg.showMsg = true
+        msg.content = 'Code has been copied to Clipboard.'
       } catch (e) {
         console.error(e)
       }

src/components/Message.vue

@@ -0,0 +1,69 @@
+<template>
+  <Transition name="fade">
+    <div class="msg-wrapper" v-if="msg.showMsg" @click="msg.showMsg = false">
+      <div class="msg" :style="style">
+        {{ message }}
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script>
+// referenced on
+// https://github.com/vuejs/vue-next/blob/master/packages/sfc-playground/src/Message.vue
+import { computed, toRefs } from 'vue'
+import { msg } from '../store.js'
+
+export default {
+  props: {
+    message: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const { message, color } = toRefs(props)
+    const style = computed(() => {
+      return {
+        borderColor: color.value,
+        color: color.value,
+        background: color.value + '33'
+      }
+    })
+
+    return { message, color, style, msg }
+  }
+}
+</script>
+
+<style scoped>
+.msg-wrapper {
+  position: fixed;
+  --msg-offset: 1.5rem;
+  bottom: var(--msg-offset);
+  right: var(--msg-offset);
+  left: 0;
+  padding-left: var(--msg-offset);
+  width: inherit;
+}
+.msg {
+  border-radius: 8px;
+  border-width: 2px;
+  border-style: solid;
+  margin-right: var(--msg-offset);
+  padding: 1rem 2rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.25s ease-out;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translate(0, 10px);
+}
+</style>

src/components/NavBar.vue

@@ -63,7 +63,7 @@
     >
       <div class="msg-wrapper">
         <div class="msg">
-          <h2>🎉 Your Training Script Generated! 🎉</h2>
+          <h2>🎉 Your Training Script Has Been Generated! 🎉</h2>
           <p>
             Thanks for using Code-Generator! Feel free to reach out to us on
             <a
@@ -83,7 +83,7 @@
 
 <script>
 import { version } from '../../package.json'
-import { store } from '../store'
+import { store, msg } from '../store'
 import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
 import IconDiscord from './IconDiscord.vue'
@@ -101,13 +101,21 @@ export default {
 
     const downloadProject = () => {
       if (store.code && Object.keys(store.code).length) {
-        for (const filename in store.code) {
-          zip.file(filename, store.code[filename])
+        if (!store.config.output_dir) {
+          msg.showMsg = true
+          msg.content = `Output directory is required. Please input in Loggers tab.`
+        } else {
+          for (const filename in store.code) {
+            zip.file(filename, store.code[filename])
+          }
+          zip.generateAsync({ type: 'blob' }).then((content) => {
+            saveAs(content, `ignite-${store.config.template}.zip`)
+          })
+          showDownloadMsg.value = true
         }
-        zip.generateAsync({ type: 'blob' }).then((content) => {
-          saveAs(content, `ignite-${store.config.template}.zip`)
-        })
-        showDownloadMsg.value = true
+      } else {
+        msg.showMsg = true
+        msg.content = 'Choose a template to download.'
       }
     }
     return { version, downloadProject, showDownloadMsg, currentCommit }

src/components/PaneLeft.vue

@@ -15,17 +15,20 @@
       <component :is="currentTabComponent"></component>
     </KeepAlive>
   </div>
+  <Message :message="msg.content" :color="msg.color" />
 </template>
 
 <script>
 import TabTemplates from './TabTemplates.vue'
 import TabTraining from './TabTraining.vue'
 import TabHandlers from './TabHandlers.vue'
 import TabLoggers from './TabLoggers.vue'
+import Message from './Message.vue'
 import { computed, ref } from 'vue'
+import { msg } from '../store.js'
 
 export default {
-  components: { TabTemplates, TabTraining, TabLoggers, TabHandlers },
+  components: { TabTemplates, TabTraining, TabLoggers, TabHandlers, Message },
   setup() {
     const currentTab = ref('Templates')
     const tabs = ref(['Templates', 'Training', 'Handlers', 'Loggers'])
@@ -35,7 +38,7 @@ export default {
       return 'tab-' + currentTab.value.toLowerCase()
     })
 
-    return { currentTab, tabs, currentTabComponent }
+    return { currentTab, tabs, currentTabComponent, msg }
   }
 }
 </script>

src/store.js

@@ -27,6 +27,13 @@ const files = {}
 // filename to store user input config during development
 export const __DEV_CONFIG_FILE__ = '__DEV_CONFIG__.json'
 
+// to track message box
+export const msg = reactive({
+  showMsg: false,
+  content: '',
+  color: '#ff0000'
+})
+
 // main reactive object
 // store.code - the final rendered code to be included in archive
 // store.config - the internal config to track user input