New options dialog for room creation

src/assets/stylesheets/hub-create.scss

@@ -149,13 +149,12 @@
             @extend %default-font;
             cursor: pointer;
             position: absolute;
-            bottom: 14px;
-            left: 12px;
+            top: 14px;
+            right: 12px;
             font-size: 1.3em;
             text-shadow: 0px 0px 6px #202020;
             color: $light-text;
             appearance: none;
-            text-decoration: underline;
             -moz-appearance: none;
             -webkit-appearance: none;
             background: transparent;

src/assets/stylesheets/info-dialog.scss

@@ -11,7 +11,7 @@
 .dialog {
   display: grid;
   grid-template-columns: 1fr 20px minmax(200px, 525px) 20px 1fr;
-  grid-template-rows: 1fr 20px 275px 20px 1fr;
+  grid-template-rows: 1fr 20px 350px 20px 1fr;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,.6);
@@ -38,19 +38,19 @@
       position: relative;
 
       &__title {
-	@extend %top-title;
-	margin-bottom: 20px;
+        @extend %top-title;
+        margin-bottom: 20px;
       }
 
       &__body {
-	font-size: 1.1em;
-	color: $grey-text;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	overflow-y: auto;
-
-	a { color: white }
+        font-size: 1.1em;
+        color: $grey-text;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow-y: auto;
+
+        a { color: white }
       }
 
       &__links {
@@ -65,15 +65,15 @@
 
 
       &__close {
-	position: absolute;
-	left: 12px;
-	top: 6px;
-	color: white;
-	font-size: 1.4em;
-
-	background: none;
-	cursor: pointer;
-	border: none;
+        position: absolute;
+        left: 12px;
+        top: 6px;
+        color: white;
+        font-size: 1.4em;
+
+        background: none;
+        cursor: pointer;
+        border: none;
       }
     }
   }

src/assets/translations.data.json

@@ -45,7 +45,7 @@
     "autoexit.title_units": " seconds",
     "autoexit.subtitle": "You have started another session.",
     "autoexit.cancel": "CANCEL",
-    "home.room_create_options": "Options",
+    "home.room_create_options": "options",
     "home.create_name.validation_warning": "Invalid name, limited to 4 to 64 characters and limited symbols.",
     "home.webvr_disclaimer_pre": "A ",
     "home.webvr_disclaimer_post": " experiment by ",

src/react-components/hub-create-panel.js

@@ -259,8 +259,8 @@ class HubCreatePanel extends Component {
           <InfoDialog
             dialogType={dialogTypes.custom_scene}
             onCloseDialog={() => this.setState({ showCustomSceneDialog: false })}
-            onCustomScene={url => {
-              this.setState({ showCustomSceneDialog: false, customSceneUrl: url }, () => this.createHub());
+            onCustomScene={(name, url) => {
+              this.setState({ showCustomSceneDialog: false, name: name, customSceneUrl: url }, () => this.createHub());
             }}
           />
         )}

src/react-components/info-dialog.js

@@ -6,6 +6,7 @@ import { FormattedMessage } from "react-intl";
 import formurlencoded from "form-urlencoded";
 import LinkDialog from "./link-dialog.js";
 import MediaToolsDialog from "./media-tools-dialog.js";
+const HUB_NAME_PATTERN = "^[A-Za-z0-9-'\":!@#$%^&*(),.?~ ]{4,64}$";
 
 // TODO i18n
 
@@ -62,7 +63,7 @@ class InfoDialog extends Component {
   };
 
   onCustomSceneClicked = () => {
-    this.props.onCustomScene(this.state.customSceneUrl);
+    this.props.onCustomScene(this.state.customRoomName, this.state.customSceneUrl);
     this.props.onCloseDialog();
   };
 
@@ -83,6 +84,7 @@ class InfoDialog extends Component {
     mailingListPrivacy: false,
     copyLinkButtonText: "Copy",
     addMediaUrl: "",
+    customRoomName: "",
     customSceneUrl: ""
   };
 
@@ -201,19 +203,27 @@ class InfoDialog extends Component {
         dialogBody = <MediaToolsDialog onAddMedia={this.props.onAddMedia} onCloseDialog={this.props.onCloseDialog} />;
         break;
       case InfoDialog.dialogTypes.custom_scene:
-        dialogTitle = "Use Custom Scene";
+        dialogTitle = "Create a Room";
         dialogBody = (
           <div>
-            <div>Enter a URL to a GLTF file to use for your room&apos;s scene:</div>
+            <div>Choose a name and GLTF URL for your room&apos;s scene:</div>
             <form onSubmit={this.onCustomSceneClicked}>
               <div className="custom-scene-form">
+                <input
+                  type="text"
+                  placeholder="Room name"
+                  className="custom-scene-form__link_field"
+                  value={this.state.customRoomName}
+                  pattern={HUB_NAME_PATTERN}
+                  onChange={e => this.setState({ customRoomName: e.target.value })}
+                  required
+                />
                 <input
                   type="url"
-                  placeholder="URL to Scene GLTF or GLB"
+                  placeholder="URL to Scene GLTF or GLB (Optional)"
                   className="custom-scene-form__link_field"
                   value={this.state.customSceneUrl}
                   onChange={e => this.setState({ customSceneUrl: e.target.value })}
-                  required
                 />
                 <div className="custom-scene-form__buttons">
                   <button className="custom-scene-form__action-button">