Add custom headers modal and model

components/connection/ServerConnectForm.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-full max-w-md mx-auto px-4 sm:px-6 lg:px-8 z-10">
-    <div v-show="!loggedIn" class="mt-8 bg-primary overflow-hidden shadow rounded-lg p-6 w-full">
+  <div class="w-full max-w-md mx-auto px-2 sm:px-4 lg:px-8 z-10">
+    <div v-show="!loggedIn" class="mt-8 bg-primary overflow-hidden shadow rounded-lg px-4 py-6 w-full">
       <template v-if="!showForm">
         <div v-for="config in serverConnectionConfigs" :key="config.id" class="flex items-center py-4 my-1 border-b border-white border-opacity-10 relative" @click="connectToServer(config)">
           <span class="material-icons-outlined text-xl text-gray-300">dns</span>
@@ -17,9 +17,14 @@
       <div v-else class="w-full">
         <form v-show="!showAuth" @submit.prevent="submit" novalidate class="w-full">
           <h2 class="text-lg leading-7 mb-2">Server address</h2>
-          <ui-text-input v-model="serverConfig.address" :disabled="processing || !networkConnected || serverConfig.id" placeholder="http://55.55.55.55:13378" type="url" class="w-full sm:w-72 h-10" />
-          <div class="flex justify-end">
-            <ui-btn :disabled="processing || !networkConnected" type="submit" :padding-x="3" class="h-10 mt-4">{{ networkConnected ? 'Submit' : 'No Internet' }}</ui-btn>
+          <ui-text-input v-model="serverConfig.address" :disabled="processing || !networkConnected || serverConfig.id" placeholder="http://55.55.55.55:13378" type="url" class="w-full h-10" />
+          <div class="flex justify-end items-center mt-6">
+            <!-- <div class="relative flex">
+              <button class="outline-none uppercase tracking-wide font-semibold text-xs text-gray-300" type="button" @click="addCustomHeaders">Add Custom Headers</button>
+              <div v-if="numCustomHeaders" class="rounded-full h-5 w-5 flex items-center justify-center text-xs bg-success bg-opacity-40 leading-3 font-semibold font-mono ml-1">{{ numCustomHeaders }}</div>
+            </div> -->
+
+            <ui-btn :disabled="processing || !networkConnected" type="submit" :padding-x="3" class="h-10">{{ networkConnected ? 'Submit' : 'No Internet' }}</ui-btn>
           </div>
         </form>
         <template v-if="showAuth">
@@ -62,6 +67,8 @@
         </svg>
       </div>
     </div>
+
+    <modals-custom-headers-modal v-model="showAddCustomHeaders" :custom-headers.sync="serverConfig.customHeaders" />
   </div>
 </template>
 
