greatly improve landing page

bfrontend/src/API/Gateway/GatewayConnection.js

@@ -63,6 +63,8 @@ GatewayConnection.prototype.connect = function(token) {
     if (token) this.token = token;
     if (this.token) token = this.token;
 
+    this.connectionAttemptStartedTime = new Date();
+
     this.ws = new WebSocket(this.gatewayUrl);
         
     this.handshakeCompleted = false;
@@ -73,7 +75,7 @@ GatewayConnection.prototype.connect = function(token) {
     this.ws.onclose = (e) => {
         this.handshakeCompleted = false;
         logGateway(`Close: ${e.code}:${e.reason}`);
-        this.fire("onclose", e);
+        this.fire("onclose", e.code);
     };
     this.ws.onmessage = async (message) => {
         try {
@@ -107,7 +109,8 @@ GatewayConnection.prototype.connect = function(token) {
                 logGateway("Got YOO_ACK", packet.data);
                 this.handshakeCompleted = true;
                 this.sessionInformation = packet.data;
-                logGateway("Handshake complete");
+                this.handshakeCompletedTime = (new Date()).getTime() - this.connectionAttemptStartedTime.getTime();
+                logGateway(`Handshake complete in ${this.handshakeCompletedTime}ms`);
                 this.fire("onopen", packet.data);
                 break;
             }

bfrontend/src/API/Gateway/globalGatewayConnection.js

@@ -26,7 +26,6 @@ globalGatewayConnection.onopen = (sessionData) => {
             ...experimentModifiers || {}
         };
         store.dispatch({ type: 'application/updateexperiments', experiments });
-        store.dispatch({ type: 'application/updatebannertext', text: "Experiment overrides are enabled! Things could go haywire!" });
     } else {
         store.dispatch({ type: 'application/updateexperiments', experiments: sessionData.__global_experiments || {} });
     }
@@ -40,16 +39,26 @@ globalGatewayConnection.presenceUpdate = (presence) => {
     store.dispatch({ type: 'channels/updatepresence', clientListEvent: presence });
 };
 
-globalGatewayConnection.onclose = function() {
+const dispatchConnectionClose = () => {
-    if (currentlyReconnecting || globalGatewayConnection.ws.readyState === 1) return;
-    currentlyReconnecting = true;
-    warn("Gateway connection closed");
     store.dispatch({ type: 'authenticator/updatelocaluserobject', user: undefined });
     store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } });
     store.dispatch({ type: 'application/updatebannertext', text: "Hang tight! You've lost connection!" });
-    const interval = setInterval(() => {
+};
+
+let reconnectInterval;
+globalGatewayConnection.onclose = function(code) {
+    if (code === 4006) {
+        clearInterval(reconnectInterval);
+        dispatchConnectionClose();
+        return;
+    }
+    if (currentlyReconnecting || globalGatewayConnection.ws.readyState === 1) return;
+    currentlyReconnecting = true;
+    warn("Gateway connection closed");
+    dispatchConnectionClose();
+    reconnectInterval = setInterval(() => {
         if (globalGatewayConnection.ws.readyState === 1) {
-            clearInterval(interval);
+            clearInterval(reconnectInterval);
             currentlyReconnecting = false;
             return;
         }

bfrontend/src/Components/Auth/Create.js

@@ -78,18 +78,26 @@ export default function Create() {
     );
 
     return (
-        <div id="login-container">
+        <div className="center grow col-flex">
-            <h1>Create an account</h1>
+            <div className="greeter-logo">
-            <label htmlFor="username">Username</label>
+                <span className="greeter-logo-text">+</span>
-            <br />
+            </div>
-            <input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />
+            <span className="greeter-branding-name">sign up</span>
-            <br />
+            <div className="center">
-            <label htmlFor="password">Password</label>
+                <div id="login-container">
-            <br />
+                    <label htmlFor="username">Username</label>
-            <input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } />
+                    <br />
-            <br />
+                    <input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />
-            <button id="login-submit" className="button" onClick={ handleCreateContinueButton }>Continue</button>
+                    <br />
-            <Notification text={ info } />
+                    <label htmlFor="password">Password</label>
+                    <br />
+                    <input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } />
+                    <br />
+                    <button style={{ float: "right" }} id="login-submit" className="button-pressed" onClick={ handleCreateContinueButton }>Continue</button>
+                    <button style={{ float: "right" }} className="button" onClick={ () => history.push("/") }>Back</button>
+                    <Notification text={ info } />
+                </div>
+            </div>
         </div>
     );
 }

bfrontend/src/Components/Auth/Login.js

@@ -49,18 +49,26 @@ export default function Login() {
     }
 
     return (
-        <div id="login-container">
+        <div className="center grow col-flex">
-            <h1>Log in</h1>
+            <div className="greeter-logo">
-            <label htmlFor="username">Username</label>
+                <span className="greeter-logo-text">@</span>
-            <br />
+            </div>
-            <input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />
+            <span className="greeter-branding-name">log in</span>
-            <br />
+            <div className="center">
-            <label htmlFor="password">Password</label>
+                <div id="login-container">
-            <br />
+                    <label htmlFor="username">Username</label>
-            <input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } />
+                    <br />
-            <br />
+                    <input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />
-            <button id="login-submit" className="button-pressed" onClick={ handleLoginContinueButton }>Continue</button>
+                    <br />
-            <Notification text={ info } />
+                    <label htmlFor="password">Password</label>
+                    <br />
+                    <input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } />
+                    <br />
+                    <button style={{ float: "right" }} id="login-submit" className="button-pressed" onClick={ handleLoginContinueButton }>Continue</button>
+                    <button style={{ float: "right" }} className="button" onClick={ () => history.push("/") }>Back</button>
+                    <Notification text={ info } />
+                </div>
+            </div>
         </div>
     );
 }

