login layout

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 -->

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'

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 {