Project

General

Profile

1
<!DOCTYPE html>
2

    
3
<html xmlns="http://www.w3.org/1999/xhtml"
4
	xmlns:th="http://www.thymeleaf.org">
5

    
6
<head>
7
<meta charset="utf-8">
8
<meta name="viewport"
9
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
10
<meta http-equiv="Cache-Control"
11
	content="no-cache, no-store, must-revalidate">
12
<meta http-equiv="Pragma" content="no-cache">
13
<meta http-equiv="Expires" content="0">
14

    
15
<!-- Bootstrap CSS -->
16
<link rel="stylesheet" href="resources/css/bootstrap.min.css" />
17

    
18
<title>Organizations Database: Login</title>
19
</head>
20

    
21
<body>
22

    
23
	<div>
24
		<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
25
			<a class="navbar-brand" href="#">
26
				<img src="resources/images/openaire_logo_small.png" width="30" height="30" alt="OpenOrgs Database"> OpenOrgs Database
27
			</a>
28
		</nav>
29
	</div>
30

    
31
	<div class="container-fluid">
32
		<div class="row" style="margin-top: 20px">
33
			<div class="col-xs-12 col-sm-10 col-md-8 col-lg-4 offset-sm-1 offset-md-2 offset-lg-4">
34
				<div class="card">
35
					<div class="card-header">
36
						<ul id="tabList" class="nav nav-tabs card-header-tabs">
37
							<li class="nav-item"><a href="#tabLogin" class="nav-link active">Sign In</a></li>
38
							<li class="nav-item"><a href="#tabRegister" class="nav-link">Register</a></li>
39
						</ul>
40
					</div>
41
					<div class="card-body">
42
						<div class="tab-content">
43
							<div class="tab-pane active" id="tabLogin">
44
								<h4 class="card-title">Please Sign In</h4>
45
								<form th:action="@{/login}" method="post">
46
									<div th:if="${param.error}">
47
										<div class="alert alert-danger">Invalid username and password.</div>
48
									</div>
49
									<div th:if="${param.logout}">
50
										<div class="alert alert-info">You have been logged out.</div>
51
									</div>
52
									<div class="form-group">
53
										<input type="text" name="username" id="username" class="form-control input-lg" placeholder="Email" required="true" autofocus="true" />
54
									</div>
55
									<div class="form-group">
56
										<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" required="true" />
57
									</div>
58
									<div class="row">
59
										<div class="col-xs-6 col-sm-6 col-md-6">
60
											<input type="submit" class="btn btn-lg btn-primary btn-block" value="Sign In" />
61
										</div>
62
										<div class="col-xs-6 col-sm-6 col-md-6"></div>
63
									</div>
64
								</form>
65
							</div>
66
							<div class="tab-pane" id="tabRegister">
67
								<h4 class="card-title">Register</h4>
68
								<div id="registerMessage">
69
									<p class="card-text mb-4">Insert the email used to access the OpenAIRE portal. An administrator will authorize you as soon as possible.</p>
70
								</div>
71
								<form method="post">
72
									<div class="form-group">
73
										<input type="text" name="email" id="email" class="form-control input-lg" placeholder="Email" required="true" autofocus="true" />
74
									</div>
75
									<div class="row">
76
										<div class="col-xs-6 col-sm-6 col-md-6">
77
											<input type="button" id="btnRegister" class="btn btn-lg btn-primary btn-block" value="Register" onclick="register(this.form.email.value)" />
78
										</div>
79
										<div class="col-xs-6 col-sm-6 col-md-6"></div>
80
									</div>
81
								</form>
82
							</div>
83
						</div>
84
					</div>
85
				</div>
86
			</div>
87
		</div>
88
	</div>
89
	
90
	<script src="resources/js/jquery-3.4.1.min.js"></script>
91
	<script src="resources/js/popper.min.js"></script>
92
	<script src="resources/js/bootstrap.min.js"></script>
93
	
94
	<script>
95
		$('#tabList a').on('click', function (e) {
96
			e.preventDefault()
97
			$(this).tab('show')
98
		});
99
	
100
		function register(email) {
101
			$('#btnRegister').attr("disabled", "disabled");
102
			
103
			$.post("public_api/newUser", { 'email': email }, function(data, textStatus) {
104
				if (textStatus == 'success' && data.status == 1) {
105
					$('#registerMessage').html('<div class="alert alert-info">Registration saved !</div>');
106
				} else if (textStatus == 'success' && data.status == 2) {
107
					$('#registerMessage').html('<div class="alert alert-warning">User already registered !</div>');
108
					$('#btnRegister').removeAttr("disabled");
109
				} else {
110
					$('#registerMessage').html('<div class="alert alert-danger">Error saving registration !</div>');
111
				}
112
			}, 'json');
113
		}
114
	</script>
115
</body>
116
</html>
(3-3/3)