Added room select form validation.

src/styles/global/_pages.scss

@@ -94,6 +94,9 @@
 
   .room-link {
     margin-top: -10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     a {
       color: $welcome;
     }

static/js/directives/roombar.js

@@ -36,6 +36,9 @@ define(['underscore', 'angular', 'text!partials/roombar.html'], function(_, angu
 			$scope.layout.roombar = true;
 
 			$scope.save = function() {
+				if ($scope.roombarform.$invalid) {
+					return;
+				}
 				var roomName = rooms.joinByName($scope.newRoomName);
 				if (roomName !== $scope.currentRoomName) {
 					$scope.roombarform.$setPristine();

static/js/directives/welcome.js

@@ -29,8 +29,16 @@ define([], function() {
 			//console.log("xxx welcome", $scope.$id, $element);
 
 			$scope.randomRoom = rooms.randomRoom;
-			$scope.joinRoomByName = rooms.joinByName;
 			$scope.canCreateRooms = rooms.canCreateRooms;
+			$scope.joinRoomByName = function(name) {
+				if ($scope.welcome.$invalid) {
+					return;
+				}
+				if (!name) {
+					return;
+				}
+				rooms.joinByName(name);
+			};
 
 			var roomdata = rooms.getRandomRoom();
 			if (roomdata) {

static/partials/page/welcome.html

@@ -1,15 +1,16 @@
-<div welcome class="welcome container-fluid">
+<div welcome ng-form="welcome" class="welcome container-fluid">
 	<div class="welcome-logo"></div>
 	<div class="welcome-container" ng-controller="UsersettingsController as usersettings">
 		<h1>{{_("Enter a room name")}}</h1>
-		<div class="form-group welcome-input">
-			<input type="text" class="form-control roomdata-link-input input-lg" ng-model="roomdataInput.name" on-enter="joinRoomByName(roomdata.name)" placeholder="{{roomdata.name||_('Room name')}}">
+		<div class="form-group welcome-input" ng-class="{'has-error': welcome.$invalid, 'has-success': welcome.$valid && roomdata.name}">
+			<input type="text" class="form-control roomdata-link-input input-lg" ng-model="roomdataInput.name" ng-maxlength="30" on-enter="joinRoomByName(roomdata.name)" placeholder="{{roomdata.name||_('Room name')}}">
 			<div class="welcome-input-buttons">
 				<a ng-show="roomdata.last" class="fa fa-refresh" title="{{_('Random room name')}}" ng-click="randomRoom()"></a>
-				<button class="btn btn-success btn-roomcreate" title="{{_('Enter room')}}" type="button" ng-disabled="!roomdata.link" ng-click="joinRoomByName(roomdata.name)"><i class="fa fa-sign-in"></i></button>
+				<button class="btn btn-success btn-roomcreate" title="{{_('Enter room')}}" type="button" ng-disabled="!roomdata.link || welcome.$invalid" ng-click="joinRoomByName(roomdata.name)"><i class="fa fa-sign-in"></i></button>
 			</div>
 		</div>
 		<p class="room-link small" ng-show="roomdata.name"><span><i class="fa fa-link" title="{{_('Room link')}}"></i> <a href="{{roomdata.link}}" ng-click="joinRoomByName(roomdata.name);$event.preventDefault()">{{roomdata.link}}</a></span></p>
+		<p ng-show="welcome.$invalid" class="text-danger">This room name can not be used. Please choose another name.</p>
 		<div ng-hide="canCreateRooms()">
 			<p class="h4">{{_("Enter the name of an existing room. You can create your own rooms when you sign in.")}}</p>
 			<button ng-if="!myuserid && usersettings.loginUserid" type="button" class="btn btn-primary" ng-click="usersettings.loginUserid()">{{_('Sign in')}}</button>

static/partials/roombar.html

@@ -4,7 +4,7 @@
 		<label class="pull-left control-label hidden-xs">{{_('Room')}}</label>
 		<div class="pull-left">
 			<div class="input-group">
-				<input class="form-control input-sm" ng-model="newRoomName" on-enter="save()" type="text" placeholder="{{_('Main')}}"></input><span ng-if="currentRoomName && roombarform.$pristine" class="input-group-btn"><a class="btn btn-default btn-sm" title="{{_('Leave room')}}" ng-click="exit()"><i class="fa fa-sign-out"></i></a></span><span ng-if="!currentRoomName || !roombarform.$pristine" class="input-group-btn"><a class="btn btn-default btn-sm" title="{{_('Change room')}}" ng-click="save()"><i class="fa fa-sign-in"></i></a></span>
+				<input class="form-control input-sm" ng-model="newRoomName" ng-maxlength="30" on-enter="save()" type="text" placeholder="{{_('Main')}}"></input><span ng-if="currentRoomName && roombarform.$pristine" class="input-group-btn"><a class="btn btn-default btn-sm" title="{{_('Leave room')}}" ng-click="exit()"><i class="fa fa-sign-out"></i></a></span><span ng-if="!currentRoomName || !roombarform.$pristine" class="input-group-btn"><a class="btn btn-default btn-sm" title="{{_('Change room')}}" ng-disabled="roombarform.$invalid" ng-click="save()"><i class="fa fa-sign-in"></i></a></span>
 			</div>
 		</div>
 		<div class="pull-left">