更新login模板

examples/login/js/app.js

@@ -23,16 +23,20 @@
 			return loginInfo.account == user.account && loginInfo.password == user.password;
 		});
 		if (authed) {
-			var state = owner.getState();
-			state.account = loginInfo.account;
-			state.token = "token123456789";
-			owner.setState(state);
-			return callback();
+			return owner.createState(loginInfo.account, callback);
 		} else {
 			return callback('用户名或密码错误');
 		}
 	};
 
+	owner.createState = function(name, callback) {
+		var state = owner.getState();
+		state.account = name;
+		state.token = "token123456789";
+		owner.setState(state);
+		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

+(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

@@ -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,15 +103,40 @@
 				<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();
+					var mainPage = $.preload({
+						"id": 'main',
+						"url": 'main.html'
+					});
+					var toMain = function() {
+						$.fire(mainPage, 'show', null);
+						setTimeout(function() {
+							$.openWindow({
+								id: 'main',
+								show: {
+									aniShow: 'pop-in'
+								},
+								waiting: {
+									autoShow: false
+								}
+							});
+						}, 0);
+					};
 					//检查 "登录状态/锁屏状态" 开始
 					if (settings.autoLogin && state.token && settings.gestures) {
 						$.openWindow({
@@ -111,17 +150,51 @@
 							}
 						});
 					} else if (settings.autoLogin && state.token) {
-						$.openWindow({
-							url: 'main.html',
-							id: 'main',
-							show: {
-								aniShow: 'pop-in'
-							},
-							waiting: {
-								autoShow: false
+						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,18 +216,12 @@
 								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) {
 						setTimeout(function() {
@@ -168,7 +235,10 @@
 							url: 'reg.html',
 							id: 'reg',
 							show: {
-									aniShow: 'pop-in'
+								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

@@ -46,51 +46,36 @@
 		<script>
 			(function($, doc) {
 				$.init();
-				$.plusReady(function() {
-					var settings = app.getSettings();
+				var settings = app.getSettings();
+				var account = doc.getElementById('account');
+				//
+				window.addEventListener('show', function() {
 					var state = app.getState();
-					var account = doc.getElementById('account');
 					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'
+								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

@@ -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

@@ -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

@@ -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 = '';
@@ -55,13 +56,17 @@
 							url: 'login.html',
 							id: 'login',
 							show: {
-									aniShow: 'pop-in'
+								aniShow: 'pop-in'
 							},
 							waiting: {
 								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;