shkong/GrassClipper
1
0
Fork 0
mirror of https://github.com/Grasscutters/GrassClipper.git synced 2024-08-14 13:11:48 +08:00
Code Issues Projects Releases Wiki Activity

login functions

Browse Source
This commit is contained in:
SpikeHD 2022-04-26 20:17:29 -07:00
parent 6af6ce2848
commit 767d9fd234
5 changed files with 155 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -29,7 +29,7 @@ Grasscutter launcher for easily switching between Official and Private servers
0. Clone the repository
1. Ensure you have [NodeJS](https://nodejs.org/en/download/) installed.
2. Install the `neu` CLI tool: `npm install -g @neutralinojs/neu`
3. Install the dependencies: `npm install` AND `neu update`
3. Install the dependencies: `setup_win.cmd`
4. Compile and run:
* For testing: `npm run dev`
* For production: `npm run build`

48
resources/index.html
View File

@ -9,6 +9,7 @@
<script src="js/index.js"></script>
<script src="js/onLoad.js"></script>
<script src="js/options.js"></script>
<script src="js/login.js"></script>
<script src="js/translation.js"></script>
</head>
<body>
@ -26,19 +27,22 @@
<div id="loginPanel" style="display: none;">
<div id="loginPopupTitle">
<span>
Login or Register
<span id="loginSectionTitle" class="selectedTitle" onclick="setLoginSection()">Login</span>
<span id="registerSectionTitle" onclick="setRegisterSection()">Register</span>
</span>
<div id="loginPopupCloseBtn" onclick="closeLogin()">
<img src="icons/close.svg" />
</div>
</div>
<div id="loginPopupContentBody">
<!-- Login section -->
<div id="loginPopupContentBody" class="authBody">
<div id="loginPopupContentBodyText">
<span id="loggingInTo">
Logging in to or registering for: <span id="loginPopupServer"></span>
Logging in to <span id="loginPopupServer"></span>
</span>
</div>
<div id="loginPopupContentBodyInputs">
<div id="loginPopupContentBodyInputs" class="authInputs">
<div id="loginPopupContentBodyInputsUsername">
<span>
Username:
@ -49,12 +53,12 @@
<span>
Password:
</span>
<input type="password" id="loginPassword" onsubmit="launchServerWithAuth()" />
<input type="password" id="loginPassword" onsubmit="login()" />
</div>
</div>
<div id="loginPopupContentBodyBtns">
<button class="playBtn" id="loginPopupContentBodyBtnLogin" onclick="login()">Login</button>
<button class="altBtn" id="loginPopupContentBodyBtnCancel" onclick="closeLoginPopup()">Register</button>
<button class="altBtn" id="loginPopupContentBodyBtnRegister" onclick="register()">Register</button>
</div>
<div>
<button class="altBtn" id="noLoginBtn" onclick="(() => { launchPrivate(); closeLogin()})()">
@ -62,6 +66,38 @@
</button>
</div>
</div>
<!-- Register section -->
<div id="registerPopupContentBody" style="display: none" class="authBody">
<div id="registerPopupContentBodyText">
<span id="registeringTo">
Registering for <span id="registerPopupServer"></span>
</span>
</div>
<div id="registerPopupContentBodyInputs" class="authInputs">
<div id="registerPopupContentBodyInputsUsername">
<span>
Username:
</span>
<input type="text" id="registerUsername" />
</div>
<div id="registerPopupContentBodyInputsPassword">
<span>
Password:
</span>
<input type="password" id="registerPassword" />
</div>
<div id="registerPopupContentBodyInputsPasswordConfirm">
<span>
Confirm Password:
</span>
<input type="password" id="registerPasswordConfirm" />
</div>
</div>
<div id="registerPopupContentBodyBtns">
<button class="playBtn" id="registerPopupContentBodyBtnRegister" onclick="register()">Register</button>
</div>
</div>
</div>
<!-- Setting panel -->

6
resources/js/index.js
View File

@ -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')

70
resources/js/login.js Normal file
View File

@ -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() {
}

42
resources/style/index.css
View File

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