Extract connect component.

src/vue/connect/component/ElasticSearch.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <section class="mb-2">
+      <section class="mb-2">
+        <label class="font-bold mr-5 inline-block w-32">Scheme</label>
+        <el-radio v-model="connectionOption.scheme" label="http">Http</el-radio>
+        <el-radio v-model="connectionOption.scheme" label="https">Https</el-radio>
+      </section>
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-32"><span class="text-red-600 mr-1">*</span>
+          <span v-if="connectionOption.dbType=='ElasticSearch'">URL</span>
+          <span v-if="connectionOption.dbType!='ElasticSearch'">Host</span>
+        </label>
+        <input class="w-64 field__input" placeholder="The host of connection" required v-model="connectionOption.host" />
+      </div>
+    </section>
+    <section class="mb-2">
+      <div class="inline-block mr-10" v-if="connectionOption.dbType!='Redis'">
+        <label class="font-bold mr-5 inline-block w-32"><span class="text-red-600 mr-1" v-if="connectionOption.dbType!='ElasticSearch'">*</span>Username</label>
+        <input class="w-64 field__input" placeholder="Username" required v-model="connectionOption.user" />
+      </div>
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-32"><span class="text-red-600 mr-1" v-if="connectionOption.dbType!='ElasticSearch'">*</span>Password</label>
+        <input class="w-64 field__input" placeholder="Password" type="password" v-model="connectionOption.password" />
+      </div>
+    </section>
+    <div class="inline-block mr-10">
+      <label class="font-bold mr-5 inline-block w-32">ConnectTimeout</label>
+      <input class="w-64 field__input" placeholder="2000" required v-model="connectionOption.connectTimeout" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["connectionOption"],
+};
+</script>
+
+<style>
+</style>

src/vue/connect/component/FTP.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div class="inline-block mr-10">
+      <label class="font-bold mr-5 inline-block w-32">Encoding</label>
+      <input class="w-64 field__input" placeholder="UTF8" required v-model="connectionOption.encoding" />
+    </div>
+    <div class="inline-block mr-10">
+      <label class="font-bold mr-5 inline-block w-32">Show Hidden File</label>
+      <el-switch v-model="connectionOption.showHidden"></el-switch>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["connectionOption"],
+};
+</script>
+
+<style>
+</style>

src/vue/connect/component/SQLServer.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <section class="mb-2" v-if="connectionOption.dbType=='SqlServer'">
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-32">Instance Name</label>
+        <input class="w-64 field__input" placeholder="Connection named instance" title="The instance name to connect to. The SQL Server Browser service must be running on the database server, and UDP port 1434 on the database server must be reachable.(no default)" v-model="connectionOption.instanceName" />
+      </div>
+      <span>
+        (If instance name is specified, the port config is ignored)
+      </span>
+    </section>
+
+    <section class="mb-2" v-if="connectionOption.dbType=='SqlServer'">
+      <div class="inline-block mr-10" v-if="connectionOption.dbType=='SqlServer'">
+        <label class="font-bold mr-5 inline-block w-32">Auth Type</label>
+        <el-select v-model="connectionOption.authType">
+          <el-option :label="'default'" value="default"></el-option>
+          <el-option :label="'ntlm(Windows Auth)'" value="ntlm"></el-option>
+          <!-- <el-option :label="'azure-active-directory-password'" value="azure-active-directory-password"></el-option>
+              <el-option :label="'azure-active-directory-msi-vm'" value="azure-active-directory-msi-vm"></el-option>
+              <el-option :label="'azure-active-directory-msi-app-service'" value="azure-active-directory-msi-app-service"></el-option> -->
+        </el-select>
+      </div>
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-18">Encrypt</label>
+        <el-switch v-model="connectionOption.encrypt"></el-switch>
+      </div>
+    </section>
+
+    <section class="mb-2" v-if="connectionOption.dbType=='SqlServer' && connectionOption.authType=='ntlm'">
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-32"><span class="text-red-600 mr-1">*</span>Domain</label>
+        <input class="w-64 field__input" placeholder="Domain" v-model="connectionOption.domain" />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["connectionOption"],
+};
+</script>
+
+<style>
+</style>

src/vue/connect/component/SQLite.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <div>
+      <section class="mb-2" v-if="!sqliteState">
+        <div class="font-bold mr-5 inline-block w-1/4">
+          <el-alert title="sqlite not installed" type="warning" show-icon />
+        </div>
+        <div class="font-bold mr-5 inline-block w-36">
+          <button class="button button--primary w-128 inline" @click="install">Install Sqlite</button>
+        </div>
+      </section>
+      <section class="mb-2">
+        <div class="inline-block mr-10">
+          <label class="font-bold mr-5 inline-block w-28">SQLite File Path</label>
+          <input class="w-80 field__input" placeholder="SQLite File Path" v-model="connectionOption.dbPath" />
+          <button class="button button--primary w-128 inline" @click="choose('sqlite')">Choose Database File</button>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["connectionOption","sqliteState"],
+  methods:{
+    install(){
+      this.$emit("installSqlite")
+    }
+  }
+};
+</script>
+
+<style>
+</style>

