42_adjoly/knl_meowscendence
1
0
Fork 0
mirror of https://github.com/KeyZox71/knl_meowscendence.git synced 2026-01-01 06:06:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

「✨」 feat(front): merged everything, i dont have a merge commit and im lazy ok

Browse Source
This commit is contained in:
y-syo
2025-10-23 23:08:36 +02:00
parent 10e4eeae55 b5d2244035
commit 808228a32a
51 changed files with 2173 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/front/static/ts/views/LoginPage.ts
View File

@ -55,7 +55,47 @@ export default class extends Aview {
}
async run() {
dragElement(document.getElementById("window"));
dragElement(document.getElementById("window"));
const totpVerify = async () => {
const username = (document.getElementById("username") as HTMLInputElement).value;
const password = (document.getElementById("password") as HTMLInputElement).value;
const totpPin = (document.getElementById('totpPin') as HTMLInputElement).value;
const idWindow = (document.getElementById('2fa-popup-content') as HTMLInputElement);
try {
const data_req = await fetch("http://localhost:3001/login", {
method: "POST",
headers: { "Content-Type": "application/json", },
credentials: "include",
body: JSON.stringify({ user: username, password: password, token: totpPin }),
});
if (data_req.status === 200) {
isLogged();
navigationManager("/");
} else if (data_req.status === 401) {
const data = await data_req.json();
if (!document.getElementById("error-totp")) {
const error = document.createElement("p");
error.innerHTML = data.error;
error.classList.add("text-red-700", "dark:text-red-500");
idWindow.appendChild(error);
} else {
const error = document.getElementById("error-totp") as HTMLParagraphElement;
error.innerHTML = data.error;
}
} else {
console.log(data_req.status)
console.log(await data_req.json())
// throw new Error("invalid response");
}
} catch (error) {
console.error(error);
}
}
const login = async () => {
const username = (document.getElementById("username") as HTMLInputElement).value;
const password = (document.getElementById("password") as HTMLInputElement).value;
@ -73,11 +113,69 @@ export default class extends Aview {
isLogged();
navigationManager("/");
}
else if (data_req.status === 402) {
const popup: HTMLDivElement = document.createElement("div");
popup.id = "2fa-popup";
popup.classList.add("z-10", "absolute", "default-border");
const header = popup.appendChild(document.createElement("div"));;
header.classList.add("bg-linear-to-r", "from-orange-200", "to-orange-300", "flex", "flex-row", "min-w-35", "justify-between", "px-2");
header.id = "2fa-header";
header.appendChild(document.createElement("span")).innerText = "2fa.ts";
const btn = header.appendChild(document.createElement("button"));
btn.innerText = " × ";
btn.onclick = () => { document.getElementById("2fa-popup").remove(); };
const popup_content: HTMLSpanElement = popup.appendChild(document.createElement("div"));
popup_content.id = "2fa-popup-content";
popup_content.classList.add("flex", "flex-col", "bg-neutral-200", "dark:bg-neutral-800", "p-6", "pt-4", "text-neutral-900", "dark:text-white", "space-y-4");
const tokenInput = document.createElement("input");
tokenInput.type = "tel";
tokenInput.id = "totpPin";
tokenInput.name = "totpPin";
tokenInput.placeholder = "TOTP code";
tokenInput.required = true;
tokenInput.autocomplete = "off";
tokenInput.pattern = "[0-9]*";
tokenInput.setAttribute("inputmode", "numeric");
tokenInput.classList.add("bg-white", "text-neutral-900","w-full", "px-4", "py-2", "input-border");
const tokenSubmit = document.createElement("button");
tokenSubmit.type = "submit";
tokenSubmit.classList.add("default-button", "w-full");
tokenSubmit.id = "totp-submit";
tokenSubmit.innerHTML = "submit";
const tokenTitle = document.createElement("h1");
tokenTitle.innerHTML = `hey ${username}, please submit your 2fa code below :`;
tokenTitle.classList.add("text-gray-900", "dark:text-white", "text-lg", "pt-0", "pb-4", "justify-center");
const form = document.createElement("form");
form.method = "dialog";
form.classList.add("space-y-4");
form.appendChild(tokenTitle);
form.appendChild(tokenInput);
form.appendChild(tokenSubmit);
popup_content.appendChild(form);
const uu = document.getElementById("username") as HTMLInputElement;
const pass = document.getElementById("password") as HTMLInputElement;
uu.disabled = true;
pass.disabled = true;
document.getElementById("app")?.appendChild(popup);
tokenInput.focus();
dragElement(document.getElementById("2fa-popup"));
document.getElementById("totp-submit")?.addEventListener("click", totpVerify);
}
else if (data_req.status === 400)
{
const data = await data_req.json();
document.getElementById("login-error-message").innerHTML = "error: " + data.error;
document.getElementById("login-error-message").classList.remove("hidden");
document.getElementById("login-error-message").innerHTML = "error: " + data.error;
document.getElementById("login-error-message").classList.remove("hidden");
}
else
{

5
src/front/static/ts/views/Profile.ts
View File

@ -138,6 +138,7 @@ export default class extends Aview {
if (!main)
return console.error("what");
// don't read this shit for you mental health
if (matches.matchHistory) {
for (let match of matches.matchHistory) {
if (match.score.p2 != undefined)
@ -202,7 +203,9 @@ export default class extends Aview {
method: "GET",
credentials: "include",
});
picture.src = a.status === 200 ? `http://localhost:3002/users/${uuid}/avatar` : "https://api.kanel.ovh/pp";
picture.src = a.status === 200
? `http://localhost:3002/users/${uuid}/avatar?t=${Date.now()}`
: "https://api.kanel.ovh/pp";
picture.classList.add("text-neutral-900", "dark:text-white", "center", "h-18", "w-18", "mx-3", "reverse-border");
const nametag = profile.appendChild(document.createElement("div"));

6
src/front/static/ts/views/ProfileMenu.ts
View File

@ -40,13 +40,13 @@ export default class extends Aview {
async function getMainHTML() {
if (!(await isLogged()))
{
document.getElementById("menu-bottom-div").classList.add("hidden");
document.getElementById("menu-bottom-div")?.classList.add("hidden");
return `
<a class="menu-default-button inline-flex items-center justify-center" href="/login" data-link>login</a>
<a class="menu-default-button inline-flex items-center justify-center" href="/register" data-link>register</a>
`;
}
document.getElementById("menu-bottom-div").classList.remove("hidden");
document.getElementById("menu-bottom-div")?.classList.remove("hidden");
uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
const userdata_req = await fetch(`http://localhost:3002/users/${uuid}`, {
@ -82,6 +82,6 @@ export default class extends Aview {
else
console.error("logout failed");
});
});
document.getElementById("profile-items").innerHTML = await getMainHTML();
}
}

29
src/front/static/ts/views/RegisterPage.ts
View File

@ -5,8 +5,7 @@ import { isLogged, navigationManager } from "../main.ts"
export default class extends Aview {
constructor()
{
constructor() {
super();
this.setTitle("register");
setOnekoState("default");
@ -55,7 +54,7 @@ export default class extends Aview {
}
async run() {
dragElement(document.getElementById("window"));
dragElement(document.getElementById("window"));
const login = async () => {
const username = (document.getElementById("username") as HTMLInputElement).value;
const password = (document.getElementById("password") as HTMLInputElement).value;
@ -69,8 +68,7 @@ export default class extends Aview {
});
const data = await data_req.json();
if (data_req.status === 200)
{
if (data_req.status === 200) {
let uuid_req = await fetch("http://localhost:3001/me", {
method: "GET",
credentials: "include",
@ -80,22 +78,23 @@ export default class extends Aview {
isLogged();
navigationManager("/");
}
else if (data_req.status === 400)
{
document.getElementById("login-error-message").innerHTML = "error: " + data.error;
document.getElementById("login-error-message").classList.remove("hidden");
else if (data_req.status === 400) {
if (document.getElementById("login-error-message")) {
document.getElementById("login-error-message").innerHTML = "error: " + data.error;
document.getElementById("login-error-message")?.classList.remove("hidden");
}
}
else
{
else {
throw new Error("invalid response");
}
}
catch (error)
{
catch (error) {
console.error(error);
document.getElementById("login-error-message").innerHTML = "error: server error, try again later...";
document.getElementById("login-error-message").classList.remove("hidden");
if (document.getElementById("login-error-message")) {
document.getElementById("login-error-message").innerHTML = "error: server error, try again later...";
document.getElementById("login-error-message")?.classList.remove("hidden");
}
}
};

62
src/front/static/ts/views/Settings.ts
View File

@ -2,12 +2,12 @@ import Aview from "./Aview.ts"
import { dragElement } from "./drag.ts";
import { setOnekoState } from "../oneko.ts"
import { isLogged, navigationManager } from "../main.ts"
import { totpEnablePopup } from "./TotpEnable.ts";
import { totpVerify } from "../../../../api/auth/totpVerify.js";
export default class extends Aview {
constructor()
{
constructor() {
super();
this.setTitle("profile");
setOnekoState("default");
@ -24,7 +24,7 @@ export default class extends Aview {
<a href="/" data-link> × </a>
</div>
</div>
<div class="bg-neutral-200 dark:bg-neutral-800 text-center pb-10 pt-5 px-10 space-y-8 reverse-border">
<div class="bg-neutral-200 dark:bg-neutral-800 text-center pb-10 pt-5 px-10 space-y-4 reverse-border">
<div class="flex flex-row items-center place-items-center space-x-4">
<input type="text" id="displayName-input" class="bg-white text-neutral-900 px-4 py-2 input-border" required></input>
<button id="displayName-button" type="submit" class="default-button w-full">change display name</button>
@ -37,6 +37,10 @@ export default class extends Aview {
<label for="upload-file" class="default-button">select an avatar...</label><input type="file" id="upload-file" class="hidden" accept="image/*" />
</div>
<button id="deleteAccount-button" type="submit" class="default-button w-full">delete your account</button>
<div class="flex justify-center">
<hr class="w-50 reverse-border">
</div>
<button id="2fa-button" type="submit" class="default-button w-full">2fa</button>
</div>
</div>
`;
@ -48,6 +52,21 @@ export default class extends Aview {
dragElement(document.getElementById("window"));
const isTOTPEnabled = async () => {
const totpVerify_req = await fetch('http://localhost:3001/2fa', {
method: "GET",
credentials: "include"
})
if (totpVerify_req.status === 200) {
const totpVerify_data = await totpVerify_req.json();
if (totpVerify_data.totp == true) {
return true;
}
}
return false;
};
let uuid: String;
uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
const userdata_req = await fetch(`http://localhost:3002/users/${uuid}`, {
@ -123,5 +142,40 @@ export default class extends Aview {
});
console.log(up_req.status);
};
const totpButton = document.getElementById("2fa-button") as HTMLButtonElement;
if ((await isTOTPEnabled()) === true) {
totpButton.innerHTML = "disable 2fa";
document.getElementById("2fa-button")?.addEventListener("click", async () => {
const totp_req = await fetch(`http://localhost:3001/2fa`, {
method: "DELETE",
credentials: "include"
})
if (totp_req.status === 200) {
console.log("working")
navigationManager("/settings")
} else {
console.log("wut")
}
});
} else {
totpButton.innerHTML = "enable 2fa";
document.getElementById("2fa-button")?.addEventListener("click", async () => {
const totp_req = await fetch(`http://localhost:3001/2fa`, {
method: "POST",
credentials: "include"
})
if (totp_req.status === 200) {
console.log("working")
const totp_data = await totp_req.json();
totpEnablePopup(uuid, totp_data.secret, totp_data.otpauthUrl);
} else {
console.log("wut")
}
});
}
}
}

110
src/front/static/ts/views/TotpEnable.ts Normal file
View File

@ -0,0 +1,110 @@
import { navigationManager } from "../main.ts";
import { dragElement } from "./drag.ts";
async function totpVerify() {
const code = (document.getElementById("totpPin") as HTMLInputElement).value;
const data_req = await fetch('http://localhost:3001/2fa/verify', {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
token: code
})
})
if (data_req.status === 200) {
navigationManager("/settings");
} else if (data_req.status === 401 || data_req.status === 400) {
const popup_content = document.getElementById("2fa-enable-content");
if (!document.getElementById("error-totp")) {
const error = document.createElement("p");
error.id = "error-totp";
error.classList.add("text-red-700", "dark:text-red-500", "text-center");
error.innerHTML = (await data_req.json()).error;
popup_content?.appendChild(error)
} else {
const error = document.getElementById("error-totp") as HTMLParagraphElement;
error.innerHTML = (await data_req.json()).error;
}
} else {
console.log("Unexpected error")
}
}
export async function totpEnablePopup(username: String, secret: String, url: String) {
const popup: HTMLDivElement = document.createElement("div");
popup.id = "2fa-enable-popup";
popup.classList.add("z-10", "absolute", "default-border");
const header = popup.appendChild(document.createElement("div"));;
header.classList.add("bg-linear-to-r", "from-orange-200", "to-orange-300", "flex", "flex-row", "min-w-35", "justify-between", "px-2");
header.id = "2fa-enable-popup-header";
header.appendChild(document.createElement("span")).innerText = "2fa_enable.ts";
const btn = header.appendChild(document.createElement("button"));
btn.innerText = " × ";
btn.onclick = () => { document.getElementById("2fa-enable-popup")?.remove(); };
const popup_content: HTMLSpanElement = popup.appendChild(document.createElement("div"));
popup_content.id = "2fa-enable-content";
popup_content.classList.add("flex", "flex-col", "bg-neutral-200", "dark:bg-neutral-800", "p-6", "pt-4", "text-neutral-900", "dark:text-white", "space-y-4");
const qrDivTOTP = document.createElement("div");
qrDivTOTP.classList.add("flex", "justify-center");
const qrCodeTOTP = document.createElement("img");
qrCodeTOTP.id = "qrCodeTOTP";
qrCodeTOTP.src = `https://api.qrserver.com/v1/create-qr-code/?margin=10&size=512x512&data=${url}`;
qrCodeTOTP.classList.add("w-60");
qrDivTOTP.appendChild(qrCodeTOTP);
const secretText = document.createElement("p");
secretText.innerHTML = `key: <div class="select-all">${secret}</div>`;
secretText.classList.add("text-center")
const tokenInput = document.createElement("input");
tokenInput.type = "tel";
tokenInput.id = "totpPin";
tokenInput.name = "totpPin";
tokenInput.placeholder = "TOTP code";
tokenInput.required = true;
tokenInput.autocomplete = "off";
tokenInput.pattern = "[0-9]*";
tokenInput.setAttribute("inputmode", "numeric");
tokenInput.classList.add("bg-white", "text-neutral-900", "w-full", "px-4", "py-2", "input-border");
const tokenSubmit = document.createElement("button");
tokenSubmit.type = "submit";
tokenSubmit.classList.add("default-button", "w-full");
tokenSubmit.id = "totp-submit";
tokenSubmit.innerHTML = "submit";
const hr = document.createElement("hr");
hr.classList.add("my-2", "w-full", "reverse-border");
const t = document.createElement("h2");
t.innerHTML = "hey " + username +
` you are trying to add 2fa</br>
just add the following to your app and enter the code bellow ↓
`;
t.classList.add("text-center")
document.getElementById("app")?.appendChild(popup);
const form = document.createElement("form");
form.method = "dialog";
form.classList.add("space-y-4");
form.appendChild(tokenInput);
form.appendChild(tokenSubmit);
popup_content.appendChild(t)
popup_content.appendChild(qrDivTOTP);
popup_content.appendChild(secretText);
popup_content.appendChild(hr)
popup_content.appendChild(form);
dragElement(document.getElementById("2fa-enable-popup"));
document.getElementById("totp-submit")?.addEventListener("click", totpVerify)
}