From 4b850d6a6259dd5cb1b0ff66433d207b2b7432e5 Mon Sep 17 00:00:00 2001
From: yujiaxinwt <1157613664@qq.com>
Date: Mon, 26 Jun 2023 11:51:23 +0800
Subject: [PATCH] =?UTF-8?q?sdk=E6=96=B0=E5=A2=9Eip=E5=92=8Cport=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sdk/demo/demo.html    |  14 ++-
 sdk/enter.html        | 208 ++++++++++++++++++++++++++++++++++++++++++
 sdk/index.html        |  14 ++-
 sdk/webpack.config.js |   5 +
 sdk/webpack.dev.js    |   5 +
 5 files changed, 242 insertions(+), 4 deletions(-)
 create mode 100644 sdk/enter.html
diff --git a/sdk/demo/demo.html b/sdk/demo/demo.html
index e045896..7f076d6 100644
--- a/sdk/demo/demo.html
+++ b/sdk/demo/demo.html
@@ -138,6 +138,16 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     <script type="text/javascript"
             src="<%= htmlWebpackPlugin.files.chunks.CloudApp.entry %>"></script>
     <script type="text/javascript">
+      var cloudPhoneHost = sessionStorage.getItem('cloudPhoneHost');
+      if (cloudPhoneHost) {
+        var hostParams = cloudPhoneHost.split(':');
+        var cloudIp = hostParams[0];
+        var cloudPort = hostParams[1];
+      } else {
+        let localHref = window.location.href.replace('demo.html', 'enter.html');
+        window.location.href = localHref;
+      }
+
       var getConfig = {
         get basePath() {
           let path = window.location.origin;
@@ -158,8 +168,8 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
       };
       var commonLibPath = getConfig.libPath;
       var params = {
-        ip: 'xx.xx.xx.xx',
-        port: 'xx',
+        ip: cloudIp,
+        port: cloudPort,
         session_id: '32uuid',
         background_timeout: '60',
         available_playtime: '6000',
diff --git a/sdk/enter.html b/sdk/enter.html
new file mode 100644
index 0000000..119aead
--- /dev/null
+++ b/sdk/enter.html
@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
+    <title>云手机HOST</title>
+    <style>
+        .enter-page {
+        margin: 0 auto;
+        background-color: #fff;
+        border: 1px solid gray;
+      }
+      .pc-size {
+        width: 500px;
+        height: 300px;
+      }
+      .mobile-size {
+        width: 100%;
+        padding-bottom: 50px;
+        overflow: hidden;
+      }
+      .form-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .input-item {
+        margin-top: 30px;
+        width: 100%;
+        height: 35px;
+        text-align: center;
+        line-height: 35px;
+      }
+      .input-item-display {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .input-name {
+        display: inline-block;
+        width: 100px;
+        text-align: right;
+      }
+      .input-value {
+        line-height: 30px;
+        padding-left: 10px;
+        width: 50%;
+        border-radius: 5px;
+        background: #fff;
+        border: 1px solid #595959;
+      }
+      .input-value:focus {
+        border: 1px solid blue;
+        outline: none;
+      }
+      .enter-btn {
+        cursor: pointer;
+        margin-top: 20px;
+        width: 50%;
+        height: 35px;
+        background: #fff;
+        border: 1px solid #595959;
+        border-radius: 50px;
+      }
+      .phone-container {
+        display: none;
+      }
+      .error-msg {
+        display: none;
+        height: 25px;
+        width: 50%;
+        font-size: 12px;
+        color: red;
+        text-align: left;
+      }
+    </style>
+</head>
+<body>
+    <div id="enterPage" class="enter-page">
+      <form action="" class="form-content">
+        <div class="input-item input-item-display">
+          <input placeholder="请输入云手机ip" type="text" id="ipInput" name="ipInput" class="input-value">
+          <div class="error-msg" id="ipError">请输入正确的ip</div>
+        </div>
+        <div class="input-item input-item-display">
+          <input placeholder="请输入云手机port" type="text" id="portInput" name="portInput" class="input-value">
+          <div class="error-msg" id="portError">请输入正确的port</div>
+        </div>
+        <div class="input-item input-item-display">
+          <a id="trustHost" target="_blank" href="">信任目标机器</a>
+        </div>
+        <div class="input-item">
+          <button type="button" id="enterBtn" class="enter-btn" onclick="enterIndexPage()">进入</button>
+        </div>
+      </form>
+    </div>
+    <script type="text/javascript">
+      let ipExp = /([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(\.([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])){3}$/;
+      let ipErrorEle = document.getElementById('ipError');
+      let portErrorEle = document.getElementById('portError');
+      let trustAele = document.getElementById('trustHost');
+
+      trustAele.addEventListener('click', () => {
+        event.preventDefault();
+
+        const ipInputEle = document.getElementById('ipInput');
+        const portInputEle = document.getElementById('portInput');
+        const ipVal = ipInputEle.value;
+        const portVal = portInputEle.value;
+        const validateResult = validateInput(ipVal, portVal);
+        if (!validateResult) {
+          return;
+        }
+
+        window.open('https://' + [ipVal, portVal].join(':'));
+      });
+
+      function enterIndexPage() {
+        const ipInputEle = document.getElementById('ipInput');
+        const portInputEle = document.getElementById('portInput');
+        const ipVal = ipInputEle.value;
+        const portVal = portInputEle.value;
+        const validateResult = validateInput(ipVal, portVal);
+        if (!validateResult) {
+          return;
+        }
+
+        const hostStr = ipVal + ':' + portVal;
+        sessionStorage.setItem('cloudPhoneHost', hostStr);
+
+        let localHref = window.location.href + 'index';
+        if (window.location.href.indexOf('enter.html') > -1) {
+          localHref = window.location.href.replace('enter.html', 'index.html');
+          if (localHref === window.location.href) {
+              localHref = window.location.href.replace('enter.html', 'demo.html');
+            }
+        }
+
+        window.location.href = localHref;
+      }
+
+      function validateInput(ipVal, portVal) {
+        let isPortError = false;
+        let isIpError = false;
+
+        if (!ipExp.test(ipVal)) {
+          isIpError = true;
+          ipErrorEle.style.display = 'block';
+        }
+
+        if (!(/^[1-9]\d*$/.test(portVal) && 1 <= 1 * portVal && 1 * portVal <= 65535)){
+          isPortError = true;
+          portErrorEle.style.display = 'block';
+        }
+
+        if (isIpError || isPortError) {
+          return false;
+        }
+
+        return true;
+      }
+
+      window.onload = function () {
+        let enterBtn = document.getElementById('enterBtn');
+        let ipInputEle = document.getElementById('ipInput');
+        let portInputEle = document.getElementById('portInput');
+        let pageContent = document.getElementById('enterPage');
+
+        if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
+          pageContent.classList.add('mobile-size');
+        } else {
+          pageContent.classList.add('pc-size');
+        }
+
+        if (sessionStorage.getItem('cloudPhoneHost')) {
+          let localHref = window.location.href + 'index';
+          if (window.location.href.indexOf('enter.html') > -1) {
+            localHref = window.location.href.replace('enter.html', 'index.html');
+            if (localHref === window.location.href) {
+              localHref = window.location.href.replace('enter.html', 'demo.html');
+            }
+          }
+          window.location.href = localHref;
+        }
+
+        ipInputEle.addEventListener('blur', function () {
+          const ipValue = ipInputEle.value;
+          if (!ipExp.test(ipValue)) {
+            ipErrorEle.style.display = 'block';
+          } else {
+            ipErrorEle.style.display = 'none';
+          }
+        });
+
+        portInputEle.addEventListener('blur', function () {
+          const portVal = portInputEle.value;
+          if (!(/^[1-9]\d*$/.test(portVal) && 1 <= 1 * portVal && 1 * portVal <= 65535)){
+            portErrorEle.style.display = 'block';
+          } else {
+            portErrorEle.style.display = 'none';
+          }
+        });
+      }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/sdk/index.html b/sdk/index.html
index 189dbbe..2b361f7 100644
--- a/sdk/index.html
+++ b/sdk/index.html
@@ -160,6 +160,16 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     <script type="text/javascript"
             src="<%= htmlWebpackPlugin.files.chunks.CloudApp.entry %>"></script>
     <script type="text/javascript">
+      var cloudPhoneHost = sessionStorage.getItem('cloudPhoneHost');
+      if (cloudPhoneHost) {
+        var hostParams = cloudPhoneHost.split(':');
+        var cloudIp = hostParams[0];
+        var cloudPort = hostParams[1];
+      } else {
+        let localHref = window.location.href.replace('index.html', 'enter.html');
+        window.location.href = localHref;
+      }
+
       var parseSearch = function () {
         var search = location.search.substr(1);
         var kvs = search.split("&");
@@ -173,8 +183,8 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
       var params = parseSearch();
       var hosts = {
         anb139_32: {
-          ip: 'xx.xx.xx.xx',
-          port: 'xx'
+          ip: cloudIp,
+          port: cloudPort,
         },
       }
       var config = Object.assign({}, hosts.anb139_32, params);
diff --git a/sdk/webpack.config.js b/sdk/webpack.config.js
index 028c23f..44cdecc 100644
--- a/sdk/webpack.config.js
+++ b/sdk/webpack.config.js
@@ -107,6 +107,11 @@ module.exports = {
             filename: path.join(__dirname, '/dist/demo.html'),
             inject: false
         }),
+        new HtmlWebpackPlugin({
+            template: 'enter.html',
+            filename: path.join(__dirname, '/dist/enter.html'),
+            inject: false
+        }),
         new webpack.BannerPlugin(copyright),
         new CopyWebpackPlugin([{
             from: 'demo/demo.md',
diff --git a/sdk/webpack.dev.js b/sdk/webpack.dev.js
index fcb4576..3878cc1 100644
--- a/sdk/webpack.dev.js
+++ b/sdk/webpack.dev.js
@@ -68,6 +68,11 @@ module.exports = {
             filename: path.join(__dirname, '/dist/index.html'),
             inject: false
         }),
+        new HtmlWebpackPlugin({
+            template: 'enter.html',
+            filename: path.join(__dirname, '/dist/enter.html'),
+            inject: false
+        }),
         new HtmlWebpackPlugin({
             template: 'demo/demo.html',
             filename: path.join(__dirname, '/dist/demo.html'),
-- 
Gitee