src/vue/connect/component/SSH.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <section class="mb-2">
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-28"><span class="text-red-600 mr-1">*</span>SSH Host</label>
+        <input class="w-64 field__input" placeholder="SSH Host" required v-model="connectionOption.ssh.host" />
+      </div>
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-28"><span class="text-red-600 mr-1">*</span>SSH Port</label>
+        <input class="w-64 field__input" placeholder="SSH Port" required type="number" v-model="connectionOption.ssh.port" />
+      </div>
+    </section>
+
+    <section class="mb-2">
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-28"><span class="text-red-600 mr-1">*</span>SSH Username</label>
+        <input class="w-64 field__input" placeholder="SSH Username" required v-model="connectionOption.ssh.username" />
+      </div>
+
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-28">SSH Cipher</label>
+        <el-select v-model="connectionOption.ssh.algorithms.cipher[0]" placeholder="Default">
+          <el-option value="aes128-cbc">aes128-cbc</el-option>
+          <el-option value="aes192-cbc">aes192-cbc</el-option>
+          <el-option value="aes256-cbc">aes256-cbc</el-option>
+          <el-option value="3des-cbc">3des-cbc</el-option>
+          <el-option value="aes128-ctr">aes128-ctr</el-option>
+          <el-option value="aes192-ctr">aes192-ctr</el-option>
+          <el-option value="aes256-ctr">aes256-ctr</el-option>
+        </el-select>
+      </div>
+    </section>
+
+    <section class="mb-2" v-if="connectionOption.dbType=='SSH'">
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-32">Show Hidden File</label>
+        <el-switch v-model="connectionOption.showHidden"></el-switch>
+      </div>
+    </section>
+
+    <section class="mb-2">
+      <label class="font-bold mr-5 inline-block w-28">Type</label>
+      <el-radio v-model="connectionOption.ssh.type" label="password">Password</el-radio>
+      <el-radio v-model="connectionOption.ssh.type" label="privateKey">Private Key</el-radio>
+      <el-radio v-model="connectionOption.ssh.type" label="native">Native SSH</el-radio>
+    </section>
+
+    <div v-if="connectionOption.ssh.type == 'password'">
+      <section class="mb-2">
+        <label class="font-bold mr-5 inline-block w-28">Password</label>
+        <input class="w-64 field__input" placeholder="Password" required type="password" v-model="connectionOption.ssh.password" />
+      </section>
+    </div>
+    <div v-else>
+      <section class="mb-2">
+        <div class="inline-block mr-10">
+          <label class="font-bold mr-5 inline-block w-28">Private Key Path</label>
+          <input class="w-52 field__input" placeholder="Private Key Path" v-model="connectionOption.ssh.privateKeyPath" />
+          <button @click="choose('privateKey')" class=" w-12">Choose</button>
+        </div>
+        <div class="inline-block mr-10">
+          <label class="font-bold mr-5 inline-block w-28">Passphrase</label>
+          <input class="w-64 field__input" placeholder="Passphrase" type="passphrase" v-model="connectionOption.ssh.passphrase" />
+        </div>
+      </section>
+      <section class="mb-2" v-if="connectionOption.ssh.type == 'native'">
+        <div class="inline-block mr-10">
+          <label class="font-bold mr-5 inline-block w-28">Waiting Time</label>
+          <input class="w-64 field__input" placeholder="Waiting time for ssh command." v-model="connectionOption.ssh.watingTime" />
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["connectionOption"],
+};
+</script>
+
+<style>
+</style>

src/vue/connect/component/SSL.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <section class="flex items-center mb-2">
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-32">CA Certificate</label>
+        <input class="w-64 field__input" placeholder="SSL CA Certificate Path" v-model="connectionOption.caPath" />
+      </div>
+    </section>
+    <section class="flex items-center mb-2">
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-32">Client Cert</label>
+        <input class="w-64 field__input" placeholder="SSL Client Certificate Path" v-model="connectionOption.clientCertPath" />
+      </div>
+      <div class="inline-block mr-10">
+        <label class="font-bold mr-5 inline-block w-32">Client Key</label>
+        <input class="w-64 field__input" placeholder="SSL Client Key Path" v-model="connectionOption.clientKeyPath" />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["connectionOption"],
+};
+</script>
+
+<style>
+</style>