api, frontend: add moderator tag to mods in comments

api/comment_list.go

@@ -119,8 +119,6 @@ func commentListHandler(w http.ResponseWriter, r *http.Request) {
 	}
 
 	commenterHex := "anonymous"
-	isModerator := false
-	if *x.CommenterToken != "anonymous" {
 	c, err := commenterGetByCommenterToken(*x.CommenterToken)
 	if err != nil {
 		if err == errorNoSuchToken {
@@ -133,11 +131,12 @@ func commentListHandler(w http.ResponseWriter, r *http.Request) {
 		commenterHex = c.CommenterHex
 	}
 
+	isModerator := false
+	modList := map[string]bool{}
 	for _, mod := range d.Moderators {
+		modList[mod.Email] = true
 		if mod.Email == c.Email {
 			isModerator = true
-				break
-			}
 		}
 	}
 
@@ -149,11 +148,20 @@ func commentListHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	_commenters := map[string]commenter{}
+	for commenterHex, cr := range commenters {
+		if _, ok := modList[cr.Email]; ok {
+			cr.IsModerator = true
+		}
+		cr.Email = ""
+		_commenters[commenterHex] = cr
+	}
+
 	bodyMarshal(w, response{
 		"success":               true,
 		"domain":                domain,
 		"comments":              comments,
-		"commenters":            commenters,
+		"commenters":            _commenters,
 		"requireModeration":     d.RequireModeration,
 		"requireIdentification": d.RequireIdentification,
 		"isFrozen":              d.State == "frozen",

api/commenter.go

@@ -12,4 +12,5 @@ type commenter struct {
 	Photo        string    `json:"photo"`
 	Provider     string    `json:"provider,omitempty"`
 	JoinDate     time.Time `json:"joinDate,omitempty"`
+	IsModerator  bool      `json:"isModerator"`
 }

frontend/js/commento.js

@@ -743,6 +743,9 @@
       if (isModerator && comment.state !== "approved") {
         classAdd(card, "dark-card");
       }
+      if (commenter.isModerator) {
+        classAdd(name, "moderator");
+      }
       if (comment.state === "flagged") {
         classAdd(name, "flagged");
       }

frontend/sass/commento-card.scss

@@ -42,6 +42,17 @@
     border-radius: 100px;
   }
 
+  .commento-moderator::after {
+    content: "Moderator";
+    text-transform: uppercase;
+    font-size: 10px;
+    background: $green-7;
+    color: white;
+    margin-left: 8px;
+    padding: 2px 6px 2px 6px;
+    border-radius: 100px;
+  }
+
   .commento-subtitle {
     display: block;
     color: #999;