Merge branch 'develop'

package.json

@@ -34,14 +34,15 @@
     "@fontsource/raleway": "^4.4.5",
     "@fontsource/roboto": "^4.4.5",
     "@jaames/iro": "^5.5.1",
-    "@types/uuid": "^8.3.0",
+    "@types/uuid": "^8.3.1",
     "axios": "^0.21.1",
     "consola": "^2.15.3",
     "core-js": "^3.14.0",
     "dayjs": "^1.10.5",
+    "deepmerge": "^4.2.2",
     "echarts": "^5.1.2",
     "echarts-for-vue": "^1.4.1",
-    "echarts-gl": "^2.0.5",
+    "echarts-gl": "^2.0.6",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
@@ -65,7 +66,7 @@
     "vue-router": "^3.5.1",
     "vue-virtual-scroller": "^1.0.10",
     "vuedraggable": "^2.24.3",
-    "vuetify": "^2.5.4",
+    "vuetify": "^2.5.6",
     "vuetify-confirm": "^2.0.6",
     "vuex": "^3.6.2"
   },
@@ -76,7 +77,7 @@
     "@types/lodash": "^4.14.170",
     "@types/md5": "^2.3.0",
     "@types/semver": "^7.3.6",
-    "@types/workbox-window": "^4.3.3",
+    "@types/workbox-window": "^4.3.4",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "^4.5.13",

public/config.json

@@ -80,6 +80,15 @@
         "src": "/logo_vzbot.svg",
         "dynamic": false
       }
+    },
+    {
+      "name": "ZeroG",
+      "color": "#e34234",
+      "isDark": true,
+      "logo": {
+        "src": "/logo_zerog.svg",
+        "dynamic": true
+      }
     }
   ]
 }

server/config.json

@@ -3,5 +3,92 @@
     "fluidd.xyz",
     "fluidd.net"
   ],
-  "hosted": true
-}
+  "hosted": true,
+  "themePresets": [
+    {
+      "name": "Fluidd",
+      "color": "#2196F3",
+      "isDark": true,
+      "logo": {
+        "src": "/logo_fluidd.svg",
+        "dynamic": true
+      }
+    },
+    {
+      "name": "Annex",
+      "color": "#96CC4A",
+      "isDark": true,
+      "logo": {
+        "src": "/logo_annex.svg",
+        "dynamic": true
+      }
+    },
+    {
+      "name": "EVA",
+      "color": "#76FB00",
+      "isDark": true,
+      "logo": {
+        "src": "/logo_eva.svg",
+        "dark": "#232323",
+        "light": "#ffffff",
+        "dynamic": false
+      }
+    },
+    {
+      "name": "HevORT",
+      "color": "#dfff3e",
+      "isDark": true,
+      "logo": {
+        "src": "/logo_hevort.svg",
+        "dynamic": true
+      }
+    },
+    {
+      "name": "Klipper",
+      "color": "#B12F36",
+      "isDark": true,
+      "logo": {
+        "src": "/logo_klipper.svg",
+        "dynamic": false
+      }
+    },
+    {
+      "name": "RatRig",
+      "color": "#76FB00",
+      "isDark": true,
+      "logo": {
+        "src": "/logo_ratrig.svg",
+        "dark": "#232323",
+        "light": "#ffffff",
+        "dynamic": false
+      }
+    },
+    {
+      "name": "Voron",
+      "color": "#FF2300",
+      "isDark": true,
+      "logo": {
+        "src": "/logo_voron.svg",
+        "dynamic": true
+      }
+    },
+    {
+      "name": "VzBot",
+      "color": "#FF2300",
+      "isDark": true,
+      "logo": {
+        "src": "/logo_vzbot.svg",
+        "dynamic": false
+      }
+    },
+    {
+      "name": "ZeroG",
+      "color": "#e34234",
+      "isDark": true,
+      "logo": {
+        "src": "/logo_zerog.svg",
+        "dynamic": true
+      }
+    }
+  ]
+}

