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

Merge pull request #69 from Maix0/frontend/profileBadge

Browse source 
Add a little profile/Login button in the caroussel
This commit is contained in:
Nigel 2025-12-22 19:47:52 +01:00 • committed by GitHub
commit 2ace5a9a94
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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> </head>
<body class="bg-gray-500 font-sans min-h-screen"> <body class="bg-gray-500 font-sans min-h-screen">
<!-- Header --> <!-- Header -->
<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"> 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"> <button id="menuBtn" class="flip-btn text-lg font-semibold focus:outline-none">
<span class="arrow front">&gt;</span> <span class="arrow front">&gt;</span>
<span class="arrow back">&lt;</span> <span class="arrow back">&lt;</span>
</button> </button>
<div id="header-title" class="text-white text-lf text-semibold ps-4 shadow-md font-mono"></div> </div>
<div class="text-white text-lf ps-4 font-mono"> </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> </header>
<!-- Sidebar --> <!-- Sidebar -->
<aside id="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"> 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> <a href="/logout" class="hover:bg-gray-700 rounded-md px-3 py-2">🚪 Logout</a>
</nav> </nav>
</aside> </aside>
<div class="fixed top-0 left-0 opacity-40" hidden>
<div class="fixed top-0 left-0 opacity-40" hidden> <!-- >this is used so tailwind create the class styles... --> <!-- >this is used so tailwind create the class styles... -->
</div> </div>
<!-- Overlay --> <!-- Overlay -->
<div id="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"> class="fixed top-14 left-0 right-0 bottom-0 bg-black opacity-0 pointer-events-none transition-opacity duration-300 z-30">
</div> </div>
<!-- Main content --> <!-- Main content -->
<main class="pt-16 px-6 pb-8 w-full h-full container" id="app"> <main class="pt-16 px-6 pb-8 w-full h-full container" id="app">
</main> </main>
<!-- Scripts --> <!-- Scripts -->
<script type="module" src="/src/pages/"></script> <script type="module" src="/src/pages/"></script>
<script type="module" src="/src/carousel"></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 { showError } from "@app/toast";
import client from '@app/api'; import client from "@app/api";
import cookie from 'js-cookie'; import cookie from "js-cookie";
import { ensureWindowState } from "@app/utils"; import { ensureWindowState } from "@app/utils";
import { navigateTo } from "./routing";
cookie.remove('pkce'); cookie.remove("pkce");
const headerProfile =
document.querySelector<HTMLDivElement>("#header-profile")!;
ensureWindowState(); ensureWindowState();
window.__state.user ??= null; window.__state.user ??= null;
@ -16,14 +19,15 @@ export type User = {
loginName?: string; loginName?: string;
providerId?: string; providerId?: string;
providerUser?: string; providerUser?: string;
} };
}; };
declare module 'ft_state' { declare module "ft_state" {
interface State { interface State {
user: User | null, user: User | null;
_headerProfile: boolean;
} }
}; }
export function getUser(): Readonly<User> | null { export function getUser(): Readonly<User> | null {
return window.__state.user; return window.__state.user;
@ -35,11 +39,20 @@ export function isLogged(): boolean {
export function setUser(newUser: User | null) { export function setUser(newUser: User | null) {
window.__state.user = newUser; 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> { export async function updateUser(): Promise<Readonly<User> | null> {
try { try {
let res = await client.getUser({ user: 'me' }); let res = await client.getUser({ user: "me" });
if (res.kind === "success") { if (res.kind === "success") {
setUser(res.payload); 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 });