iconograph-ui 2.0.0 → 2.0.2

package/index.js

@@ -1,32 +1,32 @@
-import FormButton from "./lib/form/FormButton.svelte";
-import Form from "./lib/form/Form.svelte"
-import Input from "./lib/form/Input.svelte"
-import SexeChoiceInput from "./lib/form/SexeChoiceInput.svelte";
-import BodySection from "./lib/layout/BodySection.svelte"
-import HeadSection from "./lib/layout/HeadSection.svelte"
-import Card from "./lib/layout/Card.svelte"
-import MainMenu from "./lib/navigation/MainMenu.svelte"
-import Button from "./lib/navigation/Button.svelte"
-import Notification from "./lib/notification/Notification.svelte";
-import NotificationWrapper from "./lib/notification/NotificationWrapper.svelte";
-import { addNotification } from "./lib/notification/NotificationWrapper.svelte";
-import Table from "./lib/table/Table.svelte"
-import CellLink from "./lib/table/CellLink.svelte"
-import UserPicture from "./lib/user/UserPicture.svelte";
-import NavBar from "./lib/navigation/NavBar.svelte";
-import SelectUserInput from "./lib/user/SelectUserInput.svelte";
-import Modal from "./lib/layout/Modal.svelte"
-import FlexForm from "./lib/form/FlexForm.svelte";
-import Editor from "./lib/inputs/Editor.svelte";
-import SegmentedSwitchInput from "./lib/form/SegmentedSwitchInput.svelte"
-import DateStr from "./lib/display/DateStr.svelte";
-import Field from "./lib/display/Field.svelte";
-import Link from "./lib/display/Link.svelte";
-import ActionButton from "./lib/form/ActionButton.svelte";
-import MultiSelect from "./lib/form/MultiSelect.svelte";
-import PasswordInput from "./lib/inputs/PasswordInput.svelte";
-import SearchSelect from "./lib/inputs/SearchSelect.svelte"
-import Checkbox from "./lib/form/Checkbox.svelte"
+import FormButton from "./lib/components/form/FormButton.svelte";
+import Form from "./lib/components/form/Form.svelte"
+import Input from "./lib/components/form/Input.svelte"
+import SexeChoiceInput from "./lib/components/form/SexeChoiceInput.svelte";
+import BodySection from "./lib/components/layout/BodySection.svelte"
+import HeadSection from "./lib/components/layout/HeadSection.svelte"
+import Card from "./lib/components/layout/Card.svelte"
+import MainMenu from "./lib/components/navigation/MainMenu.svelte"
+import Button from "./lib/components/navigation/Button.svelte"
+import Notification from "./lib/components/notification/Notification.svelte";
+import NotificationWrapper from "./lib/components/notification/NotificationWrapper.svelte";
+import { addNotification } from "./lib/components/notification/NotificationWrapper.svelte";
+import Table from "./lib/components/table/Table.svelte"
+import CellLink from "./lib/components/table/CellLink.svelte"
+import UserPicture from "./lib/components/user/UserPicture.svelte";
+import NavBar from "./lib/components/navigation/NavBar.svelte";
+import SelectUserInput from "./lib/components/user/SelectUserInput.svelte";
+import Modal from "./lib/components/layout/Modal.svelte"
+import FlexForm from "./lib/components/form/FlexForm.svelte";
+import Editor from "./lib/components/inputs/Editor.svelte";
+import SegmentedSwitchInput from "./lib/components/form/SegmentedSwitchInput.svelte"
+import DateStr from "./lib/components/display/DateStr.svelte";
+import Field from "./lib/components/display/Field.svelte";
+import Link from "./lib/components/display/Link.svelte";
+import ActionButton from "./lib/components/form/ActionButton.svelte";
+import MultiSelect from "./lib/components/form/MultiSelect.svelte";
+import PasswordInput from "./lib/components/inputs/PasswordInput.svelte";
+import SearchSelect from "./lib/components/inputs/SearchSelect.svelte"
+import Checkbox from "./lib/components/form/Checkbox.svelte"
 
 export {
     Button,

package/lib/network/APIClient.js

@@ -0,0 +1,202 @@
+// @ts-nocheck
+import { error, redirect } from '@sveltejs/kit';
+import { dev } from '$app/environment';
+import { APIError } from './APIErrors';
+
+const API_DATA_HOST = process.env.API_DATA_HOST ?? 'srvc-data';
+const API_DATA_PORT = process.env.API_DATA_PORT ?? '3030';
+const API_BASE_URL = `http://${API_DATA_HOST}:${API_DATA_PORT}`;
+
+const ACCESS_COOKIE = 'accessToken';
+const REFRESH_COOKIE = 'refreshToken';
+
+export class APIClient {
+    constructor(cookies) {
+        this.cookies = cookies;
+    }
+
+    setAuthCookies(accessToken, refreshToken) {
+        this.cookies.set(ACCESS_COOKIE, accessToken, {
+            httpOnly: true,
+            secure: !dev,
+            sameSite: 'lax',
+            path: '/',
+            maxAge: 15 * 60 // 15 minutes
+        });
+
+        this.cookies.set(REFRESH_COOKIE, refreshToken, {
+            httpOnly: true,
+            secure: !dev,
+            sameSite: 'strict',
+            path: '/',
+            maxAge: 30 * 24 * 60 * 60 // 30 days
+        });
+    }
+
+    clearAuthCookies() {
+        this.cookies.delete(ACCESS_COOKIE, { path: '/' });
+        this.cookies.delete(REFRESH_COOKIE, { path: '/' });
+    }
+
+    getAccessToken() {
+        return this.cookies.get(ACCESS_COOKIE);
+    }
+
+    async parseJSONSafe(response, resource) {
+        const text = await response.text();
+
+        try {
+            return JSON.parse(text);
+        }
+        catch {
+            throw new APIError('Invalid JSON received from API', 502, resource);
+        }
+    }
+
+    isUnauthenticated(json) {
+        const err = json?.errors?.[0];
+        if (!err) return false;
+
+        return (
+            err.extensions?.code === 'UNAUTHENTICATED' ||
+            err.message === 'Not authenticated'
+        );
+    }
+
+    async refreshTokens() {
+        const refreshToken = this.cookies.get(REFRESH_COOKIE);
+        if (!refreshToken) return false;
+
+        const response = await fetch(`${API_BASE_URL}/graphql`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                query: `
+                    mutation Refresh($refreshToken: String!) {
+                        refreshTokens(refreshToken: $refreshToken) {
+                            accessToken
+                            refreshToken
+                        }
+                    }
+                `,
+                variables: { refreshToken }
+            })
+        });
+
+        const json = await this.parseJSONSafe(response, '/graphql');
+
+        if (!response.ok || json.errors?.length || !json.data?.refreshTokens) {
+            this.clearAuthCookies();
+            return false;
+        }
+
+        const tokens = json.data.refreshTokens;
+        this.setAuthCookies(tokens.accessToken, tokens.refreshToken);
+        return true;
+    }
+
+    async fetchWithAutoRefresh(uri, options, retry = true) {
+        const response = await fetch(`${API_BASE_URL}${uri}`, options);
+        const json = await this.parseJSONSafe(response, uri);
+
+        if (this.isUnauthenticated(json) && retry) {
+            const refreshed = await this.refreshTokens();
+
+            if (!refreshed)
+                throw new APIError('Not authenticated', 401, uri);
+
+            const newJwt = this.getAccessToken();
+
+            return this.fetchWithAutoRefresh(uri, {
+                    ...options,
+                    headers: {
+                        ...(options.headers ?? {}),
+                        Authorization: `Bearer ${newJwt}`
+                    }
+                },
+                false
+            );
+        }
+
+        return { response, json };
+    }
+
+    async request(method, uri, body = null) {
+        const jwt = this.getAccessToken();
+
+        const headers = {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            ...(jwt ? { Authorization: `Bearer ${jwt}` } : {})
+        };
+
+        try {
+            const { json } = await this.fetchWithAutoRefresh(uri, {
+                method,
+                headers,
+                body: method === 'GET' || method === 'HEAD' ? undefined : JSON.stringify(body)
+            });
+
+            if (json.errors?.length) {
+                const err = json.errors[0];
+                const code = err.extensions?.code;
+
+                switch (code ?? err.message) {
+                    case 'UNAUTHENTICATED':
+                    case 'Not authenticated':
+                        throw new APIError(err.message, 401, uri);
+                    case 'FORBIDDEN':
+                    case 'Unauthorized':
+                        throw new APIError(err.message, 403, uri);
+                    case 'Invalid credentials':
+                        throw new APIError('Identifiants non valides', 401, uri);
+                    default:
+                        throw new APIError(err.message, 500, uri);
+                }
+            }
+
+            return json;
+        }
+        catch (err) {
+            if (err instanceof APIError)
+                throw err;
+
+            if (err?.message === 'fetch failed') {
+                throw error(503, {
+                    message: "Le serveur de données n'est pas disponible (__SRVC_DATACORE_DOWN__)"
+                });
+            }
+
+            throw error(500, { message: 'Unexpected server error' });
+        }
+    }
+
+    async requestApi(method, uri, body = null) {
+        try {
+            return await this.request(method, uri, body);
+        } catch (err) {
+            if (err instanceof APIError) {
+                err.logError();
+                throw error(err.statusCode, { message: err.message });
+            }
+            throw err;
+        }
+    }
+
+    async loadApi(method, uri, body = null) {
+        try {
+            return await this.request(method, uri, body);
+        } catch (err) {
+            if (err instanceof APIError) {
+                err.logError();
+
+                if (err.statusCode === 401) {
+                    throw redirect(307, '/auth/signout?reason=Expired');
+                }
+
+                throw error(err.statusCode, { message: err.message });
+            }
+            throw err;
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iconograph-ui",
-    "version": "2.0.0",
+    "version": "2.0.2",
     "description": "A Svelte Kit components library",
     "main": "./index.js",
     "svelte": "./index.js",