collab stuff 90% there

15 files changed, 247 insertions, 57 deletions

diff --git a/public/assets/img/logo.svg b/public/assets/img/logo.svg
new file mode 100644
index 0000000..72b904a
--- /dev/null
+++ b/public/assets/img/logo.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [

+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">

+]>

+<svg version="1.1"

+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"

+	 x="0px" y="0px" width="117px" height="44px" viewBox="-0.896 -0.441 117 44"

+	 overflow="visible" enable-background="new -0.896 -0.441 117 44" xml:space="preserve">

+<defs>

+</defs>

+<path d="M0.54,38.759c0-1.44,0.66-3.72,1.56-6.18c1.38-3.84,3.42-8.22,4.5-11.16c0.48-1.32,0.78-2.34,0.78-2.88

+	c0-0.72-0.24-1.02-0.72-1.02c-1.38,0-4.74,5.16-5.4,6.24c-0.36,0.6-0.48,0.78-0.78,0.78c-0.3,0-0.48-0.06-0.48-0.36

+	c0-0.18,0.18-0.84,0.66-1.62c0.9-1.44,2.22-3.6,3.9-5.28c1.44-1.5,3.12-2.64,4.74-2.64c1.38,0,1.92,1.32,1.92,2.7

+	c0,1.02-0.42,2.58-1.02,4.32c-1.26,3.72-3.359,8.521-4.68,12.18c-0.66,1.92-1.14,3.54-1.14,4.62c0,1.38,0.48,2.459,1.979,2.459

+	c6.48,0,13.56-14.639,13.56-17.759c0-1.2-0.3-1.92-0.6-2.58c-0.42-0.9-0.9-1.62-0.9-3.18c0-1.86,0.84-2.76,1.8-2.76

+	c0.9,0,1.98,1.08,1.98,3.66c0,9.179-9.6,24.66-17.58,24.66c-2.82,0-4.08-1.561-4.08-4.141V38.759z"/>

+<path d="M23.879,38.759c0-1.44,0.66-3.72,1.56-6.18c1.38-3.84,3.42-8.22,4.5-11.16c0.48-1.32,0.78-2.34,0.78-2.88

+	c0-0.72-0.24-1.02-0.72-1.02c-1.38,0-4.74,5.16-5.4,6.24c-0.36,0.6-0.48,0.78-0.78,0.78c-0.3,0-0.48-0.06-0.48-0.36

+	c0-0.18,0.18-0.84,0.66-1.62c0.9-1.44,2.22-3.6,3.9-5.28c1.44-1.5,3.12-2.64,4.74-2.64c1.38,0,1.92,1.32,1.92,2.7

+	c0,1.02-0.42,2.58-1.02,4.32c-1.26,3.72-3.36,8.521-4.68,12.18c-0.66,1.92-1.14,3.54-1.14,4.62c0,1.38,0.48,2.459,1.98,2.459

+	c6.479,0,13.559-14.639,13.559-17.759c0-1.2-0.3-1.92-0.6-2.58c-0.42-0.9-0.9-1.62-0.9-3.18c0-1.86,0.84-2.76,1.8-2.76

+	c0.9,0,1.979,1.08,1.979,3.66c0,9.179-9.6,24.66-17.579,24.66c-2.82,0-4.08-1.561-4.08-4.141V38.759z"/>

+<path d="M44.339,37.799c0-5.22,2.76-10.92,6.36-15.299c3.66-4.44,8.159-7.5,11.759-7.5c2.7,0,3.78,1.44,3.9,1.44

+	s0.48-0.96,0.66-1.44c0.18-0.48,0.3-0.6,1.02-0.6h1.74c0.359,0,0.6,0.06,0.6,0.42c0,0.18-0.119,0.6-0.24,0.9

+	c-1.919,5.82-3.839,11.64-5.819,17.519c-1.14,3.48-1.26,4.381-1.26,5.041c0,0.659,0.3,0.84,0.66,0.84c0.54,0,1.68-1.141,3.72-4.26

