Use modal instead of alert() if a python exception occurs

Author: drojf

httpGUI/index.html

@@ -21,9 +21,8 @@
 				<h3>New Installer Available</h3>
 				<p>{{metaInfo.installerIsLatest[1]}}</p>
 				<p>You should update the installer to get bug-fixes and new features.</p>
-				<p>Please go to <strong><a href="https://github.com/07th-mod/python-patcher/releases" target="_blank">the download page</a></strong>, then download and install the new installer.
-					<strong>Remember to close this old installer so it doesn't interfere!</strong></p>
-				<p>If you wish to continue using the old installer, <a v-on:click="clearModal()">click here</a></p>
+				<a href="https://github.com/07th-mod/python-patcher/releases" target="_blank"><button type="button" class="btn">Go to installer download page</button></a>
+				<button type="button" class="btn" style="border: grey;" v-on:click="clearModal()">Use old installer (not recommended)</button>
 			</modal>
 		</div>
 

httpGUI/installer.html

@@ -17,6 +17,18 @@
 		<!-- Only elements inside this <div id="app"> will be monitored by Vue.
 		The "v-cloak" tells Vue to disable showing this element until it has finished loading. -->
 		<div id="app" class="main-container" v-cloak>
+		<div id="modal-container" >
+			<modal v-bind:visible="installErrorDescription" v-on:close="installErrorDescription = ''">
+				<h3>The install can't continue - please read</h3>
+				<p>Please read the below error message, it might tell you how to fix this problem.<br>
+				If you're not sure what to do, please send the error message and install log to the developers at their Discord server</p>
+				<hr>
+				<span style="white-space: pre-line; font-family: monospace;">{{installErrorDescription}}</span>
+				<button type="button" class="btn" v-on:click="clearModal()">OK</button></a>
+				<button type="button" class="btn" v-on:click="getLogsZip(selectedSubMod, selectedInstallPath)">Download Install Logs</button>
+				<button type="button" class="btn">Visit 07th-mod Discord server (send install log here!)</button>
+			</modal>
+		</div>
 		<div class="nav-container">
 		    <nav>
 		        <div class="nav-bar">

httpGUI/python-patcher-index.js

@@ -10,21 +10,6 @@ let app = null;
 // - the subModHandles are retrieved from the python server to populate the app.subModList property
 window.onload = function onWindowLoaded() {
 
-  Vue.component('modal', {
-    data() {
-      return {
-      };
-    },
-    props: ['visible'],
-    template: `
-    <div id="myModal" class="modal" v-if=visible>
-      <div class="modal-content">
-        <span class="close" v-on:click="$emit('close')">&times;</span>
-        <slot></slot>
-      </div>
-    </div>`,
-  });
-
   // Forces all links which have been sanitized to open in new window (in this case, markdown links)
   // See https://github.com/cure53/DOMPurify/issues/317#issuecomment-698800327
   DOMPurify.addHook('afterSanitizeAttributes', (node) => {

httpGUI/python-patcher-lib.js

@@ -181,6 +181,7 @@ window.onload = function onWindowLoaded() {
       changelogURL: null,
       // Game installs which have been partially uninstalled via Steam, but where some mod files still exist on disk
       partiallyUninstalledPaths: [],
+      installErrorDescription: "",
     },
     methods: {
       doInstall(deleteVersionInformation) {
@@ -354,6 +355,10 @@ Continue install anyway?`)) {
     autoscrollCheckbox: document.getElementById('autoscrollCheckbox'),
   };
 
+  setInstallerErrorCallback(function (errorMessage) {
+    app.installErrorDescription = errorMessage;
+  })
+
   // populate the app.subModList with subMods from the python server
   doPost('subModHandles', [], (responseData) => {
     console.log(responseData);

httpGUI/python-patcher-rest-lib.js

@@ -10,6 +10,15 @@ function setPOSTNotificationErrorCallback(callback) {
   POSTNotificationErrorCallback = callback;
 }
 
+let InstallerErrorCallback = function defaultInstallerErrorCallback(message) {
+  alert(message);
+};
+
+function setInstallerErrorCallback(callback) {
+  InstallerErrorCallback = callback;
+}
+
+
 // Note: { requestType, requestData } = { requestType : requestType, requestData : requestData }
 function makeJSONRequest(requestType, requestData) {
   return JSON.stringify({ requestType, requestData });
@@ -51,7 +60,7 @@ function doPost(requestType, requestData, onSuccessCallback) {
         const [responseType, responseDataObject] = decodeJSONResponse(http.responseText);
         if (responseType === 'error') {
           console.log(`Error: ${responseDataObject.errorReason}`);
-          alert(responseDataObject.errorReason);
+          InstallerErrorCallback(responseDataObject.errorReason);
         } else if (responseType === 'unknownRequest' || responseType !== requestType) {
           console.log(`ERROR: sent ${requestType} but got ${responseType}. requestData: ${responseDataObject}`);
         } else {

httpGUI/python-patcher-vue-common.js

@@ -85,3 +85,19 @@ Vue.component('snack-bar', {
   <div id="snackbar" v-show="toastVisible">{{ toastCount }}x {{ toastMessage }}</div>
   </transition>`,
 });
+
+
+Vue.component('modal', {
+  data() {
+    return {
+    };
+  },
+  props: ['visible'],
+  template: `
+  <div id="myModal" class="modal" v-if=visible>
+    <div class="modal-content">
+      <span class="modal-close-button" v-on:click="$emit('close')">&times;</span>
+      <slot></slot>
+    </div>
+  </div>`,
+});

httpGUI/style.css

@@ -257,25 +257,24 @@ The snackbar - position it at the bottom and in the middle of the screen */
 .modal-content {
   background-color: #fefefe;
   position: absolute;
-  top: 50%;
-  left: 50%; /* 'top:50%; left:50%;' set top left corner of the box to the middle of screen */
-  transform: translate(-50%, -50%) !important; /* This offsets the box so it's midpoint is at center of screen, rather than the top left corner*/
+  top: 30%;
+  left: 10%;
   padding: 20px;
   border: 1px solid #888;
-  width: 600px; /* Could be more or less, depending on screen size */
+  width: 80%;
 }
 
 /* The Close Button */
-.close {
-  color: #aaa;
+.modal-close-button {
+  color: #47b475;
   float: right;
-  font-size: 28px;
+  font-size: 50px;
   font-weight: bold;
 }
 
-.close:hover,
-.close:focus {
-  color: black;
+.modal-close-button:hover,
+.modal-close-button:focus {
+  color: #e5c92c;
   text-decoration: none;
   cursor: pointer;
 }