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

feat(frontend): added little badge on top right to show current status

Browse source 
This badge will either send you to the login page, or to the profile
page
This commit is contained in:
Maieul BOYER 2025-12-22 11:33:17 +01:00
parent 930ff9d1b3
commit 769edcd1ad
No known key found for this signature in database
2 changed files with 49 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/index.html
View file

@ -8,18 +8,23 @@
</head>
<body class="bg-gray-500 font-sans min-h-screen">
<!-- Header -->
<header
class="fixed top-0 left-0 right-0 h-14 bg-gray-800 text-white flex items-center justify-between px-4 shadow-md z-50">
<div class="flex-1 flex justify-start">
<button id="menuBtn" class="flip-btn text-lg font-semibold focus:outline-none">
<span class="arrow front">&gt;</span>
<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>
</div>
<div id="header-title" class="text-white text-lf flex-1 text-center text-semibold ps-4 shadow-md font-mono">
</div>
<div class="flex-1 ps-4 flex justify-end">
<button id="header-profile"
class="right-0 px-4 inset-y-0 text-white text-right font-mono border-1 border-orange-500 rounded-3xl bg-orange-500 cursor-pointer shadow-[0_2px_0_0_black] transition-all hover:bg-orange-400 active:bg-orange-200 active:translate-y-[1px] active:shadow-[0_2px_0_0_black]">
</button>
</div>
</header>
<!-- Sidebar -->
<aside id="sidebar"
class="fixed top-14 left-0 w-64 h-full bg-gray-900 text-white transform -translate-x-full transition-transform duration-300 ease-in-out z-40">
@ -33,18 +38,16 @@
<a href="/logout" class="hover:bg-gray-700 rounded-md px-3 py-2">🚪 Logout</a>
</nav>
</aside>
<div class="fixed top-0 left-0 opacity-40" hidden> <!-- >this is used so tailwind create the class styles... -->
<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 opacity-0 pointer-events-none transition-opacity duration-300 z-30">
</div>
<!-- Main content -->
<main class="pt-16 px-6 pb-8 w-full h-full container" id="app">
</main>
<!-- Scripts -->
<script type="module" src="/src/pages/"></script>
<script type="module" src="/src/carousel"></script>

43
frontend/src/auth.ts
View file

@ -1,9 +1,12 @@
import { showError } from "@app/toast";
import client from '@app/api';
import cookie from 'js-cookie';
import client from "@app/api";
import cookie from "js-cookie";
import { ensureWindowState } from "@app/utils";
import { navigateTo } from "./routing";
cookie.remove('pkce');
cookie.remove("pkce");
const headerProfile =
document.querySelector<HTMLDivElement>("#header-profile")!;
ensureWindowState();
window.__state.user ??= null;
@ -16,14 +19,15 @@ export type User = {
loginName?: string;
providerId?: string;
providerUser?: string;
}
};
};
declare module 'ft_state' {
declare module "ft_state" {
interface State {
user: User | null,
user: User | null;
_headerProfile: boolean;
}
}
};
export function getUser(): Readonly<User> | null {
return window.__state.user;
@ -35,11 +39,20 @@ export function isLogged(): boolean {
export function setUser(newUser: User | null) {
window.__state.user = newUser;
updateHeaderProfile();
}
export function updateHeaderProfile() {
if (window.__state.user !== null) {
headerProfile.innerText = window.__state.user.name;
} else {
headerProfile.innerText = "Login";
}
}
export async function updateUser(): Promise<Readonly<User> | null> {
try {
let res = await client.getUser({ user: 'me' });
let res = await client.getUser({ user: "me" });
if (res.kind === "success") {
setUser(res.payload);
@ -63,5 +76,17 @@ export async function updateUser(): Promise<Readonly<User> | null> {
}
}
Object.assign(window as any, { getUser, setUser, updateUser, isLogged });
window.__state._headerProfile ??= false;
if (!window.__state._headerProfile) {
headerProfile.addEventListener("click", () => {
if (window.__state.user === null) {
navigateTo(`/login?returnTo=${encodeURIComponent(window.location.pathname)}`);
} else {
navigateTo("/profile");
}
});
window.__state._headerProfile = true;
}
updateHeaderProfile();
Object.assign(window as any, { getUser, setUser, updateUser, isLogged });