+	c1.5-2.28,1.26-2.94,1.86-2.94c0.3,0,0.42,0.181,0.42,0.479c0,0.84-1.38,3.541-3.24,6c-1.8,2.52-4.14,4.8-6.12,4.8

+	c-1.38,0-1.62-0.96-1.62-2.159c0-0.961,0.24-2.101,0.72-3.66c0.54-1.98,1.5-4.62,2.82-8.52l-0.12-0.12

+	c-2.16,3.3-9.36,14.459-14.1,14.459c-2.76,0-3.72-2.159-3.72-5.339V37.799z M65.338,18.839c0-1.8-1.08-2.76-2.76-2.76

+	c-3,0-6.6,3.72-9.48,8.22c-2.82,4.5-4.919,9.839-4.919,13.019c0,1.561,0.54,2.641,1.86,2.641c2.22,0,6.06-4.26,9.3-9

+	c3.3-4.74,6-10.02,6-12.06V18.839z"/>

+<path d="M72.178,39.839c0-1.08,0.479-3.479,1.2-6.479c1.74-7.02,4.979-17.52,6.6-23.64c0.66-2.46,1.08-4.2,1.08-4.8

+	c0-0.78-0.24-1.32-1.62-1.44c-1.14-0.12-1.38-0.3-1.38-0.78c0.061-0.42,0.779-0.66,1.8-0.66c2.58,0,4.2-0.78,5.16-1.38

+	c0.6-0.36,0.96-0.66,1.14-0.66c0.3,0,0.42,0.12,0.42,0.48c0,0.3-0.6,1.56-1.14,3.479c-5.04,17.759-7.38,25.799-8.46,29.698

+	c-0.84,3.061-0.96,3.84-0.96,4.681c0,0.6,0.3,1.02,0.78,1.02c0.84,0,1.619-0.659,3.479-3.72c1.08-1.74,1.92-4.199,2.46-4.199

+	c0.301,0,0.42,0.239,0.42,0.539c0,0.42-0.84,2.521-2.16,4.74c-1.739,3-4.319,6.24-6.719,6.24c-1.681,0-2.101-1.32-2.101-3.061

+	V39.839z"/>

+<path d="M85.497,39.839c0-1.08,0.48-3.479,1.2-6.479c1.739-7.02,4.979-17.52,6.6-23.64c0.66-2.46,1.08-4.2,1.08-4.8

+	c0-0.78-0.24-1.32-1.62-1.44c-1.14-0.12-1.38-0.3-1.38-0.78c0.06-0.42,0.78-0.66,1.8-0.66c2.58,0,4.2-0.78,5.16-1.38

+	c0.6-0.36,0.96-0.66,1.14-0.66c0.3,0,0.42,0.12,0.42,0.48c0,0.3-0.6,1.56-1.14,3.479c-5.04,17.759-7.38,25.799-8.46,29.698

+	c-0.84,3.061-0.96,3.84-0.96,4.681c0,0.6,0.301,1.02,0.78,1.02c0.84,0,1.62-0.659,3.479-3.72c1.08-1.74,1.92-4.199,2.46-4.199

+	c0.3,0,0.42,0.239,0.42,0.539c0,0.42-0.84,2.521-2.159,4.74c-1.74,3-4.32,6.24-6.721,6.24c-1.68,0-2.1-1.32-2.1-3.061V39.839z"/>

+<path d="M111.416,34.619c0,2.34-0.96,4.439-2.46,5.939c-1.68,1.68-4.02,2.64-6.479,2.64c-1.86,0-3.84-0.78-5.04-1.56

+	c-0.6-0.42-1.02-0.84-1.02-1.2c0-0.96,0.359-3.12,0.959-5.819c0.42-1.98,0.48-2.34,1.08-2.34c0.541,0,0.601,0.359,0.601,2.16

