<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
<link rel="icon" th:href="@{/asserts/img/favicon.ico}">
<link rel="stylesheet" th:href="@{/asserts/css/style.css}">
</head>
<body>
<div class="cotn_principal">
<div class="cont_centrar">
<div class="cont_login">
<div class="cont_info_log_sign_up">
<div class="col_md_login">
<div class="cont_ba_opcitiy">
<h2>LOGIN</h2>
<span th:if="${session.info == '0'}" style="color:red;font-weight: bolder">请先登录!</span>
<button class="btn_login" onClick="cambiar_login()">登录</button>
</div>
</div>
<div class="col_md_sign_up">
<div class="cont_ba_opcitiy">
<h2>SIGN UP</h2>
<button class="btn_sign_up" onClick="cambiar_sign_up()">注册</button>
</div>
</div>
</div>
<div class="cont_back_info">
<div class="cont_img_back_grey"><img th:src="@{/asserts/img/po.jpg}" alt=""/></div>
</div>
<div class="cont_forms">
<div class="cont_img_back_"><img th:src="@{/asserts/img/po.jpg}" alt=""/></div>
<div class="cont_form_login"><a href="#" onClick="ocultar_login_sign_up()"><i class="material-icons"></i></a>
<h2>LOGIN</h2>
<span id="loginHint" style="color:red;font-weight: bolder">[[${msg}]]</span>
<input type="text" name="username" id="ln" placeholder="Username" required/>
<input type="password" name="password" id="lp" placeholder="Password"/>
<button class="btn_login" id="loginBtn" type="button">登录</button>
</div>
<div class="cont_form_sign_up"><a href="#" onClick="ocultar_login_sign_up()"><i class="material-icons"></i></a>
<h2>SIGN UP</h2>
<span id="userHint" style="color:red;font-weight: bolder"></span>
<form id="regForm" th:action="@{/user/register}" th:method="post">
<input type="text" id="rn" placeholder="Username" name="username" required/>
<input type="password" id="rp1" placeholder="Password" name="password" required/>
<input type="password" id="rp2" placeholder="Confirm Password" required/>
<button class="btn_sign_up" id="regBtn" type="submit">注册</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script th:src="@{/asserts/js/index.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script th:src="@{/asserts/js/layer/layer.js}"></script>
<script>
$(function () {
$("#loginBtn").click(function () {
var ln = $("#ln").val();
var lp = $("#lp").val();
$.post("/crm/user/login", {username: ln, password: lp}, function (data) {
if (data == "1") {
$("#loginHint").html("用户名或者密码有误!");
}
if (data == "0") {
window.location = "customer/list";
}
});
});
$("#regForm").submit(function () {
layer.msg("注册成功!", {
time: 2000
});
});
//验证用户名是否被注册
$("#rn").blur(function () {
//AJAX请求
var username = $(this).val();
$.get("/crm/user/checkUser?username=" + username, function (data) {
if (data == "1") {
$("#rn").css("border", "1px solid red");
$("#userHint").text("该用户已经被注册!");
$("#regBtn").attr("disabled", true);
$("#regBtn").css("background-color", "#ccc");
$("#rn").val("").focus();
} else {
$("#rn").css("border", "none");
$("#userHint").text("");
$("#regBtn").attr("disabled", false);
$("#regBtn").css("background-color", "#f44336");
}
});
});
//验证两次密码输入必须一致
$("#rp1").blur(function () {
var rp2 = $("#rp2").val();
if (rp2 != '') {
var rp1 = $("#rp1").val();
var rp2 = $("#rp2").val();
if (rp1 != rp2) {
//显示提示
$("#userHint").text("两次密码输入不一致!");
//禁用按钮
$("#regBtn").attr("disabled", true);
//修改按钮样式
$("#regBtn").css("background-color", "#ccc");
$("#rp1").css("border-color", "red");
$("#rp2").css("border-color", "red");
$("#rp1").val("").focus();
$("#rp2").val("");
} else {
$("#userHint").text("");
$("#regBtn").attr("disabled", false);
$("#regBtn").css("background-color", "#f44336");
}
}
});
$("#rp2").blur(function () {
var rp1 = $("#rp1").val();
var rp2 = $("#rp2").val();
if (rp1 != rp2) {
//显示提示
$("#userHint").text("两次密码输入不一致!");
//禁用按钮
$("#regBtn").attr("disabled", true);
//修改按钮样式
$("#regBtn").css("background-color", "#ccc");
$("#rp1").css("border-color", "red");
$("#rp2").css("border-color", "red");
$("#rp1").val("").focus();
$("#rp2").val("");
} else {
$("#userHint").text("");
$("#regBtn").attr("disabled", false);
$("#regBtn").css("background-color", "#f44336");
}
});
});
</script>
</body>
</html>