feat(ui): validation to the add new shellhub instance

package.json

@@ -24,14 +24,18 @@
     "@electron-toolkit/utils": "^2.0.0",
     "@fortawesome/fontawesome-free": "^6.5.1",
     "@mdi/font": "^7.3.67",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^10.7.0",
     "axios": "^1.6.2",
     "electron-updater": "^6.1.1",
     "pinia": "^2.1.7",
     "sass": "^1.69.5",
+    "vee-validate": "^4.12.7",
     "vue-router": "^4.2.5",
     "vuetify": "^3.4.6",
-    "webfontloader": "^1.6.28"
+    "webfontloader": "^1.6.28",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config": "^1.0.1",

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({
@@ -13,13 +27,27 @@ function createWindow(): void {
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
       webviewTag: true,
-      webSecurity: false,
       partition: 'persist:shellhub',
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false
     }
   })
 
+  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,140 @@
+<template>
+  <v-dialog v-model="show" width="400" @click:outside="close">
+    <v-card class="bg-v-theme-surface">
+      <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="name"
+            :error-messages="nameError"
+            color="primary"
+            prepend-inner-icon="mdi-text-box-outline"
+            autofocus
+            label="Name"
+            variant="outlined"
+            @blur="handleChange"
+          />
+
+          <v-text-field
+            v-model="url"
+            color="primary"
+            :error-messages="urlError"
+            prepend-inner-icon="mdi-link"
+            label="URL"
+            required
+            variant="outlined"
+          />
+          <v-card-actions class="justify-center pa-0">
+            <v-btn :disabled="hasError" 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, ref } from 'vue'
+import { useVuelidate } from '@vuelidate/core'
+import * as yup from 'yup'
+import { required } from '@vuelidate/validators'
+import { useField } from 'vee-validate'
+
+const props = defineProps({
+  value: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update'])
+const requestError = ref(false)
+const store = useAppStore()
+const showDialog = ref(false)
+
+const {
+  value: name,
+  errorMessage: nameError,
+  handleChange
+} = useField<string>('name', yup.string().required().min(1), {
+  initialValue: ''
+})
+
+const { value: url, errorMessage: urlError } = useField<string>(
+  'url',
+  yup.string().required().url(),
+  {
+    initialValue: 'https://'
+  }
+)
+
+const show = computed({
+  get: () => props.value,
+  set: (val) => {
+    showDialog.value = val
+  }
+})
+
+const hasError = computed(() => {
+  return !!urlError.value || !!nameError.value
+})
+
+const jsonRules = {
+  version: { required },
+  endpoints: {
+    required,
+    isObject: (value: object) =>
+      typeof value === 'object' && value !== null && !Array.isArray(value),
+    api: { required },
+    ssh: { required }
+  }
+}
+
+const request = async (hostUrl: string, config: RequestInit) => {
+  try {
+    const response = await fetch(hostUrl, config)
+    const responseData = await response.json()
+
+    const model = responseData
+    const v = useVuelidate(jsonRules, model)
+
+    if (v.value.$silentErrors.length > 1) {
+      requestError.value = true
+      urlError.value = "This URL doesn't match the expected ShellHub version schema"
+      return
+    }
+
+    store.appendInstance({
+      name: name.value,
+      url: url.value,
+      version: responseData.version,
+      permanent: false
+    })
+
+    store.selectInstance(store.instances[store.instances.length - 1])
+
+    close()
+
+    return responseData
+  } catch (error: unknown) {
+    requestError.value = true
+    urlError.value =
+      "An error occurred while validating the URL, indicating it isn't from a real ShellHub instance"
+  }
+}
+
+const addInstance = async () => {
+  if (hasError.value) {
+    await request(`${url.value}/info`, {
+      method: 'GET'
+    })
+  }
+}
+
+const close = () => {
+  emit('update')
+}
+</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

@@ -4,12 +4,14 @@ import { useStorage } from '@vueuse/core'
 export type Instance = {
   name: string
   url: string
+  version: string
   permanent: boolean
 }
 
 const permanentInstance: Instance = {
   name: 'ShellHub Cloud',
   url: 'https://cloud.shellhub.io',
+  version: '',
   permanent: true
 }
 
@@ -33,7 +35,7 @@ export const useAppStore = defineStore('app', {
 
   actions: {
     setActiveInstance(instance: Instance) {
-      this.activeInstance = instance;
+      this.activeInstance = instance
     },
 
     selectInstance(instance: Instance) {