<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sa-Sso-Pro Client 端模式一 - 对接演示</title>
		<style type="text/css">
			body{/* background-color: #A7D2CA; */}
			*{margin: 0px; padding: 0px;}
			.login-box{max-width: 1000px; text-align: center; margin: 30px auto; padding: 1em;}
			.login-info, .un-login-info{line-height: 40px;}
			.logo-box img{width: 220px; height: 220px;}
			p{color: #666;}
			.green{color: green;}
			.red{color: red;}
			a{text-decoration: none; margin-right: 10px; line-height: 20px; display: inline-block; border-bottom: 1px solid #FFF;}
			a:hover{border-bottom: 1px solid blue;}
			h3{margin-top: 20px; margin-bottom: 0px; color: #000;}
			/* loading框样式 */
			.ajax-layer-load.layui-layer-dialog{min-width: 0px !important; background-color: rgba(0,0,0,0.85);}
			.ajax-layer-load.layui-layer-dialog .layui-layer-content{padding: 10px 20px 10px 40px; color: #FFF;}
			.ajax-layer-load.layui-layer-dialog .layui-layer-content .layui-layer-ico{width: 20px; height: 20px; background-size: 20px 20px; top: 12px; }
		</style>
	</head>
	<body>
		<div class="login-box">
			<div class="logo-box">
				<img src="https://sa-token.cc/logo.png" alt="logo">
			</div>
			<br>
			<h2>Sa-Sso-Pro Client 端模式一 - 对接演示</h2> <br>
			<p>当前系统：<span class="client-domain"></span></p> <br>
			<!-- ---------- 已登录视图 ---------- -->
			<div class="login-info" th:if="${isLogin}">
				<h3>账号状态</h3>
				<p>
					<b class="green">已登录</b>
					（
						<span>账号id=<t th:text="${user.id}"></t></span>，
						<span>昵称=<t th:text="${user.username}"></t></span>，
						<span>年龄=<t th:text="${user.age}"></t></span>，
						<span>登录次数=<t th:text="${user.loginCount}"></t></span>
					)
				</p>
				<h3>相关操作</h3>
				<p>
					<a href="/sso/logout?back=self">跳页面注销</a> 
					<a href="javascript:logout();">使用Ajax调用API注销</a> 
				</p>
			</div>
			<!-- ---------- 未登录视图 ---------- -->
			<div class="un-login-info" th:if="${!isLogin}">
				<h3>账号状态</h3>
				<p>
					<b class="red">未登录</b>
				</p>
				<h3>相关操作</h3>
				<p>
					<a th:href="|javascript:location.href='${authUrl}?mode=simple&redirect=' + encodeURIComponent(location.href);|">直接登录</a>
					<a href="info.html">访问页面触发登录</a>
					<a href="javascript:getCurrInfo();">使用Ajax调用API触发登录</a>
				</p>
			</div>
			<div style="height: 200px;"></div>
		</div>
		<script src="https://unpkg.zhimg.com/jquery@3.4.1/dist/jquery.min.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		<script>window.jQuery || alert('当前页面CDN服务商已宕机，请将所有js包更换为本地依赖')</script>
		<script type="text/javascript">
		
			// 显示当前系统域名 
			$('.client-domain').html(location.protocol + "//" + location.host);
		
			// 调用API触发登录 
			function getCurrInfo() {
				sa.ajax('/getCurrInfo', {}, function(res) {
					// 根据返回的状态码执行不同动作
					if(res.code == 200) {
						layer.alert(res.msg);
					} else if (res.code == 401){
						layer.confirm('该数据仅对登录用户开放，现在就去登录？', function() {
							location.href = '/sso/login?back=' + encodeURIComponent(location.href);
						});
					} else {
						layer.alert(res.msg);
					}
				})
			}
			
			// 调用API进行注销 
			function logout() {
				sa.ajax('/sso/logout', {}, function(res) {
					// 根据返回的状态码执行不同动作 
					if(res.code == 200) {
						layer.msg('注销成功');
						setTimeout(function() {
							location.reload(true);
						}, 800);
					} else {
						layer.alert(res.msg);
					}
				})
			}
			
		</script>
		<script type="text/javascript">
			var sa = {};

			// 打开loading
			sa.loading = function(msg) {
				layer.closeAll();	// 开始前先把所有弹窗关了
				return layer.msg(msg, {icon: 16, shade: 0.3, time: 1000 * 20, skin: 'ajax-layer-load' });
			};

			// 隐藏loading
			sa.hideLoading = function() {
				layer.closeAll();
			};
			
			// 封装一下Ajax
			sa.ajax = function(url, data, successFn) {
				sa.loading("正在努力加载...");
				setTimeout(function() {
					$.ajax({
						url: url,
						type: "post", 
						data: data,
						dataType: 'json',
						success: function(res){
							console.log('返回数据：', res);
							sa.hideLoading();
							successFn(res);
						},
						error: function(xhr, type, errorThrown){
							sa.hideLoading();
							if(xhr.status == 0){
								return layer.alert('无法连接到服务器，请检查网络');
							}
							return layer.alert("异常：" + JSON.stringify(xhr));
						}
					});
				}, 400);
			}
			
		</script>
	</body>
</html>
