rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixes(frontend): Made the overlay transparent & redirect on login

Browse source 
The overlay that is used when the menubar is used is now actually
transparent

When logging in, actually always redirect to somewhere
(if not asked -> redirect to /)
This commit is contained in:
Maieul BOYER 2025-12-12 15:42:28 +01:00
parent 762796417a
commit 4a56c92667
No known key found for this signature in database
3 changed files with 29 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/index.html
View file

@ -17,8 +17,8 @@
<span class="arrow back">&lt;</span>
</button>
<div id="header-title" class="text-white text-lf text-semibold ps-4 shadow-md font-mono"></div>
<div class="text-white text-lf ps-4 font-mono"> </div>
</header>
<div class="text-white text-lf ps-4 font-mono"> </div>
</header>
<!-- Sidebar -->
<aside id="sidebar"
@ -34,9 +34,11 @@
</nav>
</aside>
<div class="fixed top-0 left-0 opacity-40" hidden> <!-- >this is used so tailwind create the class styles... -->
</div>
<!-- Overlay -->
<div id="overlay"
class="fixed top-14 left-0 right-0 bottom-0 bg-black bg-opacity-40 opacity-0 pointer-events-none transition-opacity duration-300 z-30">
class="fixed top-14 left-0 right-0 bottom-0 bg-black opacity-0 pointer-events-none transition-opacity duration-300 z-30">
</div>
<!-- Main content -->

2
frontend/src/carousel/index.ts
View file

@ -7,6 +7,7 @@ const overlay = document.querySelector('#overlay')!;
menuBtn.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full')
overlay.classList.toggle('opacity-0');
overlay.classList.toggle('opacity-40');
overlay.classList.toggle('pointer-events-none');
menuBtn.classList.toggle('flipped');
});
@ -14,4 +15,5 @@ menuBtn.addEventListener('click', () => {
overlay.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
overlay.classList.add('opacity-0', 'pointer-events-none');
overlay.classList.remove('opacity-40');
});

36
frontend/src/pages/login/login.ts
View file

@ -17,7 +17,11 @@ import { updateUser } from "@app/auth";
const TOTP_LENGTH = 6;
async function handleOtp(app: HTMLElement, token: string, returnTo: string | null) {
async function handleOtp(
app: HTMLElement,
token: string,
returnTo: string | null,
) {
app.innerHTML = totpHtml;
const container = app.querySelector("#totp-container")!;
@ -76,19 +80,18 @@ async function handleOtp(app: HTMLElement, token: string, returnTo: string | nul
if (code.length === TOTP_LENGTH && /^[0-9]+$/.test(code)) {
let res = await client.loginOtp({
loginOtpRequest: {
code, token,
}
})
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") {
navigateTo(returnTo ?? "/");
} else if (res.kind === "failed") {
showError(`Failed to authenticate: ${res.msg}`);
}
}
@ -97,7 +100,6 @@ async function handleOtp(app: HTMLElement, token: string, returnTo: string | nul
inputs[0].focus();
}
async function handleLogin(
_url: string,
_args: RouteHandlerParams,
@ -131,7 +133,7 @@ async function handleLogin(
if (returnTo !== null) {
bReturnTo.parentElement!.hidden = false;
bReturnTo.addEventListener("click", async () => {
if (returnTo !== null) navigateTo(returnTo);
navigateTo(returnTo ?? "/");
});
}
},
@ -189,11 +191,15 @@ async function handleLogin(
setTitle(
`Welcome ${user.guest ? "[GUEST] " : ""}${user.name}`,
);
if (returnTo !== null) navigateTo(returnTo);
navigateTo(returnTo ?? "/");
break;
}
case "otpRequired": {
return await handleOtp(app!, res.payload.token, returnTo);
return await handleOtp(
app!,
res.payload.token,
returnTo,
);
}
case "failed": {
showError(`Failed to login: ${res.msg}`);
@ -209,7 +215,9 @@ async function handleLogin(
document.querySelector<HTMLButtonElement>("#bGuestLogin");
bLoginAsGuest?.addEventListener("click", async () => {
try {
const res = await client.guestLogin({ guestLoginRequest: { name: undefined } });
const res = await client.guestLogin({
guestLoginRequest: { name: undefined },
});
switch (res.kind) {
case "success": {
Cookie.set("token", res.payload.token, {
@ -224,7 +232,7 @@ async function handleLogin(
setTitle(
`Welcome ${user.guest ? "[GUEST] " : ""}${user.name}`,
);
if (returnTo !== null) navigateTo(returnTo);
navigateTo(returnTo ?? "/");
break;
}
case "failed": {