forked from olcxjas-softworks/LarpixClient
Account creation and login now works
This commit is contained in:
parent
cf8116b218
commit
5e01e5d459
4 changed files with 320 additions and 42 deletions
BIN
Nunito-Regular.ttf
Normal file
BIN
Nunito-Regular.ttf
Normal file
Binary file not shown.
138
login/index.html
138
login/index.html
|
|
@ -181,7 +181,7 @@
|
|||
|
||||
<div class="input-group">
|
||||
<label for="login-username">Username</label>
|
||||
<input type="text" id="login-username" placeholder="vince_null" autocomplete="username">
|
||||
<input type="text" id="login-username" placeholder="username" autocomplete="username">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
|
|
@ -221,6 +221,7 @@
|
|||
<div class="input-group">
|
||||
<label for="reg-password">Password</label>
|
||||
<input type="password" id="reg-password" placeholder="Create password" autocomplete="new-password">
|
||||
<p class="red mininote">Remember to use a strong password! It will be used to encrypt your keys</p>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
|
|
@ -246,12 +247,17 @@
|
|||
<p>Prove you are a human.</p>
|
||||
</div>
|
||||
<div class="captcha-img">
|
||||
<img src="https://miro.medium.com/0*obnHri9w__4Cmhbj.jpg" alt="Captcha" id="captcha-image-src">
|
||||
<img src="https://miro.medium.com/0*obnHri9w__4Cmhbj.jpg" alt="Captcha" id="captcha-image">
|
||||
</div>
|
||||
<form id="form-captcha">
|
||||
<div class="input-group">
|
||||
<label for="captcha-input">Enter Code</label>
|
||||
<input type="text" id="captcha-input" placeholder="Type what you see" autocomplete="off">
|
||||
<label for="captcha-input">Captcha code</label>
|
||||
<input type="text" id="captcha-input" placeholder="Captcha code" autocomplete="off">
|
||||
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="regkey-input">Invitation code</label>
|
||||
<input type="text" id="regkey-input" placeholder="Invitation code" autocomplete="off">
|
||||
</div>
|
||||
<button type="submit" class="submit-button">
|
||||
Verify
|
||||
|
|
@ -284,6 +290,15 @@
|
|||
const formRegister = document.getElementById('form-register');
|
||||
const formCaptcha = document.getElementById('form-captcha');
|
||||
|
||||
const registerHost = document.getElementById("reg-host");
|
||||
const registerUsername = document.getElementById("reg-username");
|
||||
const registerPassword = document.getElementById("reg-password");
|
||||
const registerPasswordConfirm = document.getElementById("reg-password");
|
||||
const loginHost = document.getElementById("login-host");
|
||||
const loginUsername = document.getElementById("login-username");
|
||||
const loginPassword = document.getElementById("login-password");
|
||||
const captchaCode = document.getElementById("captcha-input");
|
||||
const regKeyInput = document.getElementById("regkey-input");
|
||||
|
||||
toRegister.addEventListener('click', () => {
|
||||
container.className = 'auth-container show-register';
|
||||
|
|
@ -298,21 +313,124 @@
|
|||
});
|
||||
|
||||
|
||||
formLogin.addEventListener('submit', (e) => {
|
||||
formLogin.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
console.log("Login");
|
||||
try {
|
||||
url = `${window.location.protocol}//${loginHost.value}/_larpix`;
|
||||
|
||||
let res = await Auth(loginUsername.value, loginPassword.value);
|
||||
|
||||
if (res == "Login successful")
|
||||
{
|
||||
showNotification(res, "success", 3500);
|
||||
await delay(1000);
|
||||
localStorage.setItem("username", loginUsername.value);
|
||||
localStorage.setItem("password", loginPassword.value);
|
||||
localStorage.setItem("host", loginHost.value);
|
||||
|
||||
window.location.href = "../";
|
||||
}
|
||||
else
|
||||
{
|
||||
showNotification(res, "error", 3500);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
showNotification("Something went wrong...", "error", 3500);
|
||||
container.className = 'auth-container';
|
||||
}
|
||||
});
|
||||
|
||||
formRegister.addEventListener('submit', (e) => {
|
||||
formRegister.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
url = `${window.location.protocol}//${registerHost.value}/_larpix`;
|
||||
|
||||
if (!registerUsername.value || registerUsername.value.trim() === '') {
|
||||
showNotification("Username cannot be empty", "error");
|
||||
container.className = 'auth-container show-register';
|
||||
return;
|
||||
}
|
||||
if (!registerPassword.value || registerPassword.value.trim() === '') {
|
||||
showNotification("Password cannot be empty", "error");
|
||||
container.className = 'auth-container show-register';
|
||||
return;
|
||||
}
|
||||
let dataarray = keyDataFromServerJson(await fetchAsync(`${url}/createaccount?step=init`));
|
||||
var sharedkey = await calcCommunicationKeyClient(dataarray[0], dataarray[1], dataarray[2]);
|
||||
sharedpvkey = sharedkey[1];
|
||||
createId = dataarray[3];
|
||||
const captchaimage = await fetch(`${url}/createaccount?step=register`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
pubClient: sharedkey[0],
|
||||
idKey: createId,
|
||||
username: await encrypt(registerUsername.value, sharedpvkey),
|
||||
password: await encrypt(await hashSHA3_512(registerPassword.value), sharedpvkey)
|
||||
})
|
||||
});
|
||||
const clone = captchaimage.clone();
|
||||
const res = await captchaimage.text();
|
||||
try {
|
||||
const imageBlob = await clone.blob();
|
||||
if (!imageBlob.type.startsWith("image/")) {
|
||||
throw new Error();
|
||||
}
|
||||
const imageObjectURL = URL.createObjectURL(imageBlob);
|
||||
document.getElementById('captcha-image').src = imageObjectURL;
|
||||
container.className = 'auth-container show-captcha';
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
if (res.length > 64 || res.length <= 1) {
|
||||
throw new Error();
|
||||
}
|
||||
showNotification(res, "error", 3500);
|
||||
container.className = 'auth-container show-register';
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
showNotification("Something went wrong...", "error", 3500);
|
||||
container.className = 'auth-container show-register';
|
||||
}
|
||||
});
|
||||
|
||||
formCaptcha.addEventListener('submit', (e) => {
|
||||
formCaptcha.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
|
||||
|
||||
const captchaValue = document.getElementById('captcha-input').value;
|
||||
if(captchaValue) {
|
||||
alert("Verify " + captchaValue);
|
||||
if (captchaValue) {
|
||||
let res = await fetchPost(`${url}/createaccount?step=finish`, JSON.stringify({
|
||||
idKey: createId,
|
||||
captcha: captchaValue,
|
||||
regKey: regKeyInput.value
|
||||
}));
|
||||
if (res.length > 64 || res.length <= 1) {
|
||||
throw new Error();
|
||||
}
|
||||
if (res.toLowerCase().includes("incorrect")) {
|
||||
showNotification(res, "error", 3500);
|
||||
container.className = 'auth-container show-register';
|
||||
} else if (res.toLowerCase().includes("created")) {
|
||||
showNotification(res, "success", 3500);
|
||||
await delay(1000);
|
||||
localStorage.setItem("username", registerUsername.value);
|
||||
localStorage.setItem("password", registerPassword.value);
|
||||
localStorage.setItem("host", registerHost.value);
|
||||
|
||||
window.location.href = "../";
|
||||
|
||||
} else {
|
||||
showNotification(res, "info", 3500);
|
||||
container.className = 'auth-container show-register';
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
showNotification("Something went wrong...", "error", 3500);
|
||||
container.className = 'auth-container show-register';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
146
main.js
146
main.js
|
|
@ -1,4 +1,6 @@
|
|||
var url = `${window.location.protocol}//${window.location.hostname}`;
|
||||
console.log(window.location.protocol);
|
||||
|
||||
var url = `${window.location.protocol}//${window.location.hostname}/_larpix`;
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
|
||||
const collapseDmsBtn = document.getElementById("collapse-dms");
|
||||
|
|
@ -17,16 +19,25 @@ function delay(time) {
|
|||
return new Promise(resolve => setTimeout(resolve, time));
|
||||
}
|
||||
async function packetEncPass(pass, key, username) {
|
||||
return await encryptWithNonce(pass, key, getNonce(username, key));
|
||||
}
|
||||
|
||||
async function getNonce(username, key) {
|
||||
|
||||
let nonce;
|
||||
let fetchRes = await fetchAsync(`${url}/nextnonce?u=${username}`);
|
||||
let fetchRes = await (await fetch(`${url}/nextnonce?u=${username}`)).text();
|
||||
console.log(key, fetchRes);
|
||||
try {
|
||||
nonce = await decryptString(fetchRes, key);
|
||||
}
|
||||
catch(err) {
|
||||
nonce = await decryptString(fetchRes, "");
|
||||
}
|
||||
return nonce;
|
||||
}
|
||||
|
||||
return await encryptString(pass, nonce + key);
|
||||
async function encryptWithNonce(value, key, nonce) {
|
||||
return await encryptString(value, nonce + key);
|
||||
}
|
||||
|
||||
async function calcCommunicationKeyClient(p, g, pubServer) {
|
||||
|
|
@ -59,8 +70,12 @@ function keyDataFromServerJson(jsonFromServer) {
|
|||
return [p, g, pubServer, data.idKey]
|
||||
}
|
||||
|
||||
const base64ToUint8 = (base64) => Uint8Array.from(atob(base64), c => c.charCodeAt(0));
|
||||
const uint8ToBase64 = (uint8) => fixBase64Padding(btoa(String.fromCharCode(...uint8)));
|
||||
function base64ToUint8(base64) {
|
||||
return Uint8Array.from(atob(base64), c => c.charCodeAt(0));
|
||||
}
|
||||
function uint8ToBase64(uint8) {
|
||||
return fixBase64Padding(btoa(String.fromCharCode(...uint8)));
|
||||
}
|
||||
|
||||
async function encrypt(plainText, keyBytes) {
|
||||
const iv = window.crypto.getRandomValues(new Uint8Array(16));
|
||||
|
|
@ -184,49 +199,84 @@ async function decryptString(base64Text, passphrase) {
|
|||
}
|
||||
|
||||
|
||||
async function fetchpost(url, value) {
|
||||
async function fetchPost(url, value) {
|
||||
let response = await fetch(url, {
|
||||
method: "POST",
|
||||
credentials: "omit",
|
||||
body: value,
|
||||
headers: {
|
||||
"secret": passwordHash
|
||||
"secret": await encryptWithNonce(passwordHash, passwordHash, await getNonce(username, passwordHash))
|
||||
}
|
||||
});
|
||||
let data = await response.text();
|
||||
return data;
|
||||
}
|
||||
|
||||
async function fetchAsync(url, sendSecret) {
|
||||
let response;
|
||||
if (sendSecret) {
|
||||
response = await fetch(url, {
|
||||
method: "GET", credentials: "omit", headers: {
|
||||
"secret": passwordHash
|
||||
async function fetchPostEnc(url, value) {
|
||||
let nonce = await getNonce(username, passwordHash);
|
||||
let response = await fetch(url, {
|
||||
method: "POST",
|
||||
credentials: "omit",
|
||||
body: await encryptWithNonce(value, passwordHash, nonce),
|
||||
headers: {
|
||||
"secret": await encryptWithNonce(passwordHash, passwordHash, nonce)
|
||||
}
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
response = await fetch(url, {method: "GET", credentials: "omit"});
|
||||
}
|
||||
let data = await response.text();
|
||||
return data;
|
||||
}
|
||||
|
||||
async function fetchAsync(url) {
|
||||
let response = await fetch(url, {
|
||||
method: "GET",
|
||||
credentials: "omit",
|
||||
headers: {
|
||||
"secret": await encryptWithNonce(passwordHash, passwordHash, await getNonce(username, passwordHash))
|
||||
}
|
||||
});
|
||||
|
||||
let data = await response.text();
|
||||
return data;
|
||||
}
|
||||
|
||||
async function Auth(username, password) {
|
||||
|
||||
let passwordHash = await hashSHA3_512(password);
|
||||
console.log(username, password, passwordHash);
|
||||
let response = await fetch(`${url}/auth?u=${username}`, {
|
||||
method: "GET",
|
||||
credentials: "omit",
|
||||
headers: {
|
||||
"secret": await encryptWithNonce(passwordHash, passwordHash, await getNonce(username, passwordHash))
|
||||
}
|
||||
});
|
||||
|
||||
let data = await response.text();
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
async function fetchEncrypted(request, body)
|
||||
{
|
||||
return await decryptString(
|
||||
await fetchpost(`${url}/encryptedrequest?u=${username}`, await packetEncPass(
|
||||
let nonce = await getNonce(username, passwordHash);
|
||||
|
||||
let response = await fetch(`${url}/encryptedrequest?u=${username}`, {
|
||||
method: "POST",
|
||||
credentials: "omit",
|
||||
body: await encryptWithNonce(
|
||||
|
||||
JSON.stringify({
|
||||
string1: request,
|
||||
string2: body
|
||||
})
|
||||
|
||||
, passwordHash, username))
|
||||
|
||||
, passwordHash);
|
||||
, passwordHash, nonce),
|
||||
headers: {
|
||||
"secret": await encryptWithNonce(passwordHash, passwordHash, nonce)
|
||||
}
|
||||
});
|
||||
let data = await response.text();
|
||||
return data;
|
||||
}
|
||||
|
||||
function power(base, exponent, mod) {
|
||||
|
|
@ -254,9 +304,59 @@ function fixBase64Padding(base64String) {
|
|||
return str;
|
||||
}
|
||||
|
||||
function showNotification(message, type = 'info', duration = 3500) {
|
||||
let container = document.getElementById('notification-container');
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.id = 'notification-container';
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
const notif = document.createElement('div');
|
||||
notif.className = `notification ${type}`;
|
||||
notif.textContent = message;
|
||||
|
||||
container.appendChild(notif);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
notif.classList.add('show');
|
||||
});
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
notif.classList.remove('show');
|
||||
|
||||
notif.addEventListener('transitionend', () => {
|
||||
notif.remove();
|
||||
});
|
||||
}, duration);
|
||||
}
|
||||
|
||||
|
||||
async function hashSHA3_512(input) {
|
||||
const encoder = new TextEncoder();
|
||||
const data = encoder.encode(input);
|
||||
const hashBuffer = await crypto.subtle.digest('SHA-512', data); //-3 kiedys xddddddddddddddddd
|
||||
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
||||
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
|
||||
return hashHex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
var password = "";
|
||||
var username = "";
|
||||
var passwordHash = "";
|
||||
var host = "";
|
||||
async function mainJS()
|
||||
{
|
||||
username = localStorage.getItem('username');
|
||||
password = localStorage.getItem('password');
|
||||
host = localStorage.getItem('host');
|
||||
passwordHash = await hashSHA3_512(password);
|
||||
}
|
||||
mainJS();
|
||||
|
||||
collapseDmsBtn.addEventListener("click", () => {
|
||||
collapseDmsBtn.classList.toggle("collapsed");
|
||||
|
|
|
|||
62
style.css
62
style.css
|
|
@ -11,7 +11,17 @@
|
|||
--button-margin: 0.4rem;
|
||||
--icon-button-height: 3.4rem;
|
||||
--button-height: 2.4rem;
|
||||
--border-width: 0.09rem
|
||||
--border-width: 0.09rem;
|
||||
|
||||
--big-default: rgb(207 207 207);
|
||||
--big-red: rgb(202 0 0);
|
||||
--big-green: rgb(25 189 0);
|
||||
}
|
||||
.red {
|
||||
color: var(--big-red);
|
||||
}
|
||||
.mininote {
|
||||
font-size: 80%;
|
||||
}
|
||||
html {
|
||||
font-size: max(16px, calc(100vw / 120));
|
||||
|
|
@ -38,6 +48,7 @@ button, input {
|
|||
background-color: rgba(255, 255, 255, 0.05);
|
||||
margin: var(--button-margin);
|
||||
padding: var(--button-margin);
|
||||
padding-left: calc(var(--button-margin) * 2);
|
||||
height: var(--button-height);
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
|
@ -149,3 +160,52 @@ hr {
|
|||
width: 60%;
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#notification-container {
|
||||
position: fixed;
|
||||
top: 2vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1vw;
|
||||
pointer-events: none;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.notification {
|
||||
background: rgba(10, 10, 14, 0.7);
|
||||
backdrop-filter: blur(1rem);
|
||||
-webkit-backdrop-filter: blur(1rem);
|
||||
border: 0.1rem solid var(--light-border-color);
|
||||
border-radius: 0.8rem;
|
||||
padding: 1rem 2rem;
|
||||
color: var(--text-color);
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 0.25rem 1.875rem rgba(0, 0, 0, 0.5);
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(-5vw);
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.notification.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.notification.info {
|
||||
border-color: var(--big-default);
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
border-color: var(--big-red);
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
border-color: var(--big-green);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue