feat(ui): added validation to the shellhub instance append

package.json

@@ -25,6 +25,7 @@
     "@fortawesome/fontawesome-free": "^6.5.1",
     "@mdi/font": "^7.3.67",
     "@vueuse/core": "^10.7.0",
+    "ajv": "8.13.0",
     "axios": "^1.6.2",
     "electron-updater": "^6.1.1",
     "pinia": "^2.1.7",

src/main/index.ts

@@ -3,6 +3,20 @@ import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 
+function UpsertKeyValue(obj, keyToChange, value) {
+  const keyToChangeLower = keyToChange.toLowerCase()
+  for (const key of Object.keys(obj)) {
+    if (key.toLowerCase() === keyToChangeLower) {
+      // Reassign old key
+      obj[key] = value
+      // Done
+      return
+    }
+  }
+  // Insert at end instead
+  obj[keyToChange] = value
+}
+
 function createWindow(): void {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
@@ -20,6 +34,21 @@ function createWindow(): void {
     }
   })
 
+  mainWindow.webContents.session.webRequest.onBeforeSendHeaders((details, callback) => {
+    const { requestHeaders } = details
+    UpsertKeyValue(requestHeaders, 'Access-Control-Allow-Origin', ['*'])
+    callback({ requestHeaders })
+  })
+
+  mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => {
+    const { responseHeaders } = details
+    UpsertKeyValue(responseHeaders, 'Access-Control-Allow-Origin', ['*'])
+    UpsertKeyValue(responseHeaders, 'Access-Control-Allow-Headers', ['*'])
+    callback({
+      responseHeaders
+    })
+  })
+
   mainWindow.on('ready-to-show', () => {
     mainWindow.show()
   })

src/renderer/src/App.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed } from 'vue'
 import AppLayout from './layouts/AppLayout.vue'
 
 import './assets/global.css'

src/renderer/src/components/Auth/NewInstanceDialog.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-dialog v-model="showDialog" width="400">
+    <v-card class="bg-v-theme-surface" data-test="deviceRename-card">
+      <v-card-title class="text-h5 pa-5 bg-primary"> Add Instance </v-card-title>
+      <v-divider />
+      <v-form class="ma-2" @submit.prevent="addInstance">
+        <v-col>
+          <v-text-field
+            v-model="newInstanceForm.name"
+            color="primary"
+            prepend-inner-icon="mdi-text-box-outline"
+            required
+            label="Name"
+            variant="outlined"
+          />
+
+          <v-text-field
+            v-model="newInstanceForm.url"
+            color="primary"
+            :error="requestError"
+            :error-messages="errorMsg"
+            prepend-inner-icon="mdi-link"
+            label="URL"
+            required
+            variant="outlined"
+            data-test="password-text"
+          />
+          <v-card-actions class="justify-center pa-0">
+            <v-btn color="primary" block type="submit" variant="flat"> SAVE </v-btn>
+          </v-card-actions>
+        </v-col>
+      </v-form>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@renderer/stores'
+import { computed, reactive, ref } from 'vue'
+import Ajv from 'ajv'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const ajv = new Ajv()
+const showDialog = computed(() => props.show)
+const newInstanceForm = reactive({ name: '', url: '' })
+const requestError = ref(false)
+const errorMsg = ref('')
+const store = useAppStore()
+
+const infoSchema = {
+  type: 'object',
+  required: ['version', 'endpoints'],
+  properties: {
+    version: { type: 'string' },
+    endpoints: {
+      type: 'object',
+      required: ['api', 'ssh'],
+      properties: {
+        api: { type: 'string' },
+        ssh: { type: 'string' }
+      }
+    }
+  }
+}
+
+const request = async (url: string, config: RequestInit) => {
+  try {
+    const response = await fetch(url, config)
+    const responseData = await response.json()
+
+    const isValid = ajv.validate(infoSchema, responseData)
+
+    if (!isValid) {
+      requestError.value = true
+      errorMsg.value = "The version method used in this URL isn't from a real ShellHub instance"
+    }
+
+    return responseData
+  } catch (error: unknown) {
+    requestError.value = true
+    errorMsg.value =
+      "An error occurred while validating the URL, indicating it isn't from a real ShellHub instance"
+  }
+}
+
+const addInstance = async () => {
+  await request(`https://${newInstanceForm.url}/info`, {
+    method: 'GET'
+  })
+
+  store.appendInstance({
+    name: newInstanceForm.name,
+    url: newInstanceForm.url,
+    permanent: false
+  })
+
+  store.selectInstance(store.instances[store.instances.length - 1])
+}
+</script>

src/renderer/src/layouts/LoginLayout.vue

@@ -1,14 +1,13 @@
 <template>
   <v-app>
-              <router-view :key="currentRoute.value.path" />
-
+    <router-view :key="currentRoute.value.path" />
   </v-app>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
-const router = useRouter();
-const currentRoute = computed(() => router.currentRoute);
+const router = useRouter()
+const currentRoute = computed(() => router.currentRoute)
 </script>

src/renderer/src/main.ts

@@ -1,11 +1,11 @@
 import { createApp } from 'vue'
-import { router } from "./router";
-import vuetify from './plugins/vuetify';
+import { router } from './router'
+import vuetify from './plugins/vuetify'
 import App from './App.vue'
-//import { loadFonts } from './plugins/webfontloader';
+// import { loadFonts } from './plugins/webfontloader'
 import { createPinia } from 'pinia'
 
-//loadFonts()
+// loadFonts()
 
 const pinia = createPinia()
 const app = createApp(App)

src/renderer/src/stores/index.ts

@@ -33,7 +33,7 @@ export const useAppStore = defineStore('app', {
 
   actions: {
     setActiveInstance(instance: Instance) {
-      this.activeInstance = instance;
+      this.activeInstance = instance
     },
 
     selectInstance(instance: Instance) {