add error display

client/src/modules/packageinstaller.js

@@ -67,11 +67,12 @@ export default class PackageInstaller {
      * @param {Boolean} update Does an older version already exist
      */
     static async installPackage(bytesOrPath, id, update = false) {
+        let outputPath = null;
         try {
             const bytes = typeof bytesOrPath === 'string' ? fs.readFileSync(bytesOrPath) : bytesOrPath;
 
             const outputName = `${id}.bd`;
-            const outputPath = path.join(Globals.getPath('plugins'), outputName);
+            outputPath = path.join(Globals.getPath('plugins'), outputName);
             fs.writeFileSync(outputPath, bytes);
 
             let newContent = null;
@@ -96,6 +97,11 @@ export default class PackageInstaller {
 
             return PluginManager.reloadContent(oldContent);
         } catch (err) {
+            if (outputPath) {
+                rimraf(outputPath, err => {
+                    if (err) console.log(err);
+                });
+            }
             throw err;
         }
     }

client/src/styles/partials/modals/install-modal.scss

@@ -179,4 +179,53 @@
             }
         }
     }
+
+    &.bd-installModalFail {
+        .bd-modalInner {
+            min-width: 400px;
+            max-width: 400px;
+            height: 250px;
+            border: 2px solid $colerr;
+
+            .bd-installModalBody {
+                display: flex;
+                flex-grow: 1;
+                align-content: center;
+                justify-content: center;
+                align-items: center;
+
+                h3 {
+                    color: $colerr;
+                    font-size: 1.2em;
+                    font-weight: 700;
+                    text-align: center;
+                    padding: 20px;
+                }
+            }
+
+            .bd-materialDesignIcon {
+                svg {
+                    fill: $colerr;
+                    width: 100px;
+                    height: 100px;
+                }
+            }
+
+            .bd-installModalFooter {
+
+                &.bd-installModalErrMsg {
+                    justify-content: flex-start;
+                    padding: 10px;
+                    background: rgba(0, 0, 0, .2);
+                    font-weight: 700;
+
+                    span {
+                        color: #fff;
+                        flex-grow: 1;
+                        text-align: right;
+                    }
+                }
+            }
+        }
+    }
 }

client/src/ui/components/bd/modals/InstallModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal class="bd-installModal" :headertext="modal.title" :closing="modal.closing" @close="modal.close" :noheader="true" :class="{'bd-err': !verifying && !verified, 'bd-installModalDone': installed}">
+    <Modal class="bd-installModal" :headertext="modal.title" :closing="modal.closing" @close="modal.close" :noheader="true" :class="{'bd-err': !verifying && !verified, 'bd-installModalDone': installed, 'bd-installModalFail': err}">
         <template v-if="!installed && !err">
             <div slot="body" class="bd-installModalBody">
                 <div class="bd-installModalTop">
@@ -47,7 +47,14 @@
             </div>
         </template>
         <template v-else-if="err">
-            <div slot="body" class="bd-installModalBody">{{err.message}}</div>
+            <div slot="body" class="bd-installModalBody">
+                <h3>Something went wrong :(</h3>
+                <MiError />
+            </div>
+            <div slot="footer" class="bd-installModalFooter bd-installModalErrMsg">
+                {{err.message}}
+                <span>Ctrl+Shift+I</span>
+            </div>
         </template>
         <template v-else>
             <div slot="body" class="bd-installModalBody">
@@ -63,7 +70,7 @@
 </template>
 <script>
     // Imports
-    import { Modal, MiExtension, MiSuccessCircle } from '../../common';
+    import { Modal, MiExtension, MiSuccessCircle, MiError } from '../../common';
     import { PluginManager, ThemeManager, PackageInstaller, Settings } from 'modules';
 
     export default {
@@ -80,7 +87,7 @@
         },
         props: ['modal'],
         components: {
-            Modal, MiExtension, MiSuccessCircle
+            Modal, MiExtension, MiSuccessCircle, MiError
         },
         mounted() {
             const { contentType, config } = this.modal;