@@ -78,11 +85,13 @@ export default {
       processing: false,
       serverConfig: {
         address: null,
-        username: null
+        username: null,
+        customHeaders: null
       },
       password: null,
       error: null,
-      showForm: false
+      showForm: false,
+      showAddCustomHeaders: false
     }
   },
   computed: {
@@ -98,9 +107,16 @@ export default {
     lastServerConnectionConfig() {
       if (!this.lastServerConnectionConfigId || !this.serverConnectionConfigs.length) return null
       return this.serverConnectionConfigs.find((s) => s.id == this.lastServerConnectionConfigId)
+    },
+    numCustomHeaders() {
+      if (!this.serverConfig.customHeaders) return 0
+      return Object.keys(this.serverConfig.customHeaders).length
     }
   },
   methods: {
+    addCustomHeaders() {
+      this.showAddCustomHeaders = true
+    },
     showServerList() {
       this.showForm = false
       this.showAuth = false
@@ -192,9 +208,13 @@ export default {
         return null
       }
     },
-    pingServerAddress(address) {
+    pingServerAddress(address, customHeaders) {
+      const options = { timeout: 3000 }
+      if (customHeaders) {
+        options.headers = customHeaders
+      }
       return this.$axios
-        .$get(`${address}/ping`, { timeout: 3000 })
+        .$get(`${address}/ping`, options)
         .then((data) => data.success)
         .catch((error) => {
           console.error('Server check failed', error)
@@ -203,8 +223,12 @@ export default {
         })
     },
     requestServerLogin() {
+      const options = {}
+      if (this.serverConfig.customHeaders) {
+        options.headers = this.serverConfig.customHeaders
+      }
       return this.$axios
-        .$post(`${this.serverConfig.address}/login`, { username: this.serverConfig.username, password: this.password })
+        .$post(`${this.serverConfig.address}/login`, { username: this.serverConfig.username, password: this.password }, options)
         .then((data) => {
           if (!data.user) {
             console.error(data.error)
@@ -236,7 +260,7 @@ export default {
       this.processing = true
       this.error = null
 
-      var success = await this.pingServerAddress(this.serverConfig.address)
+      var success = await this.pingServerAddress(this.serverConfig.address, this.serverConfig.customHeaders)
       this.processing = false
       if (success) this.showAuth = true
     },

components/modals/CustomHeadersModal.vue

@@ -0,0 +1,96 @@
+<template>
+  <modals-modal v-model="show" :width="'90%'" :max-width="'420px'" height="100%">
+    <template #outer>
+      <div class="absolute top-5 left-4 z-40">
+        <p class="text-white text-2xl truncate">Custom Headers</p>
+      </div>
+    </template>
+    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
+      <div ref="container" class="w-full rounded-lg bg-primary border border-white border-opacity-20 overflow-y-auto overflow-x-hidden" style="max-height: 80vh" @click.stop>
+        <div class="w-full h-full p-4" v-if="showAddHeader">
+          <div class="mb-4">
+            <ui-icon-btn icon="arrow_back" borderless @click="showAddHeader = false" />
+          </div>
+          <form @submit.prevent="submitForm">
+            <ui-text-input-with-label v-model="newHeaderKey" label="Name" class="mb-2" />
+            <ui-text-input-with-label v-model="newHeaderValue" label="Value" class="mb-4" />
+
+            <ui-btn type="submit" class="w-full">Submit</ui-btn>
+          </form>
+        </div>
+        <div class="w-full h-full p-4" v-else>
+          <template v-for="[key, value] in Object.entries(headersCopy)">
+            <div :key="key" class="w-full rounded-lg bg-white bg-opacity-5 py-2 pl-4 pr-12 relative mb-2">
+              <p class="text-base font-semibold text-gray-200 leading-5">{{ key }}</p>
+              <p class="text-sm text-gray-400">{{ value }}</p>
+
+              <div class="absolute top-0 bottom-0 right-0 h-full p-4 flex items-center justify-center text-error">
+                <button @click="removeHeader(key)"><span class="material-icons text-lg">delete</span></button>
+              </div>
+            </div>
+          </template>
+          <p v-if="!Object.keys(headersCopy).length" class="py-4 text-center">No Custom Headers</p>
+
+          <div class="w-full flex justify-center pt-4">
+            <ui-btn @click="showAddHeader = true" class="w-full">Add Custom Header</ui-btn>
+          </div>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    customHeaders: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      newHeaderKey: '',
+      newHeaderValue: '',
+      headersCopy: {},
+      showAddHeader: false
+    }
+  },
+  watch: {
+    show(val) {
+      if (val) this.init()
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    removeHeader(key) {
+      this.$delete(this.headersCopy, key)
+      this.$emit('update:customHeaders', { ...this.headersCopy })
+    },
+    submitForm() {
+      console.log('Submit form', this.newHeaderKey, this.newHeaderValue)
+      this.headersCopy[this.newHeaderKey] = this.newHeaderValue
+      this.newHeaderKey = ''
+      this.newHeaderValue = ''
+      this.showAddHeader = false
+      this.$emit('update:customHeaders', { ...this.headersCopy })
+    },
+    init() {
+      this.newHeaderKey = ''
+      this.newHeaderValue = ''
+      this.headersCopy = this.customHeaders ? { ...this.customHeaders } : {}
+    }
+  },
+  mounted() {}
+}
+</script>