5htp-core 0.3.6 → 0.3.7

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.3.6",
+	"version": "0.3.7",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/assets/css/components/button.less

@@ -12,6 +12,7 @@
     // Layout
     position: relative;
     gap: @spacing;
+    min-width: 0/*fit-content*/; // Fit content, even when flexbox parent width < content width
  
     // Dimensions
     font-size: 1em;
@@ -62,12 +63,16 @@
 
     > .label {
         text-align: left;
-        white-space: nowrap; // Autrement, si plusieurs mots, affiché sur plusieurs ligne
         gap: @spacing / 2;
         font-size: 1rem;
         line-height: 1.5em;
         z-index: 1; // Make the label on top of ::before for example
 
+        // Handle overflow
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
         li > & {
             flex: 1;
         }

package/src/client/assets/css/components/table.less

@@ -1,3 +1,9 @@
+.table {
+    &.card {
+        padding: 1em 0;
+    }
+}
+
 table {
 
     width: 100%;

package/src/client/assets/css/core.less

@@ -135,6 +135,8 @@ html {
     font-size: 1em;
     padding: 0;
     margin: 0;
+    // Avoids flexbox childrens to overflw parent
+    min-width: 0;
     
     &, &:hover, &:focus {
         -webkit-tap-highlight-color: transparent;

package/src/client/assets/css/utils/layouts.less

@@ -30,9 +30,13 @@
     display: flex;
     flex-wrap: nowrap;
 
-    > * {
-        // Empêche les enfants de dépasser du conteneur
-        min-width: 0;
+    &.scrollable {
+
+        overflow: auto;
+
+        > * {
+            min-width: fit-content;
+        }
     }
 
     // Avec justify-content: center, les premiers élements sont cachés
@@ -126,6 +130,20 @@
     &.sep-1 > * + * { border-top: solid 1px var(--cLine); }
 
     > .col-1 { align-self: stretch; }
+
+    &.unibody {
+
+        gap: 0;
+        
+        > :not(:first-child) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+        > :not(:last-child) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
 }
 
 .row, 

package/src/client/components/Form.ts

@@ -11,6 +11,9 @@ import type { Schema } from '@common/validation';
 import type { TValidationResult } from '@common/validation/schema';
 import useContext from '@/client/context';
 
+// Exports
+export type { TValidationResult, TSchemaData } from '@common/validation/schema';
+
 /*----------------------------------
 - TYPES
 ----------------------------------*/
@@ -23,7 +26,7 @@ type TFormOptions<TFormData extends {}> = {
     }
 }
 
-type FieldsAttrs<TFormData extends {}> = {
+export type FieldsAttrs<TFormData extends {}> = {
     [fieldName in keyof TFormData]: {}
 }
 

package/src/client/components/Table/index.tsx

@@ -23,7 +23,7 @@ export type Props<TRow> = {
     columns: (row: TRow, rows: TRow[], index: number) => TColumn[];
 
     setData?: (rows: TRow[]) => void,
-    empty?: ComponentChild,
+    empty?: ComponentChild | false,
     className?: string,
 
     actions?: TAction<TRow>[]
@@ -40,15 +40,17 @@ export type TColumn = {
 - COMPOSANTS
 ----------------------------------*/
 export default function Liste<TRow extends TDonneeInconnue>({
-    data: rows, setData, empty ,
+    data: rows, setData, empty,
     columns, actions, ...props
 }: Props<TRow>) {
 
     if (rows.length === 0)
-        return (
-            <div class="card pd-2 col al-center">
-                <i src="meh-rolling-eyes" class="xl" />
-                Uh ... No rows here.
+        return empty === false ? null : (
+            <div class="pd-2 col al-center">
+                {empty || <>
+                    <i src="meh-rolling-eyes" class="xl" />
+                    Uh ... No rows here.
+                </>}
             </div>
         );
 

package/src/client/services/router/index.tsx

@@ -159,16 +159,20 @@ export default class ClientRouter<
     public url = (path: string, params: {} = {}, absolute: boolean = true) => 
         buildUrl(path, params, this.config.domains, absolute);
 
-    public go( url: string ) {
+    public go( url: string, opt: {
+        newTab?: boolean
+    } = {}) {
 
         url = this.url(url, {}, false);
 
+        if (opt.newTab)
+            window.open(url)
         // Same domain = history url replacement
-        if (url[0] === '/')
+        else if (url[0] === '/')
             history?.replace( url );
         // Different domain = hard navigation
         else
-            windows.location.href = url;
+            window.location.href = url;
     }
 
     /*----------------------------------
@@ -274,7 +278,11 @@ export default class ClientRouter<
         return route;
     }
 
-    public error(code: number, options: TRoute["options"], renderer: TFrontRenderer<{}, { message: string }>) {
+    public error(
+        code: number, 
+        options: Partial<TRoute["options"]>, 
+        renderer: TFrontRenderer<{}, { message: string }>
+    ) {
 
         // Automatic layout form the nearest _layout folder
         const layout = getLayout('Error ' + code, options);
@@ -345,7 +353,7 @@ export default class ClientRouter<
 
             } catch (e) {
                 console.error(`Failed to fetch the route ${route.chunk}`, e);
-                this.app.handleError(new Error("Failed to load content. Please make sure you're connected to Internet."));
+                this.app.handleError(new Error("Failed to load content. Please reload the page and try again."));
                 throw e;
             }
 

package/src/client/services/router/request/api.ts

@@ -12,7 +12,7 @@ import ApiClientService, {
     TApiFetchOptions, TFetcherList, TFetcherArgs, TFetcher,
     TDataReturnedByFetchers
 } from '@common/router/request/api';
-import { instancierViaCode, NetworkError } from '@common/errors';
+import { viaHttpCode, NetworkError } from '@common/errors';
 import type ClientApplication from '@client/app';
 
 import { toMultipart } from './multipart';
@@ -233,7 +233,7 @@ export default class ApiClient implements ApiClientService {
                 if (e.response !== undefined) {
     
                     console.warn(`[api] Failure:`, e);
-                    throw instancierViaCode(
+                    throw viaHttpCode(
                         e.response.status || 500,
                         e.response.data
                     );

package/src/common/errors/index.ts

@@ -169,12 +169,13 @@ export class NetworkError extends Error {
 }
 
 
-export const instancierViaCode = (
+export const viaHttpCode = (
     code: number, 
     message?: string | TListeErreursSaisie, 
     details?: TDetailsErreur
 ): CoreError => {
 
+    // TODO: more reliablme detection of form errors
     if (typeof message === 'object')
         return new InputErrorSchema(message, details);
 

package/src/common/validation/schema.ts

@@ -33,6 +33,9 @@ export type TValidationResult<TFields extends TSchemaFields> = {
     erreurs: TListeErreursSaisie
 }
 
+export type TSchemaData<TSchema extends Schema<{}>> =
+    TValidationResult<TSchema["fields"]>
+
 export type TValidatedData<TFields extends TSchemaFields> = {
     // For each field, the values returned by validator.validate()
     [name in keyof TFields]: ReturnType<TFields[name]["validate"]>

package/src/common/validation/validators.ts

@@ -22,7 +22,6 @@ import Validator, { TValidator } from './validator'
 
 // Components
 import NumberInput from '@client/components/input/Number';
-import Dropdown from '@client/components/dropdown.old';
 
 /*----------------------------------
 - TYPES
@@ -146,11 +145,13 @@ export default class SchemaValidators {
     /*----------------------------------
     - CHAINES
     ----------------------------------*/
-    public string = ({ min, max, ...opts }: TValidator<string> & { 
+    public string = ({ min, max, include, ...opts }: TValidator<string> & { 
         min?: number, 
-        max?: number 
+        max?: number,
+        include?: string
     } = {}) => new Validator<string>('string', (val, input, output, corriger?: boolean) => {
 
+        // Check type
         if (val === '')
             return undefined;
         else if (typeof val === 'number')
@@ -158,14 +159,14 @@ export default class SchemaValidators {
         else if (typeof val !== 'string')
             throw new InputError("This value must be a string.");
 
-        // Espaces blancs
+        // Whitespace
         val = trim(val);
 
-        // Taille min
+        // Min size
         if (min !== undefined && val.length < min)
             throw new InputError(`Must be at least ` + min + ' characters');
 
-        // Taille max
+        // Max size
         if (max !== undefined && val.length > max)
             if (corriger)
                 val = val.substring(0, max);
@@ -193,8 +194,6 @@ export default class SchemaValidators {
             if (opts.normalize !== undefined)
                 val = normalizeUrl(val, opts.normalize);
 
-            console.log("@@@@@@@@@@@@@NORMALISZE URL", opts.normalize, val);
-
             return val;
         }, opts)
 

package/src/server/services/database/index.ts

@@ -170,14 +170,19 @@ export default class SQL extends Service<Config, Hooks, Application, Services> {
         return query;
     }
 
-    public esc(data: any) {
+    public esc( data: any, forStorage: boolean = false ) {
 
         // JSON object
         // TODO: do it via datatypes.ts
         if (typeof data === 'object' && data !== null) {
 
+            // Object: stringify in JSON
             if (data.constructor.name === "Object")
                 data = safeStringify(data);
+            // Array: if for storage, reparate items with a comma
+            else if (forStorage && Array.isArray( data )) {
+                data = data.join(',')
+            } 
         }
     
         return mysql.escape(data);
@@ -474,7 +479,7 @@ export default class SQL extends Service<Config, Hooks, Application, Services> {
                 const values: string[] = [];
                 for (const col of colNames)
                     if (col in entry)
-                        values.push( this.esc( entry[col] ));
+                        values.push( this.esc( entry[col], true));
                     else
                         values.push("DEFAULT");
 
@@ -528,7 +533,7 @@ export default class SQL extends Service<Config, Hooks, Application, Services> {
             const { '*': updateAll, ...customValuesToUpdate } = colsToUpdate;
 
             for (const colKey in customValuesToUpdate)
-                valuesToUpdate[ colKey ] = this.esc(customValuesToUpdate[ colKey ]);
+                valuesToUpdate[ colKey ] = this.esc(customValuesToUpdate[ colKey ], true);
 
             if (updateAll)
                 valuesNamesToUpdate = Object.keys(table.colonnes);//table.columnNamesButPk;

package/src/server/services/fetch/index.ts

@@ -5,6 +5,7 @@
 // Npm
 import sharp from 'sharp';
 import fs from 'fs-extra';
+import got, { Method, Options } from 'got';
 
 // Node
 import request from 'request';
@@ -12,6 +13,10 @@ import request from 'request';
 // Core: general
 import type { Application } from '@server/app';
 import Service, { AnyService } from '@server/app/service';
+import { viaHttpCode } from '@common/errors';
+
+// Local
+import type RouterService from '../router';
 import type DisksManager from '../disks';
 import type FsDriver from '../disks/driver';
 
@@ -29,7 +34,8 @@ export type Hooks = {
 }
 
 export type Services = {
-    disks: DisksManager
+    disks: DisksManager,
+    router?: RouterService
 }
 
 /*----------------------------------
@@ -89,7 +95,63 @@ export default class FetchService extends Service<Config, Hooks, Application, Se
     }
 
     /*----------------------------------
-    - ACTIONS
+    - EXTERNAL API REQUESTS
+    ----------------------------------*/
+
+    public post( 
+        url: string, 
+        data: {[k: string]: any}, 
+        options: {} = {} 
+    ) {
+
+        return this.request('POST', url, data, options);
+
+    }
+
+    public async request( 
+        method: Method,
+        url: string, 
+        data: {[k: string]: any}, 
+        options: Options = {} 
+    ) {
+
+        // Parse url if router service is provided
+        if (this.services.router !== undefined)
+            url = this.services.router.url(url);
+
+        // Send request
+        const res = await got(url, {
+            throwHttpErrors: false,
+            headers: {
+                'Accept': 'application/json',
+            },
+            method,
+            ...(method === 'GET' ? {
+                searchParams: data
+            } : {
+                json: data
+            })
+        })
+
+        // Handle errors
+        if (res.statusCode !== 200) {
+
+            // Instanciate error from HTTP code
+            const error = viaHttpCode( res.statusCode, res.body );
+            if (error)
+                throw error;
+
+            // Not catched via viaHttpCode
+            console.log("RESPONSE", res.body);
+            throw new Error("Error while contacting the API");
+        }
+
+        // Format & return response
+        return JSON.parse( res.body );
+    }
+
+    /*----------------------------------
+    - IMAGES
     ----------------------------------*/
 
     public toBuffer( uri: string ): Promise<Buffer> {

package/src/server/services/users/index.ts

@@ -93,7 +93,7 @@ export default abstract class UsersManagementService<
     ----------------------------------*/
 
     public abstract login( ...args: any[] ): Promise<{ user: TUser, token: string }>;
-    public abstract decodeSession( jwt: TJwtSession, req: THttpRequest ): Promise<TUser>;
+    public abstract decodeSession( jwt: TJwtSession, req: THttpRequest ): Promise<TUser | null>;
 
     protected abstract displayName(user?: TUser | null): string;
     protected abstract displaySessionName(session: TJwtSession): string;
@@ -134,9 +134,17 @@ export default abstract class UsersManagementService<
         // Deserialize full user data
         this.config.debug && console.log(LogPrefix, `Deserialize user ${sessionName}`);
         const user = await this.decodeSession(session, req);
+        
+        // User not found
+        if (user === null)
+            return null;
+
         this.config.debug && console.log(LogPrefix, `Deserialized user ${sessionName}:`, this.displayName(user));
 
-        return user;    
+        return {
+            ...user,
+            _token: token
+        };    
     }
 
     public unauthorized( req: THttpRequest ) {

package/src/client/pages/_messages/400.tsx

@@ -1,37 +0,0 @@
-/*----------------------------------
-- DEPENDANCES
-----------------------------------*/
-
-// Npm
-import React from 'react';
-
-// Core
-import { Router } from '@app';
-import { Button } from '@client/components';
-
-// App
-import useHeader from '@client/pages/useHeader';
-
-/*----------------------------------
-- CONTROLEUR
-----------------------------------*/
-Router.error( 400, ({ message, modal }) => {
-
-    useHeader({
-        title: 'Bad request',
-        subtitle: message
-    });
-
-    return (
-        <div class="card w-3-4 col al-center pd-2">
-
-            <i src="times-circle" class="fg error xxl" />
-
-            <h1>Bad Request</h1>
-
-            <p>{message}</p>
-
-            <Button type="primary" link="/">Go Home</Button>
-        </div>
-    )
-});

package/src/client/pages/_messages/401.tsx

@@ -1,49 +0,0 @@
-/*----------------------------------
-- DEPENDANCES
-----------------------------------*/
-
-// Npm
-import React from 'react';
-
-// Core
-import { Router } from '@app';
-import { Button } from '@client/components';
-
-// App
-import useHeader from '@client/pages/useHeader';
-
-/*----------------------------------
-- RESSOURCES
-----------------------------------*/
-
-/*----------------------------------
-- CONTROLEUR
-----------------------------------*/
-Router.error( 401, ({ message, request, page }) => {
-
-    request.response?.redirect('https://becrosspath.com');
-
-    useHeader({
-        title: 'Authentication Required',
-        subtitle: message
-    });
-
-    React.useEffect(() => {
-
-        page?.go('/');
-
-    }, []);
-
-    return (
-        <div class="card w-3-4 col al-center pd-2">
-
-            <i src="times-circle" class="fg error xxl" />
-
-            <h1>Authentication Required</h1>
-
-            <p>{message}</p>
-
-            <Button type="primary" link="/">Go Home</Button>
-        </div>
-    )
-});

package/src/client/pages/_messages/403.tsx

@@ -1,37 +0,0 @@
-/*----------------------------------
-- DEPENDANCES
-----------------------------------*/
-
-// Npm
-import React from 'react';
-
-// Core
-import { Router } from '@app';
-import { Button } from '@client/components';
-
-// App
-import useHeader from '@client/pages/useHeader';
-
-/*----------------------------------
-- CONTROLEUR
-----------------------------------*/
-Router.error( 403, ({ message, modal }) => {
-
-    useHeader({
-        title: 'Access Denied.',
-        subtitle: message
-    });
-
-    return (
-        <div class="card w-3-4 col al-center pd-2">
-
-            <i src="times-circle" class="fg error xxl" />
-
-            <h1>Access Denied.</h1>
-
-            <p>{message}</p>
-
-            <Button type="primary" link="/">Go Home</Button>
-        </div>
-    )
-});

package/src/client/pages/_messages/404.tsx

@@ -1,37 +0,0 @@
-/*----------------------------------
-- DEPENDANCES
-----------------------------------*/
-
-// Npm
-import React from 'react';
-
-// Core
-import { Router } from '@app';
-import { Button } from '@client/components';
-
-// App
-import useHeader from '@client/pages/useHeader';
-
-/*----------------------------------
-- CONTROLEUR
-----------------------------------*/
-Router.error( 404, ({ message, modal }) => {
-
-    useHeader({
-        title: 'Page Not Found',
-        subtitle: message
-    });
-
-    return (
-        <div class="card w-3-4 col al-center pd-2">
-
-            <i src="times-circle" class="fg error xxl" />
-
-            <h1>Page Not Found</h1>
-
-            <p>{message}</p>
-
-            <Button type="primary" link="/">Go Home</Button>
-        </div>
-    )
-});

package/src/client/pages/_messages/500.tsx

@@ -1,37 +0,0 @@
-/*----------------------------------
-- DEPENDANCES
-----------------------------------*/
-
-// Npm
-import React from 'react';
-
-// Core
-import { Router } from '@app';
-import { Button } from '@client/components';
-
-// App
-import useHeader from '@client/pages/useHeader';
-
-/*----------------------------------
-- CONTROLEUR
-----------------------------------*/
-Router.error( 500, ({ message }) => {
-
-    useHeader({
-        title: 'Technical Error',
-        subtitle: message
-    });
-
-    return (
-        <div class="card w-3-4 col al-center pd-2">
-
-            <i src="times-circle" class="fg error xxl" />
-
-            <h1>Technical Error</h1>
-
-            <p>{message}</p>
-
-            <Button type="primary" link="/">Go Home</Button>
-        </div>
-    )
-});