From a0de1592349449f2d7294939fa463380c206ceac Mon Sep 17 00:00:00 2001
From: Pax1601 <d.passoni92@gmail.com>
Date: Tue, 16 Jan 2024 17:45:52 +0100
Subject: [PATCH] More work on new manager design

---
 manager/1.js                                  |   4 +-
 .../{installations.ejs => installation.ejs}   |   0
 manager/ejs/menu.ejs                          | 105 +++++++-------
 manager/ejs/type.ejs                          |  76 +++-------
 manager/ejs/welcome.ejs                       |  26 ++--
 manager/ejs/wizard.ejs                        |  53 +++++++
 manager/index.html                            |  16 ++-
 manager/javascripts/installations.js          |   4 +-
 manager/javascripts/manager.js                | 130 +++++++++++++-----
 manager/javascripts/managerpage.js            |  40 +++---
 manager/javascripts/menu.js                   |  87 ------------
 manager/javascripts/preload.js                |   2 -
 manager/javascripts/welcome.js                |  52 -------
 manager/javascripts/wizardpage.js             |  53 +++++++
 manager/stylesheets/style.css                 | 130 ------------------
 15 files changed, 318 insertions(+), 460 deletions(-)
 rename manager/ejs/{installations.ejs => installation.ejs} (100%)
 create mode 100644 manager/ejs/wizard.ejs
 delete mode 100644 manager/javascripts/menu.js
 delete mode 100644 manager/javascripts/welcome.js
 create mode 100644 manager/javascripts/wizardpage.js

diff --git a/manager/1.js b/manager/1.js
index d852ce3f..ac4cd6d8 100644
--- a/manager/1.js
+++ b/manager/1.js
@@ -37,7 +37,7 @@
         });
         
         /* Installations */
-        this.installationsPage = new InstallationsPage(this, {
+        this.installationPage = new installationPage(this, {
             instances: instances
         });
         
@@ -61,7 +61,7 @@
 
         /* Create all the HTML pages */
         document.body.appendChild(this.menuPage.getElement());
-        document.body.appendChild(this.installationsPage.getElement());
+        document.body.appendChild(this.installationPage.getElement());
         document.body.appendChild(this.instancesPage.getElement());
         document.body.appendChild(this.connectionsPage.getElement());
         document.body.appendChild(this.passwordsPage.getElement());
diff --git a/manager/ejs/installations.ejs b/manager/ejs/installation.ejs
similarity index 100%
rename from manager/ejs/installations.ejs
rename to manager/ejs/installation.ejs
diff --git a/manager/ejs/menu.ejs b/manager/ejs/menu.ejs
index 2a2e77b2..1ee05ae8 100644
--- a/manager/ejs/menu.ejs
+++ b/manager/ejs/menu.ejs
@@ -1,62 +1,55 @@
 <style>
-    #summary {
-        width: 70%;
+    #manager-menu {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         height: 100%;
-        justify-content: center;
-        color: var(--offwhite);
-        padding: 80px;
+        min-height: 100%;
+        align-items: center;
     }
 
-    #summary .icon {
-        height: 100px;
-        width: 100px;
-        margin-bottom: -30px;
-    }
-
-    #summary div:nth-child(1) {
-        font-size: 50px;
-        font-weight: bold;
-    }
-
-    #summary div:nth-child(2) {
-        font-size: 20px;
-        font-weight: bold;
-    }
-
-    #summary div:nth-child(3) {
-        color: var(--lightgray);
-        font-size: 13px;
-        font-weight: normal;
-        margin-top: 20px;
-        width: 300px;
-    }
-
-    #manager-menu #menu {
+    #manager-menu>div {
         display: flex;
         flex-direction: column;
-        row-gap: 20px;
-        width: 60%;
         justify-content: center;
-        align-items: center;
     }
 
     #manager-menu .option {
         background-color: var(--background);
         border: 1px solid var(--offwhite);
         width: 460px;
-        height: 70px;
+        height: 110px;
         color: var(--offwhite);
         display: flex;
         font-size: 18px;
         font-weight: 600;
         padding-left: 15px;
-        align-items: center;
+        align-items: start;
         border-radius: 5px;
         cursor: pointer;
         background-color: transparent;
         color: var(--offwhite);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        row-gap: 15px;
