homepage and browserpage, lab1 done, not very stylish

client.css

@@ -61,7 +61,25 @@ input[type=text]:focus {
 /* Style the tab content */
 .tabcontent {
   display: none;
+  max-height: 100vh;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
+}
+
+.user-data-elements {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	margin-left: 10px;
+}
+
+.data-field {
+	display: flex;
+	justify-content: left;
+}
+
+textarea {
+	overflow: hidden;
+	resize: none;
 }
\ No newline at end of file

client.html

@@ -83,25 +83,63 @@
 
 				<div class="user-data-elements">
 					<div class="data-field">	
-						<label for="home-gender"></label>
 						<p id=home-gender></p>
 					</div>
 
 					<div class="data-field">	
-						<label for="home-location"></label>
 						<p id=home-location></p>
 					</div>
 
 					<div class="data-field">	
-						<label for="home-email"></label>
 						<p id=home-email></p>
 					</div>
 				</div>
+
+				<form id=board-text-form>	
+					<textarea rows="5" max-rows="5" cols="50" maxlength="250" name="comment" form="board-text-form"></textarea>
+					<input type="submit" value="Post message">
+				</form>
+				<div id="message3"></div>
+
+				<button id="reloadbutton">Reload board</button>
+				<div id="home-message-board">
+					
+				</div>
+				
 			</div>
 
 			<div id="Browse" class="tabcontent">
-				<h3>Browse</h3>
-				<p>Here you can browse very cool stuff.</p>
+				<form id="browse-search">
+					<input type="text" id="search-value">
+				</form>
+				<div id="message5"></div>
+				<div id="browse-window" style="display:none">
+					<h3 id=browse-username>Home</h3>
+
+					<div class="user-data-elements">
+						<div class="data-field">	
+							<p id=browse-gender></p>
+						</div>
+
+						<div class="data-field">	
+							<p id=browse-location></p>
+						</div>
+
+						<div class="data-field">	
+							<p id=browse-email></p>
+						</div>
+					</div>
+
+					<form id=browse-board-text-form>	
+						<textarea rows="5" max-rows="5" cols="50" maxlength="250" name="comment" form="browse-board-text-form"></textarea>
+						<input type="submit" value="Post message">
+					</form>
+					<div id="message4"></div>
+
+					<button id="browse-reloadbutton">Reload board</button>
+					<div id="browse-message-board">
+					</div>
+				</div>
 			</div>
 
 			<div id="Account" class="tabcontent">

client.js

@@ -82,8 +82,9 @@ loadProfileView = function() {
 	document.getElementById("pagecontent").innerHTML = document.getElementById("profileview").innerText;
 
 	document.getElementById("defaultOpen").click();
+	reloadBoard(document.getElementById("home-message-board"));
 
-
+	// Account page
 	var changepassform = document.forms["changepassform"];
 	changepassform.addEventListener("submit", function(event) {
 		event.preventDefault();
@@ -119,6 +120,114 @@ loadProfileView = function() {
     document.getElementById('home-gender').innerText = userData.gender;
     document.getElementById('home-location').innerText = userData.city + ', ' + userData.country;
     document.getElementById('home-email').innerText = userData.email;
+
+	var postmessageform = document.forms["board-text-form"];
+	postmessageform.addEventListener("submit", function(event) {
+		event.preventDefault();
+		postmessageform["comment"].value
+		var message = serverstub.postMessage(localStorage.getItem("logintoken"), postmessageform["comment"].value);
+		var messageBox = document.getElementById("message3");
+		if(!message.success) {
+			messageBox.innerText = "There was an error with sending your message.";
+			messageBox.style.color = "red";
+		} else {
+			messageBox.innerText = message.message;
+			messageBox.style.color = "green";
+		}
+	})
+
+	document.getElementById("reloadbutton").addEventListener("click", function(event) {
+		reloadBoard(document.getElementById("home-message-board"));
+	})
+
+	// Browse page
+	var searchform = document.forms["browse-search"];
+	searchform.addEventListener("submit", function(event) {
+		event.preventDefault();
+		loadBrowseProfile();
+	})
+	var searchinput = searchform["search-value"];
+	console.log(searchinput);
+	searchinput.addEventListener("input", function(event) {
+		document.getElementById("message5").innerText = "";
+		console.log("JDIFJAIOSDJPIJ");
+	})
+
+
+}
+
+loadBrowseProfile = function() {
+	var searchEmail = document.forms["browse-search"]["search-value"].value;
+    var message = serverstub.getUserDataByEmail(localStorage.getItem("logintoken"), searchEmail)
+	if(!message.success) {
+		document.getElementById("message5").innerText = message.message;
+		document.getElementById("message5").style.color = "red";	
+		return;
+	}
+	document.getElementById("message5").innerText = "";
+	
+	document.getElementById("browse-window").style.display = "block";
+
+	var userData = message.data;
+    // Change the information displayed on the browsepage to the user credentials 
+    document.getElementById('browse-username').innerText = userData.firstname + ' ' + userData.familyname;
+    document.getElementById('browse-gender').innerText = userData.gender;
+    document.getElementById('browse-location').innerText = userData.city + ', ' + userData.country;
+    document.getElementById('browse-email').innerText = userData.email;
+	var postmessageform = document.forms["browse-board-text-form"];
+	postmessageform.addEventListener("submit", function(event) {
+		event.preventDefault();
+		postmessageform["comment"].value
+		var message = serverstub.postMessage(localStorage.getItem("logintoken"), postmessageform["comment"].value, searchEmail);
+		var messageBox = document.getElementById("message4");
+		if(!message.success) {
+			messageBox.innerText = "There was an error with sending your message.";
+			messageBox.style.color = "red";
+		} else {
+			messageBox.innerText = message.message;
+			messageBox.style.color = "green";
+		}
+	})
+
+	document.getElementById("browse-reloadbutton").addEventListener("click", function(event) {
+		reloadBoard(document.getElementById("browse-message-board"), searchEmail);
+	})
+
+}
+
+reloadBoard = function(board, email=null) {
+
+	var boardBox = board;
+	boardBox.innerHTML = "";
+	boardBox.innerText = "";
+	var messageBoardData;
+	if(email != null) {
+		messageBoardData = serverstub.getUserMessagesByEmail(localStorage.getItem("logintoken"), email);
+	} else {
+		messageBoardData = serverstub.getUserMessagesByToken(localStorage.getItem("logintoken"));
+	}
+	console.log(messageBoardData.data);
+	console.log(boardBox);
+	for(var i = 0; i < messageBoardData.data.length; i++) {
+		var messageHTML = document.createElement('div');
+		var title = document.createElement('h2')
+		title.innerText = messageBoardData.data[i]["writer"];
+		messageHTML.appendChild(title);
+
+		var contentHTML = document.createElement('textarea');
+		contentHTML.setAttribute("readonly", "");
+		contentHTML.setAttribute("rows", "5");
+		contentHTML.setAttribute("max-rows", "5");
+		contentHTML.setAttribute("cols", "50");
+		contentHTML.innerText = messageBoardData.data[i]["content"];
+		messageHTML.appendChild(contentHTML);
+		messageHTML.appendChild(document.createElement('br'));
+			
+		boardBox.appendChild(messageHTML);
+		boardBox.style.backgroundColor = "white";
+		boardBox.style.overflowY= "scroll";
+		boardBox.style.maxHeight = "45vh";
+	}
 }
 
 inputValidation = function(formID) {