#skip-ci added post-install page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drehmal-installer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Drehmal, Minecraft map installer",
   "productName": "Drehmal Installer",
   "author": "majorlue",
@@ -53,4 +53,4 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }
-}
+}

src-electron/electron-main.ts

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { app, BrowserWindow, ipcMain } from 'electron';
+import { app, BrowserWindow, ipcMain, shell } from 'electron';
 import log from 'electron-log';
 import Listeners from './ipcListeners';
 const path = require('path');
@@ -52,7 +52,7 @@ function createWindow() {
     autoHideMenuBar: true,
   });
 
-  new Listeners(mainWindow, app);
+  new Listeners(mainWindow, app, shell);
 
   mainWindow.loadURL(process.env.APP_URL);
 

src-electron/ipcListeners.ts

@@ -1,15 +1,29 @@
-import { ipcMain, BrowserWindow, app as ElectronApp } from 'electron';
+import {
+  ipcMain,
+  BrowserWindow,
+  app as ElectronApp,
+  shell as ElectronShell,
+} from 'electron';
+import log from 'electron-log';
 // import path from 'path';
 // log.info('IPC Listener');
 let browserWindow: BrowserWindow;
 let app: typeof ElectronApp;
+let shell: typeof ElectronShell;
 
 export default class Listeners {
-  constructor(window: BrowserWindow, electronApp: typeof ElectronApp) {
+  constructor(
+    window: BrowserWindow,
+    electronApp: typeof ElectronApp,
+    electronShell: typeof ElectronShell
+  ) {
     browserWindow = window;
     app = electronApp;
+    shell = electronShell;
   }
 }
 
 ipcMain.handle('getAppPath', () => app.getAppPath());
 ipcMain.handle('getAppDataPath', () => app.getPath('appData'));
+ipcMain.handle('openInBrowser', (_event, url) => shell.openExternal(url));
+ipcMain.handle('quit', () => app.quit());

src/components/DynamicImage.vue

@@ -0,0 +1,22 @@
+<template>
+  <img :src="imagePath" alt="img" />
+</template>
+
+<script>
+export default {
+  props: {
+    item: String,
+  },
+  data() {
+    return {
+      imagePath: null,
+    };
+  },
+  async mounted() {
+    this.imagePath = await import(
+      // `src/assets/images/icons/socials/${this.item}-purple.png`
+      `../assets/images/${this.item}.png`
+    );
+  },
+};
+</script>

src/pages/InstallComplete.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="border-body">
+    <q-layout view="hHh lpR fFf">
+      <q-header>
+        <div class="border-header">
+          <div class="header">
+            <img src="../assets/images/title-img.png" alt="" />
+          </div>
+        </div>
+      </q-header>
+
+      <q-page-container>
+        <div class="body">
+          <hr />
+          <p>
+            Thanks for downloading Drehmal! To get started, open the Minecraft
+            launcher and select the Drehmal Apotheosis profile, then hit play.
+          </p>
+          <img
+            src="../assets/images/transparent-logo.png"
+            style="max-width: 224px"
+          />
+          <!-- <p>
+            Next steps:
+            <q-list bordered separator dense padding>
+              <q-item>Open the Minecraft Launcher</q-item>
+              <q-item>From the profile list, select Drehmal Apotheosis</q-item>
+              <q-item>Press play!</q-item>
+            </q-list>
+          </p>
+          <p>Check out our socials using any of the buttons below</p> -->
+        </div>
+      </q-page-container>
+
+      <q-footer>
+        <!-- don't touch these class names-->
+        <div class="border-footer">
+          <div class="footer">
+            <!-- Footer Content -->
+            <div class="nav-footer">
+              <!-- <next-button path="/path/"></next-button> -->
+              <div>
+                <q-btn
+                  size="20px"
+                  color="secondary"
+                  @click="closeInstaller"
+                  label="Close Installer"
+                  class="close-btn"
+                >
+                </q-btn>
+                <socials-grid />
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-footer>
+    </q-layout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import log from 'electron-log';
+const { ipcRenderer } = require('electron');
+import SocialsGrid from '../components/SocialsGrid.vue';
+
+const closeInstaller = () => {
+  log.info('Opening Minecraft Launcher and closing process');
+
+  // Send call to main process to close application
+  ipcRenderer.invoke('quit');
+};
+</script>
+
+<style scoped>
+.nav-footer {
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* gap: 50px; */
+  margin-bottom: 10px;
+}
+.close-btn {
+  margin-bottom: 20px;
+}
+.nav-footer img {
+  height: 128px;
+  width: 128px;
+}
+</style>

src/pages/InstallPage.vue

@@ -25,7 +25,7 @@
           <div class="footer">
             <div class="nav-footer">
               <back-button path="/path/"></back-button>
-              <!-- <next-button path="/complete/"></next-button> -->
+              <next-button path="/complete/"></next-button>
             </div>
           </div>
         </div>

src/router/routes.ts

@@ -17,10 +17,13 @@ const routes: RouteRecordRaw[] = [
     props: true,
   },
   {
-    // name: 'path',
     path: '/install/',
     component: () => import('pages/InstallPage.vue'),
-    // meta: {title: appTitle}
+    props: true,
+  },
+  {
+    path: '/complete/',
+    component: () => import('pages/InstallComplete.vue'),
     props: true,
   },