feat(ui): More convenient access device web

Signed-off-by: Jianhui Zhao <zhaojh329@gmail.com>

ui/src/components/RttyWeb.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-dialog v-model="modal" :title="$t('Access your devices\'s Web')" width="300">
+    <el-form ref="form" :label-width="80" label-position="left" :model="formData" :rules="ruleValidate">
+      <el-form-item :label="$t('Proto')" prop="proto">
+        <el-radio-group v-model="formData.proto">
+          <el-radio value="http" size="large">HTTP</el-radio>
+          <el-radio value="https" size="large">HTTPS</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item :label="$t('ipaddr')" prop="ipaddr">
+        <el-input v-model="formData.ipaddr" placeholder="127.0.0.1"/>
+      </el-form-item>
+      <el-form-item :label="$t('port')" prop="port">
+        <el-input v-model.number="formData.port" placeholder="80"/>
+      </el-form-item>
+      <el-form-item :label="$t('path')" prop="path">
+        <el-input v-model="formData.path" placeholder="/"/>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="modal = false">{{ $t('Cancel') }}</el-button>
+        <el-button type="primary" @click="open">{{ $t('OK') }}</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'RttyWeb',
+  data() {
+    return {
+      modal: false,
+      formData: {
+        proto: 'http',
+        ipaddr: '',
+        port: null,
+        path: ''
+      },
+      ruleValidate: {
+        ipaddr: [{validator: (rule, value, callback) => {
+          if (!value) {
+            callback()
+            return
+          }
+
+          if (!this.isValidIP(value)) {
+            callback(new Error(this.$t('Invalid IP address')))
+          }
+
+          callback()
+        }}],
+        port: [{validator: (rule, value, callback) => {
+          if (!value) {
+            callback()
+            return
+          }
+
+          if (!Number.isInteger(value) || value < 1 || value > 65536) {
+            callback(new Error(this.$t('Invalid port')))
+          }
+
+          callback()
+        }}],
+        path: [{validator: (rule, value, callback) => {
+          if (!value) {
+            callback()
+            return
+          }
+
+          if (!value.startsWith('/')) {
+            callback(new Error(this.$t('Must start with /')))
+          }
+
+          callback()
+        }}]
+      },
+      devid: '',
+      devProto: null
+    }
+  },
+  methods: {
+    show(dev) {
+      this.devid = dev.id
+      this.devProto = dev.proto
+      this.formData.proto = 'http'
+      this.formData.ipaddr = ''
+      this.formData.port = null
+      this.formData.path = ''
+      this.modal = true
+    },
+    isValidIP(addr) {
+      const ipv4Pattern = '(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)'
+      return new RegExp(ipv4Pattern).test(addr)
+    },
+    open() {
+      this.$refs.form.validate(valid => {
+        if (!valid)
+          return
+
+        if (this.devProto < 4 && this.formData.proto === 'https') {
+          this.$message.error(this.$t('Your device\'s rtty does not support https proxy, please upgrade it.'))
+          return
+        }
+
+        this.modal = false
+
+        setTimeout(() => {
+          const proto = this.formData.proto
+          let ipaddr = this.formData.ipaddr
+          let port = this.formData.port
+          let path = this.formData.path
+
+          if (!ipaddr)
+            ipaddr = '127.0.0.1'
+
+          if (!port)
+            port = proto === 'https' ? 443 : 80
+
+          if (!path)
+            path = '/'
+
+          const addr = encodeURIComponent(`${ipaddr}:${port}${path}`)
+          window.open(`/web/${this.devid}/${proto}/${addr}`)
+        }, 100)
+      })
+    }
+  }
+}
+</script>

ui/src/i18n/en.json

@@ -51,11 +51,18 @@
   "Please execute command \"rtty -R\" or \"rtty -S\" in current terminal!": "Please execute command \"rtty -R\" or \"rtty -S\" in current terminal!",
   "Access your device's Shell": "Access your device's Shell",
   "Access your devices's Web": "Access your devices's Web",
-  "Please enter the address you want to access": "Please enter the address you want to access:",
+  "Proto": "Proto",
+  "ipaddr": "IP address",
+  "port": "Port",
+  "path": "Path",
+  "Please input ipaddr": "Please input ipaddr",
+  "Please input port": "Please input port",
+  "Please input path": "Please input path",
   "The file you will upload is too large(> 4294967295 Byte)": "The file you will upload is too large(> 4294967295 Byte)",
-  "Invalid address": "Invalid address",
+  "Invalid IP address": "Invalid IP address",
+  "Invalid port": "Invalid port",
+  "Must start with /": "Must start with /",
   "Already copied to clipboard": "Already copied to clipboard",
   "Please use shortcut \"Shift+Insert\"": "Please use shortcut \"Shift+Insert\"",
