1 files changed, 67 insertions, 27 deletions

diff --git a/public/assets/js/lib/views/details/settings.js b/public/assets/js/lib/views/details/settings.js
index 1124826..0a77774 100644
--- a/public/assets/js/lib/views/details/settings.js
+++ b/public/assets/js/lib/views/details/settings.js
@@ -8,6 +8,10 @@ var ThreadSettingsForm = FormView.extend({
     "click .thread_delete": "deleteThread",
     "click .close_link": "hide",
     "change [name=color]": "changeColor",
+    "change [name=privacy]": "toggleAllowed",
+    "click #allowed_names [type=checkbox]": "removeAllowed",
+    "keydown [name=allowed_field]": "keydownAllowed",
+    "blur [name=allowed_field]": "updateAllowed",
   },
   
   action: "",
@@ -29,7 +33,9 @@ var ThreadSettingsForm = FormView.extend({
     var settings = thread.settings
     var display = thread.display
     
+    this.thread = thread
     this.action = "/api/thread/" + thread.id
+    this.allowed = (this.thread.allowed || "").split(" ").map(s => s.trim()).filter(s => !! s)
 
     this.$(".close_link").attr("href", "/details/" + thread.id)
     this.$(".metadata").html(metadata(thread))
@@ -38,6 +44,7 @@ var ThreadSettingsForm = FormView.extend({
     this.$("[name=hootbox]").prop("checked", !!thread.settings.hootbox)
     this.$("[name=shorturls]").prop("checked", !!thread.settings.shorturls)
     this.$("[name=noupload]").prop("checked", !!thread.settings.noupload)
+    this.$("[name=privacy]").prop("checked", !!thread.privacy)
     
     var $color = this.$('[name=color]')
     Object.keys(COLORS).forEach((color) => {
@@ -48,13 +55,13 @@ var ThreadSettingsForm = FormView.extend({
     })
     $color.val(thread.color || keyword ? keyword.color : "")
     
+    this.toggleAllowed()
     this.fetchKeywords()
-//     this.fetchAllowedUsers(thread)
 
     $("body").removeClass("loading")
   },
   
-  fetchKeywords: function(){
+  fetchKeywords: function(thread){
     $.get('/api/keywords', function(data){
       var $keyword = this.$('[name=keyword]')
       data.keywords
@@ -66,33 +73,62 @@ var ThreadSettingsForm = FormView.extend({
         option.innerHTML = keyword
         $keyword.append(option)
       })
-      $keyword.val(thread.keyword)
+      $keyword.val(this.thread.keyword)
     }.bind(this))
   },
   
-//   fetchAllowedUsers: function(thread){
-//     var usernameRegexp = new RegExp('{{username}}', g)
-//     $.get('/api/thread/' + thread.id + '/interested', function(data){
-//       var $allowed = this.$(".allowed")
-//       var tmpl = this.allowedTemplate
-//       // make a lookup of existing users 
-//       var allowed = {}
-//       thread.allowed.split(" ").forEach((username) => {
-//         
-//       })
-//       // build the ui
-//       data.interestedUsers
-//       .map( (a) => a.username)
-//       .sort( (a,b) => a < b ? -1 : a === b ? 0 : 1 )
-//       .forEach((username) => {
-//         var t = tmpl.replace(usernameRegexp, "")
-//           .replace('{{checked}}', 
-//         $keyword.append(option)
-//       })
-//       $keyword.val(thread.keyword)
-//     }.bind(this))
-//   },
-    
+  toggleAllowed: function(e){
+    var checked = this.$('[name=privacy]').prop('checked')
+    this.$(".allowed_field_container").toggle(checked)
+    this.$(".allowed_names").toggle(checked)
+    if (! checked) return
+    this.$("[name=allowed_field]").focus()
+    this.displayAllowed()
+  },
+  
+  displayAllowed: function(e){
+    var $allowedNames = this.$(".allowed_names").empty()
+    this.allowed.forEach(username => {
+      var t = this.allowedTemplate.replace(/{{username}}/g, username)
+      $allowedNames.append(t)
+    })
+  },
+  
+  keydownAllowed: function(e){
+    if (e.keyCode === 13) { // enter
+      e.preventDefault()
+      e.stopPropagation()
+      this.updateAllowed()
+    }
+  },
+  
+  updateAllowed: function(){
+    var usernames = this.$('[name=allowed_field]').val().replace(/,/g, ' ').split(' ').map(s => s.trim()).filter(s => !! s)
+    this.$('[name=allowed_field]').val('')
+    usernames = usernames.filter( (name) => this.allowed.indexOf(name) === -1 )
+      .map( (name) => sanitize(name) )
+    $.ajax({
+      method: "PUT",
+      url: "/api/checkUsernames",
+      headers: { "csrf-token": $("[name=_csrf]").attr("value") },
+      data: JSON.stringify({ csrf: csrf(), usernames: usernames }),
+      contentType: "application/json",
+      dataType: "json",
+      success: function(data){
+        if (! data.usernames || ! data.usernames.length) return
+        this.allowed = this.allowed.concat(data.usernames)
+        this.displayAllowed()
+      }.bind(this),
+    })
+  },
+  
+  removeAllowed: function(){
+    this.allowed = this.$("#allowed_names input[type=checkbox]:checked").map(function(){
+      return $(this).val()
+    })
+    this.displayAllowed()
+  },
+  
   validate: function(){
     var errors = []
     var title = $("[name=title]").val()
@@ -107,11 +143,13 @@ var ThreadSettingsForm = FormView.extend({
       title: $("[name=title]").val(),
       keyword: $("[name=keyword]").val(),
       color: $("[name=color]").val(),
+      privacy: $("[name=privacy]:checked").val() ? 1 : 0,
+      allowed: this.allowed.join(","),
       settings: {
         hootbox: $("[name=hootbox]:checked").val() ? true : false,
         shorturls: $("[name=shorturls]:checked").val() ? true : false,
         noupload: $("[name=noupload]:checked").val() ? true : false,
-      }
+      },
     }
     return JSON.stringify(data)
   },
@@ -125,6 +163,7 @@ var ThreadSettingsForm = FormView.extend({
   
   show: function(){
     this.visible = true
+    app.typing = true
     this.populate()
     this.$el.addClass('visible')
     app.router.pushState("/details/" + this.options.parent.data.thread.id + "/settings")
@@ -133,6 +172,7 @@ var ThreadSettingsForm = FormView.extend({
   hide: function(e){
     e && e.preventDefault()
     this.visible = false
+    app.typing = false
     this.$el.removeClass('visible')
     app.router.pushState("/details/" + this.options.parent.data.thread.id)
   },