Made form to show changable room name.

src/styles/global/_base.scss

@@ -128,7 +128,6 @@ a {
   position: absolute;
   right: 0;
   top: 44px;
-  user-select: none;
 }
 
 .welcome {
@@ -137,6 +136,25 @@ a {
   margin-top: 80px;
   text-shadow: 0 0 5px black;
   max-width:500px;
+
+  .welcome-input {
+    position: relative;
+    input {
+      padding-right: 105px;
+    }
+  }
+
+  .welcome-input-buttons {
+    text-shadow: none;
+    position: absolute;
+    top: 6px;
+    right: 8px;
+    a {
+      padding-right: .5em;
+      color: black;
+    }
+  }
+
 }
 
 .help-block {

static/js/controllers/roomchangecontroller.js

@@ -54,22 +54,32 @@ define([], function() {
 			return roomid;
 		};
 
+		$scope.refreshRoom = function() {
+			if (ctrl.enabled) {
+				ctrl.getRoom(function(roomdata) {
+					console.info("Retrieved room data", roomdata);
+					$scope.roomdata = roomdata;
+				});
+			}
+		};
+
 		$scope.$on("$destroy", function() {
 			//console.log("Room change controller destroyed");
 			ctrl.enabled = false;
 		});
 
+		$scope.roomdata = {};
+		$scope.$watch("roomdata.name", function(n) {
+			console.log("roomdata.name changed", n);
+			var u = encodeURIComponent(n);
+			$scope.roomdata.url = "/" + u;
+			$scope.roomdata.link = $scope.roomlink = mediaStream.url.room(n);
+		});
+
 		var roomDataLinkInput = $element.find(".roomdata-link-input");
 		if (roomDataLinkInput.length) {
-			$scope.roomdata = {};
 			$timeout(function() {
-				if (ctrl.enabled) {
-					ctrl.getRoom(function(roomdata) {
-						console.info("Retrieved room data", roomdata);
-						$scope.roomdata = roomdata;
-						roomdata.link = $scope.roomlink = mediaStream.url.room(roomdata.name);
-					});
-				}
+				$scope.refreshRoom();
 			}, 100);
 		}
 

static/partials/page/welcome.html

@@ -1,16 +1,18 @@
 <div class="welcome container-fluid" ng-controller="RoomchangeController">
-<h3 style="margin-top:0px">{{_("Create your room")}}</h3>
-<p><i>{{_("This is your room link:")}}</i></p>
+<h3>{{_("Create a room")}}</h3>
 <p>
-  <div class="input-group input-group-lg">
-    <input type="text" class="form-control roomdata-link-input" ng-model="roomdata.link" placeholder="{{_('Creating room link ...')}}" disabled>
-    <span class="input-group-btn">
-      <button class="btn btn-primary" type="button" ng-disabled="!roomdata.link" ng-click="changeRoomToId(roomdata.name)">{{_("Start")}}</button>
-    </span>
+  <div class="form-group welcome-input">
+    <input type="text" class="form-control roomdata-link-input input-lg" ng-model="roomdata.name" placeholder="{{_('Creating room ...')}}">
+    <div class="welcome-input-buttons">
+      <a class="fa fa-refresh" ng-click="refreshRoom()"></a>
+      <button class="btn btn-primary" type="button" ng-disabled="!roomdata.link" ng-click="changeRoomToId(roomdata.name)">{{_("Create")}}</button>
+    </div>
   </div>
 </p>
-<p><i>{{_("Just click start")}}</i></p>
 <small>
+  <ul class="fa-ul">
+    <li><i class="fa-li fa fa-external-link"></i>{{roomdata.link}}</li>
+  </ul>
   <ul class="fa-ul">
     <li><i class="fa-li fa fa-share-square"></i>{{_("Share this URL with the people you want to meet.")}}</li>
     <li><i class="fa-li fa fa-repeat"></i>{{_("You can use and re-use this room as many times as you want.")}}</li>