feat(frontend): added frontend
- Router: client side route handling with client side rendering - Toast: rought Toast handling for better UX and messaging - Auth: single point of truth for the Logged in user This commit doesnt not include the openapi generated code
This commit is contained in:
Maieul BOYER
Maix0
parent
0db41a440d
commit
08c910c193
28 changed files with 1994 additions and 0 deletions
2
frontend/.dockerignore
Normal file
2
frontend/.dockerignore
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
dist
|
||||
25
frontend/.gitignore
vendored
Normal file
25
frontend/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
package-lock.json
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
17
frontend/Dockerfile
Normal file
17
frontend/Dockerfile
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
FROM node:22-alpine AS pnpm_base
|
||||
RUN npm install --global pnpm@10;
|
||||
|
||||
FROM pnpm_base AS builder
|
||||
|
||||
COPY . /src
|
||||
WORKDIR /src
|
||||
RUN pnpm install --frozen-lockfile && pnpm run build;
|
||||
|
||||
FROM node:22-alpine
|
||||
|
||||
COPY --from=builder /src/dist /dist
|
||||
COPY ./run.sh /bin/run.sh
|
||||
|
||||
RUN chmod +x /bin/run.sh
|
||||
|
||||
CMD [ "/bin/run.sh" ]
|
||||
51
frontend/index.html
Normal file
51
frontend/index.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ft Boules</title>
|
||||
</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">
|
||||
<button id="menuBtn" class="flip-btn text-lg font-semibold focus:outline-none">
|
||||
<span class="arrow front">></span>
|
||||
<span class="arrow back"><</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>
|
||||
|
||||
<!-- 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">
|
||||
<nav class="flex flex-col p-4 space-y-3">
|
||||
<a href="/" class="hover:bg-gray-700 rounded-md px-3 py-2">🏠 Home</a>
|
||||
<a href="/chat" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Chat</a>
|
||||
<a href="/contact" class="hover:bg-gray-700 rounded-md px-3 py-2">⚙️ Settings</a>
|
||||
<a href="/404" class="hover:bg-gray-700 rounded-md px-3 py-2">🚪 Logout</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 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">
|
||||
</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/carousel/"></script>
|
||||
<script type="module" src="/src/pages/"></script>
|
||||
<script type="module" src="/src/routing/"></script>
|
||||
<script type="module" src="/src/toast/"></script>
|
||||
<script type="module" src="/src/auth/"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
21
frontend/package.json
Normal file
21
frontend/package.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^7.1.10",
|
||||
"vite-tsconfig-paths": "^5.1.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.16",
|
||||
"openapi-fetch": "^0.15.0",
|
||||
"tailwindcss": "^4.1.16"
|
||||
}
|
||||
}
|
||||
1063
frontend/pnpm-lock.yaml
generated
Normal file
1063
frontend/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
5
frontend/pnpm-workspace.yaml
Normal file
5
frontend/pnpm-workspace.yaml
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
packages:
|
||||
- .
|
||||
|
||||
onlyBuiltDependencies:
|
||||
- esbuild
|
||||
1
frontend/public/vite.svg
Normal file
1
frontend/public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
9
frontend/run.sh
Normal file
9
frontend/run.sh
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
#!/bin/sh
|
||||
|
||||
set -x
|
||||
set -e
|
||||
|
||||
rm -rf /volumes/static/app
|
||||
mkdir -p /volumes/static/app
|
||||
|
||||
cp -r /dist/* /volumes/static/app/
|
||||
17
frontend/src/api/index.ts
Normal file
17
frontend/src/api/index.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { Configuration, OpenapiOtherApi } from './generated';
|
||||
export * from './generated'
|
||||
|
||||
|
||||
const basePath = (() => {
|
||||
let u = new URL(location.href);
|
||||
u.pathname = "";
|
||||
u.hash = "";
|
||||
u.search = "";
|
||||
return u.toString().replace(/\/+$/, '');
|
||||
|
||||
})();
|
||||
|
||||
export const client = new OpenapiOtherApi(new Configuration({ basePath }));
|
||||
export default client;
|
||||
|
||||
|
||||
51
frontend/src/auth/index.ts
Normal file
51
frontend/src/auth/index.ts
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import { showError } from "@app/toast";
|
||||
import client from '@app/api';
|
||||
|
||||
export type User = {
|
||||
id: string;
|
||||
guest: boolean;
|
||||
name: string;
|
||||
};
|
||||
|
||||
let currentUser: User | null = null;
|
||||
|
||||
export function getUser(): Readonly<User> | null {
|
||||
return currentUser;
|
||||
}
|
||||
|
||||
export function isLogged(): boolean {
|
||||
return currentUser === null;
|
||||
}
|
||||
|
||||
export function setUser(newUser: User | null) {
|
||||
currentUser = newUser;
|
||||
}
|
||||
|
||||
export async function updateUser(): Promise<Readonly<User> | null> {
|
||||
try {
|
||||
let res = await client.getUser({ user: 'me' });
|
||||
|
||||
if (res.kind === "success") {
|
||||
setUser(res.payload);
|
||||
return res.payload;
|
||||
} else if (res.kind === "failure") {
|
||||
// well no user :D
|
||||
setUser(null);
|
||||
return null;
|
||||
} else if (res.kind === "notLoggedIn") {
|
||||
setUser(null);
|
||||
return null;
|
||||
} else {
|
||||
setUser(null);
|
||||
showError(`unknown response: ${JSON.stringify(res)}`);
|
||||
return null;
|
||||
}
|
||||
} catch (e) {
|
||||
setUser(null);
|
||||
showError(`failed to get user: ${e}`);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
Object.assign(window as any, { getUser, setUser, updateUser, isLogged });
|
||||
|
||||
104
frontend/src/carousel/carousel.css
Normal file
104
frontend/src/carousel/carousel.css
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
.flip-btn {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: #333;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
perspective: 600px;
|
||||
/* Enables 3D effect */
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: transform 0.5s;
|
||||
backface-visibility: hidden;
|
||||
/* Hide the back when rotated */
|
||||
}
|
||||
|
||||
.front {
|
||||
transform: translate(-50%, -50%) rotateY(0deg);
|
||||
}
|
||||
|
||||
.back {
|
||||
transform: translate(-50%, -50%) rotateY(180deg);
|
||||
}
|
||||
|
||||
.flip-btn.flipped .front {
|
||||
transform: translate(-50%, -50%) rotateY(180deg);
|
||||
}
|
||||
|
||||
.flip-btn.flipped .back {
|
||||
transform: translate(-50%, -50%) rotateY(360deg);
|
||||
}
|
||||
|
||||
|
||||
@import 'tailwindcss';
|
||||
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vanilla:hover {
|
||||
filter: drop-shadow(0 0 2em #3178c6aa);
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
17
frontend/src/carousel/index.ts
Normal file
17
frontend/src/carousel/index.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import './carousel.css'
|
||||
|
||||
const menuBtn = document.querySelector<HTMLButtonElement>('#menuBtn')!;
|
||||
const sidebar = document.querySelector('#sidebar')!;
|
||||
const overlay = document.querySelector('#overlay')!;
|
||||
|
||||
menuBtn.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('-translate-x-full')
|
||||
overlay.classList.toggle('opacity-0');
|
||||
overlay.classList.toggle('pointer-events-none');
|
||||
menuBtn.classList.toggle('flipped');
|
||||
});
|
||||
|
||||
overlay.addEventListener('click', () => {
|
||||
sidebar.classList.add('-translate-x-full');
|
||||
overlay.classList.add('opacity-0', 'pointer-events-none');
|
||||
});
|
||||
0
frontend/src/pages/about/about.html
Normal file
0
frontend/src/pages/about/about.html
Normal file
12
frontend/src/pages/about/about.ts
Normal file
12
frontend/src/pages/about/about.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { addRoute, setTitle } from "@app/routing";
|
||||
import page from './about.html?raw'
|
||||
|
||||
|
||||
async function route(_url: string, _args: { [k: string]: string }): Promise<string> {
|
||||
setTitle('About us')
|
||||
return page;
|
||||
}
|
||||
|
||||
|
||||
|
||||
addRoute('/', route)
|
||||
5
frontend/src/pages/chat/chat.ts
Normal file
5
frontend/src/pages/chat/chat.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { addRoute, type RouteHandlerParams } from "@app/routing";
|
||||
|
||||
addRoute('/chat', function (_url: string, _args: RouteHandlerParams) {
|
||||
return "this is the chat page !"
|
||||
})
|
||||
8
frontend/src/pages/index.ts
Normal file
8
frontend/src/pages/index.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { setTitle, handleRoute } from '@app/routing';
|
||||
import './root/root.ts'
|
||||
import './chat/chat.ts'
|
||||
import './login/login.ts'
|
||||
|
||||
// ---- Initial load ----
|
||||
setTitle("");
|
||||
handleRoute();
|
||||
41
frontend/src/pages/login/login.html
Normal file
41
frontend/src/pages/login/login.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<div class="grid h-full place-items-center">
|
||||
<div class="bg-white shadow-lg rounded-2xl p-8 w-full max-w-md">
|
||||
<h1 class="text-2xl font-semibold text-center mb-6 text-gray-800">Welcome to <span>ft boules</span></h1>
|
||||
|
||||
<button id="bGuestLogin"
|
||||
class="w-full bg-gray-600 text-white font-medium py-2 rounded-xl hover:bg-gray-700 transition">
|
||||
Login as Guest
|
||||
</button>
|
||||
|
||||
<form class="space-y-5 pt-3" id="login-form">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
|
||||
<input type="text" placeholder="Enter your username" name="login"
|
||||
class="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
||||
<input type="password" placeholder="Enter your password" name="password"
|
||||
class="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="w-full bg-blue-600 text-white font-medium py-2 rounded-xl hover:bg-blue-700 transition">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="text-center text-sm text-gray-500 mt-4">
|
||||
Don’t have an account?
|
||||
<a href="/signin" class="text-blue-600 hover:underline">Sign up</a>
|
||||
</p>
|
||||
|
||||
<p class="text-center text-sm text-gray-500 mt-4">
|
||||
You can also login with
|
||||
</p>
|
||||
|
||||
<div id="otherLogin" class="pt-5 space-y-5 grid grid-cols-2 gap-4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
152
frontend/src/pages/login/login.ts
Normal file
152
frontend/src/pages/login/login.ts
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
import { addRoute, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
|
||||
import { showError, showInfo, showSuccess } from "@app/toast";
|
||||
import authHtml from './login.html?raw';
|
||||
import client from '@app/api'
|
||||
import { updateUser } from "@app/auth";
|
||||
|
||||
|
||||
type Providers = {
|
||||
name: string,
|
||||
display_name: string,
|
||||
icon_url?: string,
|
||||
color?: { default: string, hover: string },
|
||||
};
|
||||
|
||||
function handleLogin(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
|
||||
setTitle('Login')
|
||||
return {
|
||||
html: authHtml, postInsert: async (app) => {
|
||||
const fLogin = document.querySelector<HTMLFormElement>('form#login-form');
|
||||
if (fLogin === null)
|
||||
return showError('Error while rendering the page: no form found');
|
||||
showSuccess('got the form !')
|
||||
fLogin.addEventListener('submit', async function(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
let form = e.target as (HTMLFormElement | null)
|
||||
if (form === null)
|
||||
return showError('Failed to send form...');
|
||||
let formData = Object.fromEntries((new FormData(form)).entries());
|
||||
if (!('login' in formData) || typeof formData['login'] !== 'string' || (formData['login'] as string).length === 0)
|
||||
return showError('Please enter a Login');
|
||||
if (!('password' in formData) || typeof formData['password'] !== 'string' || (formData['password'] as string).length === 0)
|
||||
return showError('Please enter a Password');
|
||||
try {
|
||||
const res = await client.login({ loginRequest: { name: formData.login, password: formData.password } });
|
||||
switch (res.kind) {
|
||||
case 'success': {
|
||||
document.cookie = `token=${res.payload.token}`;
|
||||
let user = await updateUser();
|
||||
if (user === null)
|
||||
return showError('Failed to get user: no user ?');
|
||||
setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`);
|
||||
break;
|
||||
}
|
||||
case 'otpRequired': {
|
||||
showInfo('Got ask OTP, not yet implemented');
|
||||
break;
|
||||
}
|
||||
case 'failed': {
|
||||
showError(`Failed to login: ${res.msg}`);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Login error:", e);
|
||||
showError('Failed to login: Unknown error');
|
||||
}
|
||||
});
|
||||
|
||||
const bLoginAsGuest = document.querySelector<HTMLButtonElement>('#bGuestLogin');
|
||||
bLoginAsGuest?.addEventListener('click', async () => {
|
||||
try {
|
||||
const res = await client.guestLogin();
|
||||
switch (res.kind) {
|
||||
case 'success': {
|
||||
document.cookie = `token=${res.payload.token}`;
|
||||
let user = await updateUser();
|
||||
if (user === null)
|
||||
return showError('Failed to get user: no user ?');
|
||||
setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`);
|
||||
break;
|
||||
}
|
||||
case 'failed': {
|
||||
showError(`Failed to login: ${res.msg}`);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Login error:", e);
|
||||
showError('Failed to login: Unknown error');
|
||||
}
|
||||
});
|
||||
|
||||
const dOtherLoginArea = document.querySelector<HTMLDivElement>('#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 ? `<img src="${p.icon_url}" alt="${p.display_name} Logo" />` : ''} <span class="">${p.display_name}</span>
|
||||
`
|
||||
b.addEventListener('click', () => {
|
||||
location.href = `/api/auth/oauth2/${p.name}/login`;
|
||||
})
|
||||
|
||||
dOtherLoginArea.insertAdjacentElement('afterbegin', b);
|
||||
}
|
||||
app?.appendChild(styleSheetElement);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
addRoute('/login', handleLogin, { bypass_auth: true })
|
||||
15
frontend/src/pages/root/root.html
Normal file
15
frontend/src/pages/root/root.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<div>
|
||||
Welcome a to <span> The Site de Boule </span>
|
||||
</div>
|
||||
<div>
|
||||
Welcome a to <span> The Site de Boule </span>
|
||||
</div>
|
||||
<div>
|
||||
Welcome a to <span> The Site de Boule </span>
|
||||
</div>
|
||||
<div>
|
||||
Welcome a to <span> The Site de Boule </span>
|
||||
</div>
|
||||
<div>
|
||||
Welcome a to <span> The Site de Boule </span>
|
||||
</div>
|
||||
14
frontend/src/pages/root/root.ts
Normal file
14
frontend/src/pages/root/root.ts
Normal file
|
|
@ -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;
|
||||
})
|
||||
217
frontend/src/routing/index.ts
Normal file
217
frontend/src/routing/index.ts
Normal file
|
|
@ -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<F extends (...args: any[]) => any> =
|
||||
(...args: Parameters<F>) => Promise<ReturnType<F>>;
|
||||
|
||||
export type RouteHandlerParams = { [k: string]: string };
|
||||
|
||||
|
||||
export type SyncRouteHandlerPostInsertFn = (appNode?: HTMLElement) => void;
|
||||
export type AsyncRouteHandlerPostInsertFn = AsyncFunctionMaker<SyncRouteHandlerPostInsertFn>;
|
||||
export type RouteHandlerReturn = {
|
||||
html: string,
|
||||
postInsert?: SyncRouteHandlerPostInsertFn | AsyncRouteHandlerPostInsertFn,
|
||||
};
|
||||
|
||||
export type SyncRouteHandler = (url: string, args: RouteHandlerParams) => RouteHandlerReturn | string;
|
||||
export type AsyncRouteHandler = AsyncFunctionMaker<SyncRouteHandler>;
|
||||
export type RouteHandler = string | SyncRouteHandler | AsyncRouteHandler;
|
||||
export type Routes = Map<string, RouteHandlerData>
|
||||
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<RouteHandlerSpecialArgs>) {
|
||||
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<RouteHandlerSpecialArgs>) => void
|
||||
] {
|
||||
const routes = new Map();
|
||||
|
||||
return [
|
||||
() => routes,
|
||||
(url: string, handler: RouteHandler | string, args?: Partial<RouteHandlerSpecialArgs>) => {
|
||||
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<HTMLDivElement>('#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<SyncRouteHandler>): Promise<RouteHandlerReturn> => {
|
||||
// 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<string> (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('<special:404>', 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 })
|
||||
12
frontend/src/routing/special_routes.ts
Normal file
12
frontend/src/routing/special_routes.ts
Normal file
|
|
@ -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<string> {
|
||||
console.log(`asked about route '${url}: not found'`)
|
||||
console.log(getRoute())
|
||||
return `
|
||||
<div> 404 - Not Found </div>
|
||||
<hr />
|
||||
<center> ${escapeHTML(url)} </center>
|
||||
`
|
||||
}
|
||||
79
frontend/src/toast/index.ts
Normal file
79
frontend/src/toast/index.ts
Normal file
|
|
@ -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 })
|
||||
1
frontend/src/typescript.svg
Normal file
1
frontend/src/typescript.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
8
frontend/src/utils.ts
Normal file
8
frontend/src/utils.ts
Normal file
|
|
@ -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<T>(v: T | undefined | null): v is (null | undefined) {
|
||||
return v === null || v === undefined;
|
||||
}
|
||||
29
frontend/tsconfig.json
Normal file
29
frontend/tsconfig.json
Normal file
|
|
@ -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"]
|
||||
}
|
||||
18
frontend/vite.config.js
Normal file
18
frontend/vite.config.js
Normal file
|
|
@ -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',
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue