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 0. Clone the repository
1. Ensure you have [NodeJS](https://nodejs.org/en/download/) installed. 1. Ensure you have [NodeJS](https://nodejs.org/en/download/) installed.
2. Install the `neu` CLI tool: `npm install -g @neutralinojs/neu` 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: 4. Compile and run:
* For testing: `npm run dev` * For testing: `npm run dev`
* For production: `npm run build` * For production: `npm run build`

48
resources/index.html
View File

@ -9,6 +9,7 @@
<script src="js/index.js"></script> <script src="js/index.js"></script>
<script src="js/onLoad.js"></script> <script src="js/onLoad.js"></script>
<script src="js/options.js"></script> <script src="js/options.js"></script>
<script src="js/login.js"></script>
<script src="js/translation.js"></script> <script src="js/translation.js"></script>
</head> </head>
<body> <body>
@ -26,19 +27,22 @@
<div id="loginPanel" style="display: none;"> <div id="loginPanel" style="display: none;">
<div id="loginPopupTitle"> <div id="loginPopupTitle">
<span> <span>
Login or Register <span id="loginSectionTitle" class="selectedTitle" onclick="setLoginSection()">Login</span>
<span id="registerSectionTitle" onclick="setRegisterSection()">Register</span>
</span> </span>
<div id="loginPopupCloseBtn" onclick="closeLogin()"> <div id="loginPopupCloseBtn" onclick="closeLogin()">
<img src="icons/close.svg" /> <img src="icons/close.svg" />
</div> </div>
</div> </div>
<div id="loginPopupContentBody">
<!-- Login section -->
<div id="loginPopupContentBody" class="authBody">
<div id="loginPopupContentBodyText"> <div id="loginPopupContentBodyText">
<span id="loggingInTo"> <span id="loggingInTo">
Logging in to or registering for: <span id="loginPopupServer"></span> Logging in to <span id="loginPopupServer"></span>
</span> </span>
</div> </div>
<div id="loginPopupContentBodyInputs"> <div id="loginPopupContentBodyInputs" class="authInputs">
<div id="loginPopupContentBodyInputsUsername"> <div id="loginPopupContentBodyInputsUsername">
<span> <span>
Username: Username:
@ -49,12 +53,12 @@
<span> <span>
Password: Password:
</span> </span>
<input type="password" id="loginPassword" onsubmit="launchServerWithAuth()" /> <input type="password" id="loginPassword" onsubmit="login()" />
</div> </div>
</div> </div>
<div id="loginPopupContentBodyBtns"> <div id="loginPopupContentBodyBtns">
<button class="playBtn" id="loginPopupContentBodyBtnLogin" onclick="login()">Login</button> <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>
<div> <div>
<button class="altBtn" id="noLoginBtn" onclick="(() => { launchPrivate(); closeLogin()})()"> <button class="altBtn" id="noLoginBtn" onclick="(() => { launchPrivate(); closeLogin()})()">
@ -62,6 +66,38 @@
</button> </button>
</div> </div>
</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> </div>
<!-- Setting panel --> <!-- Setting panel -->

6
resources/js/index.js
View File

@ -287,9 +287,11 @@ async function closeSettings() {
async function openLogin() { async function openLogin() {
const login = document.querySelector('#loginPanel') const login = document.querySelector('#loginPanel')
const ip = document.querySelector('#ip') 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') { if (login.style.display === 'none') {
login.style.removeProperty('display') 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; margin-bottom: 6px;
} }
#loginPanel {
height: 40%;
width: 32%;
}
#loginPanel img { #loginPanel img {
height: 20px; height: 20px;
} }
@ -44,18 +49,18 @@ body {
font-weight: bold; font-weight: bold;
} }
#loginPopupContentBody { .authBody {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
#loginPopupContentBody div { .authBody div {
margin: 6px; margin: 6px;
} }
#loginPopupContentBody input { .authBody input {
height: 20px; height: 20px;
background: white; background: white;
border: none; border: none;
@ -65,13 +70,14 @@ body {
transition: border-bottom 0.1s ease-in-out; transition: border-bottom 0.1s ease-in-out;
} }
#loginPopupContentBody input:focus { .authBody input:focus {
outline: none; outline: none;
border-bottom: 2px solid #ffc61e; border-bottom: 2px solid #ffc61e;
} }
#loginPopupTitle img { #loginPopupTitle img {
height: 20px; height: 20px;
margin-bottom: 8px;
} }
#loginPopupTitle img:hover { #loginPopupTitle img:hover {
@ -79,10 +85,38 @@ body {
cursor: pointer; cursor: pointer;
} }
#registerPopupServer,
#loginPopupServer { #loginPopupServer {
font-weight: bold; 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, #firstTimeNotice,
#loginPanel, #loginPanel,
#settingsPanel { #settingsPanel {