bfrontend/src/Components/Home/LoggedOutGreeter.js

@@ -0,0 +1,18 @@
+import { useHistory } from 'react-router-dom';
+
+export default function LoggedOutGreeter() {
+    const history = useHistory();
+
+    return (
+        <div className="center grow col-flex">
+            <div className="greeter-logo">
+                <span className="greeter-logo-text">#</span>
+            </div>
+            <span className="greeter-branding-name">waffle</span>
+            <div className="center">
+                <button className="button-pressed" onClick={ () => { history.push('/login') } }>Log in</button>
+                <button className="button" onClick={ () => { history.push('/create') } }>Create an account</button>
+            </div>
+        </div>
+    );
+}

bfrontend/src/Components/Home/Root.js

@@ -1,18 +1,9 @@
-import { useHistory } from 'react-router-dom';
+import LoggedOutGreeter from './LoggedOutGreeter';
 
 export default function Root(props) {
-    const history = useHistory();
-
     if (props.user) {
         return null;
     } else {
-        return (
+        return <LoggedOutGreeter />;
-            <div id="login-message-container">
-                <h1>Welcome back!</h1>
-                <button className="button-pressed" onClick={ () => { history.push('/login') } }>Log in</button>
-                <button className="button" onClick={ () => { history.push('/create') } }>Create an account</button>
-            </div>
-        );
     }
-
 }

bfrontend/src/Styles/Components/Button.scss

@@ -1,18 +1,18 @@
 .button {
-
     background-color: var(--button-color);
     color: var(--default-text-color);
-
     border-radius: var(--default-button-border-radius);
     cursor: pointer;
-    padding: 5px;
+    padding: 8px;
-    margin: 5px;
+    margin: 6px;
     border: 0px;
     flex-shrink: 0;
 
     &-channel {
         @extend .button;
 
+        padding: 5px;
+        margin: 5px;
         background: var(--channel-button-background);
         border-radius: var(--channel-button-border-radius);
         width: 200px;

bfrontend/src/Styles/Components/Containers.scss

@@ -64,4 +64,26 @@
 
 .profile-badge {
     margin: 16px;
-}
+}
+
+/* greeter */
+
+.greeter-logo {
+    user-select: none;
+    width: 16em;
+    height: 16em;
+    border-radius: 5em;
+    display: flex;
+    align-items: center; 
+    justify-content: center;
+}
+
+.greeter-logo-text {
+    font-size: 14em;
+    filter: drop-shadow(0.1em 8px 0 hsla(300, 60%, 40%, 80%));
+}
+
+.greeter-branding-name {
+    font-size: 3em;
+    padding-bottom: 18px;
+}

bfrontend/src/Styles/Components/Textbox.scss

@@ -1,13 +1,14 @@
 .text-input {
-    margin: 1px;
+    margin: 6px;
-    padding: 5px;
+    padding: 6px;
     border: none;
     color: var(--default-text-color);
+    border-radius: var(--default-button-border-radius);
+    background-color: var(--message-box-color);
     flex-grow: 1;
 
     &.message-input {
         border-radius: var(--message-box-border-radius);
-        background-color: var(--message-box-color);
         height: 32px;
         padding: 8px;
         margin: 0;

bfrontend/src/Styles/root.scss

@@ -33,7 +33,7 @@
     --button-selected-background-color: var(--accent-color);
     --channel-button-background: none;
 
-    --default-button-border-radius: 0px;
+    --default-button-border-radius: 6px;
     --channel-button-border-radius: 10px;
     --message-box-border-radius: 10px;
     --elevated-modal-border-radius: 10px;