mirror of
https://github.com/JamesonHuang/OpenWrt_Luci_Lua.git
synced 2024-11-28 07:43:00 +00:00
229 lines
6.3 KiB
HTML
229 lines
6.3 KiB
HTML
|
<%
|
||
|
|
--[[
|
||
|
|
Info PPTP/L2TP
|
||
|
|
]]--
|
||
|
|
|
||
|
|
local ver = require("xiaoqiang.XQVersion").webVersion
|
||
|
|
local request_uri = luci.http.getenv("REQUEST_URI")
|
||
|
|
%>
|
||
|
|
<%include('web/inc/head')%>
|
||
|
|
<title>小米路由器</title>
|
||
|
|
<link rel="stylesheet" href="<%=resource%>/web/css/page.set.default.css?v=<%=ver%>"/>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- upgread -->
|
||
|
|
<div class="mod-setting-panel">
|
||
|
|
<div class="hd">
|
||
|
|
<h3>PPTP/L2TP</h3>
|
||
|
|
</div>
|
||
|
|
<div class="bd">
|
||
|
|
<div class="mod-set-vpn">
|
||
|
|
<form action="<%=luci.dispatcher.build_url("api", "xqsystem", "set_vpn")%>" class="form form-horizontal" method="post" name="vpn" id="vpn">
|
||
|
|
<div class="item" id="oldpwdbox">
|
||
|
|
<label for="pwd" class="k">协议类型：</label>
|
||
|
|
<span class="v">
|
||
|
|
<select id="vpntype" name="proto" class="beautify vpntype" style="width:185px;">
|
||
|
|
<option value="pptp" selected="selected">PPTP</option>
|
||
|
|
<option value="l2tp" selected="selected">L2TP</option>
|
||
|
|
</select>
|
||
|
|
</span>
|
||
|
|
<em class="t"></em>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<label for="pwd" class="k">服务器地址：</label>
|
||
|
|
<span class="v"><input type="text" name="server" id="server" class="text input-large"></span>
|
||
|
|
<em class="t"></em>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<label for="pwd" class="k">用户名：</label>
|
||
|
|
<span class="v"><input type="text" name="username" id="username" class="text input-large"></span>
|
||
|
|
<em class="t"></em>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<label for="pwd" class="k">密码：</label>
|
||
|
|
<span class="v"><input type="text" name="password" id="password" class="text input-large"></span>
|
||
|
|
<em class="t"></em>
|
||
|
|
</div>
|
||
|
|
<div class="item item-control">
|
||
|
|
<label class="js-checkbox"><span class="input-checkbox"><input name="autostart" id="autostart" type="checkbox"></span> 开机自动连接</label>
|
||
|
|
</div>
|
||
|
|
<div class="item item-control">
|
||
|
|
<button type="submit" id="btnSave" class="btn btn-primary btn-large"><span>保存</span></button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div class="vpn-status">
|
||
|
|
<p class="status">当前状态：<span class="val">查询中...</span> <span class="uptime"></span></p>
|
||
|
|
<p class="btns"><button type="button" id="vpnonoff" class="btn btn-primary" style="display:none;"><span>连接</span></button></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<%include('web/inc/g.js.base')%>
|
||
|
|
<script>
|
||
|
|
var modelVpn = (function(){
|
||
|
|
var timer = null;
|
||
|
|
function vpnInfo(){
|
||
|
|
$.getJSON('<%=luci.dispatcher.build_url("api", "xqsystem", "vpn")%>', {}, function(rsp){
|
||
|
|
if (rsp.code == 0) {
|
||
|
|
if (rsp.proto ==='') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var vpntype = document.getElementById('vpntype');
|
||
|
|
$(vpntype).val(rsp.proto);
|
||
|
|
var sltIdx = vpntype.selectedIndex;
|
||
|
|
$('#vpntype').next('.dummy').val(vpntype.options[sltIdx].text);
|
||
|
|
|
||
|
|
$('#server').val(rsp.server);
|
||
|
|
$('#username').val(rsp.username);
|
||
|
|
$('#password').val(rsp.password);
|
||
|
|
if( rsp.auto === '1' ){
|
||
|
|
$( '#autostart' ).prop( 'checked', true );
|
||
|
|
$( '#autostart' ).parents( '.input-checkbox' ).addClass( 'input-checkbox-checked' );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function vpnStatus(){
|
||
|
|
$.getJSON('<%=luci.dispatcher.build_url("api", "xqsystem", "vpn_status")%>', {}, function(rsp){
|
||
|
|
if (rsp.code == 0) {
|
||
|
|
var status = rsp.status,
|
||
|
|
uptime = '',
|
||
|
|
statusCode = 2,
|
||
|
|
btnText = 'loading...',
|
||
|
|
statusText;
|
||
|
|
// 0 connected 1 connecting 2 failed 3 close
|
||
|
|
switch(status){
|
||
|
|
case 0:
|
||
|
|
statusText = '已连接';
|
||
|
|
statusCode = 0;
|
||
|
|
btnText = '断开';
|
||
|
|
uptime = secondToDate(rsp.uptime);
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
statusText = '正在拨号...';
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
statusText = '连接失败';
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
statusText = '已断开';
|
||
|
|
statusCode = 1;
|
||
|
|
btnText = '连接';
|
||
|
|
break;
|
||
|
|
case 4:
|
||
|
|
statusText = '未启用';
|
||
|
|
statusCode = 1;
|
||
|
|
btnText = '连接';
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
statusText = '连接异常';
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (rsp.errcode) {
|
||
|
|
statusCode = 1;
|
||
|
|
btnText = '连接';
|
||
|
|
statusText = rsp.errmsg;
|
||
|
|
uptime = '';
|
||
|
|
};
|
||
|
|
if(statusCode == 2) {
|
||
|
|
$('#vpnonoff').prop('disabled', true);
|
||
|
|
} else {
|
||
|
|
$('#vpnonoff').prop('disabled', false);
|
||
|
|
}
|
||
|
|
$('.vpn-status .val').html(statusText);
|
||
|
|
$('.vpn-status .uptime').html(uptime);
|
||
|
|
$('#vpnonoff').attr('data-conn', statusCode);
|
||
|
|
$('#vpnonoff span').html(btnText);
|
||
|
|
$('#vpnonoff').show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
function listenStatus(){
|
||
|
|
vpnStatus();
|
||
|
|
timer = window.setInterval(function(){
|
||
|
|
vpnStatus();
|
||
|
|
},5000);
|
||
|
|
};
|
||
|
|
function stopListenStatus(){
|
||
|
|
window.clearInterval(timer);
|
||
|
|
}
|
||
|
|
function vpnSwitch(){
|
||
|
|
var vpnonoff = $('#vpnonoff');
|
||
|
|
vpnonoff.on('click', function(e){
|
||
|
|
e.preventDefault();
|
||
|
|
vpnonoff.prop('disabled', true);
|
||
|
|
$('.vpn-status .uptime').html('');
|
||
|
|
var conn = $(this).attr('data-conn');
|
||
|
|
$('.vpn-status .val').html(conn === '1' ? '拨号中...' : '断开中...');
|
||
|
|
stopListenStatus();
|
||
|
|
$.getJSON('<%=luci.dispatcher.build_url("api", "xqsystem", "vpn_switch")%>', {'conn': conn}, function(rsp){
|
||
|
|
if (rsp.code == 0) {
|
||
|
|
listenStatus();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function vpnset(){
|
||
|
|
$('#vpn').on('submit', function(e){
|
||
|
|
e.preventDefault();
|
||
|
|
var url = this.action,
|
||
|
|
method = this.method,
|
||
|
|
param = $(this).serialize(),
|
||
|
|
formName = this.name,
|
||
|
|
auto = $( '#autostart' ).prop( 'checked' ) ? 1 : 0,
|
||
|
|
validator = FormValidator.checkAll(formName, [{
|
||
|
|
name: 'server',
|
||
|
|
display :'服务器地址',
|
||
|
|
rules: 'required',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'username',
|
||
|
|
display :'用户名',
|
||
|
|
rules: 'required',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'password',
|
||
|
|
display :'密码',
|
||
|
|
rules: 'required',
|
||
|
|
}]);
|
||
|
|
if (validator) {
|
||
|
|
$('#btnSave').prop('disabled', true).find('span').text('保存中...');
|
||
|
|
param = param + '&auto=' + auto;
|
||
|
|
$.ajax({
|
||
|
|
url: url,
|
||
|
|
type: method,
|
||
|
|
data: param,
|
||
|
|
dataType: 'json',
|
||
|
|
success: function(rsp){
|
||
|
|
var msg;
|
||
|
|
if (rsp.code == 0) {
|
||
|
|
msg = '设置成功。';
|
||
|
|
}else{
|
||
|
|
msg = rsp.msg;
|
||
|
|
}
|
||
|
|
$.lightalert().setContent(msg).show();
|
||
|
|
$('#btnSave').prop('disabled', false).find('span').text('保存');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
init : function(){
|
||
|
|
vpnInfo();
|
||
|
|
vpnset();
|
||
|
|
vpnSwitch();
|
||
|
|
listenStatus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}());
|
||
|
|
$(function(){
|
||
|
|
modelVpn.init();
|
||
|
|
});
|
||
|
|
</script>
|