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/App/AppShellRoutes.tsx

@@ -9,6 +9,7 @@ import {
   Player, 
   Room, 
   Server, 
+  Login,
   Logs
 } from "containers";
 
@@ -22,7 +23,8 @@ const Routes = () => (
       <Route path={RouteEnum.PLAYER} render={() => <Player />} />
       {<Route path={RouteEnum.ROOM} render={() => <Room />} />}
       <Route path={RouteEnum.SERVER} render={() => <Server />} />
-      <Redirect from="/" to={RouteEnum.SERVER} />
+      <Route path={RouteEnum.LOGIN} render={() => <Login />} />
+      <Redirect from="/" to={RouteEnum.LOGIN} />
     </Switch>
   </div>
 );

webclient/src/containers/Login/Login.css

@@ -0,0 +1,72 @@
+.login {
+  height: 100%;
+  padding: 50px;
+}
+
+.login__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.login-content {
+  width: 100%;
+  max-width: 1000px;
+  display: flex;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.login-content__header {
+  font-family: Teko, sans-serif;
+  font-size: 34px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+
+.login-content__header img {
+  height: 60px;
+  margin-right: 15px;
+  margin-bottom: 20px;
+}
+
+.login-content__form,
+.login-content__description {
+  width: 50%;
+}
+
+.login-content__form {
+  padding: 50px 50px 33px;
+}
+
+.login-content__form h1 {
+  margin-bottom: 20px;
+}
+
+.login-form {
+  margin-top: 30px;
+}
+
+.login-content__description {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  text-transform: uppercase;
+}
+
+.login-footer {
+  margin-top: 30px;
+}
+
+.login-footer_register {
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.login-content__connectionStatus {
+  text-align: center;
+  margin: 20px 0;
+  padding: 20px;
+}

webclient/src/containers/Login/Login.tsx

@@ -0,0 +1,97 @@
+// eslint-disable-next-line
+import React from "react";
+import { connect } from "react-redux";
+import { Redirect } from "react-router-dom";
+import { styled } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+
+import { AuthenticationService } from "api";
+import { LoginForm } from "forms";
+import { RouteEnum } from "types";
+import { /* ServerDispatch, */ ServerSelectors } from "store";
+
+import "./Login.css";
+import logo from "images/logo.png";
+
+const Login = ({ state, description }: LoginProps) => {
+  const isConnected = AuthenticationService.isConnected(state);
+
+  const showDescription = () => {
+    return !isConnected && description?.length;
+  }
+
+  const createAccount = () => {
+    console.log('Login.createAccount->openForgotPasswordDialog');
+  };
+
+  return (
+    <div className="login overflow-scroll">
+      { isConnected && <Redirect from="*" to={RouteEnum.SERVER} />}
+
+      <div className="login__wrapper">
+        <ThemedLoginContent className="login-content">
+          <div className="login-content__form">
+            <ThemedLoginHeader className="login-content__header">
+              <img src={logo} alt="logo" />
+              <span>COCKATRICE</span>
+            </ThemedLoginHeader>
+            <Typography variant="h1">Login</Typography>
+            <Typography variant="subtitle1">A cross-platform virtual tabletop for multiplayer card games.</Typography>
+            <div className="login-form">
+              <LoginForm onSubmit={AuthenticationService.connect} />
+            </div>
+
+            {
+              showDescription() && (
+                <Paper className="login-content__connectionStatus">
+                  {description}
+                </Paper>
+              )
+            }
+
+            <div className="login-footer">
+              <div className="login-footer_register">
+                <span>Not registered yet?</span>
+                <Button color="primary" onClick={createAccount}>Create an account</Button>
+              </div>
+              <Typography variant="subtitle2" className="login-footer__copyright">
+                Cockatrice is an open source project @{ new Date().getUTCFullYear() }
+              </Typography>
+            </div>
+          </div>
+
+          <ThemedLoginDescription className="login-content__description">
+            description
+          </ThemedLoginDescription>
+        </ThemedLoginContent>
+      </div>
+    </div>
+  );
+}
+
+const ThemedLoginContent = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper
+}));
+
+const ThemedLoginDescription = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+}));
+
+const ThemedLoginHeader = styled('div')(({ theme }) => ({
+  color: theme.palette.success.light
+}));
+
+interface LoginProps {
+  state: number;
+  description: string;
+}
+
+const mapStateToProps = state => ({
+  state: ServerSelectors.getState(state),
+  description: ServerSelectors.getDescription(state),
+});
+
+export default connect(mapStateToProps)(Login);

webclient/src/containers/Room/SayMessage.tsx

@@ -7,7 +7,7 @@ import { InputAction } from 'components';
 
 const SayMessage = ({ handleSubmit }) => (
   <Form onSubmit={handleSubmit}>
-    <InputAction action="Say" label="Chat" name="message" />
+    <InputAction action="Send" label="Chat" name="message" />
   </Form>
 );
 

webclient/src/containers/Server/Server.css

@@ -10,33 +10,6 @@
   align-items: center;
 }
 
-.server .form-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.server-connect {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.server-connect__form,
-.server-connect__description {
-  width: 100%;
-  max-width: 300px;
-}
-
-.server-connect__form {
-  margin: 50px 0;
-}
-
-.server-connect__description {
-  text-align: center;
-  margin: 20px 0;
-  padding: 20px;
-}
 
 .serverRoomWrapper {
   height: 100%;
@@ -58,4 +31,4 @@
   padding: 10px;
   background: white;
   z-index: 1;
-}
+}

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));

webclient/src/containers/index.ts

@@ -5,4 +5,5 @@ export { default as Decks } from './Decks/Decks';
 export { default as Room } from "./Room/Room";
 export { default as Player } from "./Player/Player";
 export { default as Server } from "./Server/Server";
-export { default as Logs } from "./Logs/Logs";
+export { default as Logs } from "./Logs/Logs";
+export { default as Login } from "./Login/Login";