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

feat(frontend/auth): Added way to automatically fetch providers

Browse source 
This allows the frontend to list all available providers without
hardcoding them in.
This commit is contained in:
Maieul BOYER 2025-11-13 16:53:24 +01:00 • committed by Maix0
parent 9ce9fa44e4
commit 6d630fee92
22 changed files with 1448 additions and 221 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/pages/login/login.html
View file

@ -35,7 +35,7 @@
You can also login with
</p>
<div id="otherLogin" class="pt-5 space-y-5 grid grid-cols-2 gap-4">
<div id="otherLogin" class="pt-5 grid grid-cols-2 gap-4">
</div>
</div>
</div>

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

@ -83,15 +83,17 @@ function handleLogin(_url: string, _args: RouteHandlerParams): RouteHandlerRetur
let styleSheetElement = document.createElement('style');
styleSheetElement.innerText = "";
// TODO: fetch all the providers from an API ?
const providers: Providers[] = [
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) b.classList.add('last:col-span-2');
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'
@ -99,10 +101,10 @@ function handleLogin(_url: string, _args: RouteHandlerParams): RouteHandlerRetur
));
b.classList.add(`providerButton-${p.name}`)
const col = { default: p.color?.default ?? "bg-gray-600", hover: p.color?.hover ?? "bg-gray-700" };
const col = p.colors;
for (const k of Object.keys(col)) {
let c = (col as { [k: string]: string })[k].trim();
let c = (col as any)[k].trim();
if (c.startsWith('bg-')) {
c = c.replace(/^bg-/, '');
const customProp = c.match(/^\((.+)\)$/);
@ -122,19 +124,17 @@ function handleLogin(_url: string, _args: RouteHandlerParams): RouteHandlerRetur
c = `var(--color-${c})`
}
(col as { [k: string]: string })[k] = c;
(col as any)[k] = c;
}
styleSheetElement.innerText += `.providerButton-${p.name} { background-color: ${col.default}; }\n`;
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.display_name;
b.dataset.display_name = p.displayName;
b.dataset.name = p.name;
if (p.icon_url) b.dataset.icon = p.icon_url;
//if (p.icon_url) b.dataset.icon = p.icon_url;
b.innerHTML = `
${p.icon_url ? `<img src="${p.icon_url}" alt="${p.display_name} Logo" />` : ''} <span class="">${p.display_name}</span>
`
b.innerHTML = `<span class="">${p.displayName}</span>`
b.addEventListener('click', () => {
location.href = `/api/auth/oauth2/${p.name}/login`;
})