+        position: relative;
+    }
+
+    #manager-menu .option>div {
+        font-size: 14px;
+        font-weight: normal;
+    }
+
+    #manager-menu .option::after {
+        position: absolute;
+        display: block;
+        content: " ";
+        width: 20px;
+        height: 20px;
+        background-image: url("./icons/chevron-right-solid.svg");
+        background-repeat: no-repeat;
+        background-position: 50% 50%;
+        right: 15px;
     }
 
     #manager-menu .option:hover {
@@ -73,29 +66,31 @@
     #manager-menu .option * {
         pointer-events: none;
     }
-
-    #manager-menu .divider {
-        width: 460px;
-        border-color: var(--darkgray) !important;
-    }
-
 </style>
 <div id="manager-menu">
-    <div id="summary">
-        <div>DCS OLYMPUS <img class="icon" src="../img/OlympusLogoFinal_4k.png" \></div>
-        <div>INSTALL WIZARD AND MANAGER</div>
-        <div>Using this manager, you can install Olympus, update settings, and view and manage instances</div>
+    <div id="summary" style="width: 70%; height: 100%; color: var(--offwhite); padding: 80px;">
+        <div style="font-size: 50px; font-weight: bold;">
+            DCS OLYMPUS <img src="../img/OlympusLogoFinal_4k.png" style="height: 100px; width: 100px; margin-bottom: -30px;"\>
+        </div>
+        <div style="font-size: 20px; font-weight: bold;">
+            INSTALL WIZARD AND MANAGER
+        </div>
+        <div style="color: var(--lightgray); font-size: 13px; font-weight: normal; margin-top: 20px; width: 300px;">
+            Using this manager, you can install Olympus, update settings, and view and manage instances
+        </div>
     </div>
-    <div id="menu"> 
-        <div class="option install <%= installEnabled? '': 'disabled' %>">
-            Run Install wizard
+    <div id="menu" style="row-gap: 20px; width: 60%;">
+        <div class="option <%= installEnabled? '': 'disabled' %>" onclick="signal('onInstallClicked')">
+            Add Olympus
+            <div>
+                Add or update Olympus to a new DCS instance
+            </div>
         </div>
-        <div class="option edit <%= editEnabled? '': 'disabled' %>">
-            Update settings
-        </div>
-        <div class="divider"></div>
-        <div class="option uninstall <%= uninstallEnabled? '': 'disabled' %>">
-            Remove Olympus
+        <div class="option <%= editEnabled? '': 'disabled' %>" onclick="signal('onEditClicked')">
+            Change settings
+            <div>
+                Adjust port, address and password settings
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/manager/ejs/type.ejs b/manager/ejs/type.ejs
index 9e2c74cc..53d3f244 100644
--- a/manager/ejs/type.ejs
+++ b/manager/ejs/type.ejs
@@ -1,61 +1,23 @@
 <style>
-    #manager-type .option {
-        background-color: var(--background);
-        border: 1px solid var(--offwhite);
-        width: 220px;
-        height: 60px;
-        color: var(--offwhite);
-        display: flex;
-        font-size: 18px;
-        font-weight: 600;
-        padding-left: 15px;
-        align-items: center;
-        border-radius: 5px;
-        cursor: pointer;
-        background-color: transparent;
-        color: var(--offwhite);
-        justify-content: center;
-    }
-
-    #manager-type .option:hover {
-        color: var(--background);
-        background-color: var(--offwhite);
-    }
-
-    #manager-type .buttons {
-        display: flex;
-        flex-direction: column;
-        row-gap: 15px;
-    }
+    
 </style>
-<div id="manager-type">
-    <div class="step-summary">
-        <div class="blue <%= singleInstance? 'hide': '' %>"><%= install? 'User path': 'Instance selection' %></div>
-        <div class="white">Type of install</div>
-        <div class="empty">Ports and address</div>
-        <div class="empty">Passwords</div>
-        <div class="empty"> <%= install? 'Install': 'Update' %></div>
+<div class="instructions">
+    <div class="step">
+        Step 1 of 4
     </div>
-    <div class="content">
-        <div class="instructions">
-            <span>
-                Do you want to install Olympus for singleplayer or multiplayer?
-            </span>
-            <span>
-                Select Single player if you only want to play locally on your own computer. <br>
-                If you want Olympus to be used on a different computer or over the internet for a dedicated server, select the multiplayer option.
-            </span>
-        </div>
-        <div class="buttons">
-            <div class="option button singleplayer">
-                Singleplayer
-            </div>
-            <div class="option button multiplayer">
-                Multiplayer
-            </div>
-        </div>
-        <div class="button cancel">
-            <%= install? "Cancel installation": "Cancel editing" %>
-        </div>
+    <div class="title">
+        Do you want to add Olympus for singleplayer or multiplayer?
     </div>
