greatly improve landing page

This commit is contained in:
hippoz 2021-09-05 18:57:20 +03:00
parent 52200b08ab
commit 4d2da4a5bd
No known key found for this signature in database
GPG key ID: 7C52899193467641
10 changed files with 113 additions and 53 deletions

View file

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

View file

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

View file

@ -78,8 +78,13 @@ export default function Create() {
); );
return ( return (
<div className="center grow col-flex">
<div className="greeter-logo">
<span className="greeter-logo-text">+</span>
</div>
<span className="greeter-branding-name">sign up</span>
<div className="center">
<div id="login-container"> <div id="login-container">
<h1>Create an account</h1>
<label htmlFor="username">Username</label> <label htmlFor="username">Username</label>
<br /> <br />
<input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } /> <input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />
@ -88,8 +93,11 @@ export default function Create() {
<br /> <br />
<input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } /> <input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } />
<br /> <br />
<button id="login-submit" className="button" onClick={ handleCreateContinueButton }>Continue</button> <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 } /> <Notification text={ info } />
</div> </div>
</div>
</div>
); );
} }

View file

@ -49,8 +49,13 @@ export default function Login() {
} }
return ( return (
<div className="center grow col-flex">
<div className="greeter-logo">
<span className="greeter-logo-text">@</span>
</div>
<span className="greeter-branding-name">log in</span>
<div className="center">
<div id="login-container"> <div id="login-container">
<h1>Log in</h1>
<label htmlFor="username">Username</label> <label htmlFor="username">Username</label>
<br /> <br />
<input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } /> <input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />
@ -59,8 +64,11 @@ export default function Login() {
<br /> <br />
<input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } /> <input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } />
<br /> <br />
<button id="login-submit" className="button-pressed" onClick={ handleLoginContinueButton }>Continue</button> <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 } /> <Notification text={ info } />
</div> </div>
</div>
</div>
); );
} }

View file

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

View file

@ -1,18 +1,9 @@
import { useHistory } from 'react-router-dom'; import LoggedOutGreeter from './LoggedOutGreeter';
export default function Root(props) { export default function Root(props) {
const history = useHistory();
if (props.user) { if (props.user) {
return null; return null;
} else { } 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>
);
} }
} }

View file

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

View file

@ -65,3 +65,25 @@
.profile-badge { .profile-badge {
margin: 16px; 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;
}

View file

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

View file

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