Upload client.js

client.js

+window.onload = function () {
+  let userIsgnedIn = checkUserSignedIn();
+
+  if (userIsgnedIn) {
+    signinSuccess();
+  } else {
+    signinFailure();
+  }
+  // setProfile();
+};
+
+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 checkUserSignedIn() {
+  let token = window.localStorage.getItem("twidderToken");
+
+  if (!token) {
+    return false;
+  } else {
+    return true;
+    // signinSuccess();
+  }
+}
+
+// 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;
+  }
+
+  let res = serverstub.signIn(
+    document.getElementById("signinEmail").value,
+    password.value
+  );
+
+  if (res.success == false) {
+    signinsubmitError.innerHTML = res.message;
+    return;
+  }
+
+  if (res.success == true) {
+    signinSuccess(res.data);
+    setProfile();
+  }
+}
+
+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;
+  }
+
+  dataObject = {};
+
+  dataObject.email = document.getElementById("signupEmail").value;
+  dataObject.password = password.value;
+  dataObject.firstname = document.getElementById("signupFirstName").value;
+  dataObject.familyname = document.getElementById("signupFamilyName").value;
+  dataObject.gender = document.getElementById("signupGender").value;
+  dataObject.city = document.getElementById("signupCity").value;
+  dataObject.country = document.getElementById("signupCountry").value;
+
+  let res = serverstub.signUp(dataObject);
+
+  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) {
+  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");
+  let res = serverstub.changePassword(token, oldPassword, newPassword);
+
+  if (res.success == false) {
+    errorDiv.innerHTML = res.message;
+    return;
+  }
+
+  if (res.success == true) {
+    successDiv.innerHTML = res.message;
+    return;
+  }
+}
+
+function logoutUser() {
+  let res = serverstub.signOut(window.localStorage.getItem("twidderToken"));
+  window.localStorage.removeItem("twidderToken");
+
+  if (res.success == false) {
+    document.getElementsByClassName("changePasswordNewError")[0].innerHTML =
+      res.message;
+    return;
+  }
+
+  if (res.success == true) {
+    signinFailure();
+  }
+}
+
+function setProfile() {
+  let token = window.localStorage.getItem("twidderToken");
+  if (token) {
+    data = serverstub.getUserDataByToken(token);
+    // 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");
+
+  let res = serverstub.postMessage(token, postedMessage.value);
+
+  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
+  res = serverstub.postMessage(
+    token,
+    postedMessage.value,
+    postedMessageRecipient.value
+  );
+
+  if (res.success == true) {
+    postedMessageSuccess.innerHTML = res.message;
+
+    // load Browse User posts
+
+    res2 = serverstub.getUserMessagesByEmail(
+      token,
+      postedMessageRecipient.value
+    );
+
+    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 res = {};
+  let token = window.localStorage.getItem("twidderToken");
+
+  if (email) {
+    res = serverstub.getUserMessagesByEmail(token, email);
+  } else {
+    res = serverstub.getUserMessagesByToken(token);
+  }
+
+  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").value;
+  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 = "";
+
+  let res = serverstub.getUserDataByEmail(token, email);
+
+  if (res.success == false) {
+    browseUserFormError.innerHTML = res.message;
+    return;
+  }
+
+  if (res.success == true) {
+    browseUserDetails.innerHTML = "";
+    let ul = getUserDetailsList(res.data, "browseUserDetailsInfo");
+    browseUserDetails.append(ul);
+  }
+
+  res = serverstub.getUserMessagesByEmail(token, email);
+
+  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);
+
+  for (let i = 0; i < data.length; i++) {
+    let li = document.createElement("li");
+    li.innerHTML = `<b> ${data[i].writer}</b>: ${data[i].content} `;
+    ul.append(li);
+  }
+  return ul;
+}