From a5bfb4f8d21d4d5f442080e292d070806fbb94d0 Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Sun, 5 Nov 2023 13:05:46 +0000
Subject: [PATCH] Form submits on return press

---
 client/public/stylesheets/style/style.css | 10 +++------
 client/src/olympusapp.ts                  | 27 ++++++++++++++---------
 client/views/other/dialogs.ejs            |  6 ++---
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/client/public/stylesheets/style/style.css b/client/public/stylesheets/style/style.css
index dd5c7381..94b98cee 100644
--- a/client/public/stylesheets/style/style.css
+++ b/client/public/stylesheets/style/style.css
@@ -72,10 +72,6 @@ form {
     padding: 0;
 }
 
-form>div {
-    margin: 20px 0;
-}
-
 .pill {
     background-color: var(--background-steel);
     border-radius: 999px;
@@ -669,8 +665,8 @@ nav.ol-panel> :last-child {
     width:10px;
 }
 
-.ol-navbar-buttons-group > .protectable > button.lock svg.locked {
-    filter:invert(100);
+.ol-navbar-buttons-group > .protectable > button.lock svg.locked * {
+    fill:white !important;
 }
 
 .ol-navbar-buttons-group > .protectable > button:not([data-protected]).lock svg.unlocked,
@@ -850,7 +846,7 @@ nav.ol-panel> :last-child {
     column-gap: 10px;
     display: flex;
     flex-direction: row;
-    margin: 10px 0px;
+    margin: 20px 0px;
     flex-wrap: wrap;
     width: 100%;
     row-gap: 10px;
diff --git a/client/src/olympusapp.ts b/client/src/olympusapp.ts
index ac2bc16e..22f2ebf8 100644
--- a/client/src/olympusapp.ts
+++ b/client/src/olympusapp.ts
@@ -403,19 +403,26 @@ export class OlympusApp {
         });
 
         /* Try and connect with the Olympus REST server */
-        document.addEventListener("tryConnection", () => {
-            const form = document.querySelector("#splash-content")?.querySelector("#authentication-form");
-            const username = (form?.querySelector("#username") as HTMLInputElement).value;
-            const password = (form?.querySelector("#password") as HTMLInputElement).value;
+        const loginForm = document.getElementById("authentication-form");
+        if (loginForm instanceof HTMLFormElement) {
+            loginForm.addEventListener("submit", (ev:SubmitEvent) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                const username = (loginForm.querySelector("#username") as HTMLInputElement).value;
+                const password = (loginForm.querySelector("#password") as HTMLInputElement).value;
 
-            /* Update the user credentials */
-            this.getServerManager().setCredentials(username, password);
+                // Update the user credentials
+                this.getServerManager().setCredentials(username, password);
 
-            /* Start periodically requesting updates */
-            this.getServerManager().startUpdate();
+                // Start periodically requesting updates
+                this.getServerManager().startUpdate();
+
+                this.setLoginStatus("connecting");
+            });
+        } else {
+            console.error("Unable to find login form.");
+        }
 
-            this.setLoginStatus("connecting");
-        })
 
         /* Reload the page, used to mimic a restart of the app */
         document.addEventListener("reloadPage", () => {
diff --git a/client/views/other/dialogs.ejs b/client/views/other/dialogs.ejs
index 14296f1c..738bc97d 100644
--- a/client/views/other/dialogs.ejs
+++ b/client/views/other/dialogs.ejs
@@ -6,11 +6,11 @@
             <div class="app-version">Version <span class="app-version-number">v0.4.5-alpha</span></div>
         </div>
 
-        <div id="authentication-form">
+        <form id="authentication-form">
             <div><h5>Username</h5> <input type="text" id="username" name="username" required autocomplete="username" placeholder="Enter username..."></div>
             <div><h5>Password</h5> <input type="password" id="password" name="password" minlength="8" required autocomplete="current-password" placeholder="Enter password..."></div>
-            <button id="connection-button" class="ol-button-apply" data-on-click="tryConnection">Connect</button>
-        </div>
+            <button type="submit" id="connection-button" class="ol-button-apply">Connect</button>
+        </form>
 
         <h5 id="login-status"><br></h5>