api, frontend: allow editing profile information

Closes https://gitlab.com/commento/commento/issues/235

frontend/js/commento.js

@@ -246,7 +246,18 @@
     refreshAll();
   }
 
-  function selfLoad(commenter) {
+
+  function profileEdit() {
+    window.open(origin + "/profile?commenterToken=" + commenterTokenGet(), "_blank");
+  }
+
+
+  function notificationSettings(unsubscribeSecretHex) {
+    window.open(origin + "/unsubscribe?unsubscribeSecretHex=" + unsubscribeSecretHex, "_blank");
+  }
+
+
+  function selfLoad(commenter, email) {
     commenters[commenter.commenterHex] = commenter;
     selfHex = commenter.commenterHex;
 
@@ -259,7 +270,9 @@
       name = create("div");
     }
     var avatar;
-    var logout = create("div");
+    var notificationSettingsButton = create("div");
+    var profileEditButton = create("div");
+    var logoutButton = create("div");
     var color = colorGet(commenter.commenterHex + "-" + commenter.name);
 
     loggedContainer.id = ID_LOGGED_CONTAINER;
@@ -267,12 +280,19 @@
     classAdd(loggedContainer, "logged-container");
     classAdd(loggedInAs, "logged-in-as");
     classAdd(name, "name");
-    classAdd(logout, "logout");
+    classAdd(notificationSettingsButton, "profile-button");
+    classAdd(profileEditButton, "profile-button");
+    classAdd(logoutButton, "profile-button");
 
     name.innerText = commenter.name;
-    logout.innerText = "Logout";
+    notificationSettingsButton.innerText = "Notification Settings";
+    profileEditButton.innerText = "Edit Profile";
+    logoutButton.innerText = "Logout";
 
-    onclick(logout, global.logout);
+    onclick(logoutButton, global.logout);
+    console.log(commenter);
+    onclick(notificationSettingsButton, notificationSettings, email.unsubscribeSecretHex);
+    onclick(profileEditButton, profileEdit);
 
     attrSet(loggedContainer, "style", "display: none");
     if (commenter.link !== "undefined") {
@@ -292,7 +312,9 @@
     append(loggedInAs, avatar);
     append(loggedInAs, name);
     append(loggedContainer, loggedInAs);
-    append(loggedContainer, logout);
+    append(loggedContainer, logoutButton);
+    append(loggedContainer, profileEditButton);
+    append(loggedContainer, notificationSettingsButton);
     prepend(root, loggedContainer);
 
     isAuthenticated = true;
@@ -318,7 +340,7 @@
         return;
       }
 
-      selfLoad(resp.commenter);
+      selfLoad(resp.commenter, resp.email);
       global.allShow();
 
       call(callback);
@@ -1087,7 +1109,6 @@
       append(card, header);
       append(card, contents);
 
-      console.log(children);
       if (comment.deleted && (hideDeleted === "true" || children === null)) {
         return;
       }
@@ -1408,7 +1429,6 @@
 
       comment.creationDate = new Date(comment.creationDate);
 
-      console.log(m, parentHex);
       m[parentHex].push(comment);
       commentsMap[comment.commentHex] = {
         "html": comment.html,
@@ -1730,7 +1750,7 @@
 
       cookieSet("commentoCommenterToken", resp.commenterToken);
 
-      selfLoad(resp.commenter);
+      selfLoad(resp.commenter, resp.email);
       global.allShow();
 
       remove($(ID_LOGIN));

frontend/js/profile.js

@@ -0,0 +1,76 @@
+(function (global, document) {
+  "use strict";
+
+  (document);
+
+  // Update the email records.
+  global.update = function(event) {
+    event.preventDefault();
+
+    $(".err").text("");
+    $(".msg").text("");
+
+    var allOk = global.unfilledMark(["#name", "#email"], function(el) {
+      el.css("border-bottom", "1px solid red");
+    });
+
+    if (!allOk) {
+      global.textSet("#err", "Please make sure all fields are filled");
+      return;
+    }
+
+    var json = {
+      "commenterToken": global.paramGet("commenterToken"),
+      "name": $("#name").val(),
+      "email": $("#email").val(),
+      "link": $("#link").val(),
+      "photo": $("#photo").val(),
+    };
+
+    global.buttonDisable("#save-button");
+    global.post(global.origin + "/api/commenter/update", json, function(resp) {
+      global.buttonEnable("#save-button");
+      if (!resp.success) {
+        $(".err").text(resp.message);
+        return;
+      }
+
+      $(".msg").text("Successfully updated!");
+    });
+  }
+
+  global.profilePrefill = function() {
+    $(".err").text("");
+    $(".msg").text("");
+    var json = {
+      "commenterToken": global.paramGet("commenterToken"),
+    };
+
+    global.post(global.origin + "/api/commenter/self", json, function(resp) {
+      $("#loading").hide();
+      $("#form").show();
+      if (!resp.success) {
+        $(".err").text(resp.message);
+        return;
+      }
+
+      $("#name").val(resp.commenter.name);
+      $("#email").val(resp.commenter.email);
+      $("#unsubscribe").attr("href", global.origin + "/unsubscribe?unsubscribeSecretHex=" + resp.email.unsubscribeSecretHex);
+
+      if (resp.commenter.provider === "commento") {
+        $("#link-row").attr("style", "")
+        if (resp.commenter.link !== "undefined") {
+          $("#link").val(resp.commenter.link);
+        }
+
+        $("#photo-row").attr("style", "")
+        $("#photo-subtitle").attr("style", "")
+        if (resp.commenter.photo !== "undefined") {
+          $("#photo").val(resp.commenter.photo);
+        }
+      }
+    });
+  };
+
+} (window.commento, document));