Implemented placeholder based room input field.

src/styles/global/_pages.scss

@@ -44,7 +44,6 @@
   }
 
   h1 {
-    text-align: center;
     white-space: nowrap;
     @include breakpt($breakpoint-medium) {
       white-space: normal;
@@ -88,6 +87,7 @@
     a {
       padding-right: .5em;
       color: black;
+      user-select: none;
     }
   }
 

static/js/directives/page.js

@@ -40,10 +40,23 @@ define(['text!partials/page.html', 'text!partials/page/welcome.html'], function(
 				});
 			});
 
+			$scope.roomdataInput = {
+				name: ""
+			};
 			$scope.roomdata = {};
+
 			$scope.$watch("roomdata.name", function(name) {
 				$scope.roomdata.link = rooms.link({Name: name});
 			}, true);
+
+			$scope.$watch("roomdataInput.name", function(name) {
+				if (name === "") {
+					$scope.randomRoom();
+				} else {
+					$scope.roomdata.name = name;
+				}
+			});
+
 		};
 
 		return {

static/partials/page/welcome.html

@@ -1,18 +1,16 @@
 <div class="welcome container-fluid">
 	<div class="welcome-logo"></div>
-	<h1>{{_("Create a room and talk together")}}</h1>
 	<div class="welcome-container">
+		<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="roomdata.name" placeholder="{{_('Creating room ...')}}">
+		    <input type="text" class="form-control roomdata-link-input input-lg" ng-model="roomdataInput.name" placeholder="{{roomdata.name||_('Creating room ...')}}">
 		    <div class="welcome-input-buttons">
 		      <a class="fa fa-refresh" ng-click="randomRoom()"></a>
-		      <button class="btn btn-primary btn-roomcreate" type="button" ng-disabled="!roomdata.link" ng-click="joinRoomByName(roomdata.name)">{{_("Create")}}</button>
+		      <button class="btn btn-primary btn-roomcreate" type="button" ng-disabled="!roomdata.link" ng-click="joinRoomByName(roomdata.name)">{{_("Go")}}</button>
 		    </div>
 		  </div>
 		</p>
-		<center>
-		    <p ng-show="roomdata.name"><i class="fa fa-external-link"></i> <a href="{{roomdata.link}}" ng-click="joinRoomByName(roomdata.name);$event.preventDefault()">{{roomdata.link}}</a></p>
-		</center>
+	    <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>
 	</div>
 </div>