Revize 60bada5b

fully working frontend User menu

sources/src/main/webapp/css/main.css

@@ -88 +88 @@
 
 /* login and register links */
 
-.header .login_box {
-	float: right;
+.header .user-menu {
 	position: absolute;
-	right: 25px;
-	top: 0px;
-	font-weight: bold;	
+	right: 0;
+	top: 0;
+	padding-left: 25px;
+	padding-right: 25px;
+	line-height: 60px;
 }
 
-.header .login_box a {
+.header .user-menu .button {
 	color: #0B548A;
 	font-size: 14px;
-}
-
-.header .login_box a:hover {
-	text-decoration: none;
+	font-weight: bold;
+	background: none;
+	border: none;
+	cursor: pointer;
 }
 
 /* login popup */

sources/src/main/webapp/js/userMenu.js

@@ -1 +1 @@
 document.addEventListener('DOMContentLoaded', function() {
 	var toggleLoginPopupButton = document.getElementById('toggleLoginPopupButton');
-	var loginPopup = document.getElementById('loginPopup');
-
 	var toggleRegisterPopupButton = document.getElementById('toggleRegisterPopupButton');
+	var logoutButton = document.getElementById('logoutButton');
+
+	var loginPopup = document.getElementById('loginPopup');
 	var registerPopup = document.getElementById('registerPopup');
 
+	var loginForm = document.forms['loginForm'];
+	var registerForm = document.forms['registerForm'];
+
 	if (toggleLoginPopupButton) {
 		toggleLoginPopupButton.addEventListener('click', function() {
 			loginPopup.classList.toggle('hidden');
@@ -16 +20 @@
 			registerPopup.classList.toggle('hidden');
 		});
 	}
+
+	if (logoutButton) {
+		logoutButton.addEventListener('click', function(e) {
+			e.preventDefault();
+
+			$.ajax({
+				'type': 'GET',
+				'url': logoutButton.href,
+				'success': function() {
+					location.reload(true);
+				},
+				'error': function() {
+					alert('Something went wrong.');
+				},
+			});
+		});
+	}
+
+	if (loginForm) {
+		loginForm.addEventListener('submit', function(e) {
+			e.preventDefault();
+
+			$.ajax({
+				'type': loginForm.method,
+				'url': loginForm.action,
+				'data': {
+					'username': loginForm.username.value,
+					'password': loginForm.password.value,
+				},
+				'success': function() {
+					location.reload(true);
+				},
+				'error': function(xhr) {
+					switch (xhr.status) {
+						case 400:
+							printErrors(xhr);
+							break;
+						case 401:
+							alert('Invalid credentials.');
+							break;
+						default:
+							alert('Something went wrong.');
+					}
+				},
+			});
+		});
+	}
+
+	if (registerForm) {
+		registerForm.addEventListener('submit', function(e) {
+			e.preventDefault();
+
+			$.ajax({
+				'type': registerForm.method,
+				'url': registerForm.action,
+				'data': {
+					'name': registerForm.name.value,
+					'email': registerForm.email.value,
+					'username': registerForm.username.value,
+					'password': registerForm.password.value,
+					'passwordCheck': registerForm.passwordCheck.value,
+				},
+				'success': function() {
+					location.reload(true);
+				},
+				'error': function(xhr) {
+					switch (xhr.status) {
+						case 400:
+							printErrors(xhr);
+							break;
+						default:
+							alert('Something went wrong.');
+					}
+				},
+			});
+		});
+	}
 });
+
+function printErrors(xhr) {
+	var data = JSON.parse(xhr.responseText);
+
+	for (var key in data.error) {
+		if (!data.error.hasOwnProperty(key)) continue;
+
+		alert(data.error[key]);
+	}
+}

sources/src/main/webapp/logged_user_menu.jsp

@@ -1 @@
-<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
-
-<div id="logged_user_menu">
-<% if (request.getSession().getAttribute("logged_user") == "1") { %>
-	<h3 style="margin-top: 25px;">My diagrams</h3>
-	
-	<ul>	
-		<c:forEach items="${diagramNames}" var="diagramName">
-			<li id="diagram_id_${diagramName.id}">
-				<a href="/graph?diagramId=${diagramName.id}">${diagramName.name}</a><a href="#" onclick="return deleteDiagram(${diagramName.id});"><img src="images/button_cancel.png" alt="odstranit" class="imgDelete"/></a>
-			</li>
-		</c:forEach>
-	</ul>
-<% } %>
-
-	<h3 style="margin-top: 25px;">Public diagrams</h3>
-	
-	<ul>	
-		<c:forEach items="${diagramPublic}" var="diagramPublic">
-			<li id="public_diagram_id_${diagramPublic.id}">
-				<a href="/graph?diagramId=${diagramPublic.id}">${diagramPublic.name}</a>
-			</li>
-		</c:forEach>
-	</ul>
-</div>

sources/src/main/webapp/showGraph.jsp

@@ -49 +49 @@
 		<script src="js/utils/utils.js"></script>
 		<script src="js/zoom.js"></script>
 		<script src="js/app.js"></script>
+		<script src="js/userMenu.js"></script>
 
 		<title>IMiGEr</title>
 	</head>

sources/src/main/webapp/userMenu.jsp

@@ -1 +1 @@
 <c:if test="${isLoggedIn}">
-	<div class="login_box">
-		${user.username} <a href="api/log-out" id="logoutButton">Log out</a>
+	<div class="user-menu">
+		${user.username} <a href="api/log-out" class="button" id="logoutButton">Log out</a>
 	</div>
 </c:if>
 
 <c:if test="${!isLoggedIn}">
-	<div class="login_box">
-		<button id="toggleLoginPopupButton">Log in</a>
-		<button id="toggleRegisterPopupButton">Register</a>
+	<div class="user-menu">
+		<button class="button" id="toggleLoginPopupButton">Log in</a>
+		<button class="button" id="toggleRegisterPopupButton">Register</a>
 	</div>
 </c:if>
 
@@ -35 +35 @@
 			<tr>
 				<td></td>
 				<td>
-					<button type="submit">Login</button>
+					<button type="submit" class="button">Login</button>
 				</td>
 			</tr>
 		</table>
@@ -50 +50 @@
 					Name:
 				</td>
 				<td>
-					<input type="text" name="user_name" id="user_name">
+					<input type="text" name="name">
 				</td>
 			</tr>
 			<tr>
@@ -58 +58 @@
 					E-mail:
 				</td>
 				<td>
-					<input type="text" name="user_email" id="user_email">
+					<input type="text" name="email">
 				</td>
 			</tr>
 			<tr>
@@ -66 +66 @@
 					Login name:
 				</td>
 				<td>
-					<input type="text" name="user_nick" id="user_nick">
+					<input type="text" name="username">
 				</td>
 			</tr>
 			<tr>
@@ -74 +74 @@
 					Password:
 				</td>
 				<td>
-					<input type="password" name="user_password" id="user_password">
+					<input type="password" name="password">
 				</td>
 			</tr>
 			<tr>
@@ -82 +82 @@
 					Password again:
 				</td>
 				<td>
-					<input type="password" name="user_password_2" id="user_password_2">
+					<input type="password" name="passwordCheck">
 				</td>
 			</tr>
 			<tr>
 				<td></td>
 				<td>
-					<button type="submit">Register</button>
+					<button type="submit" class="button">Register</button>
 				</td>
 			</tr>
 		</table>