-</div>
\ No newline at end of file
+    <div class="description">
+        Select singleplayer if you only want to play locally on your own computer. <br>
+        Select multiplayer if you want Olympus to be useable over the internet from a different computer, or this instance is a dedicated server.
+    </div>
+</div>
+<div class="buttons">
+    <div class="button">
+        Singleplayer
+    </div>
+    <div class="button">
+        Multiplayer
+    </div>
+</div>
diff --git a/manager/ejs/welcome.ejs b/manager/ejs/welcome.ejs
index 0f8bc7b4..31cbf037 100644
--- a/manager/ejs/welcome.ejs
+++ b/manager/ejs/welcome.ejs
@@ -1,5 +1,5 @@
 <style>
-      #manager-welcome {
+    #manager-welcome {
         display: flex;
         flex-direction: column;
         row-gap: 20px;
@@ -8,7 +8,7 @@
         align-items: center;
     }
 
-    #manager-welcome span {
+    #manager-welcome .instructions {
         width: 40%;
         text-align: center;
         color: var(--offwhite);
@@ -48,20 +48,20 @@
 
 </style>
 <div id="manager-welcome">
-    <span style="font-size: 28px; font-weight: bold;">
-        Do you want to use the Olympus Manager in basic or advanced mode?
-    </span>
-    <span style="color: var(--gray);">
+    <div class="instructions" style="font-size: 28px; font-weight: bold;">
+        Do you want to use the Olympus Manager in basic or Expert mode?
+    </div>
+    <div class="instructions" style="color: var(--gray);">
         Basic mode is recommended for most users. <br>
-        Advanced mode is for those who know how Olympus works or for server owners.
-    </span>
-    <span style="color: var(--gray); font-weight: bold;">
+        Expert mode is for those who know how Olympus works or for server owners.
+    </div>
+    <div class="instructions" style="color: var(--gray); font-weight: bold;">
         You can change this setting at any time.
-    </span>
-    <div class="option basic">
+    </div>
+    <div class="option basic" onclick="signal('onBasicClicked')">
         Basic mode
     </div>
-    <div class="option advanced">
-        Advanced mode
+    <div class="option expert" onclick="signal('onExpertClicked')">
+        Expert mode
     </div>
 </div>
\ No newline at end of file
diff --git a/manager/ejs/wizard.ejs b/manager/ejs/wizard.ejs
new file mode 100644
index 00000000..fdbbd2f1
--- /dev/null
+++ b/manager/ejs/wizard.ejs
@@ -0,0 +1,53 @@
+<style> 
+    .wizard-page {
+        display: flex;
+        flex-direction: column;
+        row-gap: 30px;
+        padding: 60px 120px;
+    }
+
+    .buttons-footer {
+        display: flex;
+        column-gap: 10px;
+        justify-content: start;
+    }
+
+    .instructions {
+        color: var(--offwhite);
+    }
+
+    .instructions .step {
+
+    }
+
+    .instructions .title {
+        font-size: 24px;
+        font-weight: bold;
+    }
+
+    .content {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        row-gap: 20px;
+        align-items: start;
+        justify-content: center;
+    }
+</style>
+<div class="wizard-page">
+    <div class="cancel" style="font-size: 14px; font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px;">
+        <img src="./icons/chevron-left-solid.svg" style="height: 14px;">Cancel install
+    </div>
+    <div class="content">
+
+    </div>
+    <div class="buttons-footer">
+        <div class="button back" style="color: var(--offwhite); background-color: var(--background); border: 1px solid var(--offwhite);">
+            Back
+        </div>
+        <div class="button next" style="color: var(--background); background-color: var(--offwhite);">
+            Next
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/manager/index.html b/manager/index.html
index 107d6626..154763c5 100644
--- a/manager/index.html
+++ b/manager/index.html
@@ -27,12 +27,13 @@
             <div class="accent-green">{{OLYMPUS_VERSION_NUMBER}}</div>
         </div>
         <div class="link first" data-link="https://github.com/Pax1601/DCSOlympus/wiki/2.-User-Guide">User Guide</div>
