diff --git a/bfrontend/src/API/Gateway/GatewayConnection.js b/bfrontend/src/API/Gateway/GatewayConnection.js index a1dbb99..49701ae 100644 --- a/bfrontend/src/API/Gateway/GatewayConnection.js +++ b/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; } diff --git a/bfrontend/src/API/Gateway/globalGatewayConnection.js b/bfrontend/src/API/Gateway/globalGatewayConnection.js index e8c2f42..d1648b3 100644 --- a/bfrontend/src/API/Gateway/globalGatewayConnection.js +++ b/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() { - if (currentlyReconnecting || globalGatewayConnection.ws.readyState === 1) return; - currentlyReconnecting = true; - warn("Gateway connection closed"); +const dispatchConnectionClose = () => { 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; } diff --git a/bfrontend/src/Components/Auth/Create.js b/bfrontend/src/Components/Auth/Create.js index 5953600..0efee37 100644 --- a/bfrontend/src/Components/Auth/Create.js +++ b/bfrontend/src/Components/Auth/Create.js @@ -78,18 +78,26 @@ export default function Create() { ); return ( -
-

Create an account

- -
- setUsernameInput(target.value) } /> -
- -
- setPasswordInput(target.value) } /> -
- - +
+
+ + +
+ sign up +
+
+ +
+ setUsernameInput(target.value) } /> +
+ +
+ setPasswordInput(target.value) } /> +
+ + + +
+
); } \ No newline at end of file diff --git a/bfrontend/src/Components/Auth/Login.js b/bfrontend/src/Components/Auth/Login.js index ca1fb20..116bbf0 100644 --- a/bfrontend/src/Components/Auth/Login.js +++ b/bfrontend/src/Components/Auth/Login.js @@ -49,18 +49,26 @@ export default function Login() { } return ( -
-

Log in

- -
- setUsernameInput(target.value) } /> -
- -
- setPasswordInput(target.value) } /> -
- - +
+
+ @ +
+ log in +
+
+ +
+ setUsernameInput(target.value) } /> +
+ +
+ setPasswordInput(target.value) } /> +
+ + + +
+
); } \ No newline at end of file diff --git a/bfrontend/src/Components/Home/LoggedOutGreeter.js b/bfrontend/src/Components/Home/LoggedOutGreeter.js new file mode 100644 index 0000000..6ed6b2b --- /dev/null +++ b/bfrontend/src/Components/Home/LoggedOutGreeter.js @@ -0,0 +1,18 @@ +import { useHistory } from 'react-router-dom'; + +export default function LoggedOutGreeter() { + const history = useHistory(); + + return ( +
+
+ # +
+ waffle +
+ + +
+
+ ); +} \ No newline at end of file diff --git a/bfrontend/src/Components/Home/Root.js b/bfrontend/src/Components/Home/Root.js index 4118647..8a675ae 100644 --- a/bfrontend/src/Components/Home/Root.js +++ b/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 ( -
-

Welcome back!

- - -
- ); + return ; } - } \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Button.scss b/bfrontend/src/Styles/Components/Button.scss index e519748..bfe9284 100644 --- a/bfrontend/src/Styles/Components/Button.scss +++ b/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; - margin: 5px; + padding: 8px; + 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; diff --git a/bfrontend/src/Styles/Components/Containers.scss b/bfrontend/src/Styles/Components/Containers.scss index 1aa61c3..3c2c85e 100644 --- a/bfrontend/src/Styles/Components/Containers.scss +++ b/bfrontend/src/Styles/Components/Containers.scss @@ -64,4 +64,26 @@ .profile-badge { margin: 16px; -} \ No newline at end of file +} + +/* 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; +} diff --git a/bfrontend/src/Styles/Components/Textbox.scss b/bfrontend/src/Styles/Components/Textbox.scss index ea441d1..ca8a5e3 100644 --- a/bfrontend/src/Styles/Components/Textbox.scss +++ b/bfrontend/src/Styles/Components/Textbox.scss @@ -1,13 +1,14 @@ .text-input { - margin: 1px; - padding: 5px; + margin: 6px; + 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; diff --git a/bfrontend/src/Styles/root.scss b/bfrontend/src/Styles/root.scss index 14ae3b9..4edcea6 100644 --- a/bfrontend/src/Styles/root.scss +++ b/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;