Revize 65c37e8b

added userMenu functionality to UploadFilesApp

sources/src/main/webapp/js/uploadFilesApp.js

@@ -9 +9 @@
 	run() {
 		console.log('running...');
 
+		// auth popup
+		const header = document.getElementById('header');
+
+		const loginPopup = new LoginPopup;
+		header.appendChild(loginPopup.render());
+
+		const registerPopup = new RegisterPopup;
+		header.appendChild(registerPopup.render());
+
+		document.getElementById('toggleLoginPopupButton').addEventListener('click', () => {
+			registerPopup.close();
+			loginPopup.toggle();
+		});
+
+		document.getElementById('toggleRegisterPopupButton').addEventListener('click', () => {
+			loginPopup.close();
+			registerPopup.toggle();
+		});
+
+		document.getElementById('logoutButton').addEventListener('click', e => {
+			e.preventDefault();
+			this._logOut();
+		});
+
+		// private diagrams list
 		const privateDiagramList = document.getElementById('privateDiagramList');
 		privateDiagramList.querySelectorAll('.remove-diagram-button').forEach(button => {
 			button.addEventListener('click', this._removeDiagram);
@@ -27 +52 @@
 		});
 	}
 
+	/**
+	 * Logs user out.
+	 */
+	async _logOut() {
+		try {
+			await AJAX.get(Constants.API.logOut);
+
+			document.dispatchEvent(new CustomEvent('imiger.userLoggedOut'));
+
+			document.body.classList.remove('loggedIn');
+			document.body.classList.add('loggedOut');
+
+		} catch (error) {
+			if (error instanceof HttpError) {
+				alert('Something went wrong.');
+			} else {
+				alert('Server has probably gone away.');
+			}
+		}
+	}
+
 	/**
 	 * Loads private diagrams of the logged in user and adds them to a list.
 	 */

sources/src/main/webapp/uploadFiles.jsp

@@ -31 +31 @@
 		<script src="js/app.js"></script>
 		<script src="js/uploadFilesApp.js"></script>
 
-		<script src="js/userMenu.js"></script>
-
 		<title>${APP_NAME}</title>
 	</head>
 
@@ -42 +40 @@
 
 			<h2 class="header-title">Interactive Multimodal Graph Explorer</h2>
 
-			<%@ include file="userMenu.jsp" %>
+			<div class="user-menu loggedInOnly">
+				<span id="usernameLabel">${user.username}</span>
+				<button class="button" id="logoutButton">Log out</button>
+			</div>
+
+			<div class="user-menu loggedOutOnly">
+				<button class="button" id="toggleLoginPopupButton">Log in</button>
+				<button class="button" id="toggleRegisterPopupButton">Register</button>
+			</div>
 		</header>
 
 		<main>