From 06c71f4e65a98167d02d0405d287a0efc0496999 Mon Sep 17 00:00:00 2001
From: Adhityaa Chandrasekar <adtac@adtac.in>
Date: Thu, 20 Dec 2018 00:48:43 -0500
Subject: [PATCH] frontend: use commento namespace, event handlers, UI

---
 api/router_static.go                  |   4 +-
 frontend/dashboard.html               |  36 +++----
 frontend/forgot.html                  |   2 +-
 frontend/js/auth-common.js            |   4 +-
 frontend/js/commento.js               | 143 ++++++++++++++------------
 frontend/js/dashboard-danger.js       |  10 +-
 frontend/js/dashboard-domain.js       |  14 +--
 frontend/js/dashboard-general.js      |   2 +-
 frontend/js/dashboard-import.js       |   7 +-
 frontend/js/dashboard-installation.js |   2 +-
 frontend/js/dashboard-moderation.js   |   8 +-
 frontend/js/dashboard-setting.js      |   2 +-
 frontend/js/dashboard-statistics.js   |  12 +--
 frontend/js/dashboard.js              |  14 +--
 frontend/js/errors.js                 |   2 +-
 frontend/js/forgot.js                 |   4 +-
 frontend/js/http.js                   |   2 +-
 frontend/js/login.js                  |  10 +-
 frontend/js/logout.js                 |   4 +-
 frontend/js/reset.js                  |   6 +-
 frontend/js/self.js                   |   8 +-
 frontend/js/signup.js                 |  10 +-
 frontend/js/utils.js                  |   4 +-
 frontend/login.html                   |   8 +-
 frontend/logout.html                  |   2 +-
 frontend/reset-password.html          |   2 +-
 frontend/sass/commento-input.scss     |  15 ---
 frontend/sass/commento.scss           |  37 ++++---
 frontend/signup.html                  |   6 +-
 29 files changed, 193 insertions(+), 187 deletions(-)