-        <div class="link" data-link="https://github.com/Pax1601/DCSOlympus/wiki/Setup-Troubleshooting">Troubleshooting Guide</div>
+        <div class="link" data-link="https://github.com/Pax1601/DCSOlympus/wiki/Setup-Troubleshooting">Troubleshooting
+            Guide</div>
         <div id="switch-mode" class="link"> </div>
         <div style="width: 15px;"></div>
-        <img class="link" data-link="https://github.com/Pax1601/DCSOlympus" src="./icons/github.svg"/>
-        <img class="link" data-link="https://discord.gg/pCfCykAdrw" src="./icons/discord.svg"/>
-        <img class="link" data-link="https://www.youtube.com/@DCSOlympus" src="./icons/youtube.svg"/>
+        <img class="link" data-link="https://github.com/Pax1601/DCSOlympus" src="./icons/github.svg" />
+        <img class="link" data-link="https://discord.gg/pCfCykAdrw" src="./icons/discord.svg" />
+        <img class="link" data-link="https://www.youtube.com/@DCSOlympus" src="./icons/youtube.svg" />
     </div>
     <div id="loader" class="manager-page hide">
         Loading, please wait...
@@ -43,7 +44,7 @@
         <img src="./icons/circle-question-regular.svg" class="confirm">
         <img src="./icons/spinner-solid.svg" class="wait">
         <div class="content">
-            
+
         </div>
         <div class="footer">
             <div class="button accept-popup"> Accept </div>
@@ -78,6 +79,11 @@
         document.querySelector('.restore').classList.add("hide");
         document.querySelector('.maximize').classList.remove("hide");
     })
+
+    function signal(callback, params) {
+        const event = new CustomEvent("signal", { detail: { callback: callback, params: params } });
+        document.dispatchEvent(event);
+    }
 </script>
 
 </html>
\ No newline at end of file
diff --git a/manager/javascripts/installations.js b/manager/javascripts/installations.js
index 7870e92a..d7bea3c3 100644
--- a/manager/javascripts/installations.js
+++ b/manager/javascripts/installations.js
@@ -4,7 +4,7 @@ const ejs = require('ejs')
 const { logger } = require("./filesystem");
 const { showConfirmPopup } = require("./popup");
 
