From cccc15e447bfbb59671ddab22ed11863e068e83a Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Tue, 26 Apr 2022 18:34:20 -0700
Subject: [PATCH] login layout

---
 resources/index.html      | 17 +++++++++++------
 resources/js/index.js     | 18 ++++++++++++++++++
 resources/style/index.css | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/resources/index.html b/resources/index.html
index 35e6146..dc2e221 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -23,19 +23,19 @@
     </div>
 
     <!-- Login popup -->
-    <div id="loginPanel">
+    <div id="loginPanel" style="display: none;">
       <div id="loginPopupTitle">
         <span>
           Login or Register
         </span>
-        <div id="loginPopupCloseBtn" onclick="closeLoginPopup()">
+        <div id="loginPopupCloseBtn" onclick="closeLogin()">
           <img src="icons/close.svg" />
         </div>
       </div>
       <div id="loginPopupContentBody">
         <div id="loginPopupContentBodyText">
-          <span>
-            Please enter a username and password to login or register.
+          <span id="loggingInTo">
+            Logging in to or registering for: <span id="loginPopupServer"></span>
           </span>
         </div>
         <div id="loginPopupContentBodyInputs">
@@ -49,13 +49,18 @@
             <span>
               Password:
             </span>
-            <input type="password" id="loginPassword" />
+            <input type="password" id="loginPassword" onsubmit="launchServerWithAuth()" />
           </div>
         </div>
         <div id="loginPopupContentBodyBtns">
           <button class="playBtn" id="loginPopupContentBodyBtnLogin" onclick="login()">Login</button>
           <button class="altBtn" id="loginPopupContentBodyBtnCancel" onclick="closeLoginPopup()">Register</button>
         </div>
+        <div>
+          <button class="altBtn" id="noLoginBtn" onclick="(() => { launchPrivate(); closeLogin()})()">
+            Launch without Authentication
+          </button>
+        </div>
       </div>
     </div>
 
@@ -162,7 +167,7 @@
             <img src="icons/star_empty.svg" id="star" onclick="setFavorite()" />
             <img src="icons/list.svg" id="star" onclick="handleFavoriteList()" />
           </div>
-          <button class="playBtn" id="playPrivate" onclick="launchPrivate()">Play Private</button>
+          <button class="playBtn" id="playPrivate" onclick="openLogin()">Play Private</button>
         </div>
       </div>
       <!-- Grasscutter server launcher -->
diff --git a/resources/js/index.js b/resources/js/index.js
index 8aaf05d..4f27c7d 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -284,6 +284,24 @@ async function closeSettings() {
   }
 }
 
+async function openLogin() {
+  const login = document.querySelector('#loginPanel')
+  const ip = document.querySelector('#ip')
+  const ipDisplay = document.querySelector('#loginPopupServer')
+
+  ipDisplay.innerText = ip.value
+
+  if (login.style.display === 'none') {
+    login.style.removeProperty('display')
+  }
+}
+
+async function closeLogin() {
+  const login = document.querySelector('#loginPanel')
+
+  login.style.display = 'none'
+}
+
 async function closeFirstTimePopup() {
   const firstTimePopup = document.querySelector('#firstTimeNotice')
   firstTimePopup.style.display = 'none'
diff --git a/resources/style/index.css b/resources/style/index.css
index 048435a..fb81ac7 100644
--- a/resources/style/index.css
+++ b/resources/style/index.css
@@ -44,6 +44,45 @@ body {
   font-weight: bold;
 }
 
+#loginPopupContentBody {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+#loginPopupContentBody div {
+  margin: 6px;
+}
+
+#loginPopupContentBody input {
+  height: 20px;
+  background: white;
+  border: none;
+  border-bottom: 2px solid #4d4d4d;
+
+  /* border bottom anim */
+  transition: border-bottom 0.1s ease-in-out;
+}
+
+#loginPopupContentBody input:focus {
+  outline: none;
+  border-bottom: 2px solid #ffc61e;
+}
+
+#loginPopupTitle img {
+  height: 20px;
+}
+
+#loginPopupTitle img:hover {
+  filter: invert(85%) sepia(31%) saturate(560%) hue-rotate(329deg) brightness(100%) contrast(92%);
+  cursor: pointer;
+}
+
+#loginPopupServer {
+  font-weight: bold;
+}
+
 #firstTimeNotice,
 #loginPanel,
 #settingsPanel {