diff --git a/api/router_static.go b/api/router_static.go
index bcc6a99..ac7af10 100644
--- a/api/router_static.go
+++ b/api/router_static.go
@@ -53,8 +53,8 @@ func staticRouterInit(router *mux.Router) error {
 
 			prefix := ""
 			if dir == "/js" {
-				prefix = "window.commentoOrigin='" + os.Getenv("ORIGIN") + "';\n"
-				prefix += "window.commentoCdn='" + os.Getenv("CDN_PREFIX") + "';\n"
+				prefix = `window.commento = {origin: "` + os.Getenv("ORIGIN") + `", cdn: "` + os.Getenv("CDN_PREFIX") + `"};
+`
 			}
 
 			gzip := (os.Getenv("GZIP_STATIC") == "true")
diff --git a/frontend/dashboard.html b/frontend/dashboard.html
index b402c09..96da26a 100644
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -21,10 +21,10 @@
 
   <script>
   window.onload = function() {
-    window.selfGet(function() {
-      window.vueConstruct(function() {
-        window.navbarFill();
-        window.domainRefresh();
+    window.commento.selfGet(function() {
+      window.commento.vueConstruct(function() {
+        window.commento.navbarFill();
+        window.commento.domainRefresh();
         $(document).ready(function(){
           $("ul.tabs li").click(function(){
             var tab_id = $(this).attr("data-tab");
@@ -51,13 +51,13 @@
         It's so quiet in here.
       </div>
 
-      <div class="pane-setting" v-for="domain in domains" v-on:click="window.domainSelect(domain.domain)" id="{{domain.hex}}" v-bind:class="{selected: domain.selected}" v-if="domain.show">
+      <div class="pane-setting" v-for="domain in domains" v-on:click="window.commento.domainSelect(domain.domain)" id="{{domain.hex}}" v-bind:class="{selected: domain.selected}" v-if="domain.show">
         <div class="pane-setting-inside">
           <div class="setting-title">{{domain.name}}</div>
           <div class="setting-subtitle">{{domain.domain}}</div>
         </div>
       </div>
-      <div class="pane-setting" id="domain-add" onclick="window.location.hash='#new-domain-modal'">
+      <div class="pane-setting" id="domain-add" onclick="document.location.hash='#new-domain-modal'">
         <div class="pane-setting-inside super-setting">
           <div class="super-setting-title">+</div>
           <div class="super-setting-text">New Domain</div>
@@ -66,7 +66,7 @@
     </div>
 
     <div class="pane-middle">
-      <div v-if="showSettings" class="pane-setting" v-for="setting in settings" v-on:click="window.settingSelect(setting.id)" id="{{setting.id}}" v-bind:class="{selected: setting.selected}">
+      <div v-if="showSettings" class="pane-setting" v-for="setting in settings" v-on:click="window.commento.settingSelect(setting.id)" id="{{setting.id}}" v-bind:class="{selected: setting.selected}">
         <div class="pane-setting-inside">
           <div class="setting-title">{{setting.text}}</div>
           <div class="setting-subtitle">{{setting.meaning}}</div>
@@ -156,14 +156,14 @@
                   <div class="commento-email-container">
                     <div class="commento-email">
                       <input class="commento-input" type="text" id="new-mod" placeholder="Email">
-                      <button id="new-mod-button" class="commento-email-button" onclick="window.moderatorNewHandler()">Add moderator</button>
+                      <button id="new-mod-button" class="commento-email-button" onclick="window.commento.moderatorNewHandler()">Add moderator</button>
                     </div>
                   </div>
                   <div class="mod-emails-container">
                     <div class="content">
                       <div class="mod-email" v-for="email in domains[cd].moderators" v-if="domains[cd].moderators.length > 0">
                         <div class="email">{{email.email}}</div>
-                        <div class="delete" v-on:click="window.moderatorDeleteHandler(email.email)">Delete</div>
+                        <div class="delete" v-on:click="window.commento.moderatorDeleteHandler(email.email)">Delete</div>
                         <div class="date">added {{email.timeAgo}}</div>
                       </div>
                     </div>
@@ -215,7 +215,7 @@
               <div id="new-domain-error" class="modal-error-box"></div>
             </div>
             <div class="center">
-              <button id="save-general-button" onclick="window.generalSaveHandler()" class="button">Save Changes</button>
+              <button id="save-general-button" onclick="window.commento.generalSaveHandler()" class="button">Save Changes</button>
             </div>
           </div>
         </div>
@@ -247,7 +247,7 @@
                         <div class="commento-email-container">
                           <div class="commento-email">
                             <input class="commento-input" type="text" id="disqus-url" placeholder="https://media.disqus.com/uploads/...">
-                            <button id="disqus-import-button" class="commento-email-button" onclick="importDisqus()">Import</button>
+                            <button id="disqus-import-button" class="commento-email-button" onclick="window.commento.importDisqus()">Import</button>
                           </div>
                         </div>
                         <div class="subtext-container">
@@ -286,7 +286,7 @@
                       If you desire to re-allow comments again on your website, you can do so. You can, of course, freeze the site again in the future.
                     </div>
 
-                    <button onclick="window.location.hash='#unfreeze-domain-modal'" class="button green-button">Unfreeze Domain</button>
+                    <button onclick="document.location.hash='#unfreeze-domain-modal'" class="button green-button">Unfreeze Domain</button>
                   </div>
 
                   <div class="box" v-if="domains[cd].state != 'frozen'">
@@ -294,7 +294,7 @@
                       If you desire to temporarily freeze new comments (domain-wide), thereby making it read-only, you can do so. You can choose to unfreeze later; this is temporary.
                     </div>
 
-                    <button id="orange-button" onclick="window.location.hash='#freeze-domain-modal'" class="button orange-button">Freeze Domain</button>
+                    <button id="orange-button" onclick="document.location.hash='#freeze-domain-modal'" class="button orange-button">Freeze Domain</button>
                   </div>
                 </div>
               </div>
@@ -305,7 +305,7 @@
                     Want to completely remove Commento from your website? This will permanently delete all comments and there is literally no way to retrieve your data once you do this.
                   </div>
 
-                  <button id="big-red-button" class="button big-red-button" onclick="window.location.hash='#delete-domain-modal'">Delete Domain</button>
+                  <button id="big-red-button" class="button big-red-button" onclick="document.location.hash='#delete-domain-modal'">Delete Domain</button>
                 </div>
               </div>
             </div>
@@ -323,7 +323,7 @@
         Are you absolutely sure you want to freeze your domain, thereby making it read-only? You can choose to unfreeze later; this is temporary.
       </div>
       <div class="modal-contents">
-        <button id="orange-button" class="button orange-button" onclick="window.domainFreezeHandler()">Freeze Domain</button>
+        <button id="orange-button" class="button orange-button" onclick="window.commento.domainFreezeHandler()">Freeze Domain</button>
       </div>
     </div>
   </div>
@@ -336,7 +336,7 @@
         Are you absolutely sure you want to unfreeze your domain? This will re-allow new comments. You can choose to freeze again in the future.
       </div>
       <div class="modal-contents">
-        <button id="blue-button" class="button green-button" onclick="window.domainUnfreezeHandler()">Unfreeze Domain</button>
+        <button id="blue-button" class="button green-button" onclick="window.commento.domainUnfreezeHandler()">Unfreeze Domain</button>
       </div>
     </div>
   </div>
@@ -349,7 +349,7 @@
         Are you absolutely sure? This will permanently delete all comments and there is literally no way to retrieve your data once you do this.
       </div>
       <div class="modal-contents">
-        <button id="big-red-button" class="button big-red-button" onclick="window.domainDeleteHandler()">Delete Domain</button>
+        <button id="big-red-button" class="button big-red-button" onclick="window.commento.domainDeleteHandler()">Delete Domain</button>
       </div>
     </div>
   </div>
@@ -374,7 +374,7 @@
         </div>
         <div id="new-domain-error" class="modal-error-box"></div>
         <div class="center">
-          <button id="add-site-button" onclick="window.domainNewHandler()" class="button">Add Domain</button>
+          <button id="add-site-button" onclick="window.commento.domainNewHandler()" class="button">Add Domain</button>
         </div>
       </div>
     </div>
diff --git a/frontend/forgot.html b/frontend/forgot.html
index 3a4186e..1156f34 100644
--- a/frontend/forgot.html
+++ b/frontend/forgot.html
@@ -25,7 +25,7 @@
       </div>
       <div class="err" id="err"></div>
       <div class="msg" id="msg"></div>
-      <button id="reset-button" class="button" onclick="sendResetHex()">Send Reset Password Link</button>
+      <button id="reset-button" class="button" onclick="window.commento.sendResetHex()">Send Reset Password Link</button>
       <a class="link" href="[[[.Origin]]]/login">Suddenly remembered your password? Login.</a>
     </div>
   </div>
diff --git a/frontend/js/auth-common.js b/frontend/js/auth-common.js
index 14317fa..10ef654 100644
--- a/frontend/js/auth-common.js
+++ b/frontend/js/auth-common.js
@@ -5,7 +5,7 @@
   // cookie is deleted.
   global.loggedInRedirect = function() {
     if (global.cookieGet("commentoOwnerToken") !== undefined)
-      document.location = global.commentoOrigin + "/dashboard";
+      document.location = global.origin + "/dashboard";
   }
 
 
@@ -17,4 +17,4 @@
     }
   };
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/commento.js b/frontend/js/commento.js
index 0496a55..f9982cc 100644
--- a/frontend/js/commento.js
+++ b/frontend/js/commento.js
@@ -1,6 +1,13 @@
 (function(global, document) {
   'use strict';
 
+  if (global.commento === undefined) {
+    console.log("[commento] error: window.commento namespace not defined; maybe there's a mismatch in version between the backend and the frontend?");
+    return;
+  }
+
+  global = global.commento;
+
   // Do not use other files like utils.js and http.js in the Makefile to build
   // commento.js for the following reasons:
   //   - We don't use jQuery in the actual JavaScript payload because we need
@@ -56,8 +63,8 @@
   var ID_FOOTER = "commento-footer";
 
 
-  var origin = global.commentoOrigin;
-  var cdn = global.commentoCdn;
+  var origin = global.origin;
+  var cdn = global.cdn;
   var root = null;
   var cssOverride = undefined;
   var autoInit = undefined;
@@ -140,6 +147,13 @@
   }
 
 
+  function onclick(node, f, ...args) {
+    node.addEventListener("click", function() {
+      f(...args);
+    }, false);
+  }
+
+
   function attrSet(node, a, value) {
     node.setAttribute(a, value);
   }
@@ -254,13 +268,13 @@
       name.innerText = resp.commenter.name;
       logout.innerText = "Logout";
 
+      onclick(logout, global.logout);
+
       attrSet(loggedContainer, "style", "display: none");
-      attrSet(logout, "onclick", "logout()");
       attrSet(name, "href", resp.commenter.link);
       if (resp.commenter.photo == "undefined") {
         avatar = create("div");
         avatar.style["background"] = color;
-        avatar.style["boxShadow"] = "0px 0px 0px 2px " + color;
         avatar.innerHTML = resp.commenter.name[0].toUpperCase();
         classAdd(avatar, "avatar");
       } else {
@@ -354,7 +368,7 @@
       commenters = resp.commenters;
       configuredOauths = resp.configuredOauths;
 
-      cssLoad(cdn + "/css/commento.css", "window.loadCssOverride()");
+      cssLoad(cdn + "/css/commento.css", "window.commento.loadCssOverride()");
 
       call(callback);
     });
@@ -418,9 +432,11 @@
       classAdd(loginButton, "login-button");
       classAdd(anonymousButton, "anonymous-button");
 
-      attrSet(createButton, "onclick", "loginBoxShow()");
-      attrSet(loginButton, "onclick", "loginBoxShow(); loginSwitch(true);");
-      attrSet(anonymousButton, "onclick", "anonymousChoose()");
+      onclick(createButton, global.loginBoxShow);
+      onclick(loginButton, global.loginBoxShow);
+      onclick(loginButton, global.loginSwitch);
+      onclick(anonymousButton, global.anonymousChoose);
+
       attrSet(textarea, "disabled", true);
 
       createButton.innerText = "Create an Account";
@@ -437,8 +453,9 @@
       append(textareaContainer, buttonsContainer);
     }
     else {
+      onclick(textarea, global.showSubmitButton, id);
+
       attrSet(textarea, "placeholder", "Join the discussion!");
-      attrSet(textarea, "onclick", "showSubmitButton('" + id + "')");
     }
 
     textarea.oninput = autoExpander(textarea);
@@ -683,7 +700,6 @@
       if (commenter.photo == "undefined") {
         avatar = create("div");
         avatar.style["background"] = color;
-        avatar.style["boxShadow"] = "0px 0px 0px 2px " + color;
         avatar.innerHTML = commenter.name[0].toUpperCase();
         classAdd(avatar, "avatar");
       } else {
@@ -735,35 +751,22 @@
           classAdd(downvote, "downvoted");
       }
 
-      attrSet(edit, "onclick", "startEdit('" + comment.commentHex + "')");
-      attrSet(collapse, "onclick", "commentCollapse('" + comment.commentHex + "')");
-      attrSet(approve, "onclick", "commentApprove('" + comment.commentHex + "')");
-      attrSet(remove, "onclick", "commentDelete('" + comment.commentHex + "')");
-      attrSet(sticky, "onclick", "commentSticky('" + comment.commentHex + "')");
+      onclick(collapse, global.commentCollapse, comment.commentHex);
+      onclick(approve, global.commentApprove, comment.commentHex);
+      onclick(remove, global.commentDelete, comment.commentHex);
+      onclick(sticky, global.commentSticky, comment.commentHex);
 
-      if (isAuthenticated) {
-        if (comment.direction > 0) {
-          attrSet(upvote, "onclick", "vote('" + comment.commentHex + "', 1, 0)");
-          attrSet(downvote, "onclick", "vote('" + comment.commentHex + "', 1, -1)");
-        }
-        else if (comment.direction < 0) {
-          attrSet(upvote, "onclick", "vote('" + comment.commentHex + "', -1, 1)");
-          attrSet(downvote, "onclick", "vote('" + comment.commentHex + "', -1, 0)");
-        }
-        else {
-          attrSet(upvote, "onclick", "vote('" + comment.commentHex + "', 0, 1)");
-          attrSet(downvote, "onclick", "vote('" + comment.commentHex + "', 0, -1)");
-        }
-      }
+      if (isAuthenticated)
+        upDownOnclickSet(upvote, downvote, comment.commentHex, comment.direction);
       else {
-        attrSet(upvote, "onclick", "loginBoxShow()");
-        attrSet(downvote, "onclick", "loginBoxShow()");
+        onclick(upvote, global.loginBoxShow);
+        onclick(downvote, global.loginBoxShow);
       }
 
       if (isAuthenticated || chosenAnonymous)
-        attrSet(reply, "onclick", "replyShow('" + comment.commentHex + "')");
+        onclick(reply, global.replyShow, comment.commentHex);
       else
-        attrSet(reply, "onclick", "loginBoxShow()");
+        onclick(reply, global.loginBoxShow);
 
       if (commenter.link != "undefined" && commenter.link != "https://undefined" && commenter.link != "")
         attrSet(name, "href", commenter.link);
@@ -867,6 +870,22 @@
   }
 
 
+  function upDownOnclickSet(upvote, downvote, commentHex, direction) {
+    if (direction > 0) {
+      onclick(upvote, global.vote, commentHex, 1, 0);
+      onclick(downvote, global.vote, commentHex, 1, -1);
+    }
+    else if (direction < 0) {
+      onclick(upvote, global.vote, commentHex, -1, 1);
+      onclick(downvote, global.vote, commentHex, -1, 0);
+    }
+    else {
+      onclick(upvote, global.vote, commentHex, 0, 1);
+      onclick(downvote, global.vote, commentHex, 0, -1);
+    }
+  }
+
+
   global.vote = function(commentHex, oldVote, direction) {
     var upvote = $(ID_UPVOTE + commentHex);
     var downvote = $(ID_DOWNVOTE + commentHex);
@@ -878,18 +897,7 @@
       "direction": direction,
     };
 
-    if (direction > 0) {
-      attrSet(upvote, "onclick", "vote('" + commentHex + "', 1, 0)");
-      attrSet(downvote, "onclick", "vote('" + commentHex + "', 1, -1)");
-    }
-    else if (direction < 0) {
-      attrSet(upvote, "onclick", "vote('" + commentHex + "', -1, 1)");
-      attrSet(downvote, "onclick", "vote('" + commentHex + "', -1, 0)");
-    }
-    else {
-      attrSet(upvote, "onclick", "vote('" + commentHex + "', 0, 1)");
-      attrSet(downvote, "onclick", "vote('" + commentHex + "', 0, -1)");
-    }
+    upDownOnclickSet(upvote, downvote, commentHex, direction);
 
     classRemove(upvote, "upvoted");
     classRemove(downvote, "downvoted");
@@ -919,7 +927,7 @@
 
     replyButton.title = "Cancel reply";
 
-    attrSet(replyButton, "onclick", "replyCollapse('" + id + "')")
+    onclick(replyButton, global.replyCollapse, id);
   };
 
 
@@ -936,7 +944,7 @@
 
     replyButton.title = "Reply to this comment";
 
-    attrSet(replyButton, "onclick", "replyShow('" + id + "')")
+    onclick(replyButton, global.replyShow, id)
   }
 
 
@@ -951,7 +959,7 @@
 
     button.title = "Expand";
 
-    attrSet(button, "onclick", "commentUncollapse('" + id + "')");
+    onclick(button, global.commentUncollapse, id);
   }
 
 
@@ -966,7 +974,7 @@
 
     button.title = "Collapse";
 
-    attrSet(button, "onclick", "commentCollapse('" + id + "')");
+    onclick(button, global.commentCollapse, id);
   }
 
 
@@ -1009,7 +1017,7 @@
     classAdd(submit, "submit-button");
     classAdd(el, "button-margin");
 
-    attrSet(submit, "onclick", "commentNew('" + id + "')");
+    onclick(submit, global.commentNew, id);
 
     append(el, submit);
   }
@@ -1048,7 +1056,7 @@
     $(ID_ROOT).innerHTML = "";
     shownSubmitButton = {"root": false};
     shownReply = {};
-    main(callback);
+    global.main(callback);
   }
 
 
@@ -1116,14 +1124,15 @@
     oauthPretext.innerText = "Or proceed with social login.";
     anonymousButton.innerText = "Comment anonymously";
 
+    onclick(emailButton, global.passwordAsk);
+    onclick(loginLink, global.loginSwitch);
+    onclick(anonymousButton, global.anonymousChoose);
+    onclick(close, global.loginBoxClose);
+
     attrSet(loginBoxContainer, "style", "display: none; opacity: 0;");
     attrSet(emailInput, "name", "email");
     attrSet(emailInput, "placeholder", "Email address");
     attrSet(emailInput, "type", "text");
-    attrSet(emailButton, "onclick", "passwordAsk()");
-    attrSet(loginLink, "onclick", "loginSwitch()");
-    attrSet(anonymousButton, "onclick", "anonymousChoose()");
-    attrSet(close, "onclick", "loginBoxClose()");
 
     for (var i = 0; i < configuredOauths.length; i++) {
       var button = create("button");
@@ -1133,7 +1142,7 @@
 
       button.innerText = configuredOauths[i];
 
-      attrSet(button, "onclick", "commentoAuth('" + configuredOauths[i] + "')");
+      onclick(button, global.commentoAuth, configuredOauths[i]); 
 
       append(oauthButtons, button);
     }
@@ -1181,7 +1190,7 @@
     loginLink.innerText = "Don't have an account? Sign up.";
     subtitle.innerText = "Enter your email address to start with.";
 
-    attrSet(loginLink, "onclick", "signupSwitch()");
+    onclick(loginLink, global.signupSwitch);
 
     loginBoxType = "login";
 
@@ -1195,8 +1204,8 @@
 
 
   global.signupSwitch = function() {
-    loginBoxClose();
-    loginBoxShow();
+    global.loginBoxClose();
+    global.loginBoxShow();
   }
 
 
@@ -1208,7 +1217,7 @@
 
     post(origin + "/api/commenter/login", json, function(resp) {
       if (!resp.success) {
-        loginBoxClose();
+        global.loginBoxClose();
         errorShow(resp.message);
         return
       }
@@ -1242,7 +1251,7 @@
 
     post(origin + "/api/commenter/new", json, function(resp) {
       if (!resp.success) {
-        loginBoxClose();
+        global.loginBoxClose();
         errorShow(resp.message);
         return
       }
@@ -1320,9 +1329,9 @@
         fieldButton.innerText = loginBoxType;
 
         if (loginBoxType == "signup")
-          attrSet(fieldButton, "onclick", "signup()");
+          onclick(fieldButton, global.signup);
         else
-          attrSet(fieldButton, "onclick", "login()");
+          onclick(fieldButton, global.login);
 
         append(field, fieldButton);
       }
@@ -1331,7 +1340,7 @@
     }
 
     if (loginBoxType == "signup")
-      $(ID_LOGIN_BOX_PASSWORD_NAME).focus();
+      $(ID_LOGIN_BOX_NAME_INPUT).focus();
     else
       $(ID_LOGIN_BOX_PASSWORD_INPUT).focus();
   }
@@ -1424,15 +1433,15 @@
     lock.id = ID_MOD_TOOLS_LOCK_BUTTON;
 
     classAdd(modTools, "mod-tools");
-    classAdd(lock, "mod-tools-lock-button");
 
     if (isLocked)
       lock.innerHTML = "Unlock Thread";
     else
       lock.innerHTML = "Lock Thread";
 
+    onclick(lock, global.threadLockToggle);
+
     attrSet(modTools, "style", "display: none");
-    attrSet(lock, "onclick", "threadLockToggle()");
 
     append(modTools, lock);
     append(root, modTools);
@@ -1543,7 +1552,7 @@
     dataTagsLoad();
 
     if (autoInit == "true" || autoInit === undefined)
-      main(undefined);
+      global.main(undefined);
     else if (autoInit != "false")
       console.log("[commento] error: invalid value for data-auto-init; allowed values: true, false");
   }
diff --git a/frontend/js/dashboard-danger.js b/frontend/js/dashboard-danger.js
index fd6fca0..c9f153e 100644
--- a/frontend/js/dashboard-danger.js
+++ b/frontend/js/dashboard-danger.js
@@ -11,9 +11,9 @@
   global.domainDeleteHandler = function() {
     var data = global.dashboard.$data;
 
-    domainDelete(data.domains[data.cd].domain, function(success) {
+    global.domainDelete(data.domains[data.cd].domain, function(success) {
       if (success)
-        document.location = global.commentoOrigin + '/dashboard';
+        document.location = global.origin + '/dashboard';
     });
   }
 
@@ -23,7 +23,7 @@
     var data = global.dashboard.$data;
 
     data.domains[data.cd].state = "frozen"
-    domainUpdate(data.domains[data.cd])
+    global.domainUpdate(data.domains[data.cd])
     document.location.hash = "#modal-close";
   }
 
@@ -33,9 +33,9 @@
     var data = global.dashboard.$data;
 
     data.domains[data.cd].state = "unfrozen"
-    domainUpdate(data.domains[data.cd])
+    global.domainUpdate(data.domains[data.cd])
     document.location.hash = "#modal-close";
   }
 
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/dashboard-domain.js b/frontend/js/dashboard-domain.js
index d00863f..47e3c7c 100644
--- a/frontend/js/dashboard-domain.js
+++ b/frontend/js/dashboard-domain.js
@@ -7,7 +7,7 @@
 
     for (var i = 0; i < domains.length; i++) {
       if (domains[i].domain == domain) {
-        vs("frozen", domains[i].state == "frozen");
+        global.vs("frozen", domains[i].state == "frozen");
         domains[i].selected = true;
         data.cd = i;
         data.importedComments = domains[i].importedComments;
@@ -18,7 +18,7 @@
 
     data.showSettings = true;
 
-    settingDeselectAll();
+    global.settingDeselectAll();
     $(".view").hide();
   };
 
@@ -42,7 +42,7 @@
     }
 
     global.buttonDisable("#add-site-button");
-    global.post(global.commentoOrigin + "/api/domain/new", json, function(resp) {
+    global.post(global.origin + "/api/domain/new", json, function(resp) {
       global.buttonEnable("#add-site-button");
 
       $("#new-domain-name").val("");
@@ -69,7 +69,7 @@
       "ownerToken": global.cookieGet("commentoOwnerToken"),
     };
 
-    global.post(global.commentoOrigin + "/api/domain/list", json, function(resp) {
+    global.post(global.origin + "/api/domain/list", json, function(resp) {
       if (!resp.success) {
         global.globalErrorShow(resp.message);
         return;
@@ -111,7 +111,7 @@
       "domain": domain,
     };
 
-    global.post(global.commentoOrigin + "/api/domain/update", json, function(resp) {
+    global.post(global.origin + "/api/domain/update", json, function(resp) {
       if (callback !== undefined)
         callback(resp.success);
 
@@ -130,7 +130,7 @@
       "domain": domain,
     };
 
-    global.post(global.commentoOrigin + "/api/domain/delete", json, function(resp) {
+    global.post(global.origin + "/api/domain/delete", json, function(resp) {
       if (!resp.success) {
         global.globalErrorShow(resp.message);
         return;
@@ -141,4 +141,4 @@
     });
   }
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/dashboard-general.js b/frontend/js/dashboard-general.js
index a9f06ce..0b33cdb 100644
--- a/frontend/js/dashboard-general.js
+++ b/frontend/js/dashboard-general.js
@@ -16,4 +16,4 @@
     });
   };
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/dashboard-import.js b/frontend/js/dashboard-import.js
index ebeecaf..fb2c332 100644
--- a/frontend/js/dashboard-import.js
+++ b/frontend/js/dashboard-import.js
@@ -6,7 +6,6 @@
     $("#import-view").show();
   }
 
-
   global.importDisqus = function() {
     var url = $("#disqus-url").val();
     var data = global.dashboard.$data;
@@ -18,7 +17,7 @@
     }
 
     global.buttonDisable("#disqus-import-button");
-    global.post(global.commentoOrigin + "/api/domain/import/disqus", json, function(resp) {
+    global.post(global.origin + "/api/domain/import/disqus", json, function(resp) {
       global.buttonEnable("#disqus-import-button");
 
       if (!resp.success) {
@@ -28,8 +27,8 @@
 
       $("#disqus-import-button").hide();
 
-      globalOKShow("Imported " + resp.numImported + " comments!");
+      global.globalOKShow("Imported " + resp.numImported + " comments!");
     });
   }
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/dashboard-installation.js b/frontend/js/dashboard-installation.js
index d50a728..033a3ab 100644
--- a/frontend/js/dashboard-installation.js
+++ b/frontend/js/dashboard-installation.js
@@ -19,4 +19,4 @@
     $("#installation-view").show();
   };
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/dashboard-moderation.js b/frontend/js/dashboard-moderation.js
index 8760429..df84952 100644
--- a/frontend/js/dashboard-moderation.js
+++ b/frontend/js/dashboard-moderation.js
@@ -29,7 +29,7 @@
     if (idx == -1) {
       data.domains[data.cd].moderators.push({"email": email, "timeAgo": "just now"});
       global.buttonDisable("#new-mod-button");
-      global.post(global.commentoOrigin + "/api/domain/moderator/new", json, function(resp) {
+      global.post(global.origin + "/api/domain/moderator/new", json, function(resp) {
         global.buttonEnable("#new-mod-button");
 
         if (!resp.success) {
@@ -68,15 +68,15 @@
 
     if (idx != -1) {
       data.domains[data.cd].moderators.splice(idx, 1);
-      global.post(global.commentoOrigin + "/api/domain/moderator/delete", json, function(resp) {
+      global.post(global.origin + "/api/domain/moderator/delete", json, function(resp) {
         if (!resp.success) {
           global.globalErrorShow(resp.message);
           return
         }
 
-        globalOKShow("Removed!");
+        global.globalOKShow("Removed!");
       });
     }
   }
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/dashboard-setting.js b/frontend/js/dashboard-setting.js
index 56008ef..bf9a17a 100644
--- a/frontend/js/dashboard-setting.js
+++ b/frontend/js/dashboard-setting.js
@@ -43,4 +43,4 @@
       settings[i].selected = false;
   }
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/dashboard-statistics.js b/frontend/js/dashboard-statistics.js
index c318452..2ed07c1 100644
--- a/frontend/js/dashboard-statistics.js
+++ b/frontend/js/dashboard-statistics.js
@@ -16,15 +16,15 @@
     var res;
 
     if (x < 1000000) {
-      res = numberify((x/1000).toFixed(0))
+      res = global.numberify((x/1000).toFixed(0))
       res.units = "K"
     }
     else if (x < 1000000000) {
-      res = numberify((x/1000000).toFixed(0))
+      res = global.numberify((x/1000000).toFixed(0))
       res.units = "M"
     }
     else if (x < 1000000000000) {
-      res = numberify((x/1000000000).toFixed(0))
+      res = global.numberify((x/1000000000).toFixed(0))
       res.units = "B"
     }
 
@@ -43,11 +43,11 @@
     }
 
     $(".view").hide();
-    post(global.commentoOrigin + "/api/domain/statistics", json, function(resp) {
+    global.post(global.origin + "/api/domain/statistics", json, function(resp) {
       $("#statistics-view").show();
 
       if (!resp.success) {
-        globalErrorShow(resp.message);
+        global.globalErrorShow(resp.message);
         return;
       }
 
@@ -97,4 +97,4 @@
     });
   }
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/dashboard.js b/frontend/js/dashboard.js
index a5b918e..c3f9922 100644
--- a/frontend/js/dashboard.js
+++ b/frontend/js/dashboard.js
@@ -23,42 +23,42 @@
         "text": "Installation",
         "meaning": "Install Commento with HTML",
         "selected": false,
-        "open": installationOpen,
+        "open": global.installationOpen,
       },
       {
         "id": "general",
         "text": "Configure Domain",
         "meaning": "Names, domains and the rest",
         "selected": false,
-        "open": generalOpen,
+        "open": global.generalOpen,
       },
       {
         "id": "moderation",
         "text": "Moderation Settings",
         "meaning": "Manage list of moderators",
         "selected": false,
-        "open": moderationOpen,
+        "open": global.moderationOpen,
       },
       {
         "id": "statistics",
         "text": "View Activity",
         "meaning": "Usage and comment statistics",
         "selected": false,
-        "open": statisticsOpen,
+        "open": global.statisticsOpen,
       },
       {
         "id": "import",
         "text": "Import Comments",
         "meaning": "Import from a different service",
         "selected": false,
-        "open": importOpen,
+        "open": global.importOpen,
       },
       {
         "id": "danger",
         "text": "Danger Zone",
         "meaning": "Delete or freeze domain",
         "selected": false,
-        "open": dangerOpen,
+        "open": global.dangerOpen,
       },
     ];
 
@@ -86,4 +86,4 @@
       callback();
   };
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/errors.js b/frontend/js/errors.js
index 2a901e4..cba123d 100644
--- a/frontend/js/errors.js
+++ b/frontend/js/errors.js
@@ -28,4 +28,4 @@
     global.showGlobalMessage("#global-ok", text);
   }
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/forgot.js b/frontend/js/forgot.js
index 44d80a2..29f6385 100644
--- a/frontend/js/forgot.js
+++ b/frontend/js/forgot.js
@@ -16,7 +16,7 @@
     };
 
     global.buttonDisable("#reset-button");
-    global.post(global.commentoOrigin + "/api/owner/send-reset-hex", json, function(resp) {
+    global.post(global.origin + "/api/owner/send-reset-hex", json, function(resp) {
       global.buttonEnable("#reset-button");
 
       global.textSet("#err", "");
@@ -30,4 +30,4 @@
     });
   }
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/http.js b/frontend/js/http.js
index 57790e5..d65e647 100644
--- a/frontend/js/http.js
+++ b/frontend/js/http.js
@@ -28,4 +28,4 @@
     });
   }
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/login.js b/frontend/js/login.js
index f43c07d..b0beddc 100644
--- a/frontend/js/login.js
+++ b/frontend/js/login.js
@@ -15,7 +15,7 @@
 
   // Shows messages produced from password reset attempts.
   function displayChangedPassword() {
-    var changed = paramGet("changed");
+    var changed = global.paramGet("changed");
 
     if (changed == "true") {
       $("#msg").html("Password changed successfully! Login to continue.")
@@ -24,7 +24,7 @@
 
   // Shows messages produced from completed signups.
   function displaySignedUp() {
-    var signedUp = paramGet("signedUp");
+    var signedUp = global.paramGet("signedUp");
 
     if (signedUp == "true") {
       $("#msg").html("Registration successful! Login to continue.")
@@ -57,7 +57,7 @@
     };
 
     global.buttonDisable("#login-button");
-    global.post(global.commentoOrigin + "/api/owner/login", json, function(resp) {
+    global.post(global.origin + "/api/owner/login", json, function(resp) {
       global.buttonEnable("#login-button");
 
       if (!resp.success) {
@@ -66,8 +66,8 @@
       }
 
       global.cookieSet("commentoOwnerToken", resp.ownerToken);
-      document.location = global.commentoOrigin + "/dashboard";
+      document.location = global.origin + "/dashboard";
     });
   };
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/logout.js b/frontend/js/logout.js
index 6b01606..0bbb5fc 100644
--- a/frontend/js/logout.js
+++ b/frontend/js/logout.js
@@ -2,7 +2,7 @@
 
   global.logout = function() {
     global.cookieDelete("commentoOwnerToken");
-    document.location = global.commentoOrigin + "/login";
+    document.location = global.origin + "/login";
   }
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/reset.js b/frontend/js/reset.js
index a59676b..4586dbd 100644
--- a/frontend/js/reset.js
+++ b/frontend/js/reset.js
@@ -21,7 +21,7 @@
     };
 
     global.buttonDisable("#reset-button");
-    global.post(global.commentoOrigin + "/api/owner/reset-password", json, function(resp) {
+    global.post(global.origin + "/api/owner/reset-password", json, function(resp) {
       global.buttonEnable("#reset-button");
 
       global.textSet("#err", "");
@@ -30,8 +30,8 @@
         return
       }
 
-      document.location = global.commentoOrigin + "/login?changed=true";
+      document.location = global.origin + "/login?changed=true";
     });
   }
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/self.js b/frontend/js/self.js
index 0e4c6c4..1c2925d 100644
--- a/frontend/js/self.js
+++ b/frontend/js/self.js
@@ -7,14 +7,14 @@
     };
 
     if (json.ownerToken === undefined) {
-      document.location = global.commentoOrigin + "/login";
+      document.location = global.origin + "/login";
       return;
     }
 
-    global.post(global.commentoOrigin + "/api/owner/self", json, function(resp) {
+    global.post(global.origin + "/api/owner/self", json, function(resp) {
       if (!resp.success || !resp.loggedIn) {
         global.cookieDelete("commentoOwnerToken");
-        document.location = global.commentoOrigin + "/login";
+        document.location = global.origin + "/login";
         return;
       }
 
@@ -23,4 +23,4 @@
     });
   };
 
-}(window, document));
+}(window.commento, document));
diff --git a/frontend/js/signup.js b/frontend/js/signup.js
index bbc1819..0167275 100644
--- a/frontend/js/signup.js
+++ b/frontend/js/signup.js
@@ -9,7 +9,7 @@
       return;
     }
 
-    var all_ok = unfilledMark(["#email", "#name", "#password", "#password2"], function(el) {
+    var all_ok = global.unfilledMark(["#email", "#name", "#password", "#password2"], function(el) {
       el.css("border-bottom", "1px solid red");
     });
 
@@ -25,7 +25,7 @@
     };
 
     global.buttonDisable("#signup-button");
-    post(global.commentoOrigin + "/api/owner/new", json, function(resp) {
+    global.post(global.origin + "/api/owner/new", json, function(resp) {
       global.buttonEnable("#signup-button")
 
       if (!resp.success) {
@@ -34,10 +34,10 @@
       }
 
       if (resp.confirmEmail)
-        document.location = global.commentoOrigin + "/confirm-email";
+        document.locatidocumenton = global.origin + "/confirm-email";
       else
-        document.location = global.commentoOrigin + "/login?signedUp=true";
+        document.location = global.origin + "/login?signedUp=true";
     });
   };
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/js/utils.js b/frontend/js/utils.js
index 06fd694..1891483 100644
--- a/frontend/js/utils.js
+++ b/frontend/js/utils.js
@@ -72,7 +72,7 @@
     expires = "; expires=" + date.toUTCString();
 
     var cookieString = name + "=" + value + expires + "; path=/";
-    if (/^https:\/\//i.test(commentoOrigin))
+    if (/^https:\/\//i.test(origin))
       cookieString += "; secure";
 
     document.cookie = cookieString;
@@ -115,4 +115,4 @@
       return "just now";
   }
 
-} (window, document));
+} (window.commento, document));
diff --git a/frontend/login.html b/frontend/login.html
index 0382c3c..fa202ad 100644
--- a/frontend/login.html
+++ b/frontend/login.html
@@ -16,9 +16,9 @@
 
   <script>
   window.onload = function() {
-    window.loggedInRedirect();
-    window.prefillEmail();
-    window.displayMessages();
+    window.commento.loggedInRedirect();
+    window.commento.prefillEmail();
+    window.commento.displayMessages();
   };
   </script>
 
@@ -41,7 +41,7 @@
       <div class="err" id="err"></div>
       <div class="msg" id="msg"></div>
 
-      <button id="button" class="button" onclick="window.login()">Login</button>
+      <button id="button" class="button" onclick="window.commento.login()">Login</button>
 
       <a class="link" href="[[[.Origin]]]/forgot">Trouble logging in? Reset your password.</a>
       <a class="link" href="[[[.Origin]]]/signup">Don't have an account yet? Sign up.</a>
diff --git a/frontend/logout.html b/frontend/logout.html
index bb8bea3..b51e306 100644
--- a/frontend/logout.html
+++ b/frontend/logout.html
@@ -5,6 +5,6 @@
   </head>
 
   <script>
-    window.onload = window.logout;
+    window.onload = window.commento.logout;
   </script>
 </html>
diff --git a/frontend/reset-password.html b/frontend/reset-password.html
index 27e821b..e1e6aba 100644
--- a/frontend/reset-password.html
+++ b/frontend/reset-password.html
@@ -32,7 +32,7 @@
 
       <div class="err" id="err"></div>
       <div class="msg" id="msg"></div>
-      <button id="reset-button" class="button" onclick="resetPassword()">Reset Password</button>
+      <button id="reset-button" class="button" onclick="window.commento.resetPassword()">Reset Password</button>
     </div>
   </div>
 
diff --git a/frontend/sass/commento-input.scss b/frontend/sass/commento-input.scss
index 4fde262..454e020 100644
--- a/frontend/sass/commento-input.scss
+++ b/frontend/sass/commento-input.scss
@@ -188,18 +188,3 @@ textarea {
 .commento-button-margin {
   padding-bottom: 60px;
 }
-
-.commento-mod-tools-lock-button {
-  color: $gray-6;
-  background: none;
-  border: none;
-  font-weight: bold;
-  font-size: 12px;
-  text-transform: uppercase;
-  margin-left: 12px;
-  padding: 2px;
-}
-
-.commento-mod-tools-lock-button:hover {
-  cursor: pointer;
-}
diff --git a/frontend/sass/commento.scss b/frontend/sass/commento.scss
index ef40905..6e50321 100644
--- a/frontend/sass/commento.scss
+++ b/frontend/sass/commento.scss
@@ -5,13 +5,16 @@
 }
 
 .commento-root {
-  font-family: "Source Sans Pro", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size: 15px;
-  line-height: 1.5;
-  color: #50596c;
   overflow-x: hidden;
-  text-rendering: optimizeLegibility;
-  padding: 8px;
+  padding: 0px;
+
+  * {
+    font-family: "Source Sans Pro", "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+    font-size: 15px;
+    line-height: 1.5;
+    color: #50596c;
+    text-rendering: optimizeLegibility;
+  }
 
   @import "colors-main.scss";
   @import "common-main.scss";
@@ -46,13 +49,24 @@
 
   .commento-mod-tools {
     margin-bottom: 16px;
+
+    button {
+      text-transform: uppercase;
+      color: $gray-7;
+      font-size: 13px;
+      font-weight: 700;
+      cursor: pointer;
+      margin-left: 12px;
+      background: none;
+      border: none;
+    }
   }
 
   .commento-mod-tools::before {
-    content: "Moderators";
+    content: "Moderator Tools";
     text-transform: uppercase;
     color: $indigo-8;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
   }
 
@@ -71,8 +85,8 @@
   }
 
   .commento-avatar {
-    width: 34px;
-    height: 34px;
+    width: 38px;
+    height: 38px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
@@ -81,8 +95,7 @@
     font-size: 22px;
     float: left;
     margin-right: 10px;
-    border: 1px solid #fff;
-    box-shadow: 0px 0px 0px 2px #f00;
+    border: 0px transparent;
   }
 
   .commento-avatar-img {
diff --git a/frontend/signup.html b/frontend/signup.html
index e881e4a..f869bee 100644
--- a/frontend/signup.html
+++ b/frontend/signup.html
@@ -16,8 +16,8 @@
 
   <script>
   window.onload = function() {
-    window.loggedInRedirect();
-    window.prefillEmail();
+    window.commento.loggedInRedirect();
+    window.commento.prefillEmail();
   };
   </script>
 
@@ -54,7 +54,7 @@
       <p class="cent">
       </p>
 
-      <button id="signup-button" class="button" onclick="window.signup()">Sign up</button>
+      <button id="signup-button" class="button" onclick="window.commento.signup()">Sign up</button>
 
       <a class="link" href="[[[.Origin]]]/login">Already have an account? Login instead.</a>
     </div>