From 8a2b63b773dddaadf02bec6466666b1fcf557cae Mon Sep 17 00:00:00 2001
From: Adeel Ahmad <adeah090@student.liu.se>
Date: Fri, 10 Mar 2023 12:42:00 +0000
Subject: [PATCH] Upload New File client.js
---
static/client.js | 628 +++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 628 insertions(+)
create mode 100644 static/client.js
diff --git a/static/client.js b/static/client.js
new file mode 100644
index 0000000..c3ff8cc
--- /dev/null
+++ b/static/client.js
@@ -0,0 +1,628 @@
+window.onload = function () {
+ checkUserSignedIn();
+};
+
+function checkUserSignedIn() {
+ let token = window.localStorage.getItem("twidderToken");
+ console.log("checkUserSignedIn token", token);
+
+ if (token) {
+ sendXmlHttpRequest(
+ "GET",
+ "validate_token",
+ validateTokenCallback,
+ null,
+ token
+ );
+ function validateTokenCallback(res) {
+ console.log("validateTokenCallback", { res });
+ if (res.success) {
+ signinSuccess();
+ signInSocket();
+ setProfile();
+ setDrop();
+ } else {
+ signinFailure();
+ }
+ }
+ } else {
+ signinFailure();
+ }
+
+ if (!token) {
+ return false;
+ } else {
+ return true;
+ }
+}
+
+function signInSocket() {
+ let tempUrl = "ws://" + getUrl(true) + "/api";
+ let token = window.localStorage.getItem("twidderToken");
+
+ if ("WebSocket" in window) {
+ console.log("WebSocket", token);
+ if (!token) {
+ console.log("WebSocket token not found");
+ return;
+ }
+ console.log("created new WebSocket");
+ let connection = new WebSocket(tempUrl);
+
+ // When the connection is open, send some data to the server
+ connection.onopen = function () {
+ console.log("Send socket message = ", token);
+ connection.send(token); // Send the message 'Ping' to the server
+ };
+
+ // Log errors
+ connection.onerror = function (error) {
+ console.log("WebSocket Error " + error);
+ };
+ // Log messages from the server
+ connection.onmessage = function (e) {
+ console.log("Message recieved");
+ console.log("Server: " + e.data);
+ let res = JSON.parse(e.data);
+ if (res.success == true) {
+ console.log("res.success == true");
+ signinFailure();
+ }
+ };
+
+ // Logout on close server
+ connection.onclose = function () {
+ console.log("Socket close");
+ connection.close();
+ window.localStorage.removeItem("twidderToken");
+ signinFailure();
+ };
+ } else {
+ alert("WebSocket is not available on your browser.");
+ }
+}
+
+function addEventListenerForWelcomePage() {
+ // adding event for signing and signup
+ const form1 = document.getElementById("form1");
+ form1.addEventListener("submit", signInFromSubmit);
+
+ const form2 = document.getElementById("form2");
+ form2.addEventListener("submit", signUpFromSubmit);
+}
+
+function setBody(myhtml) {
+ document.body.innerHTML = myhtml;
+}
+
+// function to sign in the user
+function signInFromSubmit(event) {
+ event.preventDefault();
+ let password = document.getElementById("signinPassword");
+ let signinsubmitError =
+ document.getElementsByClassName("signinsubmitError")[0];
+ signinsubmitError.innerHTML = "";
+
+ if (password.value.length <= 8) {
+ signinsubmitError.innerHTML =
+ "Password should be at least 8 characters long";
+ return;
+ }
+
+ var data = new FormData();
+ data.append("email", document.getElementById("signinEmail").value);
+ data.append("password", password.value);
+
+ sendXmlHttpRequest("POST", "sign_in", signInCallback, data);
+
+ // function for signIn Callback
+ function signInCallback(res) {
+ if (res.success == false) {
+ signinsubmitError.innerHTML = res.message;
+ return;
+ }
+
+ if (res.success == true) {
+ signinSuccess(res.data);
+ signInSocket();
+ setProfile();
+ setDrop();
+ }
+ }
+}
+
+function signUpFromSubmit(event) {
+ event.preventDefault();
+ let signupsubmitError =
+ document.getElementsByClassName("signupsubmitError")[0];
+ signupsubmitError.innerHTML = "";
+
+ let password = document.getElementById("signupPassword");
+ let repPassword = document.getElementById("signupPasswordRepeat");
+ if (password.value.length <= 8) {
+ signupsubmitError.innerHTML =
+ "Password should be at least 8 characters long";
+ return;
+ }
+
+ if (password.value !== repPassword.value) {
+ signupsubmitError.innerHTML =
+ "Password and repeat password should be same.";
+ return;
+ }
+
+ var data = new FormData();
+ data.append("email", document.getElementById("signupEmail").value);
+ data.append("password", password.value);
+ data.append("firstname", document.getElementById("signupFirstName").value);
+ data.append("familyname", document.getElementById("signupFamilyName").value);
+ data.append("gender", document.getElementById("signupGender").value);
+ data.append("city", document.getElementById("signupCity").value);
+ data.append("country", document.getElementById("signupCountry").value);
+
+ sendXmlHttpRequest("POST", "sign_up", signUpCallback, data);
+
+ function signUpCallback(res) {
+ if (res.success == false) {
+ signupsubmitError.innerHTML = res.message;
+ }
+
+ if (res.success == true) {
+ document.getElementsByClassName("signupsubmitSuccess")[0].innerHTML =
+ res.message;
+ }
+ }
+}
+
+// function to set token and set displays of div
+function signinSuccess(token) {
+ console.log("signinSuccess");
+ if (token) {
+ window.localStorage.setItem("twidderToken", token);
+ }
+ let homeScriptHtml = document.getElementById("homeScript").innerHTML;
+ setBody(homeScriptHtml);
+ addEventListenerForHomeTabs();
+}
+
+function signinFailure() {
+ let welcomeScriptHtml = document.getElementById("welcomeScript").innerHTML;
+ setBody(welcomeScriptHtml);
+ addEventListenerForWelcomePage();
+}
+
+function addEventListenerForHomeTabs() {
+ let tabAnchors = document.getElementsByClassName("tabButton");
+
+ let tabAnchorsEvent = function () {
+ let attribute = this.getAttribute("data-detail");
+
+ // unmarking old tab details
+ let currActiveTabAnchor = document.querySelectorAll(".tabButton.active");
+ currActiveTabAnchor[0].classList.remove("active");
+
+ // marking new tab details
+ this.classList.add("active");
+
+ // hiding old tab details
+ let currActiveTab = document.querySelectorAll(".tabsDetails.active");
+ currActiveTab[0].classList.remove("active");
+
+ // displaying new tab details
+ let clickedTab = document.getElementById(attribute);
+ clickedTab.classList.add("active");
+ };
+
+ for (let i = 0; i < tabAnchors.length; i++) {
+ tabAnchors[i].addEventListener("click", tabAnchorsEvent, false);
+ }
+}
+
+function changePassword() {
+ let errorDiv = document.getElementsByClassName("changePasswordNewError")[0];
+ let successDiv = document.getElementsByClassName(
+ "changePasswordNewSuccess"
+ )[0];
+
+ // removing previous error values
+ errorDiv.innerHTML = "";
+ successDiv.innerHTML = "";
+
+ let oldPassword = document.getElementById("changePasswordOldPassword").value;
+ let newPassword = document.getElementById("changePasswordNewPassword").value;
+ let repPassword = document.getElementById(
+ "changePasswordNewPasswordRepeat"
+ ).value;
+
+ if (oldPassword.length <= 8) {
+ errorDiv.innerHTML = "Old password should be at least 8 characters long";
+ return;
+ }
+
+ if (newPassword.length <= 8) {
+ errorDiv.innerHTML = "New password should be at least 8 characters long";
+ return;
+ }
+
+ if (newPassword !== repPassword) {
+ errorDiv.innerHTML = "Password and repeat password should be same.";
+ return;
+ }
+
+ if (newPassword === oldPassword) {
+ errorDiv.innerHTML = "old password and new password should not be same.";
+ return;
+ }
+
+ let token = window.localStorage.getItem("twidderToken");
+
+ var data = new FormData();
+ data.append("oldPassword", oldPassword);
+ data.append("newPassword", newPassword);
+ sendXmlHttpRequest(
+ "PUT",
+ "change_password",
+ changePasswordCallback,
+ data,
+ token
+ );
+
+ function changePasswordCallback(res) {
+ if (res.success == false) {
+ errorDiv.innerHTML = res.message;
+ return;
+ }
+
+ if (res.success == true) {
+ successDiv.innerHTML = res.message;
+ return;
+ }
+ }
+}
+
+function logoutUser() {
+ let token = window.localStorage.getItem("twidderToken");
+ sendXmlHttpRequest("DELETE", "sign_out", signOutCallback, null, token);
+
+ function signOutCallback(res) {
+ if (res.success == false) {
+ document.getElementsByClassName("changePasswordNewError")[0].innerHTML =
+ res.message;
+ return;
+ }
+
+ if (res.success == true) {
+ window.localStorage.removeItem("twidderToken");
+ signinFailure();
+ }
+ }
+}
+
+function setProfile() {
+ let token = window.localStorage.getItem("twidderToken");
+ if (token) {
+ sendXmlHttpRequest(
+ "GET",
+ "get_user_data_by_token",
+ setProfileCallback,
+ null,
+ token
+ );
+
+ function setProfileCallback(data) {
+ // if data is retrieved successfully
+ if (data.success == true) {
+ let ul = getUserDetailsList(data.data, "tabHomeUserInfoList");
+ document.getElementById("tabHomeUserInfo").append(ul);
+ loadPostMessage();
+ }
+ }
+ } else {
+ console.log("setProfile no token");
+ }
+}
+
+function postMessageToWall() {
+ let postedMessage = document.getElementById("userPostFormTextarea");
+ let postedMessageErr = document.getElementsByClassName(
+ "userPostFormTextareaError"
+ )[0];
+ let postedMessageSuccess = document.getElementsByClassName(
+ "userPostFormTextareaSuccess"
+ )[0];
+
+ postedMessageErr.innerHTML = "";
+ postedMessageSuccess.innerHTML = "";
+
+ if (postedMessage.value.length == 0) {
+ postedMessageErr.innerHTML =
+ "Empty post message, please enter a valid post message.";
+ return;
+ }
+
+ let token = window.localStorage.getItem("twidderToken");
+
+ var data = new FormData();
+ data.append("message", postedMessage.value);
+
+ sendXmlHttpRequest("POST", "post_message", postMessageCallback, data, token);
+
+ function postMessageCallback(res) {
+ if (res.success == true) {
+ postedMessageSuccess.innerHTML = res.message;
+
+ loadPostMessage();
+ postedMessage.value = "";
+ return;
+ }
+ if (res.success == false) {
+ postedMessageErr.innerHTML = res.message;
+ return;
+ }
+ }
+}
+
+function postMessageToUserWall() {
+ // getting all the required data
+ let token = window.localStorage.getItem("twidderToken");
+ let postedMessage = document.getElementById("userPostFormBrosweTextarea");
+ let postedMessageRecipient = document.getElementById("browseUserEmail");
+ let postedMessageErr = document.getElementsByClassName(
+ "userPostFormBrosweTextareaError"
+ )[0];
+ let postedMessageSuccess = document.getElementsByClassName(
+ "userPostFormBrosweTextareaSuccess"
+ )[0];
+
+ // clearing inner html of success and error messages
+ postedMessageErr.innerHTML = "";
+ postedMessageSuccess.innerHTML = "";
+
+ // validating inputs
+ if (postedMessageRecipient.value.length == 0) {
+ postedMessageErr.innerHTML = "Please add reciepient email.";
+ return;
+ }
+
+ if (postedMessage.value.length == 0) {
+ postedMessageErr.innerHTML =
+ "Empty post message, please enter a valid post message.";
+ return;
+ }
+
+ // posting message to user wall
+ var data = new FormData();
+ data.append("email", postedMessageRecipient.value);
+ data.append("message", postedMessage.value);
+ // sending request
+ sendXmlHttpRequest("POST", "post_message", postMessageallback2, data, token);
+
+ function postMessageallback2(res) {
+ if (res.success == true) {
+ postedMessageSuccess.innerHTML = res.message;
+
+ // load Browse User posts
+ var data = new FormData();
+ data.append("email", postedMessageRecipient.value);
+ // ----------------------------------------------------------------
+ sendXmlHttpRequest(
+ "POST",
+ "get_user_messages_by_email",
+ getUserMessages2Callback,
+ data,
+ token
+ );
+
+ function getUserMessages2Callback(res2) {
+ if (res2.success == true) {
+ let ul = getUserPostList(res2.data, "browseUserDetailsPosts");
+ let userPostsParent =
+ document.getElementsByClassName("browseUserPosts")[0];
+ userPostsParent.innerHTML = "";
+ userPostsParent.append(ul);
+ } else if (res2.success == false) {
+ postedMessageErr.innerHTML = res.message;
+ return;
+ }
+
+ postedMessage.value = "";
+ return;
+ }
+ }
+ if (res.success == false) {
+ postedMessageErr.innerHTML = res.message;
+ return;
+ }
+ }
+}
+
+function loadPostMessage(email) {
+ let token = window.localStorage.getItem("twidderToken");
+
+ if (email) {
+ var data = new FormData();
+ data.append("email", email);
+
+ sendXmlHttpRequest(
+ "POST",
+ "get_user_messages_by_email",
+ getUserMessagesCallback,
+ data,
+ token
+ );
+ } else {
+ sendXmlHttpRequest(
+ "GET",
+ "get_user_messages_by_token",
+ getUserMessagesCallback,
+ null,
+ token
+ );
+ }
+
+ // call back function to get User Messages
+ function getUserMessagesCallback(res) {
+ if (res.success == false) {
+ document.getElementsByClassName(
+ "userPostFormTextareaError"
+ )[0].innerHTML = res.message;
+ return;
+ }
+
+ if (res.success == true) {
+ let postedMessageDiv =
+ document.getElementsByClassName("postedMessageList")[0];
+ postedMessageDiv.innerHTML = "";
+
+ let ul = getUserPostList(res.data, "userPostsList");
+ postedMessageDiv.append(ul);
+ return;
+ }
+ }
+}
+
+function browseUser() {
+ // getting basic values
+ let email = document.getElementById("browseUserEmail");
+ let token = window.localStorage.getItem("twidderToken");
+ let browseUserDetails =
+ document.getElementsByClassName("browseUserDetails")[0];
+ let browseUserPosts = document.getElementsByClassName("browseUserPosts")[0];
+
+ let browseUserFormError = document.getElementsByClassName(
+ "browseUserFormError"
+ )[0];
+ browseUserFormError.innerHTML = "";
+
+ var data = new FormData();
+ data.append("email", email.value);
+ sendXmlHttpRequest(
+ "POST",
+ "get_user_data_by_email",
+ browseUserCallback,
+ data,
+ token
+ );
+
+ function browseUserCallback(res) {
+ browseUserDetails.innerHTML = "";
+ browseUserPosts.innerHTML = "";
+
+ if (res.success == false) {
+ browseUserFormError.innerHTML = res.message;
+ return;
+ }
+
+ if (res.success == true) {
+ let ul = getUserDetailsList(res.data, "browseUserDetailsInfo");
+ browseUserDetails.append(ul);
+ data2 = new FormData();
+ data2.append("email", email.value);
+ sendXmlHttpRequest(
+ "POST",
+ "get_user_messages_by_email",
+ browseUserCallback2,
+ data2,
+ token
+ );
+
+ function browseUserCallback2(res) {
+ if (res.success == false) {
+ browseUserFormError.innerHTML = res.message;
+ return;
+ }
+
+ if (res.success == true) {
+ browseUserPosts.innerHTML = "";
+ let ul = getUserPostList(res.data, "browseUserDetailsPosts");
+ browseUserPosts.append(ul);
+ }
+ }
+ }
+ }
+}
+
+function getUserDetailsList(userData, ulId) {
+ let ul = document.createElement("ul");
+ ul.setAttribute("id", ulId);
+
+ for (const [key, value] of Object.entries(userData)) {
+ let li = document.createElement("li");
+ li.innerHTML = `<b> ${key}</b>: ${value} `;
+ ul.appendChild(li);
+ }
+ return ul;
+}
+
+function getUserPostList(data, ulId) {
+ let ul = document.createElement("ul");
+ ul.setAttribute("id", ulId);
+ if (data) {
+ for (let i = 0; i < data.length; i++) {
+ let li = document.createElement("li");
+ li.draggable = true;
+ li.addEventListener("dragstart", (event) => {
+ event.dataTransfer.setData("text/plain", li.textContent);
+ });
+ li.id = i;
+ li.innerHTML = `<b> ${data[i].writer}</b>: ${data[i].content} `;
+ ul.append(li);
+ }
+ }
+ return ul;
+}
+
+function setDrop() {
+ function allowDrop(ev) {
+ ev.preventDefault();
+ }
+ function drop(ev) {
+ const text = ev.dataTransfer.getData("text/plain");
+ wallTextArea.value += text.split(":")[1];
+ ev.preventDefault();
+ }
+ const wallTextArea = document.getElementById("userPostFormTextarea");
+ wallTextArea.ondrop = drop;
+ wallTextArea.ondragover = allowDrop;
+}
+
+// Function to sendXmlHttpRequest to server
+// 3 steps to change
+// 1 use form data and send request function
+// 2 call sendXmlHttpRequest with right parameters
+// 3 create a callbackdunction that does evenything that res would have done
+function sendXmlHttpRequest(
+ type,
+ endpoint,
+ callback,
+ formData = null,
+ token = null
+) {
+ var xhr = new XMLHttpRequest();
+ // xhr.withCredentials = true;
+ // console.log(endpoint, formData, token);
+ xhr.addEventListener("readystatechange", function () {
+ if (this.readyState === 4) {
+ let jsonResponse = JSON.parse(xhr.responseText);
+ callback(jsonResponse);
+ }
+ });
+
+ let myUrl = getUrl() + "/" + endpoint;
+ xhr.open(type, myUrl);
+ if (token) {
+ xhr.setRequestHeader("token", token);
+ }
+
+ xhr.send(formData);
+}
+
+function getUrl(ip = false) {
+ let temp = "http://127.0.0.1:5000";
+
+ if (ip) {
+ tempArr = temp.split("//");
+ return tempArr[1];
+ }
+ return temp;
+}
--
GitLab