Skip to content

M
mui
Commit 8a863287 authored by hbcui1984's avatar hbcui1984
Browse files
Options

更新login模板

parent 03f02d8f
Show whitespace changes
Inline Side-by-side
Showing with 200 additions and 85 deletions
examples/login/js/app.js
View file @ 8a863287
......@@ -23,14 +23,18 @@
return loginInfo.account == user.account && loginInfo.password == user.password;
});
if (authed) {
return owner.createState(loginInfo.account, callback);
} else {
return callback('用户名或密码错误');
}
};
owner.createState = function(name, callback) {
var state = owner.getState();
state.account = loginInfo.account;
state.account = name;
state.token = "token123456789";
owner.setState(state);
return callback();
} else {
return callback('用户名或密码错误');
}
};
/**
......@@ -70,12 +74,12 @@
owner.setState = function(state) {
state = state || {};
localStorage.setItem('$state', JSON.stringify(state));
var settings = owner.getSettings();
settings.gestures = '';
owner.setSettings(settings);
//var settings = owner.getSettings();
//settings.gestures = '';
//owner.setSettings(settings);
};
var checkEmail=function(email){
var checkEmail = function(email) {
email = email || '';
return (email.length > 3 && email.indexOf('@') > -1);
};
......
examples/login/js/mui.enterfocus.js 0 → 100644
View file @ 8a863287
(function($) {
$.enterfocus = function(selector, callback) {
var boxArray = [].slice.call(document.querySelectorAll(selector));
for (var index in boxArray) {
var box = boxArray[index];
box.addEventListener('keyup', function(event) {
if (event.keyCode == 13) {
var boxIndex = boxArray.indexOf(this);
if (boxIndex == boxArray.length - 1) {
if (callback) callback();
} else {
//console.log(boxIndex);
var nextBox = boxArray[++boxIndex];
nextBox.focus();
}
}
}, false);
}
};
}(window.mui = window.mui || {}));
\ No newline at end of file
examples/login/login.html
View file @ 8a863287
......@@ -44,17 +44,31 @@
color: #bbb;
padding: 0px 8px;
}
/*
#forgetPassword {
}
#reg {
.oauth-area {
position: absolute;
bottom: 30px;
left: 50%;
width: 80px;
margin-left: -40px;
background-color: #f5f5f5;
}*/
bottom: 20px;
left: 0px;
text-align: center;
width: 100%;
padding: 0px;
margin: 0px;
}
.oauth-area .oauth-btn {
display: inline-block;
width: 50px;
height: 50px;
background-size: 30px 30px;
background-position: center center;
background-repeat: no-repeat;
margin: 0px 20px;
/*-webkit-filter: grayscale(100%); */
border: solid 1px #ddd;
border-radius: 25px;
}
.oauth-area .oauth-btn:active {
border: solid 1px #aaa;
}
</style>
</head>
......@@ -64,7 +78,7 @@
<h1 class="mui-title">登录</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<form id='login-form' class="mui-input-group">
<div class="mui-input-row">
<label>账号</label>
<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
......@@ -89,20 +103,31 @@
<div class="link-area"><a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
</div>
</div>
<div class="mui-content-padded oauth-area">
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.enterfocus.js"></script>
<script src="js/app.js"></script>
<script>
(function($, doc) {
$.init();
$.init({
statusBarBackground: '#f7f7f7'
});
$.plusReady(function() {
plus.screen.lockOrientation("portrait-primary");
var settings = app.getSettings();
var state = app.getState();
//检查 "登录状态/锁屏状态" 开始
if (settings.autoLogin && state.token && settings.gestures) {
var mainPage = $.preload({
"id": 'main',
"url": 'main.html'
});
var toMain = function() {
$.fire(mainPage, 'show', null);
setTimeout(function() {
$.openWindow({
url: 'unlock.html',
id: 'unlock',
id: 'main',
show: {
aniShow: 'pop-in'
},
......@@ -110,10 +135,13 @@
autoShow: false
}
});
} else if (settings.autoLogin && state.token) {
}, 0);
};
//检查 "登录状态/锁屏状态" 开始
if (settings.autoLogin && state.token && settings.gestures) {
$.openWindow({
url: 'main.html',
id: 'main',
url: 'unlock.html',
id: 'unlock',
show: {
aniShow: 'pop-in'
},
......@@ -121,7 +149,52 @@
autoShow: false
}
});
} else if (settings.autoLogin && state.token) {
toMain();
} else {
//第三方登录
var auths = {};
var oauthArea = doc.querySelector('.oauth-area');
plus.oauth.getServices(function(services) {
for (var i in services) {
var service = services[i];
auths[service.id] = service;
var btn = document.createElement('div');
btn.setAttribute('class', 'oauth-btn');
btn.authId = service.id;
btn.style.backgroundImage = 'url("images/' + service.id + '.png")'
//alert(service.id);
//btn.innerText = service.description + "登录";
oauthArea.appendChild(btn);
}
$(oauthArea).on('tap', '.oauth-btn', function() {
var auth = auths[this.authId];
var waiting = plus.nativeUI.showWaiting();
auth.login(function() {
waiting.close();
plus.nativeUI.toast("登录认证成功");
//alert(JSON.stringify(auth.authResult));
auth.getUserInfo(function() {
plus.nativeUI.toast("获取用户信息成功：");
//alert(JSON.stringify(auth.userInfo));
var name = auth.userInfo.nickname || auth.userInfo.name;
app.createState(name, function() {
toMain();
});
}, function(e) {
plus.nativeUI.toast("获取用户信息失败：" + e.message);
});
}, function(e) {
waiting.close();
plus.nativeUI.toast("登录认证失败：" + e.message);
});
});
}, function(e) {
oauthArea.style.display = 'none';
plus.nativeUI.toast("获取登录认证失败：" + e.message);
});
}
// close splash
setTimeout(function() {
//关闭 splash
plus.navigator.closeSplashscreen();
......@@ -143,17 +216,11 @@
plus.nativeUI.toast(err);
return;
}
$.openWindow({
url: 'main.html',
id: 'main',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
toMain();
});
});
$.enterfocus('#login-form input', function() {
$.trigger(loginButton, 'tap');
});
autoLoginButton.classList[settings.autoLogin ? 'add' : 'remove']('mui-active')
autoLoginButton.addEventListener('toggle', function(event) {
......@@ -170,6 +237,9 @@
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
......@@ -182,17 +252,19 @@
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
});
}, false);
/*
//
window.addEventListener('resize', function() {
setTimeout(function() {
regButton.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
}, 0);
}, false);*/
oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
}, false);
//
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
......
examples/login/main.html
View file @ 8a863287
......@@ -46,51 +46,36 @@
<script>
(function($, doc) {
$.init();
$.plusReady(function() {
var settings = app.getSettings();
var state = app.getState();
var account = doc.getElementById('account');
//
window.addEventListener('show', function() {
var state = app.getState();
account.innerText = state.account;
//退出应用
/*
var exitButton = doc.getElementById('exit');
exitButton.addEventListener('tap', function(event) {
if (!settings.autoLogin) {
app.setState({});
}
plus.runtime.quit();
}, false);
$.plusReady(function() {
var settingPage = $.preload({
"id": 'setting',
"url": 'setting.html'
});
exitButton.style.display = mui.os.ios ? 'none' : 'block';
*/
//设置
var settingButton = doc.getElementById('setting');
//settingButton.style.display = settings.autoLogin ? 'block' : 'none';
settingButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'setting.html',
id: 'setting',
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
});
});
//注销
/*
var logoutButton = doc.querySelector('#logout');
logoutButton.addEventListener('tap', function(event) {
app.setState({});
$.openWindow({
url: 'login.html',
id: 'login',
show: {
aniShow: 'slide-in-left'
}
});
});
*/
//--
$.oldBack = mui.back;
var backButtonPress = 0;
$.back = function(event) {
......
examples/login/reg.html
View file @ 8a863287
......@@ -62,6 +62,9 @@
<div class="mui-content-padded">
<button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
</div>
<div class="mui-content-padded">
<p>注册真实可用，注册成功后的用户可用于登录，但是示例程序并未和服务端交互，用户相关数据仅存储于本地。</p>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
......
examples/login/setting.html
View file @ 8a863287
......@@ -225,7 +225,7 @@
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
启用状态
使用手势解锁
<div id="lockState" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
......@@ -351,6 +351,20 @@
});
//退出操作******************
document.getElementById('exit').addEventListener('tap', function() {
if(mui.os.ios){
app.setState({});
mui.openWindow({
url: 'login.html',
id: 'login',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
return;
}
var btnArray = [{
title: "注销当前账号"
}, {
......@@ -389,16 +403,17 @@
var settings = app.getSettings();
var lockStateButton = doc.getElementById("lockState");
var locker = doc.querySelector('.mui-locker');
lockStateButton.classList[settings.gestures ? 'add' : 'remove']('mui-active')
locker.style.display = settings.gestures ? 'block' : 'none';
lockStateButton.addEventListener('toggle', function(event) {
var isActive = event.detail.isActive;
locker.style.display = isActive ? 'block' : 'none';
if (!isActive) {
alert(0);
settings.gestures = '';
app.setSettings(settings);
}
}, false);
lockStateButton.classList[settings.gestures ? 'add' : 'remove']('mui-active')
locker.style.display = settings.gestures ? 'block' : 'none';
var record = [];
locker.addEventListener('done', function(event) {
var rs = event.detail;
......@@ -411,8 +426,9 @@
record.push(rs.points.join(''));
if (record.length >= 2) {
if (record[0] == record[1]) {
plus.nativeUI.toast('手势设定完成');
plus.nativeUI.toast('解锁手势设定成功，以后用户只需使用手势解锁而无需输入密码登录。');
settings.gestures = record[0];
settings.autoLogin = true;
app.setSettings(settings);
setTimeout(function() {
$.back();
......@@ -447,11 +463,16 @@
// console.log(e.detail.page.id + ' beforeShow');
});
view.addEventListener('pageShow', function(e) {
//进入手执设定界面时
if (e.detail.page.id == 'lock') {
var settings = app.getSettings();
if (!settings.autoLogin) {
/*if (!settings.autoLogin) {
plus.nativeUI.toast('当前没有启用 “自动登录”，需要在登录时启用 "自动登录"，设定的手势锁屏才会升效。');
}
}*/
var lockStateButton = document.getElementById("lockState");
var locker = document.querySelector('.mui-locker');
lockStateButton.classList[settings.gestures ? 'add' : 'remove']('mui-active')
locker.style.display = settings.gestures ? 'block' : 'none';
}
// console.log(e.detail.page.id + ' show');
});
......
examples/login/unlock.html
View file @ 8a863287
......@@ -32,7 +32,7 @@
<div class="mui-locker" data-locker-options='{"ringColor":"rgba(221,221,221,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}' data-locker-width='320' data-locker-height='320'>
</div>
</div>
<a id='forget'>我忘记了解锁图案</a>
<a id='forget'>忘记手势密码？</a>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.locker.js"></script>
......@@ -45,8 +45,9 @@
var settings = app.getSettings();
var forgetButton = doc.getElementById("forget");
var locker = doc.querySelector('.mui-locker');
forgetButton.addEventListener('tap', function(event) {
var clearStateAndToLogin = function() {
settings.gestures = '';
settings.autoLogin = false;
app.setSettings(settings);
var state = app.getState();
state.token = '';
......@@ -61,7 +62,11 @@
autoShow: false
}
});
};
forgetButton.addEventListener('tap', function(event) {
clearStateAndToLogin();
});
var tryNumber = 5;
locker.addEventListener('done', function(event) {
var rs = event.detail;
if (settings.gestures == rs.points.join('')) {
......@@ -77,8 +82,13 @@
});
rs.sender.clear();
} else {
plus.nativeUI.toast('解锁手势错误');
tryNumber--;
rs.sender.clear();
if (tryNumber > 0) {
plus.nativeUI.toast('解锁手势错误，还能尝试 ' + tryNumber + ' 次。');
} else {
clearStateAndToLogin();
}
}
}, false);
var backButtonPress = 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment