Lifted some logic up a level to clean up code.

app/src/components/App.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import Room from './Room';
+import JoinDialog from './JoinDialog';
+import Lobby from './Lobby';
+
+const App = (props) =>
+{
+	const {
+		room
+	} = props;
+
+	if (room.lockedOut)
+	{
+		return (
+			<Lobby />
+		);
+	}
+	else if (!room.joined)
+	{
+		return (
+			<JoinDialog />
+		);
+	}
+	else
+	{
+		return (
+			<Room />
+		);
+	}
+}
+
+App.propTypes =
+{
+	room : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) =>
+	({
+		room : state.room
+	});
+
+export default connect(
+	mapStateToProps,
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.room === next.room
+			);
+		}
+	}
+)(App);

app/src/components/JoinDialog.js

@@ -14,6 +14,15 @@ const styles = (theme) =>
 	({
 		root :
 		{
+			display              : 'flex',
+			width                : '100%',
+			height               : '100%',
+			backgroundColor      : 'var(--background-color)',
+			backgroundImage      : `url(${window.config.background})`,
+			backgroundAttachment : 'fixed',
+			backgroundPosition   : 'center',
+			backgroundSize       : 'cover',
+			backgroundRepeat     : 'no-repeat'
 		},
 		dialogPaper :
 		{
@@ -50,8 +59,8 @@ const JoinDialog = ({
 }) =>
 {
 	return (
+		<div className={classes.root}>
 			<Dialog
-			className={classes.root}
 				open
 				classes={{
 					paper : classes.dialogPaper
@@ -96,6 +105,7 @@ const JoinDialog = ({
 					/>
 				</DialogActions>
 			</Dialog>
+		</div>
 	);
 };
 

app/src/components/Lobby.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import { withRoomContext } from '../RoomContext';
+import * as stateActions from '../actions/stateActions';
+import PropTypes from 'prop-types';
+import Dialog from '@material-ui/core/Dialog';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import DialogActions from '@material-ui/core/DialogActions';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+
+const styles = (theme) =>
+	({
+		root :
+		{
+			display              : 'flex',
+			width                : '100%',
+			height               : '100%',
+			backgroundColor      : 'var(--background-color)',
+			backgroundImage      : `url(${window.config.background})`,
+			backgroundAttachment : 'fixed',
+			backgroundPosition   : 'center',
+			backgroundSize       : 'cover',
+			backgroundRepeat     : 'no-repeat'
+		},
+		dialogPaper :
+		{
+			width                          : '20vw',
+			padding                        : theme.spacing(2),
+			[theme.breakpoints.down('lg')] :
+			{
+				width : '30vw'
+			},
+			[theme.breakpoints.down('md')] :
+			{
+				width : '40vw'
+			},
+			[theme.breakpoints.down('sm')] :
+			{
+				width : '60vw'
+			},
+			[theme.breakpoints.down('xs')] :
+			{
+				width : '80vw'
+			}
+		},
+		logo :
+		{
+			display : 'block'
+		}
+	});
+
+const Lobby = ({
+	roomClient,
+	displayName,
+	changeDisplayName,
+	classes
+}) =>
+{
+	return (
+		<div className={classes.root}>
+			<Paper className={classes.message}>
+				<Typography variant='h2'>This room is locked at the moment, try again later.</Typography>
+			</Paper>
+		</div>
+	);
+};
+
+Lobby.propTypes =
+{
+	roomClient        : PropTypes.any.isRequired,
+	displayName       : PropTypes.string.isRequired,
+	changeDisplayName : PropTypes.func.isRequired,
+	classes           : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) =>
+{
+	return {
+		displayName : state.settings.displayName
+	};
+};
+
+const mapDispatchToProps = (dispatch) =>
+{
+	return {
+		changeDisplayName : (displayName) =>
+		{
+			dispatch(stateActions.setDisplayName(displayName));
+		}
+	};
+};
+
+export default withRoomContext(connect(
+	mapStateToProps,
+	mapDispatchToProps,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.settings.displayName === next.settings.displayName
+			);
+		}
+	}
+)(withStyles(styles)(Lobby)));

app/src/components/Room.js

@@ -13,7 +13,6 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
 import Hidden from '@material-ui/core/Hidden';
-import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -34,7 +33,6 @@ import LockIcon from '@material-ui/icons/Lock';
 import LockOpenIcon from '@material-ui/icons/LockOpen';
 import Button from '@material-ui/core/Button';
 import Settings from './Settings/Settings';
-import JoinDialog from './JoinDialog';
 
 const TIMEOUT = 10 * 1000;
 
@@ -277,26 +275,6 @@ class Room extends React.PureComponent
 			democratic : Democratic
 		}[room.mode];
 
-		if (room.lockedOut)
-		{
-			return (
-				<div className={classes.root}>
-					<Paper className={classes.message}>
-						<Typography variant='h2'>This room is locked at the moment, try again later.</Typography>
-					</Paper>
-				</div>
-			);
-		}
-		else if (!room.joined)
-		{
-			return (
-				<div className={classes.root}>
-					<JoinDialog />
-				</div>
-			);
-		}
-		else
-		{
 		return (
 			<div className={classes.root}>
 				<CookieConsent>
@@ -331,10 +309,7 @@ class Room extends React.PureComponent
 								<MenuIcon />
 							</IconButton>
 						</PulsingBadge>
-							{ window.config.logo ?
-								<img alt='Logo' className={classes.logo} src={window.config.logo} />
-								:null
-							}
+						{ window.config.logo && <img alt='Logo' className={classes.logo} src={window.config.logo} /> }
 						<Typography
 							className={classes.title}
 							variant='h6'
@@ -351,14 +326,7 @@ class Room extends React.PureComponent
 								color='inherit'
 								onClick={() =>
 								{
-										if (room.locked)
-										{
-											roomClient.unlockRoom();
-										}
-										else
-										{
-											roomClient.lockRoom();
-										}
+									room.locked ? roomClient.unlockRoom() : roomClient.lockRoom();
 								}}
 							>
 								{ room.locked ?
@@ -367,7 +335,7 @@ class Room extends React.PureComponent
 									<LockOpenIcon />
 								}
 							</IconButton>
-								{ this.fullscreen.fullscreenEnabled ?
+							{ this.fullscreen.fullscreenEnabled &&
 								<IconButton
 									aria-label='Fullscreen'
 									className={classes.actionButton}
@@ -380,7 +348,6 @@ class Room extends React.PureComponent
 										<FullScreenIcon />
 									}
 								</IconButton>
-									:null
 							}
 							<IconButton
 								aria-label='Settings'
@@ -390,7 +357,7 @@ class Room extends React.PureComponent
 							>
 								<SettingsIcon />
 							</IconButton>
-								{ loginEnabled ?
+							{ loginEnabled &&
 								<IconButton
 									aria-label='Account'
 									className={classes.actionButton}
@@ -406,7 +373,6 @@ class Room extends React.PureComponent
 										<AccountCircle />
 									}
 								</IconButton>
-									:null
 							}
 							<Button
 								aria-label='Leave meeting'
@@ -444,7 +410,6 @@ class Room extends React.PureComponent
 		);
 	}
 }
-}
 
 Room.propTypes =
 {

app/src/index.js

@@ -9,7 +9,7 @@ import RoomClient from './RoomClient';
 import RoomContext from './RoomContext';
 import deviceInfo from './deviceInfo';
 import * as stateActions from './actions/stateActions';
-import Room from './components/Room';
+import App from './components/App';
 import LoadingView from './components/LoadingView';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import { PersistGate } from 'redux-persist/lib/integration/react';
@@ -94,7 +94,7 @@ function run()
 				<PersistGate loading={<LoadingView />} persistor={persistor}>
 					<RoomContext.Provider value={roomClient}>
 						<SnackbarProvider>
-							<Room />
+							<App />
 						</SnackbarProvider>
 					</RoomContext.Provider>
 				</PersistGate>

server/server.js

@@ -19,12 +19,7 @@ const base64 = require('base-64');
 // auth
 const passport = require('passport');
 const { Issuer, Strategy } = require('openid-client');
-const session = require('express-session')({
-	secret            : config.cookieSecret,
-	resave            : true,
-	saveUninitialized : true,
-	cookie            : { secure: true }
-});
+const expressSession = require('express-session');
 const sharedSession = require('express-socket.io-session');
 
 /* eslint-disable no-console */
@@ -57,6 +52,13 @@ const tls =
 
 const app = express();
 
+const session = expressSession({
+	secret            : config.cookieSecret,
+	resave            : true,
+	saveUninitialized : true,
+	cookie            : { secure: true }
+})
+
 app.use(session);
 
 let httpsServer;