new login design (#4442)

* new login design

* remove effects file (wrong direction)

* add Known Hosts dropdown component

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/containers/Server/Server.tsx

@@ -3,135 +3,59 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 
-import Button from "@material-ui/core/Button";
 import ListItem from "@material-ui/core/ListItem";
 import Paper from "@material-ui/core/Paper";
 
 import { RoomsSelectors, ServerSelectors } from "store";
 
-import { AuthenticationService } from "api";
-
 import { ThreePaneLayout, UserDisplay, VirtualList } from "components";
-import { ConnectForm, RegisterForm } from "forms";
-import { Room, StatusEnum, User } from "types";
+import { Room, User } from "types";
 import Rooms from './Rooms';
 
 import "./Server.css";
 
 class Server extends Component<ServerProps, ServerState> {
-  constructor(props) {
-    super(props);
-
-    this.showDescription = this.showDescription.bind(this);
-    this.showRegisterForm = this.showRegisterForm.bind(this);
-    this.hideRegisterForm = this.hideRegisterForm.bind(this);
-
-    this.state = {
-      register: false
-    };
-  }
-
-  showDescription(state, description) {
-    const isDisconnected = state === StatusEnum.DISCONNECTED;
-    const hasDescription = description && !!description.length;
-
-    return isDisconnected && hasDescription;
-  }
-
-  showRegisterForm() {
-    this.setState({register: true});
-  }
-
-  hideRegisterForm() {
-    this.setState({register: false});
-  }
-
   render() {
-    const { message, rooms, joinedRooms, history, state, description, users } = this.props;
-    const { register } = this.state;
-    const isConnected = AuthenticationService.isConnected(state);
+    const { message, rooms, joinedRooms, history, users } = this.props;
 
     return (
-      <div className="server">
-            {
-              isConnected
-                ? ( <ServerRooms rooms={rooms} joinedRooms={joinedRooms} history={history} message={message} users={users} /> )
-                : (
-                  <div className="server-connect">
-                    <Paper className="server-connect__form">
-                      {
-                        register
-                          ? ( <Register connect={this.hideRegisterForm} /> )
-                          : ( <Connect register={this.showRegisterForm} /> )
-                      }
-                    </Paper>
-                  </div>
-                )
-            }
-          {
-            !isConnected && this.showDescription(state, description) && (
-              <Paper className="server-connect__description">
-                {description}
-              </Paper>
-            )
-          }
+      <div className="server-rooms">
+        <ThreePaneLayout
+          top={(
+            <Paper className="serverRoomWrapper overflow-scroll">
+              <Rooms rooms={rooms} joinedRooms={joinedRooms} history={history} />
+            </Paper>
+          )}
+
+          bottom={(
+            <Paper className="serverMessage overflow-scroll">
+              <div className="serverMessage__content" dangerouslySetInnerHTML={{ __html: message }} />
+            </Paper>
+          )}
+
+          side={(
+            <Paper className="server-rooms__side overflow-scroll">
+              <div className="server-rooms__side-label">
+                Users connected to server: {users.length}
+              </div>
+              <VirtualList
+                itemKey={(index) => users[index].name }
+                items={ users.map(user => (
+                  <ListItem button dense>
+                    <UserDisplay user={user} />
+                  </ListItem>
+                ) ) }
+              />
+            </Paper>
+          )}
+        />
       </div>
     );
   }
 }
 
-const ServerRooms = ({ rooms, joinedRooms, history, message, users}) => (
-  <div className="server-rooms">
-    <ThreePaneLayout
-      top={(
-        <Paper className="serverRoomWrapper overflow-scroll">
-          <Rooms rooms={rooms} joinedRooms={joinedRooms} history={history} />
-        </Paper>
-      )}
-
-      bottom={(
-        <Paper className="serverMessage overflow-scroll">
-          <div className="serverMessage__content" dangerouslySetInnerHTML={{ __html: message }} />
-        </Paper>
-      )}
-
-      side={(
-        <Paper className="server-rooms__side overflow-scroll">
-          <div className="server-rooms__side-label">
-            Users connected to server: {users.length}
-          </div>
-          <VirtualList
-            itemKey={(index) => users[index].name }
-            items={ users.map(user => (
-              <ListItem button dense>
-                <UserDisplay user={user} />
-              </ListItem>
-            ) ) }
-          />
-        </Paper>
-      )}
-    />
-  </div>
-);
-
-const Connect = ({register}) => (
-  <div className="form-wrapper">
-    <ConnectForm onSubmit={AuthenticationService.connect} />
-    <Button variant="outlined" onClick={register}>Register</Button>
-  </div>
-);
-
-const Register = ({ connect }) => (
-  <div className="form-wrapper">
-    <RegisterForm onSubmit={AuthenticationService.register} />
-    <Button variant="outlined" onClick={connect}>Connect</Button>
-  </div>
-);
-
 interface ServerProps {
   message: string;
-  state: number;
-  description: string;
   rooms: Room[];
   joinedRooms: Room[];
   users: User[];
@@ -139,16 +63,14 @@ interface ServerProps {
 }
 
 interface ServerState {
-  register: boolean;
+
 }
 
 const mapStateToProps = state => ({
   message: ServerSelectors.getMessage(state),
-  state: ServerSelectors.getState(state),
-  description: ServerSelectors.getDescription(state),
   rooms: RoomsSelectors.getRooms(state),
   joinedRooms: RoomsSelectors.getJoinedRooms(state),
   users: ServerSelectors.getUsers(state)
 });
 
-export default withRouter(connect(mapStateToProps)(Server));
+export default withRouter(connect(mapStateToProps)(Server));