Account creation and login now works

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>
+                    <label for="captcha-input">Captcha code</label>
-                    <input type="text" id="captcha-input" placeholder="Type what you see" autocomplete="off">
+                    <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);
+                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>

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));
+function  base64ToUint8(base64) {
-const uint8ToBase64 = (uint8) => fixBase64Padding(btoa(String.fromCharCode(...uint8)));
+    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) {
+async function fetchPostEnc(url, value) {
-    let response;
+    let nonce = await getNonce(username, passwordHash);
-    if (sendSecret) {
+    let response = await fetch(url, {
-        response = await fetch(url, {
+        method: "POST",
-            method: "GET", credentials: "omit", headers: {
+        credentials: "omit",
-                "secret": passwordHash
+        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(
+    let nonce = await getNonce(username, passwordHash);
-        await fetchpost(`${url}/encryptedrequest?u=${username}`, await packetEncPass(
+    
+    let response = await fetch(`${url}/encryptedrequest?u=${username}`, {
+        method: "POST",
+        credentials: "omit",
+        body: await encryptWithNonce(
 
             JSON.stringify({
                 string1: request,
                 string2: body
             })
 
-            , passwordHash, username))
+            , passwordHash, nonce),
-
+        headers: {
-        , passwordHash);
+            "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");

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);
+}