Adição dos artefatos para tela de login.

Luciano Borges
1 parent 595dd074
Showing 5 changed files with 137 additions and 1 deletions Show diff stats
archetype/html-rest/src/main/resources/archetype-resources/src/main/webapp/css/bookmark.css
archetype/html-rest/src/main/resources/archetype-resources/src/main/webapp/index.html
archetype/html-rest/src/main/resources/archetype-resources/src/main/webapp/js/controller/login.js
archetype/html-rest/src/main/resources/archetype-resources/src/main/webapp/js/proxy/auth.js
archetype/html-rest/src/main/resources/archetype-resources/src/main/webapp/login.html
 body {
 	padding-top: 20px;
 	padding-bottom: 20px;
+	margin-top: 60px;
+}
+
+input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
 }
 \ No newline at end of file
 <html>
 <head>
-<meta http-equiv="Refresh" content="0; URL=bookmark-list.html">
+<meta http-equiv="Refresh" content="0; URL=login.html">
 </head>
 </html>
 \ No newline at end of file
@@ -0,0 +1,52 @@
+$(function() {
+
+	$("#username").focus();
+
+	$("form").submit(function(event) {
+		event.preventDefault();
+		$("[id$='-message']").hide();
+		var form = {
+			'username' : $("#username").val().trim(),
+			'password' : $("#password").val().trim()
+		};
+
+		AuthProxy.login(form, loginOk, loginFail);
+	});
+
+});
+
+// Funções de Callback
+
+function loginOk(data) {
+	location.href = "pendencies.html";
+}
+
+function loginFail(request) {
+
+	switch (request.status) {
+		case 401:
+			$("#global-message").html("Usuário ou senha inválidos.").show();
+			break;
+		case 412:
+			$($("form input").get().reverse()).each(function() {
+				var id = $(this).attr('id');
+				var message = null;
+
+				$.each(request.responseJSON, function(index, value) {
+					if (id == value.property) {
+						message = value.message;
+						return;
+					}
+				});
+
+				if (message) {
+					$("#" + id + "-message").html(message).show();
+					$(this).focus();
+				} else {
+					$("#" + id + "-message").hide();
+
+				}
+			});
+			break;
+	}
+}
@@ -0,0 +1,32 @@
+var AuthProxy = {};
+
+AuthProxy.url = "api/auth";
+
+AuthProxy.login = function($credentials, $success, $error) {
+	$.ajax({
+		url : this.url,
+		type : "POST",
+		data : JSON.stringify($credentials),
+		contentType : "application/json",
+		success : $success,
+		error : $error
+	});
+};
+
+AuthProxy.logout = function($success, $error) {
+	$.ajax({
+		url : this.url,
+		type : "DELETE",
+		success : $success,
+		error : $error
+	});
+};
+
+AuthProxy.getUser = function($success, $error) {
+	$.ajax({
+		url : this.url,
+		type : "GET",
+		success : $success,
+		error : $error
+	});
+};
 \ No newline at end of file
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head> 
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Notifica | Login</title>
+	<link href="css/bootstrap.min.css" rel="stylesheet">
+	<link href="css/bookmark.css" rel="stylesheet">
+</head>
+<body>
+	<div class="container">
+		<form id="form-login"  role="form">
+			<div class="col-md-4 col-md-offset-4">
+				<div class="form-group">
+					<h1>Bookmark | Login</h1>
+				</div>
+			</div>
+			<div class="col-md-4 col-md-offset-4">
+				<div class="form-group">
+					<label for="username">CPF</label>
+					<input id="username" type="number" class="form-control input-lg" />
+					<div id="username-message" class="label label-danger" hidden="true"></div>
+				</div>
+			</div>
+			<div class="col-md-4 col-md-offset-4">
+				<div class="form-group">
+					<label for="password">Senha</label>
+					<input id="password" type="password" class="form-control input-lg" />
+					<div id="password-message" class="label label-danger" hidden="true"></div>
+				</div>
+			</div>
+			<div class="col-md-4 col-md-offset-4">
+				<div class="form-group">
+					<div id="global-message" class="alert alert-danger" hidden="true"></div>
+					<button id="login" class="btn btn-lg btn-success " type="submit">Entrar</button>
+				</div>
+			</div>
+		</form>
+	</div>
+	<script type="text/javascript" src="js/lib/jquery-2.1.0.min.js"></script>
+	<script type="text/javascript" src="js/lib/bootstrap.min.js"></script>
+	<script type="text/javascript" src="js/controller/login.js"></script>
+	<script type="text/javascript" src="js/proxy/auth.js"></script>
+</body>
+</html>
 \ No newline at end of file
