Add initial gui for ssl ca cert install #173

Author: fnoop

package.json

@@ -27,6 +27,7 @@
     "typeface-roboto": "^0.0.75",
     "vue": "^2.6.11",
     "vue-apollo": "^3.0.3",
+    "vue-browser-detect-plugin": "^0.1.8",
     "vue-cesium": "^2.0.6",
     "vue-cli-plugin-apollo": "^0.21.3",
     "vue-fullscreen": "^2.1.5",

public/img/ssl/firefox-sslca.png

@@ -96,13 +96,20 @@ div
                           v-icon(v-else color='error') mdi-alert-circle-outline
                       v-list-item
                         v-list-item-content Icon Set
-                        v-list-item-content {{ apistate[item.key].icon }}
+                        v-list-item-content
                           v-icon(v-if="apistate[item.key].icon" color='success') {{ apistate[item.key].icon }}
                           v-icon(v-else color='error') mdi-alert-circle-outline
                     v-divider
-                    // img(:src="`https://${item.hostname}/img/misc/onepixel.png`" @error="imgError('http', item)" style="display:none")
-                    // img(:src="`http://${item.hostname}/img/misc/onepixel.png`" @error="imgError('https', item)" style="display:none")
-                    
+                    v-list(dense)
+                      v-list-item
+                        v-list-item-content SSL Status
+                        v-list-item-content
+                          v-icon(v-if="apistate[item.key].sslstate === true" color='success') mdi-check-circle-outline
+                          v-icon(v-else color='error') mdi-alert-circle-outline
+                      v-list-item(v-if="apistate[item.key].sslstate !== true")
+                        v-list-item-content
+                          v-btn(color="primary" @click="setupSsl(item.key)") Setup SSL
+  
   v-dialog(v-model="dialog" max-width="600px")
     v-card
       v-card-title.headline(class="primary" primary-title)
@@ -126,6 +133,56 @@ div
         v-btn.ma-2(color="success" @click="createConnection()") Create Connection
         v-btn.ma-2(color="error" @click="dialog = false") Cancel
 
+  v-dialog(v-model="sslDialog" max-width="600px" overlay-opacity=0.85)
+    v-card
+      v-card-title.headline.primary(primary-title)
+        span SSL Setup
+        v-spacer(v-if="sslitem")
+        span.subtitle-1(v-if="sslitem")  {{ sslitem.name }}
+      v-card-text(v-if="sslitem")
+        v-container
+          // Download CA cert step
+          v-row
+            v-col(cols="12" sm="12" md="12")
+              div 1. Please click on the button below to download the SSL Certificate
+              v-btn(color="primary" small :href="`http://${sslitem.hostname}/security/mavCA.crt`") Download SSL CA Certificate
+          // Firefox ssl guide
+          v-row(v-if="$browserDetect.isFirefox")
+            v-col(cols="12" sm="12" md="12")
+              div 2. In Firefox, a dialog should popup asking which permissions to give the certificate:
+              img(src="img/ssl/firefox-sslca.png")
+              div Click to enable 'Trust this CA to identify web sites'
+          // MacOS Chrome/Safari ssl guide
+          v-row(v-else-if="($browserDetect.isChrome || $browserDetect.isSafari) && (/OS X/.test($browserDetect.meta.ua) || /OSX/.test($browserDetect.meta.ua))")
+            v-col(cols="12" sm="12" md="12")
+              div 2. In MacOS Chrome or Safari, click on the downloaded file in the footer of the browser.
+              img(src="img/ssl/macffsafari-1.png")
+              div This will import the certificate into MacOS system Keychain Access app.
+              img(src="img/ssl/macffsafari-2.png")
+              div Choose the default 'login' option and click Add
+            v-col(cols="12" sm="12" md="12")
+              div 3. Double click on the untrusted certificate (with red X)
+              img(src="img/ssl/macffsafari-3.png")
+            v-col(cols="12" sm="12" md="12")
+              div 4. Open the 'Trust' section and change 'When using this certificate' to 'Always Trust'
+              img(src="img/ssl/macffsafari-4.png")
+              div Close the window and it will ask you to authenticate, to verify the system certificate update.
+          // Undetected browser ssl guide
+          v-row(v-else)
+            v-col(cols="12" sm="12" md="12")
+              div 2. Unknown browser - please search on the internet for installation instructions for your OS/Browser:
+              div {{ $browserDetect.meta.ua }}
+          // Add reload step
+          v-row
+            v-col(cols="12" sm="12" md="12")
+              div 3. Reload the website to activate the new certificate.
+              v-btn(color="primary" small @click="reloadPage()") Reload
+
+      v-divider
+      v-card-actions
+        v-spacer
+        v-btn.ma-2(color="error" @click="sslDialog = false") Close
+
   v-dialog(v-if="deleteitem" v-model="deleteDialog" max-width="400")
     v-card
       v-card-title
@@ -150,8 +207,10 @@ export default {
       filter: {},
       dialog: false,
       deleteDialog: false,
+      sslDialog: false,
       newitem: {},
       deleteitem: null,
+      sslitem: null,
       expand: true
     }
   },
@@ -190,22 +249,13 @@ export default {
       }
       this.$store.commit('data/addApi', {key: data.key, data: data})
     },
