('#otherLogin');
+ if (dOtherLoginArea) {
+ let styleSheetElement = document.createElement('style');
+ styleSheetElement.innerText = "";
+ // TODO: fetch all the providers from an API ?
+ 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');
+ 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 = { default: p.color?.default ?? "bg-gray-600", hover: p.color?.hover ?? "bg-gray-700" };
+
+ for (const k of Object.keys(col)) {
+ let c = (col as { [k: string]: string })[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 { [k: string]: string })[k] = c;
+ }
+
+ styleSheetElement.innerText += `.providerButton-${p.name} { background-color: ${col.default}; }\n`;
+ styleSheetElement.innerText += `.providerButton-${p.name}:hover { background-color: ${col.hover}; }\n`;
+
+ b.dataset.display_name = p.display_name;
+ b.dataset.name = p.name;
+ if (p.icon_url) b.dataset.icon = p.icon_url;
+
+ b.innerHTML = `
+ ${p.icon_url ? `
` : ''} ${p.display_name}
+ `
+ b.addEventListener('click', () => {
+ location.href = `/api/auth/oauth2/${p.name}/login`;
+ })
+
+ dOtherLoginArea.insertAdjacentElement('afterbegin', b);
+ }
+ app?.appendChild(styleSheetElement);
+ }
+ }
+ };
+
+}
+
+
+addRoute('/login', handleLogin, { bypass_auth: true })
diff --git a/frontend/src/pages/root/root.html b/frontend/src/pages/root/root.html
new file mode 100644
index 0000000..d62fa44
--- /dev/null
+++ b/frontend/src/pages/root/root.html
@@ -0,0 +1,15 @@
+
+ Welcome a to The Site de Boule
+
+
+ Welcome a to The Site de Boule
+
+
+ Welcome a to The Site de Boule
+
+
+ Welcome a to The Site de Boule
+
+
+ Welcome a to The Site de Boule
+
diff --git a/frontend/src/pages/root/root.ts b/frontend/src/pages/root/root.ts
new file mode 100644
index 0000000..02e137a
--- /dev/null
+++ b/frontend/src/pages/root/root.ts
@@ -0,0 +1,14 @@
+import { addRoute, setTitle, type RouteHandlerParams } from "@app/routing";
+import page from './root.html?raw'
+
+addRoute('/', (_: string) => {
+ setTitle('ft boules')
+ return page;
+})
+
+
+addRoute('/with_title/:title', (_: string, args: RouteHandlerParams) => {
+ setTitle(args.title)
+ console.log(`title should be '${args.title}'`);
+ return page;
+})
diff --git a/frontend/src/routing/index.ts b/frontend/src/routing/index.ts
new file mode 100644
index 0000000..9b5fc97
--- /dev/null
+++ b/frontend/src/routing/index.ts
@@ -0,0 +1,217 @@
+import { route_404 } from './special_routes'
+
+// ---- Router logic ----
+function navigateTo(url: string) {
+ history.pushState(null, "", `${url.startsWith('/') ? '/app' : ""}${url}`);
+ handleRoute();
+}
+
+type AsyncFunctionMaker any> =
+ (...args: Parameters) => Promise>;
+
+export type RouteHandlerParams = { [k: string]: string };
+
+
+export type SyncRouteHandlerPostInsertFn = (appNode?: HTMLElement) => void;
+export type AsyncRouteHandlerPostInsertFn = AsyncFunctionMaker;
+export type RouteHandlerReturn = {
+ html: string,
+ postInsert?: SyncRouteHandlerPostInsertFn | AsyncRouteHandlerPostInsertFn,
+};
+
+export type SyncRouteHandler = (url: string, args: RouteHandlerParams) => RouteHandlerReturn | string;
+export type AsyncRouteHandler = AsyncFunctionMaker;
+export type RouteHandler = string | SyncRouteHandler | AsyncRouteHandler;
+export type Routes = Map
+export type RouteHandlerSpecialArgs = {
+ bypass_auth: boolean,
+};
+
+export class RouteHandlerData {
+ public readonly handler: RouteHandler;
+ public readonly url: string;
+ public readonly parts: (string | null)[];
+ public readonly args: (string | null)[];
+ public readonly orignal_url: string;
+ public readonly special_args: RouteHandlerSpecialArgs;
+
+ public static SPECIAL_ARGS_DEFAULT: RouteHandlerSpecialArgs = {
+ bypass_auth: false,
+ }
+
+ constructor(url: string, handler: RouteHandler, special_args: Partial) {
+ this.special_args = RouteHandlerData.SPECIAL_ARGS_DEFAULT;
+ Object.assign(this.special_args, special_args);
+
+ let parsed = RouteHandlerData.parseUrl(url);
+ this.handler = handler;
+ this.parts = parsed.parts;
+ this.url = parsed.parts.map((v, i) => v ?? `:${i}`).reduce((p, c) => `${p}/${c}`, '');
+ this.args = parsed.args;
+ this.orignal_url = parsed.original;
+ }
+
+ private static parseUrl(url: string): { parts: (string | null)[], original: string, args: (string | null)[] } {
+ const deduped = url.replace(RegExp('/+'), '/');
+ const trimed = deduped.replace(RegExp('(^/)|(/$)'), '');
+
+ let parts = trimed.split('/');
+ let s = parts.map((part, idx) => {
+ // then this is a parameter !
+ if (part.startsWith(':')) {
+ let param_name = part.substring(1) // remove the :
+ // verifiy that the parameter name only contains character, underscores and numbers (not in fist char tho)
+ if (!param_name.match('^[a-zA-Z_][a-zA-Z_0-9]+$'))
+ throw `route parameter ${idx} for url '${url}' contains illegal character`;
+ return { idx, param_name, part: null }
+ }
+ else {
+ return { idx, param_name: null, part };
+ }
+ })
+ {
+ let dup = new Set();
+ for (const { param_name } of s) {
+ if (param_name === null) continue;
+ if (dup.has(param_name))
+ throw `route paramater '${param_name}' is a duplicate in route ${url}`;
+ dup.add(param_name);
+ }
+ }
+ let out_args = s.map(p => p.param_name);
+ let out_parts = s.map(p => p.part);
+
+ return {
+ parts: out_parts, args: out_args, original: url,
+ }
+ }
+}
+
+function urlToParts(url: string): string[] {
+ const deduped = url.replace(RegExp('/+'), '/');
+ const trimed = deduped.replace(RegExp('(^/)|(/$)'), '');
+
+ let parts = trimed.split('/');
+ if (parts.at(0) === 'app')
+ parts.shift();
+ return parts;
+}
+
+function setupRoutes(): [
+ () => Routes,
+ (url: string, handler: RouteHandler, args?: Partial) => void
+] {
+ const routes = new Map();
+
+ return [
+ () => routes,
+ (url: string, handler: RouteHandler | string, args?: Partial) => {
+ let d = new RouteHandlerData(url, handler, args ?? {});
+ if (routes.has(d.url))
+ throw `Tried to insert route ${url}, but it already exists`;
+ routes.set(d.url, d);
+ }
+ ];
+}
+
+function setupTitle(): [
+ () => string,
+ (title: string) => void,
+] {
+ let title = "";
+ let titleElem = document.querySelector('#header-title')!;
+ return [
+ () => title,
+ (new_title) => {
+ title = new_title;
+ titleElem.innerText = title;
+ }
+ ]
+}
+
+
+export const [getRoute, addRoute] = setupRoutes();
+
+export const [getTitle, setTitle] = setupTitle();
+
+(window as any).getRoute = getRoute;
+
+const executeRouteHandler = async (handler: RouteHandlerData, ...args: Parameters): Promise => {
+ // handler may be a raw string literal, if yes => return it directly
+ if (typeof handler.handler === 'string')
+ return { html: handler.handler };
+
+ // now we know handler is a function. what does it return ? we don't know
+ // the two choices are either a string, or a Promise (needing an await to get the string)
+ const result = handler.handler(...args);
+
+
+ // if `result` is a promise, awaits it, otherwise do nothing
+ let ret = result instanceof Promise ? (await result) : result;
+
+ // if ret is a string, then no postInsert function exists => return a well formed object
+ if (typeof ret === 'string')
+ return { html: ret };
+ return ret;
+}
+
+const route_404_handler = new RouteHandlerData('', route_404, { bypass_auth: true });
+
+function parts_match(route_parts: (string | null)[], parts: string[]): boolean {
+ if (route_parts.length !== parts.length) return false;
+
+ let zipped = route_parts.map((v, i) => [v ?? parts[i], parts[i]]);
+ return zipped.every(([lhs, rhs]) => lhs == rhs)
+}
+
+export async function handleRoute() {
+ let routes = getRoute();
+
+ let parts = urlToParts(window.location.pathname);
+ let routes_all = routes.entries();
+
+ let route_handler: RouteHandlerData = route_404_handler;
+ let args: RouteHandlerParams = {};
+ for (const [_, route_data] of routes_all) {
+ if (!parts_match(route_data.parts, parts)) continue;
+
+ args = {};
+ route_data.args.forEach((v, i) => {
+ if (v === null) return;
+ args[v] = decodeURIComponent(parts[i]);
+ })
+ route_handler = route_data;
+ break;
+ }
+
+ const app = document.getElementById('app')!;
+ let ret = await executeRouteHandler(route_handler, window.location.pathname, args)
+ app.innerHTML = ret.html;
+ if (ret.postInsert) {
+ let r = ret.postInsert(app);
+ if (r instanceof Promise) await r;
+ }
+}
+
+
+// ---- Intercept link clicks ----
+document.addEventListener('click', e => {
+ const target = e?.target;
+ if (!target) return;
+ if (!(target instanceof Element)) return;
+ let link = target.closest('a[href]') as HTMLAnchorElement;
+ if (!link) return;
+
+ const url = new URL(link.href);
+ const sameOrigin = url.origin === window.location.origin;
+
+ if (sameOrigin) {
+ e.preventDefault();
+ navigateTo(url.pathname);
+ }
+});
+
+// ---- Handle browser navigation (back/forward) ----
+window.addEventListener('popstate', handleRoute);
+
+Object.assign((window as any), { getTitle, setTitle, getRoute, addRoute, navigateTo })
diff --git a/frontend/src/routing/special_routes.ts b/frontend/src/routing/special_routes.ts
new file mode 100644
index 0000000..b0c5ee8
--- /dev/null
+++ b/frontend/src/routing/special_routes.ts
@@ -0,0 +1,12 @@
+import { escapeHTML } from "@app/utils";
+import { getRoute, type RouteHandlerParams } from "@app/routing";
+
+export async function route_404(url: string, _args: RouteHandlerParams): Promise {
+ console.log(`asked about route '${url}: not found'`)
+ console.log(getRoute())
+ return `
+ 404 - Not Found
+
+ ${escapeHTML(url)}
+ `
+}
diff --git a/frontend/src/toast/index.ts b/frontend/src/toast/index.ts
new file mode 100644
index 0000000..2d796ca
--- /dev/null
+++ b/frontend/src/toast/index.ts
@@ -0,0 +1,79 @@
+type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+interface Toast {
+ message: string;
+ type: ToastType;
+ el: HTMLElement;
+}
+
+class ToastManager {
+ private container: HTMLElement;
+ private toasts: Toast[] = [];
+
+
+ private static INSTANCE: ToastManager = new ToastManager();
+ public static instance(): ToastManager { return ToastManager.INSTANCE; }
+
+ private constructor() {
+ // Create container at bottom center
+ this.container = document.createElement('div');
+ this.container.className = `
+ fixed bottom-5 left-1/2 transform -translate-x-1/2
+ flex flex-col-reverse items-center gap-2 z-50
+ `;
+ document.body.appendChild(this.container);
+ }
+
+ public show(message: string, type: ToastType = 'info', duration = 5000) {
+ const el = document.createElement('div');
+
+ const color = {
+ success: 'bg-green-600',
+ error: 'bg-red-600',
+ info: 'bg-blue-600',
+ warning: 'bg-yellow-600 text-black'
+ }[type];
+
+ el.className = `
+ toast-item min-w-[200px] max-w-sm px-4 py-2 rounded-xl shadow-lg
+ text-white text-sm font-medium opacity-0 translate-y-4
+ transition-all duration-300 ease-out ${color}
+ `;
+ el.innerText = message;
+
+ this.container.prepend(el);
+
+ // Animate in
+ requestAnimationFrame(() => {
+ el.classList.remove('opacity-0', 'translate-y-4');
+ el.classList.add('opacity-100', 'translate-y-0');
+ });
+ let toast: Toast = { message, type, el };
+ this.toasts.push(toast)
+ setTimeout(() => this.remove(toast), duration);
+ }
+
+
+ private remove(toast: Toast) {
+ const el = toast.el;
+ if (toast) {
+ // Animate out
+ el.classList.add('opacity-0', 'translate-y-4');
+ setTimeout(() => el.remove(), 300);
+ }
+ this.toasts = this.toasts.filter(t => t !== toast);
+ }
+
+}
+
+// Export a singleton
+export const toast = ToastManager.instance();
+export default toast;
+
+export function showError(message: string, duration: number = 5000) { toast.show(message, 'error', duration); }
+export function showWarn(message: string, duration: number = 5000) { toast.show(message, 'warning', duration); }
+
+export function showInfo(message: string, duration: number = 5000) { toast.show(message, 'info', duration); }
+export function showSuccess(message: string, duration: number = 5000) { toast.show(message, 'success', duration); }
+
+Object.assign((window as any), { toast, showError, showWarn, showInfo, showSuccess })
diff --git a/frontend/src/typescript.svg b/frontend/src/typescript.svg
new file mode 100644
index 0000000..d91c910
--- /dev/null
+++ b/frontend/src/typescript.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
new file mode 100644
index 0000000..d35bb00
--- /dev/null
+++ b/frontend/src/utils.ts
@@ -0,0 +1,8 @@
+export function escapeHTML(str: string): string {
+ const p = document.createElement("p");
+ p.appendChild(document.createTextNode(str));
+ return p.innerHTML;
+}
+export function isNullish(v: T | undefined | null): v is (null | undefined) {
+ return v === null || v === undefined;
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..b1f3181
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "erasableSyntaxOnly": false,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true,
+ "paths": {
+ "@app/*": ["./src/*"]
+ }
+ },
+ "include": ["src"]
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..1415ddd
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite'
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+ plugins: [
+ tailwindcss(),
+ tsconfigPaths(),
+ ],
+ server: {
+ hmr: {
+ protocol: 'ws',
+ host: 'localhost',
+ port: '5137',
+
+ }
+ }
+});