UI: ELECTRON: Add a basic about dialog

changelog.txt

@@ -3,6 +3,7 @@
 Change software licensing to LGPLv3
 RPC       - New commands verifyproofoffunds, generateproofoffunds
 UI        - Add functionality to export transaction history
+UI        - Add a basic about dialog diaplying licensing information
 
 
 

src/frontend/electron_vue/src/App.vue

@@ -32,6 +32,8 @@ export default {
       switch (window.location.hash.toLowerCase()) {
         case "#/debug":
           return false;
+        case "#/about":
+          return false;
         default:
           return true;
       }

src/frontend/electron_vue/src/background.js

@@ -24,6 +24,7 @@ import axios from "axios";
 // be closed automatically when the JavaScript object is garbage collected.
 let winMain;
 let winDebug;
+let winAbout;
 let libUnity = new LibUnity({ walletPath });
 
 // Handle URI links (florin: florin://)
@@ -112,6 +113,12 @@ function createMainWindow() {
           click() {
             createDebugWindow();
           }
+        },
+        {
+          label: "About",
+          click() {
+            createAboutWindow();
+          }
         }
       ]
     }
@@ -221,6 +228,64 @@ function createDebugWindow() {
   });
 }
 
+function createAboutWindow() {
+  if (winAbout) {
+    return winAbout.show();
+  }
+
+  let options = {
+    width: 600,
+    minWidth: 400,
+    height: 600,
+    minHeight: 400,
+    show: false,
+    parent: winMain,
+    title: "About Florin",
+    skipTaskBar: true,
+    autoHideMenuBar: true,
+    webPreferences: {
+      // Use pluginOptions.nodeIntegration, leave this alone
+      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+      contextIsolation: false
+    }
+  };
+  if (os.platform() === "linux") {
+    options = Object.assign({}, options, {
+      icon: path.join(__static, "icon.png")
+    });
+  }
+  winAbout = new BrowserWindow(options);
+
+  let url = process.env.WEBPACK_DEV_SERVER_URL ? `${process.env.WEBPACK_DEV_SERVER_URL}#/about` : `app://./index.html#/about`;
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    winAbout.loadURL(url);
+    //if (!process.env.IS_TEST) win.webContents.openDevTools();
+  } else {
+    createProtocol("app");
+    // Load the index.html when not in development
+    winAbout.loadURL(url);
+  }
+
+  winAbout.on("ready-to-show", () => {
+    winAbout.show();
+  });
+
+  winAbout.on("close", event => {
+    console.log("winAbout.on:close");
+    if (libUnity === null || libUnity.isTerminated) return;
+    event.preventDefault();
+    winAbout.hide();
+  });
+
+  winAbout.on("closed", () => {
+    console.log("winAbout.on:closed");
+    winAbout = null;
+  });
+}
+
 app.on("will-quit", event => {
   console.log("app.on:will-quit");
   if (libUnity === null || libUnity.isTerminated) return;

src/frontend/electron_vue/src/router/index.js

@@ -94,6 +94,11 @@ const routes = [
     path: "/debug",
     name: "debug",
     component: () => import(/* webpackChunkName: "debug-dialog" */ "../views/DebugDialog")
+  },
+  {
+    path: "/about",
+    name: "about",
+    component: () => import(/* webpackChunkName: "about-dialog" */ "../views/AboutDialog")
   }
 ];
 

src/frontend/electron_vue/src/views/AboutDialog/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="app-debug">
+    <modal-dialog v-model="modal" />
+    <div class="main scrollable">
+      Copyright (C) 2023 "The Centure developers"<br /><br />
+      This program is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free
+      Software Foundation; either version 2.1 of the License, or (at your option) any later version.<br /><br />
+      This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+      FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.<br /><br />
+      Portions of this software not written by us, and libraries that we make use of are licensed under a variety of other licenses for more licensing
+      information and a copy of the source code visit <a href="https://github.com/florinxfl/florin-core/blob/master/COPYING_florin">our code repository</a
+      ><br /><br />
+      The below is a list of most major libraries used and their licensing, the list may not be comprehensive for a comprehensive list consult the
+      repository.<br />
+      <div class="copyright-table-wrapper">
+        <table class="copyright-table">
+          <tr>
+            <td>Bitcoin</td>
+            <td>The MIT License</td>
+          </tr>
+          <tr>
+            <td>Boost</td>
+            <td>Boost Software License 1.0</td>
+          </tr>
+          <tr>
+            <td>BDB</td>
+            <td>The MIT license</td>
+          </tr>
+          <tr>
+            <td>Cryptopp</td>
+            <td>Boost Software License 1.0</td>
+          </tr>
+          <tr>
+            <td>Electron</td>
+            <td>The MIT License</td>
+          </tr>
+          <tr>
+            <td>Nodejs</td>
+            <td>The MIT License</td>
+          </tr>
+          <tr>
+            <td>OpenSSL</td>
+            <td>Apache License v2</td>
+          </tr>
+          <tr>
+            <td>Protobuf</td>
+            <td>BSD</td>
+          </tr>
+          <tr>
+            <td>ZeroMQ</td>
+            <td>Mozilla Public License 2.0</td>
+          </tr>
+          <tr>
+            <td>Zlib</td>
+            <td>Zlib</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ModalDialog from "../../components/ModalDialog";
+import EventBus from "../../EventBus.js";
+
+export default {
+  data() {
+    return {
+      modal: null
+    };
+  },
+  components: {
+    ModalDialog
+  },
+  mounted() {
+    EventBus.$on("close-dialog", this.closeModal);
+    EventBus.$on("show-dialog", this.showModal);
+  },
+  beforeDestroy() {
+    EventBus.$off("close-dialog", this.closeModal);
+    EventBus.$off("show-dialog", this.showModal);
+  },
+  methods: {
+    closeModal() {
+      this.modal = null;
+    },
+    showModal(modal) {
+      this.modal = modal;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.app-about {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  font-size: 0.85em;
+}
+
+.main {
+  height: calc(100% - 48px);
+  padding: 20px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.copyright-table-wrapper {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  font-size: 0.85em;
+}
+
+.copyright-table {
+  margin-top: 25px;
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 0.9em;
+  font-family: sans-serif;
+  border: 1px solid black;
+  border-collapse: collapse;
+}
+.copyright-table tr {
+  border: 1px solid black;
+  border-collapse: collapse;
+}
+.copyright-table td {
+  padding: 5px;
+  padding-left: 15px;
+  padding-right: 15px;
+  border: 1px solid black;
+  border-collapse: collapse;
+}
+</style>

src/frontend/electron_vue/vue.config.js

@@ -42,7 +42,7 @@ module.exports = {
         }
       },
       // HACK! Work around issues with electron-vue-builder being too old and new webpack... (files not loading without this)
-      customFileProtocol: './'
+      customFileProtocol: "./"
     },
     i18n: {
       locale: "en",
@@ -53,8 +53,7 @@ module.exports = {
   },
   css: {
     loaderOptions: {
-      less: {
-      },
+      less: {},
       postcss: { postcssOptions: { config: false } }
     }
   }