src/components/common/AddInstanceDialog.vue

@@ -92,59 +92,70 @@ export default class AddInstanceDialog extends Mixins(StateMixin) {
   error: any = null
   note: any = null
 
-  urlRegex = new RegExp('^(https?:\\/\\/)' + // protocol
-            '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z\\d-]{2,}|' + // domain name
-            '((\\d{1,3}\\.){3}\\d{1,3}))' + // ip (v4) address
-            '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port
-            '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-            '(\\#[-a-z\\d_]*)?$', 'i')
-
   rules = {
     required: (v: string) => !!v || this.$t('app.general.simple_form.error.required'),
-    url: (v: string) => (this.urlRegex.test(v)) || this.$t('app.general.simple_form.error.invalid_url')
+    url: (v: string) => (this.validUrl(v)) || this.$t('app.general.simple_form.error.invalid_url')
   }
 
-  timer = 0
-  actualUrl = ''
-
-  get url () {
-    return this.actualUrl
+  /**
+   * Validates a URL
+   */
+  validUrl (url: string) {
+    try {
+      this.buildUrl(url)
+    } catch {
+      return false
+    }
+    return true
   }
 
-  set url (url: string) {
-    this.verified = false
-    this.actualUrl = url
+  /**
+   * Builds the URL using the browsers URL class
+   * Assume http:// if no protocol is given.
+  */
+  buildUrl (url: string) {
+    if (
+      !url.startsWith('http://') && !url.startsWith('https://')
+    ) url = `http://${url}`
+    return new URL(url)
   }
 
+  timer = 0
+  url = ''
+
   // Axios cancels.
   cancelSource: CancelTokenSource | undefined = undefined
 
   // Fetch cancels.
   controller: AbortController | undefined = undefined
 
-  @Watch('actualUrl')
-  @Debounce(500)
-  async onUrlChange (url: string) {
+  // Watch for valid url changes.
+  @Watch('url')
+  onUrlChange (value: string, oldVal: string) {
+    if (value === oldVal) return
+    if (this.valid) this.handleUrlChange(value)
+  }
+
+  @Debounce(750)
+  async handleUrlChange (value: string) {
     if (this.valid) {
+      this.verified = false
       this.error = null
       this.note = null
       this.verifying = true
 
+      const url = this.buildUrl(value)
+
       // Handle cancelling axios requests.
       if (this.cancelSource !== undefined) {
         this.cancelSource.cancel('Cancelled due to new request.')
       }
 
       this.cancelSource = Axios.CancelToken.source()
 
-      // filter trailing slashes
-      url = (url.endsWith('/'))
-        ? url.slice(0, -1)
-        : url
-
       // Start by making a standard request. Maybe it's good?
       const request = await httpClient.get(
-        url + '/server/info?t=' + new Date().getTime(), {
+        url + 'server/info?t=' + new Date().getTime(), {
           withAuth: false,
           cancelToken: this.cancelSource.token
         })
@@ -183,7 +194,7 @@ export default class AddInstanceDialog extends Mixins(StateMixin) {
         this.controller = new AbortController()
         const { signal } = this.controller
 
-        await fetch(url + '/server/info', { signal, mode: 'no-cors', cache: 'no-cache' })
+        await fetch(url + 'server/info', { signal, mode: 'no-cors', cache: 'no-cache' })
           .then(() => {
             // likely a cors issue
             this.error = this.$t('app.endpoint.error.cors_error')
@@ -213,9 +224,9 @@ export default class AddInstanceDialog extends Mixins(StateMixin) {
   }
 
   addInstance () {
-    const valid = this.form.validate()
-    if (valid) {
-      const apiConfig = this.$filters.getApiUrls(this.url)
+    if (this.valid) {
+      const url = this.buildUrl(this.url)
+      const apiConfig = this.$filters.getApiUrls(url.toString())
       this.$emit('input', false)
       this.$emit('resolve', apiConfig)
     }