choosing page now takes port on create server

Author: pmzi

src/css/components/_choosingPage.scss

@@ -68,7 +68,7 @@
 
     }
 
-    &__address-wrapper{
+    &__address-wrapper,&__port-wrapper{
 
         &--show{
             opacity: 1;

src/js/views/components/ChoosingPage.js

@@ -16,7 +16,9 @@ class ChoosingPage extends React.Component{
             joinSelected: false,
             choosingPageFadeOut: false,
             choosingPageNone: false,
-            addressInputHasError: false
+            addressInputHasError: false,
+            portHasError: false,
+            portShow: false
         };
 
     }
@@ -28,29 +30,52 @@ class ChoosingPage extends React.Component{
             this.setState({
                 createSelected: true,
                 selected: true,
-                loadingShow: true
+                portShow: true
             })
 
-            // Let's create
+            let portInput = this.refs.portWrapper.children[0];
 
-            socketHandler.createServer().then(() => {
+            setTimeout(()=>{
+                portInput.focus();
+            },200)
 
-                setTimeout(() => {
-                    
-                    this.setState({
-                        loadingShow: false,
-                        choosingPageFadeOut: true
-                    })
+            portInput.onkeydown = (e)=>{
+                if(e.key.toLowerCase() == 'enter'){
+
+                    let port = portInput.value.trim()
 
-                    setTimeout(() => {
+                    if(!this.validatePort(port)){
                         this.setState({
-                            choosingPageNone: true
+                            portHasError: true
                         })
-                    }, 500)
+                    }
 
-                }, 500)
+                    this.setState({
+                        loadingShow: true
+                    })
 
-            })
+                    // Let's create
+
+                    socketHandler.createServer(port).then(() => {
+
+                        setTimeout(() => {
+                            
+                            this.setState({
+                                loadingShow: false,
+                                choosingPageFadeOut: true
+                            })
+
+                            setTimeout(() => {
+                                this.setState({
+                                    choosingPageNone: true
+                                })
+                            }, 500)
+
+                        }, 500)
+
+                    })
+                }
+            }
 
         }
 
@@ -148,7 +173,9 @@ class ChoosingPage extends React.Component{
             joinSelected: false,
             choosingPageFadeOut: false,
             choosingPageNone: false,
-            addressInputHasError: false
+            addressInputHasError: false,
+            portHasError: false,
+            portShow: false
         })
     }
 
@@ -163,6 +190,15 @@ class ChoosingPage extends React.Component{
 
     }
 
+    validatePort(port){
+        let portRegex = /^\d{1,}$/;
+
+        if(portRegex.test(port)){
+            return true;
+        }
+        return false;
+    }
+
     render (){
         return (
             <div ref='choosingPage' className={`choosingPage ${this.state.choosingPageFadeOut ? 'choosingPage--fadeOut' : ''} ${this.state.choosingPageNone ? 'none' : ''}`}>
@@ -203,6 +239,12 @@ class ChoosingPage extends React.Component{
 
                 </div>
 
+                <div ref='portWrapper' className={`choosingPage__port-wrapper ${this.state.portShow ? 'choosingPage__port-wrapper--show': ''}`}>
+
+                    <Input className={this.state.portHasError ? 'input--error':''} center={true} placeholder='Port' />
+
+                </div>
+
             </div>
         );
     }