Restyle login window

src/locutus.ts

@@ -210,8 +210,12 @@ export class App {
                 <input name="account" placeholder="Account name" type="text" required/>
                 <input name="domain" placeholder="Domain" type="text" pattern="([a-zA-Z0-9_-]+\\.)+[a-zA-Z]{2,}" required/>
                 <input name="password" placeholder="Password" type="password" required/>
-                <label><input name="saveAccountName" type="checkbox"/> Save Account Name</label>
-                <label><input name="keepSession" type="checkbox"/> Keep me signed in</label>
+                <fieldset>
+                    <label><input name="saveAccountName" type="checkbox"/> Save Account Name</label>
+                </fieldset>
+                <fieldset>
+                    <label><input name="keepSession" type="checkbox"/> Keep me signed in</label>
+                </fieldset>
                 <button type="submit">Login</button>
             </form>`;
 

src/usimp.ts

@@ -3,6 +3,8 @@
 const DNS_RE = /^([a-z0-9_-]+\.)+[a-z]{2,}$/i;
 const UUID_RE = /^[0-9a-f]{8}(-[0-9a-f]{4}){3}-[0-9a-f]{12}$/i;
 
+const WEBSOCKET_KEEP_ALIVE = 5 * 60;  // [sec]
+
 type DomainJson = {
     name: string,
     id: string,
@@ -295,6 +297,7 @@ export class Session {
 
     httpBaseUrl: string | null;
     websocket: WebSocket | null;
+    websocketPingInterval: number | null;
     numRequests: number;
     requestNumDiscriminator: number;
     subscriptions: {
@@ -314,6 +317,7 @@ export class Session {
         this.token = null;
         this.httpBaseUrl = null;
         this.websocket = null;
+        this.websocketPingInterval = null;
         this.subscriptions = [];
         this.subscriptionEndpoints = [];
     }
@@ -329,13 +333,29 @@ export class Session {
     async close(keepEndpoints: boolean = false) {
         await this.unsubscribeAll(keepEndpoints);
         if (this.websocket && (this.websocket.readyState !== WebSocket.CLOSING && this.websocket.readyState !== WebSocket.CLOSED)) {
-            this.websocket.close();
+            this.closeWebsocket()
             this.subscriptions = [];
-            this.websocket = null;
             this.server = null;
         }
     }
 
+    private setWebsocketNull() {
+        if (this.websocketPingInterval) clearInterval(this.websocketPingInterval);
+        this.websocket = null;
+        this.websocketPingInterval = null;
+    }
+
+    closeWebsocket() {
+        if (this.websocket) {
+            this.websocket.close();
+            this.setWebsocketNull();
+        }
+    }
+
+    hasWebsocket(): boolean {
+        return this.websocket !== null;
+    }
+
     async sleep() {
         await this.close(true);
     }
@@ -359,8 +379,11 @@ export class Session {
                 this.websocket = new WebSocket(`wss://${host}:${protocols.wss}/_usimp/websocket`, ["usimp"]);
                 this.websocket.addEventListener("error", (error) => {
                     console.error(error);
-                    this.websocket = null;
+                    this.setWebsocketNull();
                 });
+                this.websocketPingInterval = setInterval(() => {
+                    if (this.hasWebsocket()) this.send("ping", {})
+                }, WEBSOCKET_KEEP_ALIVE * 1000);
             }
 
             if ("https" in protocols) {
@@ -520,10 +543,8 @@ export class Session {
                 }
             } catch (error) {
                 console.error(error);
-                if (this.websocket !== null) {
-                    this.websocket.close();
-                    this.websocket = null;
-                }
+                if (this.hasWebsocket()) this.closeWebsocket();
+
                 this.httpBaseUrl = null;
                 if (this.server !== null) {
                     this.domain.invalidServers.push(this.server);
@@ -539,7 +560,7 @@ export class Session {
         const resHttp = await this.send("ping", {}, undefined, true);
         result.http = resHttp.duration;
 
-        if (this.websocket) {
+        if (this.hasWebsocket()) {
             const resWs = await this.send("ping", {});
             result.ws = resWs.duration;
         }
@@ -575,7 +596,7 @@ export class Session {
     }
 
     private async _subscribe(cb: EventHandler) {
-        if (this.websocket !== null) {
+        if (this.hasWebsocket()) {
             const subscription = await this.send('subscribe', {}, 60_000, false, undefined, (res) => {
                 if (res.action === 'push') {
                     if (isEventPushEnvelopeJson(res.data)) {
@@ -621,7 +642,7 @@ export class Session {
     }
 
     private async unsubscribe(requestNr: number | undefined = undefined, abortController: AbortController | undefined = undefined) {
-        if (this.websocket !== null) {
+        if (this.hasWebsocket()) {
             await this.send('unsubscribe', {'request_nr': requestNr})
         } else {
             if (abortController) abortController.abort('unsubscribe');

www/res/styles/styles.css

@@ -1,8 +1,9 @@
 
 html {
     font-family: 'Arial', sans-serif;
-    --bg-win: rgba(192, 192, 192, 0.25);
-    --bg: rgba(224, 224, 224, 0.5);
+    --bg-win: #C0C0C040;
+    --bg: #FFFFFF80;
+    --bg-border: #FFFFFFC0;
     --fg-soft: rgba(32, 32, 32, 0.5);
     --footer-height: 2em;
 }
@@ -57,15 +58,22 @@ main {
 }
 
 #windows > * {
-    padding: 0.5em 1em;
+    padding: 1em 2em;
 }
 
 div.window-login,
 div.window-welcome {
-    max-width: 650px;
     margin: calc(max(var(--vh, 1vh) * 25, 8em) - 8em) auto 1em auto;
 }
 
+div.window-login {
+    max-width: 450px;
+}
+
+div.window-welcome {
+    max-width: 650px;
+}
+
 div.window-login h1,
 div.window-welcome h1 {
     text-align: center;
@@ -93,23 +101,23 @@ footer div {
 
 form {
     max-width: 400px;
-    margin: 1.5em auto;
+    margin: 1.5em auto 1em auto;
 }
 
-form input,
+form input:is([type=text], [type=password]),
 form button,
+form fieldset,
 a.button,
 form div {
-    border: 1px solid var(--bg);
+    border: 1px solid var(--bg-border);
     border-radius: 4px;
-    outline: none;
     padding: 0.5em 1em;
     display: block;
     box-sizing: border-box;
     margin: 1em auto;
     font-size: 1em;
     color: #000000;
-    transition: border-color 0.125s, background-color 0.125s;
+    transition: border-color 0.0625s, background-color 0.0625s;
 }
 
 form input,
@@ -132,8 +140,9 @@ a.button {
     width: 100px;
 }
 
-form input,
-form button {
+form input:is([type=text], [type=password]),
+form button,
+form fieldset {
     width: 100%;
 }