+	c0,3.84,1.2,7.319,4.92,7.319c2.34,0,4.2-2.46,4.2-4.74c0-2.819-1.561-4.979-3.24-6.96c-1.68-1.979-3.24-4.08-3.24-6.899

+	c0-4.38,3.24-8.76,7.859-8.76c3,0,5.82,1.38,5.82,2.1c0,1.14-0.301,2.4-0.66,3.9c-0.72,2.76-0.779,3.06-1.38,3.06

+	c-0.899,0-0.78-1.92-1.08-3.84c-0.3-1.86-1.08-3.78-3.6-3.78c-2.34,0-4.08,2.04-4.08,4.439s1.62,4.44,3.24,6.6

+	c1.8,2.34,3.6,4.68,3.6,7.68V34.619z"/>

+</svg>

diff --git a/public/assets/javascripts/ui/editor/Collaborators.js b/public/assets/javascripts/ui/editor/Collaborators.js
index bb163f8..c27dbe0 100644
--- a/public/assets/javascripts/ui/editor/Collaborators.js
+++ b/public/assets/javascripts/ui/editor/Collaborators.js
@@ -4,14 +4,18 @@ var Collaborators = ModalFormView.extend({
 	
 	template: $("#collaborator-template").html(),
 
-	createAction: "/api/collaborator/:slug/create",
-	destroyAction: "/api/collaborator/:slug/destroy",
+  indexAction: function(){ return "/api/collaborator/" + this.parent.data.slug + "/index" },
+	createAction: function(){ return "/api/collaborator/" + this.parent.data.slug + "/create" },
+	destroyAction: function(){ return "/api/collaborator/" + this.parent.data.slug + "/destroy" },
 	
 	events: {
+	  "keydown [name=email]": "enterSubmit",
 	  "click [data-role=destroy-collaborator]": "destroy",
 	},
 	
 	show: function(){
+	  this.action = this.createAction
+	  
 		if (! this.loaded) {
 			this.load()
 		}
@@ -21,44 +25,70 @@ var Collaborators = ModalFormView.extend({
 	},
 	
 	load: function(){
-		$.get("/api/collaborator/:slug/index", this.populate.bind(this))
+		$.get(this.indexAction(), this.populate.bind(this))
 	},
 
   populate: function(collaborators){
-    //
     collaborators.forEach(function(collab){
       var $el = $( this.template )
-      $el.data("collaborator-id", collab.id)
-      
+      $el.data("collaborator-id", collab._id)
+
       if (collab.user) {
         $el.find(".email").remove()
         
         $el.find(".user")
-           .attr("href", "/profile/" + collab.username)
+           .attr("href", "/profile/" + collab.user.username)
         
         $el.find(".avatar")
-           .css("background-image", "url(" + collab.photo + ")")
+           .css("background-image", "url(" + collab.user.photo + ")")
         
         $el.find(".username")
-           .html( collab.displayName )
+           .html( collab.user.displayName )
+        
+        if (collab.owner) {
+          $el.find("button").remove()
+        }
+        else {
+          $el.find(".role").remove()
+        }
       }
       else {
-        $el.remove(".user")
+        $el.find(".user").remove()
+        $el.find(".role").remove()
         $el.find(".email").html( collab.email )
       }
       
-      $("#collaborators").append($el)
+      $("#collaborator-list").append($el)
     }.bind(this))
     
     this.__super__.show.call(this)
   },
   
+	enterSubmit: function (e) {
+		e.stopPropagation()
+		var base = this
+		if (e.keyCode == 13) {
+			setTimeout(function(){
+			  base.save(e)
+			  base.reset()
+			}, 100)
+		}
+	},
+  
   success: function(data){
+    this.reset()
     this.populate([data])
   },
   
   destroy: function(e){
-    var _id = $(e.currentTarget).closest("li").data("collaborator-id")
+    var $el = $(e.currentTarget).closest("li")
+    var _id = $el.data("collaborator-id")
+    $el.remove()
+    $.ajax({
+      type: "DELETE",
+      url: this.destroyAction(),
+      data: { _id: _id, _csrf: $("[name=_csrf]").val() },
+    })
   },
 
 })
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index e9239e4..e5dd844 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -9,6 +9,7 @@ var EditorSettings = FormView.extend({
 	events: {
 		"keydown": 'stopPropagation',
 		"keydown [name=name]": 'enterSubmit',
+		"click [data-role='show-collaborators']": 'showCollaborators',
 		"click [data-role='save-project']": 'save',
 		"click [data-role='clone-project']": 'clone',
 		"click [data-role='clear-project']": 'clear',
@@ -28,7 +29,8 @@ var EditorSettings = FormView.extend({
 	
 	load: function(data){
 		this.action = data.isNew ? this.createAction : this.updateAction
-
+    this.parent.data = data
+    
 		data.rooms && Rooms.deserialize(data.rooms)
 		data.startPosition && scene.camera.move(data.startPosition)
 		
@@ -36,7 +38,6 @@ var EditorSettings = FormView.extend({
 		  this.$name.val( "Room " + moment().format("DD/MM/YYYY ha") )
 		}
 		else {
-			// console.log(data)
 			this.thumbnailIsStale()
 			
 			this.$id.val( data._id )
@@ -48,6 +49,11 @@ var EditorSettings = FormView.extend({
 		}
 	},
 	
+	showCollaborators: function(e){
+	  e && e.preventDefault()
+	  this.parent.collaborators.show()
+	},
+	
 	clone: function(){
 		var names = this.$name.val().split(" ")
 		if ( ! isNaN(Number( names[names.length-1] )) ) {
@@ -152,6 +158,8 @@ var EditorSettings = FormView.extend({
 		Minotaur.hide()
 		
 		window.history.pushState(null, document.title, "/project/" + data.slug + "/edit")
+
+		this.parent.data = data
 	},
 
 })
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 5fc5147..b75a912 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -31,8 +31,9 @@ var EditorView = View.extend({
 	
 	ready: function(data){
 		$("#map").hide()
-				
+		
 		this.settings.load(data)
+		this.collaborators.show()
 	},
 	
 	readyLayout: function(data){
diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js
index ab33bc0..17b748a 100644
--- a/public/assets/javascripts/ui/lib/FormView.js
+++ b/public/assets/javascripts/ui/lib/FormView.js
@@ -33,7 +33,7 @@ var FormView = View.extend({
 	},
 	
 	serialize: function(){
-		var fd = new FormData()
+		var fd = new FormData(), hasCSRF = false
 		
 		this.$("input[name], select[name], textarea[name]").each( function(){
 			if (this.type == "file") {
@@ -48,9 +48,14 @@ var FormView = View.extend({
 			}
 			else {
 				fd.append(this.name, this.value);
+				hasCSRF = hasCSRF || this.name == "_csrf"
 			}
 		});
 		
+		if (! hasCSRF) {
+      fd.append("_csrf", $("[name=_csrf]").val())
+    }
+		
 		return fd
 	},
 	
@@ -71,9 +76,12 @@ var FormView = View.extend({
 				return
 			}
 		}
+		
+		var action = typeof this.action == "function" ? this.action() : this.action
+		if (! action) return
 
 		var request = $.ajax({
-			url: this.action,
+			url: action,
 			type: this.method,
 			data: this.serialize(),
 			dataType: "json",
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 92eed33..f59635b 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1202,13 +1202,13 @@ input[type="range"]::-webkit-slider-thumb {
   transform: translateY(0px);
 }
 
-#startpoint {
+.modalLink {
   text-decoration: none;
 }
-
-#startpoint:hover {
+.modalLink:hover {
   text-decoration: underline;
 }
+
 @-webkit-keyframes fade {
   50% {
     opacity:0.6;
@@ -1270,7 +1270,7 @@ input[type="range"]::-webkit-slider-thumb {
   width: 100%;
   margin-top: 10px;
 }
-.settings .subButtons a{
+.settings .subButtons a {
   font-size: 12px;
   font-weight: 300;
   width: 40px;
@@ -1553,12 +1553,15 @@ form li textarea {
   position: fixed;
   right: 20px;
   top: 20px;
+  z-index: 20;
 }
 
 .close:hover {
   color:lightgreen;
 }
 
+
+
 .facebook {
   width: 100%;
   display: inline-block;
@@ -1652,26 +1655,100 @@ form li textarea {
 .share a:hover{
   text-decoration:underline;
 }
-@-webkit-keyframes borderanimation
-{
+
+/* COLLABORATORS */
+
+.collaborators > div {
+  width: 600px;
+  margin: 0 auto;
+  text-align: left;
+  background: white;
+  padding: 10px;
+  margin: 20px auto;
+}
+.collaborators button {
+  width: auto;
+  position: relative;
+  top: -2px;
+}
+.collaborators form {
+  max-width: none;
+}
+.collaborators form input[type=submit] {
+  float: none;
+  width: 150px;
+  position: relative;
+  top: -2px;
+  font-size: 11px;
+
+  padding: 8px;
+  border: 1px solid;
+  font-weight: 500;
+  background: white;
+  cursor: pointer;
+}
+.collaborators form input[type=submit]:hover {
+  background-color: black;
+  border-color: black;
+}
+.collaborators p {
+  margin: 20px 0;
+}
+.collaborators form input[type=text] {
+  font-size: 16px;
+  width: 300px;
+}
+.collaborators h2 {
+  margin: 20px auto 10px;
+}
+#collaborator-list {
+  margin-top: 20px;
+}
+#collaborator-list li {
+  list-style-type: none;
+  background: #fff;
+  padding-top: 4px;
+}
+#collaborator-list .avatar {
+  width: 32px;
+  height: 32px;
+  background-size: cover;
+  display: inline-block;
+  margin-right: 10px;
+}
+#collaborator-list .username {
+  position: relative;
+  top: -10px;
+}
+#collaborator-list .role {
+  float: right;
+  font-style: italic;
+  margin-top: 5px;
+  font-weight: 300;
+}
+#collaborator-list .email {
+  line-height: 31px;
+  position: relative;
+  left: 42px;
+  font-weight: 300;
+  font-style: italic;
+}
+
+/* MARCHING ANTS ANIMATION */
+
+@-webkit-keyframes borderanimation {
   0%{width:600px;}
   100%{width:750px;left:2px;}
 }
-
-@-webkit-keyframes borderanimationleftright
-{
+@-webkit-keyframes borderanimationleftright {
   0%{height:250px;}
   100%{height:500px;top:2px;}
 }
-
-@keyframes borderanimation
-{
+@keyframes borderanimation {
   0%{width:500px;}
   100%{width:750px;left:2px;}
 }
-
-@keyframes borderanimationleftright
-{
+@keyframes borderanimationleftright {
   0%{height:250px;}
   100%{height:500px;top:2px;}
 }
diff --git a/server/lib/api/collaborator.js b/server/lib/api/collaborator.js
index f39022f..c080070 100644
--- a/server/lib/api/collaborator.js
+++ b/server/lib/api/collaborator.js
@@ -1,20 +1,22 @@
 /* jshint node: true */
 
 var _ = require('lodash'),
+  auth = require('../auth'),
 	util = require('../util'),
 	upload = require('../upload'),
 	config = require('../../../config.json'),
+	User = require('../schemas/User'),
 	Collaborator = require('../schemas/Collaborator'),
 	Project = require('../schemas/Project');
 
 var collaborator = {
 
 	join: function(req, res){
-	  var nonce = req.query.nonce
+	  var nonce = req.params.nonce
 	  if (! nonce || ! nonce.length) { return res.json({ error: "invalid invite code" }) }
 	  Collaborator.findOne({ nonce: nonce }, function(err, collaborator){
 	    if (err || ! collaborator) { return res.json({ error: "can't find collaborator" }) }
-	    collaborator.user_id = req.user.user_id
+	    collaborator.user_id = req.user._id
 	    collaborator.nonce = ""
 			collaborator.save(function(err, collaborator){
         Project.findOne({ _id: collaborator.project_id }, function(err, project){
@@ -31,7 +33,7 @@ var collaborator = {
     if (! req.project) {
       return res.json({ error: "can't find project" })
     }
-    if (req.project.user_id !== req.user._id) { return res.json({ error: "insufficient permission" }) }
+    if (String(req.project.user_id) !== String(req.user._id)) { return res.json({ error: "insufficient permission" }) }
     Collaborator.find({ project_id: req.project._id }, function(err, collaborators){
       var user_ids = _.pluck(collaborators, "user_id").filter(function(id){ return !! id })
       User.find({ _id: user_ids }, "username displayName photo", function(err, users){
@@ -44,6 +46,7 @@ var collaborator = {
           obj.user = userIndex[ obj.user_id ]
           return obj
         })
+        collaborators.unshift( { user: req.user.toObject(), owner: true } )
         res.json(collaborators)
       })
     })
@@ -60,11 +63,12 @@ var collaborator = {
 
     Collaborator.makeNonce(function(nonce){
       data.nonce = nonce
+
       new Collaborator(data).save(function(err, collaborator){
         if (err || ! collaborator) { return res.json({ error: err }) }
-				auth.mail.forgotPassword(req.project, req.user, collaborator, function(){
-					res.json(collaborator)
-				})
+        console.log(collaborator)
+        res.json(collaborator)
+				auth.mail.collaborator(req.project, req.user, collaborator, function(){})
       })
     })
 	},
@@ -73,10 +77,10 @@ var collaborator = {
     if (! req.project) {
       return res.json({ error: "can't find project" })
     }
-    if (req.project.user_id !== req.user._id) {
+    if (String(req.project.user_id) !== String(req.user._id)) {
       return res.json({ error: "insufficient permission" })
     }
-    Collaborator.remove({ _id: _id }, function(err){
+    Collaborator.remove({ _id: req.body._id }, function(err){
       res.json({ status: "OK" })
     })
 	}
diff --git a/server/lib/auth/mail.js b/server/lib/auth/mail.js
index 0211325..0ba6d5d 100644
--- a/server/lib/auth/mail.js
+++ b/server/lib/auth/mail.js
@@ -81,7 +81,7 @@ var mail = {
 			 ]
 		}
 		mail.send(message, cb)
-		console.log("sent collaborator email to", user.email)
+		console.log("sent collaborator email to", collaborator.email)
 	},
 
 }
diff --git a/server/lib/schemas/Collaborator.js b/server/lib/schemas/Collaborator.js
index 79e3287..6b3d452 100644
--- a/server/lib/schemas/Collaborator.js
+++ b/server/lib/schemas/Collaborator.js
@@ -2,6 +2,7 @@
 
 var mongoose = require('mongoose'),
 	_ = require('lodash'),
+	crypto = require('crypto'),
 	config = require('../../../config.json'),
 	util = require('../util');
 
diff --git a/server/lib/views.js b/server/lib/views.js
index 7137041..b3c1d18 100644
--- a/server/lib/views.js
+++ b/server/lib/views.js
@@ -33,7 +33,7 @@ views.editor = function (req, res) {
 	if (! req.project) {
 		res.redirect('/')
 	}
-	else if (req.isCollaborator || req.isOwner) {
+	else if (req.isOwner || req.isCollaborator) {
 		res.render('editor')
 	}
 	else {
diff --git a/views/controls/editor/collaborators.ejs b/views/controls/editor/collaborators.ejs
index 035507b..1386a5c 100644
--- a/views/controls/editor/collaborators.ejs
+++ b/views/controls/editor/collaborators.ejs
@@ -1,27 +1,32 @@
 <div class="collaborators fixed mediaDrawer animate">
 	<span class="close">X</span>
-
+	
   <div>
-    To invite others to contribute to this project, submit their email address below. They'll receive an email with instructions to join this blog and register if they're not a Vvalls user yet.
-  </div>
+    <h2>Collaborators</h2>
+
+    <p>
+      To invite others to contribute to this project, submit their email address below. They'll receive an email with instructions to join this blog and register if they're not a Vvalls user yet.
+    </p>
 
-  <form>
-    <input type="text" id="collaborator-email">
-    <button id="collaborator-invite">Invite to this project</button>
-  </form>
-  
-  <ul id="collaborator-list">
-  </ul>
+    <form>
+      <input type="text" id="collaborator-email" name="email">
+      <input type="submit" id="collaborator-invite" value="Invite to this project">
+    </form>
+
+    <ul id="collaborator-list">
+    </ul>
+
+  </div>
 
 </div>
 
 <script type="text/html" id="collaborator-template">
   <li>
     <a class="user">
-      <div class="avatar"></div>
-      <span class="username"></span>
+      <div class="avatar"></div><span class="username"></span>
     </a>
     <span class="email"></span>
     <button data-role="destroy-collaborator" class="remove-user">Remove</button>
+    <span class="role">owner</span>
   </li>
 </script>
diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs
index 6f46be3..e4ec7ee 100644
--- a/views/controls/editor/settings.ejs
+++ b/views/controls/editor/settings.ejs
@@ -3,11 +3,17 @@
 	<input type="hidden" name="_id" value="new">
 
 	<div class="setting">
-		<a href="#" id="startpoint">
+		<a href="#" class="modalLink" id="startpoint">
 			<span class="icon-ios7-navigate-outline"></span>
 			<span id="startText">Select Startpoint</span>
 			<span id="moveText">Move to Desired Point</span></a>
 	</div>
+	<div class="setting">
+	  <a href="#" class="modalLink" data-role='show-collaborators'>
+      <span class="icon-ios7-plus-outline"></span>
+      Add Collaborators
+	  </a>
+	</div>
 
 	<div class="setting">
 		<input type="text" name="name" placeholder="room name">
diff --git a/views/editor.ejs b/views/editor.ejs
index 5d1e052..9950878 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -17,6 +17,7 @@
 			[[ include controls/editor/media-editor ]]
 			[[ include controls/editor/wallpaper ]]
 			[[ include controls/editor/light-control ]]
+			[[ include controls/editor/collaborators ]]
 			[[ include controls/editor/settings ]]
 		</div>
 
diff --git a/views/mail/collaborator.html.ejs b/views/mail/collaborator.html.ejs
index 5621c1e..2a08a1c 100644
--- a/views/mail/collaborator.html.ejs
+++ b/views/mail/collaborator.html.ejs
@@ -2,7 +2,7 @@
 <body>
 
 <p>
-	<a href="http://vvalls.com/"><img src="http://vvalls.com/img/logo.svg"></a>
+	<a href="http://vvalls.com/"><img src="http://vvalls.com/assets/img/logo.svg"></a>
 </p>
 
 <p>
diff --git a/views/mail/welcome.html.ejs b/views/mail/welcome.html.ejs
index 8b7194b..b2c329f 100644
--- a/views/mail/welcome.html.ejs
+++ b/views/mail/welcome.html.ejs
@@ -2,7 +2,7 @@
 <body>
 
 <p>
-	<a href="http://vvalls.com/"><img src="http://vvalls.com/img/logo.svg"></a>
+	<a href="http://vvalls.com/"><img src="http://vvalls.com/assets/img/logo.svg"></a>
 </p>
 
 <p>