implemented temporary flex-nav validation

client/lib/sideNav.coffee

@@ -9,6 +9,15 @@
 		, 200
 		return
 
+	validate = ->
+		invalid = []
+		sideNav.find("input.required").each ->
+			if not this.value.length
+				invalid.push $(this).prev("label").html()
+		if invalid.length
+			return invalid
+		return false;
+
 	toggleFlex = (status) ->
 		if flexNav.opened or status? is -1
 			flexNav.opened = false
@@ -47,5 +56,6 @@
 	getFlex: getFlex
 	openFlex: openFlex
 	closeFlex: closeFlex
+	validate: validate
 
 )()

client/stylesheets/base.less

@@ -862,6 +862,9 @@ a.github-fork {
 	}
 	.input-line{
 		margin-bottom: 25px;
+		&:nth-last-child(1){
+			margin-bottom: 0;
+		}
 		label{
 			text-transform: uppercase;
 			font-weight: 400;
@@ -937,6 +940,19 @@ a.github-fork {
 			padding-left: 8px;
 		}
 	}
+	.input-error{
+		text-align: center;
+		color: #f09286;
+		font-size: 12px;
+		padding: 0;
+		text-align: left;
+		margin-bottom: -20px;
+		margin-top: -12px;
+		strong{
+			display: block;
+			margin-bottom: 2px;
+		}
+	}
 	.empty{
 		padding-left: 10px;
 		font-size: 11px;

client/views/app/sideNav/channelsFlex.coffee

@@ -5,6 +5,9 @@ Template.channelsFlex.helpers
 	name: ->
 		return Template.instance().selectedUserNames[this.valueOf()]
 
+	error: ->
+		return Template.instance().error.get()
+
 	autocompleteSettings: ->
 		return {
 			limit: 10
@@ -52,23 +55,32 @@ Template.channelsFlex.events
 	'click .cancel-channel': (e, instance) ->
 		SideNav.closeFlex()
 
+	'keydown input[type="text"]': (e, instance) ->
+		Template.instance().error.set([])
+
 	'click .save-channel': (e, instance) ->
-		Meteor.call 'createChannel', instance.find('#channel-name').value, instance.selectedUsers.get(), (err, result) ->
-			if err
-				return toastr.error err.reason
+		err = SideNav.validate()
+		if not err
+			Meteor.call 'createChannel', instance.find('#channel-name').value, instance.selectedUsers.get(), (err, result) ->
+				if err
+					return toastr.error err.reason
 
-			SideNav.closeFlex()
+				SideNav.closeFlex()
 
-			instance.clearForm()
+				instance.clearForm()
 
-			Router.go 'room', { _id: result.rid }
+				Router.go 'room', { _id: result.rid }
+		else
+			Template.instance().error.set(err)
 
 Template.channelsFlex.onCreated ->
 	instance = this
 	instance.selectedUsers = new ReactiveVar []
 	instance.selectedUserNames = {}
+	instance.error = new ReactiveVar []
 
 	instance.clearForm = ->
+		instance.error.set([])
 		instance.selectedUsers.set([])
 		instance.find('#channel-name').value = ''
 		instance.find('#channel-members').value = ''

client/views/app/sideNav/channelsFlex.html

@@ -6,7 +6,7 @@
 	<div class="content">
 		<div class="input-line">
 			<label for="channel-name">{{_ "chatRooms.Name"}}</label>
-			<input type="text" id="channel-name">
+			<input type="text" id="channel-name" class="required">
 		</div>
 		<div class="input-line">
 			<label for="channel-members">Add Members</label>
@@ -17,6 +17,14 @@
 				{{/each}}
 			</ul>
 		</div>
+		{{#if error}}
+			<div class="input-error">
+				<strong>Ops!</strong>
+				{{#each error}}
+					<p>The field {{error}} is required.</p>
+				{{/each}}
+			</div>
+		{{/if}}
 		<div class="input-submit">
 			<button class="button clean primary save-channel">{{_ "chatRooms.Save" }}</button>
 			<button class="button clean cancel-channel">{{_ "chatRooms.Cancel" }}</button>

client/views/app/sideNav/privateGroups.coffee

@@ -10,5 +10,4 @@ Template.privateGroups.events
 	'click .add-room': (e, instance) ->
 		SideNav.setFlex "privateGroupsFlex"
 		SideNav.openFlex()
-		#instance.clearForm()
-		#$('#pvt-group-name').focus()
+		console.log Template.privateGroupsFlex.onCreated.instance

client/views/app/sideNav/privateGroupsFlex.coffee

@@ -5,6 +5,9 @@ Template.privateGroupsFlex.helpers
 	name: ->
 		return Template.instance().selectedUserNames[this.valueOf()]
 
+	error: ->
+		return Template.instance().error.get()
+
 	autocompleteSettings: ->
 		return {
 			limit: 10
@@ -30,12 +33,6 @@ Template.privateGroupsFlex.helpers
 		}
 
 Template.privateGroupsFlex.events
-	'click .add-room': (e, instance) ->
-		$('.private-group-flex').removeClass('_hidden')
-
-		instance.clearForm()
-		$('#pvt-group-name').focus()
-
 	'autocompleteselect #pvt-group-members': (event, instance, doc) ->
 		instance.selectedUsers.set instance.selectedUsers.get().concat doc._id
 
@@ -46,7 +43,6 @@ Template.privateGroupsFlex.events
 
 	'click .remove-room-member': (e, instance) ->
 		self = @
-
 		users = Template.instance().selectedUsers.get()
 		users = _.reject Template.instance().selectedUsers.get(), (_id) ->
 			return _id is self.valueOf()
@@ -58,23 +54,29 @@ Template.privateGroupsFlex.events
 	'click .cancel-pvt-group': (e, instance) ->
 		SideNav.closeFlex()
 
-	'click .save-pvt-group': (e, instance) ->
-		Meteor.call 'createPrivateGroup', instance.find('#pvt-group-name').value, instance.selectedUsers.get(), (err, result) ->
-			if err
-				return toastr.error err.reason
-
-			SideNav.closeFlex()
+	'keydown input[type="text"]': (e, instance) ->
+		Template.instance().error.set([])
 
-			instance.clearForm()
-
-			Router.go 'room', { _id: result.rid }
+	'click .save-pvt-group': (e, instance) ->
+		err = SideNav.validate()
+		if not err
+			Meteor.call 'createPrivateGroup', instance.find('#pvt-group-name').value, instance.selectedUsers.get(), (err, result) ->
+				if err
+					return toastr.error err.reason
+				SideNav.closeFlex()
+				instance.clearForm()
+				Router.go 'room', { _id: result.rid }
+		else
+			Template.instance().error.set(err)
 
 Template.privateGroupsFlex.onCreated ->
 	instance = this
 	instance.selectedUsers = new ReactiveVar []
 	instance.selectedUserNames = {}
+	instance.error = new ReactiveVar []
 
 	instance.clearForm = ->
+		instance.error.set([])
 		instance.selectedUsers.set([])
 		instance.find('#pvt-group-name').value = ''
 		instance.find('#pvt-group-members').value = ''

client/views/app/sideNav/privateGroupsFlex.html

@@ -6,7 +6,7 @@
 	<div class="content">
 		<div class="input-line">
 			<label for="pvt-group-name">{{_ "chatRooms.Name"}}</label>
-			<input type="text" id="pvt-group-name">
+			<input type="text" id="pvt-group-name" class="required">
 		</div>
 		<div class="input-line">
 			<label for="pvt-group-members">{{_ "chatRooms.Members" }}</label>
@@ -17,6 +17,14 @@
 				{{/each}}
 			</ul>
 		</div>
+		{{#if error}}
+			<div class="input-error">
+				<strong>Ops!</strong>
+				{{#each error}}
+					<p>The field {{error}} is required.</p>
+				{{/each}}
+			</div>
+		{{/if}}
 		<div class="input-submit">
 			<button class="button clean primary save-pvt-group">{{_ "chatRooms.Save" }}</button>
 			<button class="button clean cancel-pvt-group">{{_ "chatRooms.Cancel" }}</button>