Implemented welcome screen to support different modes and added rooms history.

src/styles/global/_pages.scss

@@ -91,8 +91,15 @@
     }
   }
 
+  .room-link {
+    margin-top: -10px;
+    a {
+      color: $welcome;
+    }
+  }
+
   .rooms-history {
-    margin-top: 2.5em;
+    margin-top: 3em;
     a {
       &:hover {
         text-decoration: none;

static/js/directives/welcome.js

@@ -23,13 +23,14 @@
 define([], function() {
 
 	// welcome
-	return ["rooms", "$timeout", function(rooms, $timeout) {
+	return ["rooms", "$timeout", "mediaStream", function(rooms, $timeout, mediaStream) {
 
 		function link($scope, $element) {
 			//console.log("xxx welcome", $scope.$id, $element);
 
 			$scope.randomRoom = rooms.randomRoom;
 			$scope.joinRoomByName = rooms.joinByName;
+			$scope.canCreateRooms = rooms.canCreateRooms;
 
 			var roomdata = rooms.getRandomRoom();
 			if (roomdata) {
@@ -55,7 +56,7 @@ define([], function() {
 			});
 
 			$scope.$on("room.random", function(event, roomdata) {
-				$scope.roomdata = {name: roomdata.name};
+				$scope.roomdata = {name: roomdata.name, last: roomdata.name};
 				$scope.roomdataInput.name = "";
 			});
 

static/js/services/rooms.js

@@ -26,12 +26,14 @@ define([
 	'underscore'
 ], function(angular, $, _) {
 
-	return ["$window", "$location", "$timeout", "$q", "$route", "$rootScope", "$http", "globalContext", "safeApply", "connector", "api", "restURL", "roompin", "appData", "alertify", "translation", function($window, $location, $timeout, $q, $route, $rootScope, $http, globalContext, safeApply, connector, api, restURL, roompin, appData, alertify, translation) {
+	return ["$window", "$location", "$timeout", "$q", "$route", "$rootScope", "$http", "globalContext", "safeApply", "connector", "api", "restURL", "roompin", "appData", "alertify", "translation", "mediaStream", function($window, $location, $timeout, $q, $route, $rootScope, $http, globalContext, safeApply, connector, api, restURL, roompin, appData, alertify, translation, mediaStream) {
+
 		var url = restURL.api("rooms");
 		var requestedRoomName = "";
 		var helloedRoomName = null;
 		var currentRoom = null;
 		var randomRoom = null;
+		var canCreateRooms = !mediaStream.config.AuthorizeRoomCreation;
 
 		var joinFailed = function(error) {
 			setCurrentRoom(null);
@@ -144,6 +146,12 @@ define([
 
 		appData.e.on("selfReceived", function(event, data) {
 			_.defer(joinRequestedRoom);
+			if (mediaStream.config.AuthorizeRoomCreation && !$rootScope.myuserid) {
+				canCreateRooms = false;
+			} else {
+				canCreateRooms = true;
+			}
+			console.log("xxx canCreate", canCreateRooms);
 		});
 
 		$rootScope.$on("$locationChangeSuccess", function(event) {
@@ -167,6 +175,12 @@ define([
 				return (currentRoom !== null ? currentRoom.Name : requestedRoomName) === "";
 			},
 			randomRoom: function() {
+				if (!canCreateRooms) {
+					$timeout(function() {
+						$rootScope.$broadcast('room.random', {});
+					});
+					return;
+				}
 				$http({
 					method: "POST",
 					url: url,
@@ -192,6 +206,9 @@ define([
 			getRandomRoom: function() {
 				return randomRoom;
 			},
+			canCreateRooms: function() {
+				return canCreateRooms;
+			},
 			joinByName: function(name, replace) {
 				name = $window.encodeURIComponent(name);
 				name = name.replace(/^%40/, "@");

static/partials/page/welcome.html

@@ -1,18 +1,22 @@
 <div welcome class="welcome container-fluid">
 	<div class="welcome-logo"></div>
-	<div class="welcome-container">
+	<div class="welcome-container" ng-controller="UsersettingsController as usersettings">
 		<h1>{{_("Enter a room name")}}</h1>
-		<p>
-			<div class="form-group welcome-input">
-			<input type="text" class="form-control roomdata-link-input input-lg" ng-model="roomdataInput.name" placeholder="{{roomdata.name||_('Creating room ...')}}">
+		<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="welcome-input-buttons">
-				<a class="fa fa-refresh" title="{{_('Random room name')}}" ng-click="randomRoom()"></a>
+				<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>
 			</div>
-			</div>
-		</p>
-		<p ng-show="roomdata.name"><i class="fa fa-link" title="{{_('Room link')}}"></i> <a href="{{roomdata.link}}" ng-click="joinRoomByName(roomdata.name);$event.preventDefault()">{{roomdata.link}}</a></p>
-		<p class="rooms-history">
+		</div>
+		<p class="room-link small"><span ng-show="roomdata.name"><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>
+		<div ng-hide="canCreateRooms()">
+			<p class="h4">{{_("Enter the name of an existing room. Please sign in to create a room.")}}</p>
+			<button ng-if="!myuserid && usersettings.loginUserid" type="button" class="btn btn-primary" ng-click="usersettings.loginUserid()">{{_('Sign in')}}</button>
+		</div>
+		<p class="rooms-history" ng-show="roomsHistory.length">
+			<span>{{_("Room history")}}</span>
+			<br/>
 			<a ng-repeat="room in roomsHistory" ng-click="joinRoomByName(room)"><span class="label label-default">{{room}}</span></a>
 		</p>
 	</div>