305 lines
8.9 KiB
TypeScript
305 lines
8.9 KiB
TypeScript
import {
|
|
addRoute,
|
|
navigateTo,
|
|
setTitle,
|
|
type RouteHandlerParams,
|
|
type RouteHandlerReturn,
|
|
} from "@app/routing";
|
|
import Cookie from "js-cookie";
|
|
import authHtml from "./login.html?raw";
|
|
import client from "@app/api";
|
|
import cuteCat from "./cuteCat.png";
|
|
import loggedInHtml from "./alreadyLoggedin.html?raw";
|
|
import totpHtml from "./totp.html?raw";
|
|
import { isNullish } from "@app/utils";
|
|
import { showError, showInfo, showSuccess } from "@app/toast";
|
|
import { updateUser } from "@app/auth";
|
|
|
|
const TOTP_LENGTH = 6;
|
|
|
|
async function handleOtp(app: HTMLElement, token: string, returnTo: string | null) {
|
|
app.innerHTML = totpHtml;
|
|
|
|
const container = app.querySelector("#totp-container")!;
|
|
container.innerHTML = "";
|
|
|
|
const inputs: HTMLInputElement[] = [];
|
|
|
|
for (let i = 0; i < TOTP_LENGTH; i++) {
|
|
const input = document.createElement("input");
|
|
input.maxLength = 1;
|
|
input.inputMode = "numeric";
|
|
input.className =
|
|
"w-12 h-12 text-center text-xl border border-gray-300 rounded " +
|
|
"focus:outline-none focus:ring-2 focus:ring-blue-500";
|
|
|
|
container.appendChild(input);
|
|
inputs.push(input);
|
|
|
|
// Handle typing a digit
|
|
input.addEventListener("input", async () => {
|
|
const value = input.value.replace(/\D/g, "");
|
|
input.value = value;
|
|
|
|
// Auto-advance when filled
|
|
if (value && i < TOTP_LENGTH - 1) {
|
|
inputs[i + 1].focus();
|
|
}
|
|
await checkComplete();
|
|
});
|
|
|
|
// Handle backspace
|
|
input.addEventListener("keydown", (e) => {
|
|
if (e.key === "Backspace" && !input.value && i > 0) {
|
|
inputs[i - 1].focus();
|
|
}
|
|
});
|
|
|
|
// Handle pasting a full code
|
|
input.addEventListener("paste", (e: ClipboardEvent) => {
|
|
const pasted = e.clipboardData?.getData("text") ?? "";
|
|
const digits = pasted.replace(/\D/g, "").slice(0, TOTP_LENGTH);
|
|
|
|
if (digits.length > 1) {
|
|
e.preventDefault();
|
|
digits.split("").forEach((d, idx) => {
|
|
if (inputs[idx]) inputs[idx].value = d;
|
|
});
|
|
if (digits.length === TOTP_LENGTH) checkComplete();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Check if all digits are entered and then call totpSend
|
|
async function checkComplete() {
|
|
const code = inputs.map((i) => i.value).join("");
|
|
if (code.length === TOTP_LENGTH && /^[0-9]+$/.test(code)) {
|
|
let res = await client.loginOtp({
|
|
loginOtpRequest: {
|
|
code, token,
|
|
}
|
|
})
|
|
|
|
if (res.kind === "success") {
|
|
Cookie.set("token", res.payload.token, {
|
|
path: "/",
|
|
sameSite: "lax",
|
|
});
|
|
if (returnTo !== null) navigateTo(returnTo);
|
|
else navigateTo("/");
|
|
}
|
|
else if (res.kind === "failed") {
|
|
showError(`Failed to authenticate: ${res.msg}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
inputs[0].focus();
|
|
}
|
|
|
|
|
|
async function handleLogin(
|
|
_url: string,
|
|
_args: RouteHandlerParams,
|
|
): Promise<RouteHandlerReturn> {
|
|
setTitle("Login");
|
|
let user = await updateUser();
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const returnTo = urlParams.get("returnTo");
|
|
if (user !== null) {
|
|
return {
|
|
html: loggedInHtml,
|
|
postInsert: async (app) => {
|
|
const bLogoutButton =
|
|
app?.querySelector<HTMLButtonElement>("button#bLogout");
|
|
if (isNullish(bLogoutButton))
|
|
return showError("Error while rending page");
|
|
const iCuteCat =
|
|
app?.querySelector<HTMLImageElement>("img#cuteCatImage");
|
|
if (isNullish(iCuteCat))
|
|
return showError("Error while rending page");
|
|
const bReturnTo =
|
|
app?.querySelector<HTMLButtonElement>("button#bReturnTo");
|
|
if (isNullish(bReturnTo))
|
|
return showError("Error while rending page");
|
|
iCuteCat.src = cuteCat;
|
|
iCuteCat.hidden = false;
|
|
bLogoutButton.addEventListener("click", async () => {
|
|
await client.logout();
|
|
navigateTo("/login");
|
|
});
|
|
if (returnTo !== null) {
|
|
bReturnTo.parentElement!.hidden = false;
|
|
bReturnTo.addEventListener("click", async () => {
|
|
if (returnTo !== null) navigateTo(returnTo);
|
|
});
|
|
}
|
|
},
|
|
};
|
|
}
|
|
return {
|
|
html: authHtml,
|
|
postInsert: async (app) => {
|
|
const aHref =
|
|
app?.querySelector<HTMLAnchorElement>('a[href="/signin"]');
|
|
if (!isNullish(aHref) && returnTo !== null) {
|
|
aHref.href = `/signin?returnTo=${encodeURI(returnTo)}`;
|
|
}
|
|
const fLogin =
|
|
document.querySelector<HTMLFormElement>("form#login-form");
|
|
if (fLogin === null)
|
|
return showError(
|
|
"Error while rendering the page: no form found",
|
|
);
|
|
fLogin.addEventListener("submit", async function(e: SubmitEvent) {
|
|
e.preventDefault();
|
|
let form = e.target as HTMLFormElement | null;
|
|
if (form === null) return showError("Failed to send form...");
|
|
let formData = Object.fromEntries(new FormData(form).entries());
|
|
if (
|
|
!("login" in formData) ||
|
|
typeof formData["login"] !== "string" ||
|
|
(formData["login"] as string).length === 0
|
|
)
|
|
return showError("Please enter a Login");
|
|
if (
|
|
!("password" in formData) ||
|
|
typeof formData["password"] !== "string" ||
|
|
(formData["password"] as string).length === 0
|
|
)
|
|
return showError("Please enter a Password");
|
|
try {
|
|
const res = await client.login({
|
|
loginRequest: {
|
|
name: formData.login,
|
|
password: formData.password,
|
|
},
|
|
});
|
|
switch (res.kind) {
|
|
case "success": {
|
|
Cookie.set("token", res.payload.token, {
|
|
path: "/",
|
|
sameSite: "lax",
|
|
});
|
|
let user = await updateUser();
|
|
if (user === null)
|
|
return showError(
|
|
"Failed to get user: no user ?",
|
|
);
|
|
setTitle(
|
|
`Welcome ${user.guest ? "[GUEST] " : ""}${user.name}`,
|
|
);
|
|
if (returnTo !== null) navigateTo(returnTo);
|
|
break;
|
|
}
|
|
case "otpRequired": {
|
|
return await handleOtp(app!, res.payload.token, returnTo);
|
|
}
|
|
case "failed": {
|
|
showError(`Failed to login: ${res.msg}`);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error("Login error:", e);
|
|
showError("Failed to login: Unknown error");
|
|
}
|
|
});
|
|
|
|
const bLoginAsGuest =
|
|
document.querySelector<HTMLButtonElement>("#bGuestLogin");
|
|
bLoginAsGuest?.addEventListener("click", async () => {
|
|
try {
|
|
const res = await client.guestLogin({ guestLoginRequest: { name: undefined } });
|
|
switch (res.kind) {
|
|
case "success": {
|
|
Cookie.set("token", res.payload.token, {
|
|
path: "/",
|
|
sameSite: "lax",
|
|
});
|
|
let user = await updateUser();
|
|
if (user === null)
|
|
return showError(
|
|
"Failed to get user: no user ?",
|
|
);
|
|
setTitle(
|
|
`Welcome ${user.guest ? "[GUEST] " : ""}${user.name}`,
|
|
);
|
|
if (returnTo !== null) navigateTo(returnTo);
|
|
break;
|
|
}
|
|
case "failed": {
|
|
showError(`Failed to login: ${res.msg}`);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error("Login error:", e);
|
|
showError("Failed to login: Unknown error");
|
|
}
|
|
});
|
|
|
|
const dOtherLoginArea =
|
|
document.querySelector<HTMLDivElement>("#otherLogin");
|
|
if (dOtherLoginArea) {
|
|
let styleSheetElement = document.createElement("style");
|
|
styleSheetElement.innerText = "";
|
|
// TODO: fetch all the providers from an API ?
|
|
const providersReq = await client.providerList();
|
|
const providers = providersReq.payload.list;
|
|
/*const providers: Providers[] = [
|
|
{ name: 'discord', display_name: 'Discord', color: { default: 'bg-[#5865F2]', hover: '#FF65F2' } },
|
|
{ name: 'kanidm', display_name: 'Kanidm', color: { default: 'bg-red-500', hover: 'bg-red-700' } },
|
|
{ name: 'google', display_name: 'Google' },
|
|
]*/
|
|
let first = true;
|
|
for (const p of providers) {
|
|
let b = document.createElement("button");
|
|
if (first && providers.length % 2)
|
|
b.classList.add("last:col-span-2");
|
|
first = false;
|
|
b.classList.add(
|
|
..."w-full text-white font-medium py-2 rounded-xl transition".split(
|
|
" ",
|
|
),
|
|
);
|
|
b.classList.add(`providerButton-${p.name}`);
|
|
|
|
const col = p.colors;
|
|
|
|
for (const k of Object.keys(col)) {
|
|
let c = (col as any)[k].trim();
|
|
if (c.startsWith("bg-")) {
|
|
c = c.replace(/^bg-/, "");
|
|
const customProp = c.match(/^\((.+)\)$/);
|
|
const customVal = c.match(/^\[(.+)\]$/);
|
|
|
|
if (customProp) c = `var(${customProp[1]})`;
|
|
else if (customVal) c = customVal[1];
|
|
else if (c === "inherit") c = "inherit";
|
|
else if (c === "current") c = "currentColor";
|
|
else if (c === "transparent") c = "transparent";
|
|
else c = `var(--color-${c})`;
|
|
}
|
|
(col as any)[k] = c;
|
|
}
|
|
|
|
styleSheetElement.innerText += `.providerButton-${p.name} { background-color: ${col.normal}; }\n`;
|
|
styleSheetElement.innerText += `.providerButton-${p.name}:hover { background-color: ${col.hover}; }\n`;
|
|
|
|
b.dataset.display_name = p.displayName;
|
|
b.dataset.name = p.name;
|
|
//if (p.icon_url) b.dataset.icon = p.icon_url;
|
|
|
|
b.innerHTML = `<span class="">${p.displayName}</span>`;
|
|
b.addEventListener("click", () => {
|
|
location.href = `/api/auth/oauth2/${p.name}/login`;
|
|
});
|
|
|
|
dOtherLoginArea.insertAdjacentElement("afterbegin", b);
|
|
}
|
|
app?.appendChild(styleSheetElement);
|
|
}
|
|
},
|
|
};
|
|
}
|
|
|
|
addRoute("/login", handleLogin, { bypass_auth: true });
|