- Login or Register
+ Login
+ Register
-
+
+
+
diff --git a/resources/js/index.js b/resources/js/index.js
index 4f27c7d..85050de 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -287,9 +287,11 @@ async function closeSettings() {
async function openLogin() {
const login = document.querySelector('#loginPanel')
const ip = document.querySelector('#ip')
- const ipDisplay = document.querySelector('#loginPopupServer')
+ const loginIpDisplay = document.querySelector('#loginPopupServer')
+ const registerIpDisplay = document.querySelector('#registerPopupServer')
- ipDisplay.innerText = ip.value
+ loginIpDisplay.innerText = ip.value
+ registerIpDisplay.innerText = ip.value
if (login.style.display === 'none') {
login.style.removeProperty('display')
diff --git a/resources/js/login.js b/resources/js/login.js
new file mode 100644
index 0000000..5eb21ef
--- /dev/null
+++ b/resources/js/login.js
@@ -0,0 +1,70 @@
+/**
+ * Toggle the login section
+ */
+async function setLoginSection() {
+ const title = document.getElementById('loginSectionTitle');
+ const altTitle = document.getElementById('registerSectionTitle');
+ const loginSection = document.getElementById('loginPopupContentBody');
+ const registerSection = document.getElementById('registerPopupContentBody');
+
+ title.classList.add('selectedTitle')
+ altTitle.classList.remove('selectedTitle')
+
+ loginSection.style.removeProperty('display');
+ registerSection.style.display = 'none';
+}
+
+/**
+ * Toggle the register section
+ */
+async function setRegisterSection() {
+ const title = document.getElementById('registerSectionTitle');
+ const altTitle = document.getElementById('loginSectionTitle');
+ const loginSection = document.getElementById('loginPopupContentBody');
+ const registerSection = document.getElementById('registerPopupContentBody');
+
+ title.classList.add('selectedTitle')
+ altTitle.classList.remove('selectedTitle')
+
+ loginSection.style.display = 'none';
+ registerSection.style.removeProperty('display');
+}
+
+/**
+ * Attempt login and launch game
+ */
+async function login() {
+ const username = document.getElementById('loginUsername').value;
+ const password = document.getElementById('loginPassword').value;
+ const ip = document.getElementById('ip').value;
+ const port = document.getElementById('port').value || '443';
+ const config = await getCfg();
+ const useHttps = config.useHttps;
+ const url = `${useHttps ? 'https' : 'http'}://${ip}:${port}`;
+
+ const reqBody = {
+ username,
+ password,
+ }
+
+ // Send the request
+ const response = await fetch(url + '/grasscutter/login', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(reqBody),
+ mode: 'no-cors',
+ }).catch(e => {
+ console.log(e)
+ })
+
+ console.log(response)
+}
+
+/**
+ * Attempt registration, do not launch game
+ */
+async function register() {
+
+}
diff --git a/resources/style/index.css b/resources/style/index.css
index fb81ac7..c330a35 100644
--- a/resources/style/index.css
+++ b/resources/style/index.css
@@ -33,6 +33,11 @@ body {
margin-bottom: 6px;
}
+#loginPanel {
+ height: 40%;
+ width: 32%;
+}
+
#loginPanel img {
height: 20px;
}
@@ -44,18 +49,18 @@ body {
font-weight: bold;
}
-#loginPopupContentBody {
+.authBody {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
-#loginPopupContentBody div {
+.authBody div {
margin: 6px;
}
-#loginPopupContentBody input {
+.authBody input {
height: 20px;
background: white;
border: none;
@@ -65,13 +70,14 @@ body {
transition: border-bottom 0.1s ease-in-out;
}
-#loginPopupContentBody input:focus {
+.authBody input:focus {
outline: none;
border-bottom: 2px solid #ffc61e;
}
#loginPopupTitle img {
height: 20px;
+ margin-bottom: 8px;
}
#loginPopupTitle img:hover {
@@ -79,10 +85,38 @@ body {
cursor: pointer;
}
+#registerPopupServer,
#loginPopupServer {
font-weight: bold;
}
+#loginSectionTitle,
+#registerSectionTitle {
+ font-weight: normal;
+ font-size: 1em;
+}
+
+#loginSectionTitle:hover,
+#registerSectionTitle:hover {
+ cursor: pointer;
+}
+
+.selectedTitle {
+ font-weight: bold !important;
+ border-bottom: 2px solid #ffc61e;
+}
+
+.authInputs div {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.authInputs div span {
+ margin-right: 6px;
+}
+
#firstTimeNotice,
#loginPanel,
#settingsPanel {
- Logging in to or registering for:
+ Logging in to
-
+
+
+
+
Username:
@@ -49,12 +53,12 @@
Password:
-
+
-
+