-class InstallationsPage extends ManagerPage {
+class installationPage extends ManagerPage {
     constructor(manager, options) {
         super(manager, options);
     }
@@ -64,4 +64,4 @@ class InstallationsPage extends ManagerPage {
     }
 } 
 
-module.exports = InstallationsPage;
\ No newline at end of file
+module.exports = installationPage;
\ No newline at end of file
diff --git a/manager/javascripts/manager.js b/manager/javascripts/manager.js
index 7bbb05d2..33e59ca9 100644
--- a/manager/javascripts/manager.js
+++ b/manager/javascripts/manager.js
@@ -1,18 +1,13 @@
-const MenuPage = require("./menu");
-const InstallationsPage = require('./installations');
-const ConnectionsPage = require('./connections');
-const PasswordsPage = require('./passwords');
-const ResultPage = require('./result');
-const InstancesPage = require('./instances');
+const path = require("path")
+const fs = require("fs");
 
 const DCSInstance = require('./dcsinstance');
 const { showErrorPopup, showWaitPopup, showConfirmPopup } = require('./popup');
 const { fixInstances } = require('./filesystem');
 const { logger } = require("./filesystem")
-const path = require("path")
-const fs = require("fs");
-const WelcomePage = require("./welcome");
-const TypePage = require("./type");
+
+const ManagerPage = require("./managerpage");
+const WizardPage = require("./wizardpage");
 
 class Manager {
     options = {
@@ -21,7 +16,7 @@ class Manager {
     };
 
     welcomePage = null;
-    installationsPage = null;
+    folderPage = null;
     typePage = null;
     connectionsPage = null;
     passwordsPage = null;
@@ -29,10 +24,19 @@ class Manager {
     instancesPage = null;
 
     constructor() {
-
-    }
+        document.addEventListener("signal", (ev) => {
+            const callback = ev.detail.callback;
+            const params = ev.detail.params;
+            try {
+                eval(`this.${callback}(${params})`)
+            } catch (e) {
+                console.error(e);
+            }
+        });
+    }   
 
     async start() {
+        /* Check if the options file exists */
         if (fs.existsSync("options.json")) {
             /* Load the options from the json file */
             try {
@@ -47,17 +51,17 @@ class Manager {
             /* Hide the loading page */
             document.getElementById("loader").classList.add("hide");
 
-            /* Show page to select basic vs advanced mode */
-            this.welcomePage = new WelcomePage(this);
-            document.body.appendChild(this.welcomePage.getElement());
+            /* Show page to select basic vs expert mode */
+            this.welcomePage = new ManagerPage(this, "./ejs/welcome.ejs");
             this.welcomePage.show();
         }
         else {
             document.getElementById("header").classList.remove("hide");
 
+            /* Initialize mode switching */
             if (this.options.mode === "basic") {
-                document.getElementById("switch-mode").innerText = "Advanced mode";
-                document.getElementById("switch-mode").onclick = () => { this.switchMode("advanced"); }
+                document.getElementById("switch-mode").innerText = "Expert mode";
+                document.getElementById("switch-mode").onclick = () => { this.switchMode("expert"); }
             }
             else {
                 document.getElementById("switch-mode").innerText = "Basic mode";
@@ -96,27 +100,19 @@ class Manager {
             this.options.singleInstance = this.options.instances.length === 1;
 
             /* Create all the HTML pages */
-            this.menuPage = new MenuPage(this);
-            this.installationsPage = new InstallationsPage(this); 
-            this.typePage = new TypePage(this); 
-            this.connectionsPage = new ConnectionsPage(this);
-            this.passwordsPage = new PasswordsPage(this);
-            this.resultPage = new ResultPage(this);
-            this.instancesPage = new InstancesPage(this);
-
-            document.body.appendChild(this.menuPage.getElement());
-            document.body.appendChild(this.installationsPage.getElement());
-            document.body.appendChild(this.typePage.getElement());
-            document.body.appendChild(this.connectionsPage.getElement());
-            document.body.appendChild(this.passwordsPage.getElement());
-            document.body.appendChild(this.resultPage.getElement());
-            document.body.appendChild(this.instancesPage.getElement());
-
+            this.menuPage = new ManagerPage(this, "./ejs/menu.ejs");
+            this.folderPage = new WizardPage(this, "./ejs/installation.ejs"); 
+            this.typePage = new WizardPage(this, "./ejs/type.ejs"); 
+            //this.connectionsPage = new ConnectionsPage(this);
+            //this.passwordsPage = new PasswordsPage(this);
+            //this.resultPage = new ResultPage(this);
+            //this.instancesPage = new InstancesPage(this);
+            
             if (this.options.mode === "basic") {
                 /* In basic mode no dashboard is shown */
                 this.menuPage.show();
             } else {
-                /* In advanced mode we go directly to the dashboard */
+                /* In Expert mode we go directly to the dashboard */
                 this.instancesPage.show();
             }
         }
@@ -126,12 +122,76 @@ class Manager {
         return this.options.activeInstance;
     }
 
+    createOptionsFile(mode) {
+        try {
+            fs.writeFileSync("options.json", JSON.stringify({mode: mode}));
+            location.reload();
+        } catch (e) {
+            showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`)
+        }
+    }
+
     switchMode(newMode) {
+        /* Change the mode in the options.json and reload the page */
         var options = JSON.parse(fs.readFileSync("options.json"));
         options.mode = newMode;
         fs.writeFileSync("options.json", JSON.stringify(options));
         location.reload();
     }
+
+    /************************************************/
+    /* CALLBACKS                                    */
+    /************************************************/
+    /* Switch to basic mode */
+    onBasicClicked() {
+        this.createOptionsFile("basic");
+    }
+
+    /* Switch to expert mode */
+    onExpertClicked() {
+        this.createOptionsFile("expert");
+    }
+
+    /* When the install button is clicked go the installation page */
+    onInstallClicked() {
+        this.options.install = true;
+        
+        if (this.options.singleInstance) {
+            this.options.activeInstance = this.options.instances[0];
+
+            /* Show the type selection page */
+            if (!this.options.activeInstance.installed) {
+                this.menuPage.hide();
+                this.typePage.show(this.menuPage);
+            } else {
+                showConfirmPopup("<div style='font-size: 18px; max-width: 100%'> Olympus is already installed in this instance! </div> If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?",
+                    () => {
+                        this.menuPage.hide();
+                        this.typePage.show(this.menuPage);
+                    }
+                )
+            }
+        } else {
+            /* Show the folder selection page */
+            this.menuPage.hide();
+            this.folderPage.show(this.menuPage);
+        }
+    }
+
+    /* When the edit button is clicked go to the instances page */
+    onEditClicked() {
+        this.hide();
+        this.options.install = false;
+        
+        if (this.options.singleInstance) {
+            this.options.activeInstance = this.options.instances[0];
+            this.typePage.show(this);
+        } else {
+            this.folderPage.show(this);
+        }
+    }
+
+    
 }
 
 module.exports = Manager;
\ No newline at end of file
diff --git a/manager/javascripts/managerpage.js b/manager/javascripts/managerpage.js
index d1d9b8e8..1063d652 100644
--- a/manager/javascripts/managerpage.js
+++ b/manager/javascripts/managerpage.js
@@ -1,14 +1,19 @@
+const { logger } = require("./filesystem");
+const ejs = require('ejs')
+
 class ManagerPage {
     manager;
+    ejsFile;
     element;
-    options;
+    options = {};
     previousPage;
 
-    constructor(manager, options) {
+    constructor(manager, ejsFile) {
         this.manager = manager;
-        this.options = options ?? {};
         this.element = document.createElement('div');
         this.element.classList.add("manager-page", "hide");
+        this.ejsFile = ejsFile;
+        document.body.appendChild(this.element);
     }
 
     getElement() {
@@ -16,6 +21,14 @@ class ManagerPage {
     }
 
     show(previousPage) {
+        ejs.renderFile(this.ejsFile, {...this.options, ...this.manager.options}, {}, (err, str) => {
+            if (!err) {
+                this.render(str);
+            } else {
+                logger.error(err);
+            }
+        });
+
         this.element.classList.remove("hide");
 
         if (previousPage !== undefined) 
@@ -26,29 +39,16 @@ class ManagerPage {
         this.element.classList.add("hide");
     }
 
-    render() {
+    render(str) {
+        this.element.innerHTML = str;
+
         /* Connect all the collapsable buttons */
         let buttons = document.querySelectorAll(".button.collapse");
         for (let i = 0; i < buttons.length; i++) {
             buttons[i].addEventListener("click", () => {
                 buttons[i].classList.toggle("open");
             })
-        }
-
-        /* Connect the back, next and cancel buttons */
-        if (this.element.querySelector(".back"))
-            this.element.querySelector(".back").addEventListener("click", (e) => this.onBackClicked(e));
-
-        if (this.element.querySelector(".next"))
-            this.element.querySelector(".next").addEventListener("click", (e) => this.onNextClicked(e));
-
-        if (this.element.querySelector(".cancel"))
-            this.element.querySelector(".cancel").addEventListener("click", (e) => this.onCancelClicked(e));
-    }
-
-    onBackClicked() {
-        this.hide();
-        this.previousPage.show()
+        }   
     }
 } 
 
diff --git a/manager/javascripts/menu.js b/manager/javascripts/menu.js
deleted file mode 100644
index 3a475818..00000000
--- a/manager/javascripts/menu.js
+++ /dev/null
@@ -1,87 +0,0 @@
-const ManagerPage = require("./managerpage");
-const ejs = require('ejs')
-const { logger } = require("./filesystem");
-const { showConfirmPopup } = require("./popup");
-
-class MenuPage extends ManagerPage {
-    constructor(manager, options) {
-        super(manager, options);
-    }
-
-    render(str) {
-        const element = this.getElement();
-        element.innerHTML = str;
-
-        element.querySelector(".install").addEventListener("click", (e) => this.onInstallClicked(e));
-        element.querySelector(".edit").addEventListener("click", (e) => this.onEditClicked(e));
-        element.querySelector(".uninstall").addEventListener("click", (e) => this.onUninstallClicked(e));
-
-        super.render();
-    }    
-
-    show(previousPage) {
-        ejs.renderFile("./ejs/menu.ejs", {...this.options, ...this.manager.options}, {}, (err, str) => {
-            if (!err) {
-                this.render(str);
-            } else {
-                logger.error(err);
-            }
-        });
-
-        super.show(previousPage);
-    }
-
-    /* When the install button is clicked go the installation page */
-    onInstallClicked(e) {
-        this.manager.options.install = true;
-        
-        if (this.manager.options.singleInstance) {
-            this.manager.options.activeInstance = this.manager.options.instances[0];
-
-            /* Show the connections page */
-            if (!this.manager.options.activeInstance.installed) {
-                this.hide();
-                this.manager.typePage.show(this);
-            } else {
-                showConfirmPopup("<div style='font-size: 18px; max-width: 100%'> Olympus is already installed in this instance! </div> If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?",
-                    () => {
-                        this.hide();
-                        this.manager.typePage.show(this);
-                    }
-                )
-            }
-        } else {
-            this.hide();
-            this.manager.installationsPage.show(this);
-        }
-    }
-
-    /* When the edit button is clicked go to the instances page */
-    onEditClicked(e) {
-        this.hide();
-        this.manager.options.install = false;
-        
-        if (this.manager.options.singleInstance) {
-            this.manager.options.activeInstance = this.manager.options.instances[0];
-            this.manager.typePage.show(this);
-        } else {
-            this.manager.installationsPage.show(this);
-        }
-    }
-
-    /* When the remove button is clicked go to the instances page */
-    onUninstallClicked(e) {
-        this.manager.options.install = false;
-        
-        if (this.manager.options.singleInstance) {
-            this.manager.options.activeInstance = this.manager.options.instances[0];
-            this.manager.options.activeInstance.uninstall();
-        } else {
-            // TODO select instance to remove
-        }
-    }
-
-    
-} 
-
-module.exports = MenuPage;
\ No newline at end of file
diff --git a/manager/javascripts/preload.js b/manager/javascripts/preload.js
index d3a5e92f..058d65a5 100644
--- a/manager/javascripts/preload.js
+++ b/manager/javascripts/preload.js
@@ -256,7 +256,6 @@ contextBridge.exposeInMainWorld(
     }
 });
 
-
 /* On content loaded */
 window.addEventListener('DOMContentLoaded', async () => {
     /* Compute the height of the content page */
@@ -297,4 +296,3 @@ ipcRenderer.on("check-version", () => {
     /* Check if a new version is available */
     checkVersion();
 })
-
diff --git a/manager/javascripts/welcome.js b/manager/javascripts/welcome.js
deleted file mode 100644
index 7d882807..00000000
--- a/manager/javascripts/welcome.js
+++ /dev/null
@@ -1,52 +0,0 @@
-const ManagerPage = require("./managerpage");
-const ejs = require('ejs')
-const { logger } = require("./filesystem")
-const fs = require("fs");
-const { showErrorPopup } = require("./popup");
-
-class WelcomePage extends ManagerPage {
-    constructor(manager, options) {
-        super(manager, options);
-    }
-
-    render(str) {
-        const element = this.getElement();
-        element.innerHTML = str;
-
-        element.querySelector(".basic").addEventListener("click", (e) => this.onbasicClicked(e));
-        element.querySelector(".advanced").addEventListener("click", (e) => this.onAdvancedClicked(e));
-
-        super.render();
-    }    
-
-    show(previousPage) {
-        ejs.renderFile("./ejs/welcome.ejs", {...this.options, ...this.manager.options}, {}, (err, str) => {
-            if (!err) {
-                this.render(str);
-            } else {
-                logger.error(err);
-            }
-        });
-
-        super.show(previousPage);
-    }
-
-    onbasicClicked(e) {
-        this.createOptionsFile("basic");
-    }
-
-    onAdvancedClicked(e) {
-        this.createOptionsFile("advanced");
-    }
-
-    createOptionsFile(mode) {
-        try {
-            fs.writeFileSync("options.json", JSON.stringify({mode: mode}));
-            location.reload();
-        } catch (e) {
-            showErrorPopup(`A critical error occurred, check ${this.manager.options.logLocation} for more info.`)
-        }
-    }
-} 
-
-module.exports = WelcomePage;
\ No newline at end of file
diff --git a/manager/javascripts/wizardpage.js b/manager/javascripts/wizardpage.js
new file mode 100644
index 00000000..8d7c3978
--- /dev/null
+++ b/manager/javascripts/wizardpage.js
@@ -0,0 +1,53 @@
+const ManagerPage = require("./managerpage");
+const ejs = require('ejs')
+
+class WizardPage extends ManagerPage {
+    contentEjsFile;
+
+    constructor(manager, contentEjsFile) {
+        super(manager, './ejs/wizard.ejs');
+        this.contentEjsFile = contentEjsFile;
+    }
+
+    render(str) {
+        super.render(str);
+
+        /* Connect the back, next and cancel buttons */
+        if (this.element.querySelector(".back"))
+            this.element.querySelector(".back").addEventListener("click", (e) => this.onBackClicked(e));
+
+        if (this.element.querySelector(".next"))
+            this.element.querySelector(".next").addEventListener("click", (e) => this.onNextClicked(e));
+
+        if (this.element.querySelector(".cancel"))
+            this.element.querySelector(".cancel").addEventListener("click", (e) => this.onCancelClicked(e));
+
+        ejs.renderFile(this.contentEjsFile, {...this.options, ...this.manager.options}, {}, (err, str) => {
+            if (!err) {
+                this.element.querySelector(".content").innerHTML = str;
+            } else {
+                logger.error(err);
+            }
+        });
+    
+    }
+
+    onBackClicked() {
+        console.log(this.previousPage)
+        this.hide();
+        this.previousPage.show()
+    }
+
+    onCancelClicked() {
+        this.hide();
+        if (this.manager.options.mode === "basic") {
+            /* In basic mode no dashboard is shown */
+            this.manager.menuPage.show();
+        } else {
+            /* In Expert mode we go directly to the dashboard */
+            this.manager.instancesPage.show();
+        }
+    }
+}
+
+module.exports = WizardPage;
\ No newline at end of file
diff --git a/manager/stylesheets/style.css b/manager/stylesheets/style.css
index 5e5fa454..34c3895f 100644
--- a/manager/stylesheets/style.css
+++ b/manager/stylesheets/style.css
@@ -186,34 +186,6 @@ body {
     margin-bottom: 10px;
 }
 
-.instructions {
-    color: var(--offwhite);
-    display: flex;
-    flex-direction: column;
-    row-gap: 10px;
-    width: 50%;
-}
-
-.instructions>span {
-    text-align: center;
-}
-
-.instructions>span:first-child {
-    font-size: 22px;
-    font-weight: 600;
-}
-
-.instructions>span:not(:first-child) {
-    font-size: 15px;
-    color: var(--gray);
-}
-
-.buttons-footer {
-    display: flex;
-    column-gap: 10px;
-    justify-content: center;
-}
-
 .button {
     padding: 10px 15px;
     border-radius: 5px;
@@ -225,23 +197,6 @@ body {
     column-gap: 10px;
 }
 
-.next {
-    color: var(--background);
-    background-color: var(--offwhite);
-}
-
-.back {
-    color: var(--offwhite);
-    background-color: var(--background);
-    border: 1px solid var(--offwhite);
-}
-
-.cancel {
-    padding: 10px 5px;
-    color: var(--offwhite);
-    text-decoration: underline;
-}
-
 .close-popup {
     color: var(--offwhite);
     background-color: var(--blue);
@@ -328,87 +283,6 @@ input {
     overflow-y: auto;
 }
 
-.manager-page>div {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    min-height: 100%;
-    align-items: center;
-}
-
-.step-summary {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 30%;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--offwhite);
-    border-left: 1px dashed var(--offwhite);
-    height: 200px;
-    row-gap: 100px;
-    margin-left: 80px;
-}
-
-.step-summary div {
-    display: flex;
-    width: 280px;
-    height: 80px;
-    align-items: center;
-    column-gap: 15px;
-    margin-left: -15px;
-    margin-top: -40px;
-    margin-bottom: -40px;
-    font-size: 14px;
-    color: var(--gray);
-}
-
-.step-summary div:before {
-    display: inline-block;
-    content: "";
-    width: 30px;
-    height: 30px;
-    border: 1px solid var(--offwhite);
-    border-radius: 999px;
-}
-
-.step-summary div.white {
-    color: var(--offwhite);
-}
-
-.step-summary div.blue {
-    text-decoration: underline;
-}
-
-.step-summary div.white:before {
-    background-color: var(--offwhite);
-}
-
-.step-summary div.empty:before {
-    background-color: var(--background);
-}
-
-.step-summary div.blue:before {
-    border: 1px solid var(--blue);
-    background-color: var(--blue);
-}
-
-.content {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    row-gap: 20px;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-}
-
-.content>div {
-    max-width: 60%;
-}
-
 .input-group {
     color: var(--offwhite);
     display: flex;
@@ -447,10 +321,6 @@ input {
     margin-bottom: 10px;
 }
 
-.buttons-footer {
-    margin-top: 10px;
-}
-
 .divider {
     border-top: 0px solid transparent !important;
     border-bottom: 1px solid var(--offwhite) !important;