lanproxy/proxy-server/webpages/lanproxy-config/html/client/add.html

<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title site-demo-title">
        <li class="layui-this add-client-title"></li>
    </ul>
    <div class="main-content">
      <div class="layui-form-item">
	    <label class="layui-form-label i18n-client-name"></label>
	    <div class="layui-input-inline">
	      <input type="text" name="name" autocomplete="off" placeholder="" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
        <label class="layui-form-label i18n-client-key"></label>
        <div class="layui-input-inline">
          <input type="text" name="clientKey" autocomplete="off" placeholder="" class="layui-input">
        </div>
        <div class="layui-form-mid"><a class="layui-btn layui-btn-mini random-key random"></a></div>
      </div>
       <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn add"></button>
	    </div>
	  </div>
    </div>
</div>
<script>
$(".add-client-title").html($.i18n.prop('client.add'));
$(".i18n-client-name").html($.i18n.prop('client.name'));
$(".i18n-client-key").html($.i18n.prop('client.key'));
$("input[name='name']").attr("placeholder", $.i18n.prop('client.name.placeholder'));
$("input[name='clientKey']").attr("placeholder", $.i18n.prop('client.key.placeholder'));
$(".random").html($.i18n.prop('client.randomkey'));
$(".add").html($.i18n.prop('public.submit'));
$(".random").click(function(){
	$("input[name='clientKey']").val(uuid());
});

$(".add").click(function(){
    var name = $("input[name='name']").val();
    if(name == ""){
    	layer.alert($.i18n.prop('client.notice.inputname'), {
            title: $.i18n.prop('public.tips')
        });
    	return;
    }
    var clientKey = $("input[name='clientKey']").val();
    if(clientKey == ""){
        layer.alert($.i18n.prop('client.notice.inputkey'), {
            title: $.i18n.prop('public.tips')
        });
        return;
    }
    clientList.push({
    	name:name,
    	clientKey:clientKey,
    	proxyMappings:[]
    });

    api_invoke("/config/update", clientList, function(data) {
        if (data.code == 20000) {
            layer.alert($.i18n.prop('client.notice.addsuccess'), {title: $.i18n.prop('public.tips')}, function(index){
                layer.close(index);
                location.reload();
            });
        }
    });
});

$(".back").click(function(){
	load_page("html/client/list.html");
});

function uuid() {
	var s = [];
	var hexDigits = "0123456789abcdef";
	for (var i = 0; i < 36; i++) {
	  s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
	}
	s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
	s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
	s[8] = s[13] = s[18] = s[23] = "";
	
	var uuid = s.join("");
	return uuid;
}
</script>