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

Merge pull request #61 from KeyZox71/add-2fa-front o:

Browse Source 
Add 2fa front c:
This commit is contained in:
yosyo
2025-10-23 19:44:16 +02:00
committed by GitHub
parent f628b038d0 bfaed23365
commit c8d2f9713d
5 changed files with 269 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/index.html
View File

@ -11,7 +11,8 @@
<body class="bg-[url(https://y-syo.me/res/bg.jpg)] dark:bg-[url(https://api.kanel.ovh/random)] bg-center bg-cover h-screen flex flex-col font-[Lexend]">
<body class="bg-[url(https://api.kanel.ovh/random)] dark:bg-[url(https://api.kanel.ovh/random)] bg-center bg-cover h-screen flex flex-col font-[Lexend]">
<div class="absolute flex flex-col items-center space-y-5 top-4 left-5">
<!--a class="absolute flex flex-col items-center top-4 left-5" href="/pong" data-icon-->

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

@ -53,7 +53,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;
@ -71,11 +111,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
{

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

@ -132,6 +132,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) {
const newEntry = document.createElement("li");

58
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");
@ -37,6 +37,8 @@ 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>
<hr class="my-2 w-full reverse-border">
<button id="2fa-button" type="submit" class="default-button w-full">2fa</button>
</div>
</div>
`;
@ -48,6 +50,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 +140,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)
}