ayanova/src/api/gzutil.js

@@ -9,12 +9,66 @@ export default {
   // Clear all properties from object without resorting to assigning a new object (o={})
   // which can be problematic in some cases (IE bugs, watched data items in forms etc)
 
-  removeAllPropertiesFromObject(o) {
+  removeAllPropertiesFromObject: function(o) {
     for (var variableKey in o) {
       if (o.hasOwnProperty(variableKey)) {
         delete o[variableKey];
       }
     }
+  },
+  /**
+   * Copy a string to clipboard
+   * @param  {String} string         The string to be copied to clipboard
+   * @return {Boolean}               returns a boolean correspondent to the success of the copy operation.
+   * Modified from an example here: https://stackoverflow.com/a/53951634/8939
+   * Basically a fallback if navigator.clipboard is not available
+   */
+  copyToClipboard: function(string) {
+    let textarea;
+    let result;
+
+    if (navigator && navigator.clipboard) {
+      navigator.clipboard.writeText(string);
+    } else {
+      try {
+        textarea = document.createElement("textarea");
+        textarea.setAttribute("readonly", true);
+        textarea.setAttribute("contenteditable", true);
+        textarea.style.position = "fixed"; // prevent scroll from jumping to the bottom when focus is set.
+        textarea.value = string;
+
+        document.body.appendChild(textarea);
+
+        textarea.focus();
+        textarea.select();
+
+        const range = document.createRange();
+        range.selectNodeContents(textarea);
+
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+
+        textarea.setSelectionRange(0, textarea.value.length);
+        result = document.execCommand("copy");
+      } catch (err) {
+        //console.error(err);
+        result = null;
+      } finally {
+        document.body.removeChild(textarea);
+      }
+
+      // manual copy fallback using prompt
+      if (!result) {
+        const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+        const copyHotkey = isMac ? "⌘C" : "CTRL+C";
+        result = prompt(`Press ${copyHotkey}`, string); // eslint-disable-line no-alert
+        if (!result) {
+          return false;
+        }
+      }
+    }
+    return true;
   }
 
   //new functions above here

ayanova/src/views/About.vue

@@ -10,8 +10,7 @@
         transition="scale-transition"
         class="multi-line"
         outline
-        >{{ formState.errorBoxMessage }}</v-alert
-      >
+      >{{ formState.errorBoxMessage }}</v-alert>
     </v-flex>
     <v-flex>
       <v-card id="aboutinfocard">
@@ -26,53 +25,37 @@
         </div>
 
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("UserTimeZoneOffset") }}:</span
-          >
-          <span class="body-2">{{
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("UserTimeZoneOffset") }}:</span>
+          <span class="body-2">
+            {{
             this.$gzlocale.format().timeZoneOffset
-          }}</span>
-        </div>
-
-        <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("DecimalSeparator") }}:</span
-          >
-          <span class="body-2">
-            {{ this.$gzlocale.format().decimalSeparator }}
+            }}
           </span>
         </div>
 
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("CurrencySymbol") }}:</span
-          >
-          <span class="body-2">
-            {{ this.$gzlocale.format().currencySymbol }}
-          </span>
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("DecimalSeparator") }}:</span>
+          <span class="body-2">{{ this.$gzlocale.format().decimalSeparator }}</span>
         </div>
 
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("ShortDateFormat") }}:</span
-          >
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("CurrencySymbol") }}:</span>
+          <span class="body-2">{{ this.$gzlocale.format().currencySymbol }}</span>
+        </div>
+
+        <div>
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("ShortDateFormat") }}:</span>
           <span class="body-2">{{ this.$gzlocale.format().shortDate }}</span>
         </div>
 
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("ShortTimeFormat") }}:</span
-          >
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("ShortTimeFormat") }}:</span>
           <span class="body-2">{{ this.$gzlocale.format().shortTime }}</span>
         </div>
 
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("ShortDateAndTimeFormat") }}:</span
-          >
-          <span class="body-2">
-            {{ this.$gzlocale.format().shortDateAndTime }}
-          </span>
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("ShortDateAndTimeFormat") }}:</span>
+          <span class="body-2">{{ this.$gzlocale.format().shortDateAndTime }}</span>
         </div>
 
         <v-divider class="mt-4"></v-divider>
@@ -85,9 +68,7 @@
         <v-divider class="mt-4"></v-divider>
         <v-subheader>{{ this.$gzlocale.get("Server") }}</v-subheader>
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("ServerAddress") }}:</span
-          >
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("ServerAddress") }}:</span>
           <span class="body-2">{{ this.$store.state.apiUrl }}</span>
         </div>
         <div>
@@ -95,15 +76,11 @@
           <span class="body-2">{{ serverInfo.serverVersion }}</span>
         </div>
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("SchemaVersion") }}:</span
-          >
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("SchemaVersion") }}:</span>
           <span class="body-2">{{ serverInfo.dbSchemaVersion }}</span>
         </div>
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("ServerTime") }}:</span
-          >
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("ServerTime") }}:</span>
           <span class="body-2">{{ serverInfo.serverLocalTime }}</span>
         </div>
         <div>
@@ -114,49 +91,30 @@
         <v-divider class="mt-4"></v-divider>
         <v-subheader>{{ this.$gzlocale.get("HelpLicense") }}</v-subheader>
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("RegisteredUser") }}:</span
-          >
-          <span class="body-2">
-            {{ serverInfo.license.license.licensedTo }}
-          </span>
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("RegisteredUser") }}:</span>
+          <span class="body-2">{{ serverInfo.license.license.licensedTo }}</span>
         </div>
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("DatabaseID") }}:</span
-          >
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("DatabaseID") }}:</span>
           <span class="body-2">{{ serverInfo.license.license.dbId }}</span>
         </div>
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("LicenseSerial") }}:</span
-          >
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("LicenseSerial") }}:</span>
           <span class="body-2">{{ serverInfo.license.license.keySerial }}</span>
         </div>
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("LicenseExpiration") }}:</span
-          >
-          <span class="body-2">
-            {{ serverInfo.license.license.licenseExpiration }}
-          </span>
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("LicenseExpiration") }}:</span>
+          <span class="body-2">{{ serverInfo.license.license.licenseExpiration }}</span>
         </div>
         <div>
-          <span class="ml-4 body-1"
-            >{{ this.$gzlocale.get("SupportedUntil") }}:</span
-          >
-          <span class="body-2">
-            {{ serverInfo.license.license.maintenanceExpiration }}
-          </span>
+          <span class="ml-4 body-1">{{ this.$gzlocale.get("SupportedUntil") }}:</span>
+          <span class="body-2">{{ serverInfo.license.license.maintenanceExpiration }}</span>
         </div>
 
         <v-divider class="mt-4"></v-divider>
         <v-subheader>{{ this.$gzlocale.get("LicensedOptions") }}</v-subheader>
 
-        <div
-          v-for="item in serverInfo.license.license.features"
-          :key="item.Feature"
-        >
+        <div v-for="item in serverInfo.license.license.features" :key="item.Feature">
           <span class="ml-4 body-1">{{ item.Feature }}</span>
           <span class="body-2">{{ item.Count ? ": " + item.Count : "" }}</span>
         </div>
@@ -192,8 +150,7 @@ function clickHandler(menuItem) {
         ) {
           logText += value + "\n";
         });
-
-        navigator.clipboard.writeText(text + "\nCLIENT LOG\n" + logText);
+        this.$gzutil.copyToClipboard(text + "\nCLIENT LOG\n" + logText);
         break;
       default:
         m.vm.$gzevent.$emit(