「🔨」 fix: fixed some things.

src/front/static/ts/views/LoginPage.ts

@@ -73,11 +73,17 @@ export default class extends Aview {
 				} 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())
@@ -140,7 +146,7 @@ export default class extends Aview {
 
 					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");
+					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";

src/front/static/ts/views/Settings.ts

@@ -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");
@@ -29,7 +29,7 @@ export default class extends Aview {
 				<button id="displayName-button" type="submit" class="default-button w-full">change display name</button>
 				<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">enable 2FA</button>
+				<button id="2fa-button" type="submit" class="default-button w-full">2fa</button>
 			</div>
 		</div>
 		`;
@@ -41,6 +41,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}`, {
@@ -83,8 +98,40 @@ export default class extends Aview {
 				console.error("xd"); // xd?????????????
 		});
 
-	document.getElementById("2fa-button")?.addEventListener("click", async () => {
 
+		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")
+				}
 			});
 		}
 	}
+}

src/front/static/ts/views/TotpEnable.ts

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