-  "Your device's rtty does not support https proxy, please upgrade it.": "Your device's rtty does not support https proxy, please upgrade it.",
-  "Invalid Address": "Invalid Address"
+  "Your device's rtty does not support https proxy, please upgrade it.": "Your device's rtty does not support https proxy, please upgrade it."
 }

ui/src/i18n/zh-CN.json

@@ -52,11 +52,18 @@
   "Please execute command \"rtty -R\" or \"rtty -S\" in current terminal!": "请在当前终端中执行命令 \"rtty -R\" 或者 \"rtty -S\"",
   "Access your device's Shell": "访问您的设备的 Shell",
   "Access your devices's Web": "访问您的设备的 Web",
-  "Please enter the address you want to access": "请输入您要访问的地址:",
+  "Proto": "协议",
+  "ipaddr": "IP 地址",
+  "port": "端口",
+  "path": "路径",
+  "Please input ipaddr": "请输入 IP 地址",
+  "Please input port": "请输入端口",
+  "Please input path": "请输入路径",
   "The file you will upload is too large(> 4294967295 Byte)": "您要上传的文件太大了(> 4294967295 Byte)",
-  "Invalid address": "无效的地址",
+  "Invalid IP address": "无效的 IP 地址",
+  "Invalid port": "无效的端口",
+  "Must start with /": "必须以 / 开头",
   "Already copied to clipboard": "已复制到剪切板",
   "Please use shortcut \"Shift+Insert\"": "请使用快捷键 \"Shift+Insert\"",
-  "Your device's rtty does not support https proxy, please upgrade it.": "你的设备的 rtty 不支持 https 代理，请升级",
-  "Invalid Address": "无效的地址"
+  "Your device's rtty does not support https proxy, please upgrade it.": "你的设备的 rtty 不支持 https 代理，请升级"
 }

ui/src/views/Home.vue

@@ -41,6 +41,7 @@
     </el-table>
     <el-pagination background layout="prev, pager, next, total,sizes" :total="filteredDevices.length" @change="handlePageChange"/>
     <RttyCmd ref="rttyCmd" :selection="selection"/>
+    <RttyWeb ref="rttyWeb"/>
   </div>
 </template>
 
@@ -48,13 +49,15 @@
 import { InternetExplorer as IEIcon } from '@vicons/fa'
 import { Terminal as TerminalIcon } from '@vicons/ionicons5'
 import RttyCmd from '../components/RttyCmd.vue'
+import RttyWeb from '../components/RttyWeb.vue'
 
 export default {
   name: 'Home',
   components: {
     IEIcon,
     TerminalIcon,
-    RttyCmd
+    RttyCmd,
+    RttyWeb
   },
   data() {
     return {
@@ -138,57 +141,8 @@ export default {
     connectDevice(devid) {
       window.open('/rtty/' + devid)
     },
-    isValidURL(url) {
-      const ipv4Pattern = '(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)'
-      const urlPattern = new RegExp(`^https?:\\/\\/${ipv4Pattern}(?::\\d{1,5})?(?:\\/[^\\s]*)?$`)
-      return urlPattern.test(url)
-    },
-    parseURL(url) {
-      const result = {
-        proto: 'http',
-        ip: '',
-        port: '80',
-        path: '/'
-      }
-
-      if (url.startsWith('https://')) {
-        result.proto = 'https'
-        url = url.substring(8)
-        result.port = '443'
-      } else if (url.startsWith('http://')) {
-        url = url.substring(7)
-      }
-
-      const [address, ...pathParts] = url.split('/')
-
-      result.path = pathParts.length > 0 ? '/' + pathParts.join('/') : '/'
-
-      const [ip, port] = address.split(':')
-      result.ip = ip
-      if (port) {
-        result.port = port
-      }
-
-      return result
-    },
     connectDeviceWeb(dev) {
-      this.$prompt(this.$t('Please enter the address you want to access'), '', {
-        confirmButtonText: this.$t('OK'),
-        cancelButtonText: this.$t('Cancel'),
-        inputValue: 'http://127.0.0.1',
-        inputValidator: this.isValidURL,
-        inputErrorMessage: this.$t('Invalid Address')
-      }).then(({ value }) => {
-        const url = this.parseURL(value)
-
-        if (dev.proto < 4 && url.proto === 'https') {
-          this.$message.error(this.$t('Your device\'s rtty does not support https proxy, please upgrade it.'))
-          return
-        }
-
-        const addr = encodeURIComponent(`${url.ip}:${url.port}${url.path}`)
-        window.open(`/web/${dev.id}/${url.proto}/${addr}`)
-      })
+      this.$refs.rttyWeb.show(dev)
     },
     showCmdForm() {
       this.$refs.rttyCmd.showCmdForm()