-    /*
-    imgError (protocol, item) {
-      this.logDebug(`protocol: ${protocol}`)
-      this.logDebug(item)
-      if (event.type == "error" && item.hasOwnProperty('hostname')) {
-        this.logError(`Error connecting to API (${item.name}) over SSL.`)
-        this.logDebug(event)
-      } else if (! item.hasOwnProperty('hostname')) {
-        this.logError(`Error: This API definition (${item.name}) does not have a hostname set.  Please update maverick-api.`)
-      }
-    },
-    */
     lastseen (api) {
       let lastseen = (this.$store.state.core.apiSeen.hasOwnProperty(api)) ? this.$store.state.core.apiSeen[api] : 0
       return (performance.now() - lastseen)
     },
+    reloadPage(){
+      window.location.reload()
+    },
     remove(item) {
       this.deleteitem = item
       this.deleteDialog = true
@@ -228,6 +278,11 @@ export default {
       // delete this.$apollo.provider.clients[apiData.key]
       // this.createClient(apiData.key+'new', apiData)
     },
+    setupSsl(api) {
+      this.logDebug(`Opening setupSsl for Api: ${this.apis[api].name}`)
+      this.sslitem = this.apis[api]
+      this.sslDialog = true
+    },
     async testSsl(api) {
       // Define an internal method function promise that fetches the image and watches for completion or error
       function testImage(imgPath) {

public/img/ssl/macffsafari-1.png

@@ -6,7 +6,7 @@ v-container(fluid)
       v-spacer
     v-container(fluid)
       v-row()
-        v-col(lg=4 md=6)
+        v-col(lg=6 md=6)
           v-card(ripple hover shaped to="/config/interface")
             div.d-flex.flex-no-wrap.justify-space-between
               div
@@ -17,7 +17,7 @@ v-container(fluid)
               v-avatar.ma-3(tile)
                 v-icon(x-large) mdi-account-cog
               v-spacer
-        v-col(lg=4 md=6)
+        v-col(lg=6 md=6)
           v-card(ripple hover shaped to="/config/modules")
             div.d-flex.flex-no-wrap.justify-space-between
               div
@@ -28,17 +28,6 @@ v-container(fluid)
               v-avatar.ma-3(tile)
                 v-icon(x-large) mdi-view-module
               v-spacer
-        v-col(lg=4 md=6)
-          v-card(ripple hover shaped to="/config/video")
-            div.d-flex.flex-no-wrap.justify-space-between
-              div
-                v-card-title.headline Video Streams
-                v-card-subtitle Create and edit Video Streams.
-                v-card-actions
-                  v-btn(color="primary" small to="/config/video") GoTo Video Streams
-              v-avatar.ma-3(tile)
-                v-icon(x-large) mdi-video
-              v-spacer
 
   v-card.mt-4
     v-app-bar(:color="topColor" dense)
@@ -68,6 +57,17 @@ v-container(fluid)
               v-avatar.ma-3(tile)
                 v-icon(x-large) mdi-router-wireless-settings
               v-spacer
+        v-col(lg=4 md=6)
+          v-card(ripple hover shaped to="/config/video")
+            div.d-flex.flex-no-wrap.justify-space-between
+              div
+                v-card-title.headline Video Streams
+                v-card-subtitle Create and edit Video Streams.
+                v-card-actions
+                  v-btn(color="primary" small to="/config/video") GoTo Video Streams
+              v-avatar.ma-3(tile)
+                v-icon(x-large) mdi-video
+              v-spacer
 </template>              
 <script>
 export default {

public/img/ssl/macffsafari-2.png

@@ -17,6 +17,7 @@ import './plugins/vuebar'
 import './plugins/vuetoast'
 import './plugins/vuevisibility'
 import mq from './plugins/vuemq'
+import './plugins/vuebrowserdetect'
 // import './plugins/registerServiceWorker'
 import { createProvider } from './plugins/graphql/vue-apollo'
 

public/img/ssl/macffsafari-3.png

@@ -111,9 +111,13 @@ const plugin = {
           // Add a vuex apis entry
           this.$store.commit('core/addApiState', api)
 
+          if (!this.apis[api].hostname) {
+            this.logError(`Error: API ${this.apis[api].name} does not have a hostname set, please upgrade maverick-api`)
+            return false
+          }
           // Check ssl connection
           let httpsState = false
-          let httpsLoad = this.testImage(`https://${this.apis[api].hostname}/img/ssltest.png`)
+          let httpsLoad = this.testImage(`https://${this.apis[api].hostname}/img/ssl/ssltest.png`)
             .then(img => { httpsState = true })
             .catch(err => { httpsState = false })
           await httpsLoad      

public/img/ssl/macffsafari-4.png

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import browserDetect from "vue-browser-detect-plugin"
+
+Vue.use(browserDetect)

public/img/ssltest.png public/img/ssl/ssltest.png

@@ -1,4 +1,4 @@
-// const fs = require('fs');
+const fs = require('fs');
 
 module.exports = {
   "transpileDependencies": [
@@ -64,14 +64,12 @@ module.exports = {
         'X-Requested-With, content-type, Authorization'
     },
     // Uncomment this https block below to enable https in the Maverick environment
-    /*
     https: {
       key: fs.readFileSync('/srv/maverick/data/security/ssl/web/mavweb.key'),
       cert: fs.readFileSync('/srv/maverick/data/security/ssl/web/mavweb.crt'),
       ca: fs.readFileSync('/srv/maverick/data/security/ssl/ca/mavCA.pem'),
     },
-    */
-    https: false,
+    // https: false,
     hotOnly: true,
     inline: true,
     open: false,