1	body {	1	body {
2	padding-top: 20px;	2	padding-top: 20px;
3	padding-bottom: 20px;	3	padding-bottom: 20px;
		4	+ margin-top: 60px;
		5	+}
		6	+
		7	+input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
		8	+ -webkit-appearance: none;
		9	+ margin: 0;
4	}	10	}
5	\ No newline at end of file	11	\ No newline at end of file
1	<html>	1	<html>
2	<head>	2	<head>
3	-<meta http-equiv="Refresh" content="0; URL=bookmark-list.html">	3	+<meta http-equiv="Refresh" content="0; URL=login.html">
4	</head>	4	</head>
5	</html>	5	</html>
6	\ No newline at end of file	6	\ No newline at end of file
@@ -0,0 +1,52 @@		@@ -0,0 +1,52 @@
	1	+$(function() {
	2	+
	3	+ $("#username").focus();
	4	+
	5	+ $("form").submit(function(event) {
	6	+ event.preventDefault();
	7	+ $("[id$='-message']").hide();
	8	+ var form = {
	9	+ 'username' : $("#username").val().trim(),
	10	+ 'password' : $("#password").val().trim()
	11	+ };
	12	+
	13	+ AuthProxy.login(form, loginOk, loginFail);
	14	+ });
	15	+
	16	+});
	17	+
	18	+// Funções de Callback
	19	+
	20	+function loginOk(data) {
	21	+ location.href = "pendencies.html";
	22	+}
	23	+
	24	+function loginFail(request) {
	25	+
	26	+ switch (request.status) {
	27	+ case 401:
	28	+ $("#global-message").html("Usuário ou senha inválidos.").show();
	29	+ break;
	30	+ case 412:
	31	+ $($("form input").get().reverse()).each(function() {
	32	+ var id = $(this).attr('id');
	33	+ var message = null;
	34	+
	35	+ $.each(request.responseJSON, function(index, value) {
	36	+ if (id == value.property) {
	37	+ message = value.message;
	38	+ return;
	39	+ }
	40	+ });
	41	+
	42	+ if (message) {
	43	+ $("#" + id + "-message").html(message).show();
	44	+ $(this).focus();
	45	+ } else {
	46	+ $("#" + id + "-message").hide();
	47	+
	48	+ }
	49	+ });
	50	+ break;
	51	+ }
	52	+}
	@@ -0,0 +1,32 @@		@@ -0,0 +1,32 @@
		1	+var AuthProxy = {};
		2	+
		3	+AuthProxy.url = "api/auth";
		4	+
		5	+AuthProxy.login = function($credentials, $success, $error) {
		6	+ $.ajax({
		7	+ url : this.url,
		8	+ type : "POST",
		9	+ data : JSON.stringify($credentials),
		10	+ contentType : "application/json",
		11	+ success : $success,
		12	+ error : $error
		13	+ });
		14	+};
		15	+
		16	+AuthProxy.logout = function($success, $error) {
		17	+ $.ajax({
		18	+ url : this.url,
		19	+ type : "DELETE",
		20	+ success : $success,
		21	+ error : $error
		22	+ });
		23	+};
		24	+
		25	+AuthProxy.getUser = function($success, $error) {
		26	+ $.ajax({
		27	+ url : this.url,
		28	+ type : "GET",
		29	+ success : $success,
		30	+ error : $error
		31	+ });
		32	+};
0	\ No newline at end of file	33	\ No newline at end of file
	@@ -0,0 +1,46 @@		@@ -0,0 +1,46 @@
		1	+<!DOCTYPE html>
		2	+<html>
		3	+<head>
		4	+ <meta charset="UTF-8">
		5	+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
		6	+ <meta name="viewport" content="width=device-width, initial-scale=1">
		7	+ <title>Notifica \| Login</title>
		8	+ <link href="css/bootstrap.min.css" rel="stylesheet">
		9	+ <link href="css/bookmark.css" rel="stylesheet">
		10	+</head>
		11	+<body>
		12	+ <div class="container">
		13	+ <form id="form-login" role="form">
		14	+ <div class="col-md-4 col-md-offset-4">
		15	+ <div class="form-group">
		16	+ <h1>Bookmark \| Login</h1>
		17	+ </div>
		18	+ </div>
		19	+ <div class="col-md-4 col-md-offset-4">
		20	+ <div class="form-group">
		21	+ <label for="username">CPF</label>
		22	+ <input id="username" type="number" class="form-control input-lg" />
		23	+ <div id="username-message" class="label label-danger" hidden="true"></div>
		24	+ </div>
		25	+ </div>
		26	+ <div class="col-md-4 col-md-offset-4">
		27	+ <div class="form-group">
		28	+ <label for="password">Senha</label>
		29	+ <input id="password" type="password" class="form-control input-lg" />
		30	+ <div id="password-message" class="label label-danger" hidden="true"></div>
		31	+ </div>
		32	+ </div>
		33	+ <div class="col-md-4 col-md-offset-4">
		34	+ <div class="form-group">
		35	+ <div id="global-message" class="alert alert-danger" hidden="true"></div>
		36	+ <button id="login" class="btn btn-lg btn-success " type="submit">Entrar</button>
		37	+ </div>
		38	+ </div>
		39	+ </form>
		40	+ </div>
		41	+ <script type="text/javascript" src="js/lib/jquery-2.1.0.min.js"></script>
		42	+ <script type="text/javascript" src="js/lib/bootstrap.min.js"></script>
		43	+ <script type="text/javascript" src="js/controller/login.js"></script>
		44	+ <script type="text/javascript" src="js/proxy/auth.js"></script>
		45	+</body>
		46	+</html>
0	\ No newline at end of file	47	\ No newline at end of file