Only show main window if login is successful.

src/actions/LoginActions.js

@@ -0,0 +1,7 @@
+import { LOGIN_GET_STATUS } from "../actions/ActionTypes";
+
+export default {
+    requestStatus: () => ({
+        type: LOGIN_GET_STATUS,
+    })
+};

src/components/LoginStatusPane.js

@@ -5,6 +5,7 @@ import ControlRequest from "../utils/ControlRequest";
 import propTypeSymbol from "../utils/propTypeSymbol";
 import {
     LOGIN_STATUS_UNKNOWN,
+    LOGIN_STATUS_GETTING,
     LOGIN_STATUS_PENDING,
     LOGIN_STATUS_SUCCESS,
     LOGIN_STATUS_FAILURE
@@ -19,13 +20,24 @@ class LoginStatusPane extends React.Component
     }
 
     componentDidMount() {
-        this.props.socketSend(ControlRequest.loginStatus());
+        const { status, socketSend } = this.props;
+        if (status == LOGIN_STATUS_UNKNOWN) {
+            this.props.socketSend(ControlRequest.loginStatus());
+        }
     }
 
     render_unknown() {
         return (
             <div id={ID}>
-                Fetching login status...
+                Login status: unknown
+            </div>
+        );
+    }
+
+    render_getting() {
+        return (
+            <div id={ID}>
+                Login status: fetching...
             </div>
         );
     }
@@ -70,6 +82,8 @@ class LoginStatusPane extends React.Component
         switch (this.props.status) {
             case LOGIN_STATUS_UNKNOWN:
                 return this.render_unknown();
+            case LOGIN_STATUS_GETTING:
+                return this.render_getting();
             case LOGIN_STATUS_PENDING:
                 return this.render_pending();
             case LOGIN_STATUS_SUCCESS:

src/components/SolsticeApp.js

@@ -1,17 +1,19 @@
 import React, {PropTypes} from "react";
 
+import { STATE_OPEN } from "../constants/socket";
+import { LOGIN_STATUS_SUCCESS } from "../constants/login";
+
 import ConnectForm from  "./ConnectForm";
 import Header from "./Header";
+import LoginStatusPane from "./LoginStatusPane";
 
-import RoomsPane from "../containers/RoomsPane";
 import Footer from "../containers/Footer";
-
-import { STATE_OPEN } from "../constants/socket";
+import RoomsPane from "../containers/RoomsPane";
 
 const ID = "solstice-app";
 
 const SolsticeApp = (props) => {
-    const { actions, socket } = props;
+    const { actions, login, socket } = props;
     if (socket.state !== STATE_OPEN ) {
         return (
             <div id={ID}>
@@ -19,6 +21,16 @@ const SolsticeApp = (props) => {
             </div>
         );
     }
+
+    if (login.status !== LOGIN_STATUS_SUCCESS) {
+        return (
+            <div id={ID}>
+                <ConnectForm socket={socket} actions={actions} />
+                <LoginStatusPane {...login} socketSend={actions.socket.send} />
+            </div>
+        );
+    }
+
     return (
         <div id={ID}>
             <Header />
@@ -32,6 +44,7 @@ const SolsticeApp = (props) => {
 
 SolsticeApp.propTypes = {
     actions: PropTypes.object.isRequired,
+    login: PropTypes.object.isRequired,
     socket: PropTypes.object.isRequired
 };
 

src/constants/ActionTypes.js

@@ -7,6 +7,9 @@ export const SOCKET_SET_ERROR       = "SOCKET_SET_ERROR";
 export const SOCKET_RECEIVE_MESSAGE = "SOCKET_RECEIVE_MESSAGE";
 export const SOCKET_SEND_MESSAGE    = "SOCKET_SEND_MESSAGE";
 
+// Login actions
+export const LOGIN_GET_STATUS = "LOGIN_GET_STATUS";
+
 // Room actions
 export const ROOM_SELECT  = "ROOM_SELECT";
 export const ROOM_JOIN    = "ROOM_JOIN";

src/constants/login.js

@@ -1,4 +1,5 @@
 export const LOGIN_STATUS_UNKNOWN = Symbol("LOGIN_STATUS_UNKNOWN");
+export const LOGIN_STATUS_GETTING = Symbol("LOGIN_STATUS_GETTING");
 export const LOGIN_STATUS_PENDING = Symbol("LOGIN_STATUS_PENDING");
 export const LOGIN_STATUS_SUCCESS = Symbol("LOGIN_STATUS_SUCCESS");
 export const LOGIN_STATUS_FAILURE = Symbol("LOGIN_STATUS_FAILURE");

src/containers/App.js

@@ -14,10 +14,11 @@ const App = (props) => (<SolsticeApp {...props} />);
 
 App.propTypes = {
     actions: PropTypes.object.isRequired,
+    login: PropTypes.object.isRequired,
     socket: PropTypes.object.isRequired
 };
 
-const mapStateToProps = ({ socket })  => ({ socket });
+const mapStateToProps = ({ socket, login })  => ({ socket, login });
 
 function mapDispatchToProps(dispatch) {
     return {

src/reducers/login.js

@@ -1,6 +1,11 @@
-import { SOCKET_RECEIVE_MESSAGE } from "../constants/ActionTypes";
+import {
+    LOGIN_GET_STATUS,
+    SOCKET_RECEIVE_MESSAGE
+} from "../constants/ActionTypes";
+
 import {
     LOGIN_STATUS_UNKNOWN,
+    LOGIN_STATUS_GETTING,
     LOGIN_STATUS_PENDING,
     LOGIN_STATUS_SUCCESS,
     LOGIN_STATUS_FAILURE
@@ -10,13 +15,9 @@ const initialState = {
     status: LOGIN_STATUS_UNKNOWN
 };
 
-export default (state = initialState, action) => {
-    const { type, payload } = action;
-    if (type !== SOCKET_RECEIVE_MESSAGE) {
-        return state;
-    }
+const reduceReceiveMessage = (state, message) => {
+    const { variant, data } = message;
 
-    const { variant, data } = payload;
     if (variant !== "LoginStatusResponse") {
         return state;
     }
@@ -54,3 +55,20 @@ export default (state = initialState, action) => {
             return state;
     }
 };
+
+export default (state = initialState, action) => {
+    const { type, payload } = action;
+    switch (type) {
+        case LOGIN_GET_STATUS:
+            return {
+                ...state,
+                status: LOGIN_STATUS_GETTING
+            };
+
+        case SOCKET_RECEIVE_MESSAGE:
+            return reduceReceiveMessage(state, payload);
+
+        default:
+            return state;
+    }
+};