5htp-core 0.2.4-3 → 0.2.5

package/package.json

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

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

@@ -54,32 +54,6 @@ p, .p {
   	text-overflow: ellipsis;
 }
 
-/*----------------------------------
-- COULEURS
-----------------------------------*/
-.txtSuccess {
-    color: var(--cSuccess) !important;
-}
-.txtError {
-    color: var(--cError) !important;
-}
-.txt-gold {
-    /*color: #cef57a;
-    text-shadow: 0 0 0.80rem fade(#cef57a, 80%);*/
-    color: #c80;
-}
-.txtWarn {
-    color: var(--orange) !important;
-}
-
-.txt-blanc { color: #fff !important; }
-
-.txtPrimary, .txtC1 {
-    color: var(--cAccent);
-}
-
-.txtC2 { color: var(--cAccent2); }
-
 /*----------------------------------
 - TAILLE
 ----------------------------------*/

package/src/client/components/Amount.tsx

@@ -24,7 +24,7 @@ export default ({ amount, unit, sign, decimals, ...props }: {
     sign?: '+' | '-'
 } & JSX.HTMLAttributes<HTMLDivElement>) => {
 
-    const className = 'number row sp-05 ' + (props.class ? props.class + ' ' : '');//sign === undefined ? 'txtPrimary' : (sign === '+' ? 'txtSuccess' : 'txtError');
+    const className = 'number row sp-05 ' + (props.class ? props.class + ' ' : '');//sign === undefined ? 'txtPrimary' : (sign === '+' ? 'fg success' : 'fg error');
     if (unit === 'credits')
         return <strong {...props} class={className}>{sign} {Format.credits(amount, decimals)} Credits</strong>;
     else if (unit === 'dollars')

package/src/client/pages/_layout/index.less

@@ -0,0 +1,6 @@
+#internalLayout {
+    min-height: 80vh;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}

package/src/client/pages/_layout/index.tsx

@@ -0,0 +1,43 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { ComponentChild } from 'preact';
+
+// Core
+import Router from '@client/services/router/components/router';
+import { ClientContext } from '@/client/context';
+
+// Core components
+
+// Resources
+import "./index.less";
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+
+/*----------------------------------
+- COMPOSANT
+----------------------------------*/
+export default function App ({ context, menu }: { 
+    context: ClientContext,
+    menu: ComponentChild
+}) {
+
+    const { router, page, toast } = context;
+
+    return (
+        <div id="internaLlayout">
+
+            <div class="center row al-fill">
+
+                <Router service={router} />
+                
+            </div>
+        </div>
+    )
+}

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

@@ -7,7 +7,7 @@ import React from 'react';
 
 // Core
 import { router } from '@app';
-import Button from '@client/components/button';
+import { Button } from '@client/components';
 
 // App
 import useHeader from '@client/pages/useHeader';
@@ -15,10 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-router.error(400, {}, ({ message, modal }) => {
-
-    if (!message)
-        message = "The request you made is incorrect.";
+router.error( 400, ({ message, modal }) => {
 
     useHeader({
         title: 'Bad request',
@@ -26,13 +23,15 @@ router.error(400, {}, ({ message, modal }) => {
     });
 
     return (
-        <div class="col pd-2">
-            <i src="times-circle" class="txtPrimary xxl" />
+        <div class="card w-3-4 col al-center pd-2">
+
+            <i src="times-circle" class="fg error xxl" />
 
-            <h1>Bad request</h1>
+            <h1>Bad Request</h1>
 
             <p>{message}</p>
+
+            <Button type="primary" link="/">Go Home</Button>
         </div>
     )
-
 });

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

@@ -7,9 +7,10 @@ import React from 'react';
 
 // Core
 import { router } from '@app';
-import Button from '@client/components/button';
+import { Button } from '@client/components';
 
 // App
+import useHeader from '@client/pages/useHeader';
 
 /*----------------------------------
 - RESSOURCES
@@ -18,10 +19,15 @@ import Button from '@client/components/button';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-router.error(401, {  }, ({ api, toast, modal, request, page }) => {
+router.error( 401, ({ message, request, page }) => {
 
     request.response?.redirect('/');
 
+    useHeader({
+        title: 'Authentication Required',
+        subtitle: message
+    });
+
     React.useEffect(() => {
 
         page?.go('/');
@@ -29,5 +35,16 @@ router.error(401, {  }, ({ api, toast, modal, request, page }) => {
 
     }, []);
 
-    return '';
+    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

@@ -7,7 +7,7 @@ import React from 'react';
 
 // Core
 import { router } from '@app';
-import Button from '@client/components/button';
+import { Button } from '@client/components';
 
 // App
 import useHeader from '@client/pages/useHeader';
@@ -15,10 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-router.error( 403, {}, ({ message, modal }) => {
-
-    if (!message)
-        message = "You do not have sufficient permissions to access this content.";
+router.error( 403, ({ message, modal }) => {
 
     useHeader({
         title: 'Access Denied.',
@@ -27,11 +24,14 @@ router.error( 403, {}, ({ message, modal }) => {
 
     return (
         <div class="col pd-2">
-            <i src="times-circle" class="txtPrimary xxl" />
+
+            <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

@@ -7,7 +7,7 @@ import React from 'react';
 
 // Core
 import { router } from '@app';
-import Button from '@client/components/button';
+import { Button } from '@client/components';
 
 // App
 import useHeader from '@client/pages/useHeader';
@@ -15,10 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-router.error( 404, {}, ({ message, modal }) => {
-
-    if (!message)
-        message = "The content you asked for was not found.";
+router.error( 404, ({ message, modal }) => {
 
     useHeader({
         title: 'Page Not Found',
@@ -26,12 +23,15 @@ router.error( 404, {}, ({ message, modal }) => {
     });
 
     return (
-        <div class="col pd-2">
-            <i src="times-circle" class="txtPrimary xxl" />
+        <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

@@ -7,7 +7,7 @@ import React from 'react';
 
 // Core
 import { router } from '@app';
-import Button from '@client/components/button';
+import { Button } from '@client/components';
 
 // App
 import useHeader from '@client/pages/useHeader';
@@ -15,10 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-router.error( 500, {}, ({ message }) => {
-
-    if (!message)
-        message = "A technical error occurred.";
+router.error( 500, ({ message }) => {
 
     useHeader({
         title: 'Technical Error',
@@ -27,11 +24,14 @@ router.error( 500, {}, ({ message }) => {
 
     return (
         <div class="col pd-2">
-            <i src="times-circle" class="txtPrimary xxl" />
+
+            <i src="times-circle" class="fg error xxl" />
 
             <h1>Technical Error</h1>
 
             <p>{message}</p>
+
+            <Button type="primary" link="/">Go Home</Button>
         </div>
     )
 });

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

@@ -17,6 +17,7 @@ import type { TBasicSSrData } from '@server/services/router/response';
 import BaseRouter, {
     defaultOptions, TRoute, TErrorRoute, TClientOrServerContext, TRouteModule
 } from '@common/router'
+import { getLayout } from '@common/router/layouts';
 import { getRegisterPageArgs, buildRegex } from '@common/router/register';
 import { TFetcherList } from '@common/router/request/api';
 import type { TFrontRenderer, TDataProvider } from '@common/router/response/page';
@@ -243,9 +244,12 @@ export default class ClientRouter<
 
     public error(code: number, options: TRoute["options"], renderer: TFrontRenderer<{}, { message: string }>) {
 
+        // Automatic layout form the nearest _layout folder
+        const layout = getLayout('Error ' + code, options);
+
         const route: TErrorRoute = {
             code,
-            controller: (context: TClientOrServerContext) => new ClientPage(null, renderer, context),
+            controller: (context: TClientOrServerContext) => new ClientPage(null, renderer, context, layout),
             options
         };
 

package/src/common/errors/index.ts

@@ -112,7 +112,7 @@ export class AuthRequired extends CoreError {
 export class Forbidden extends CoreError {
     public http = 403;
     public title = "Access Denied";
-    public static msgDefaut = "You're not allowed to access to this resource.";
+    public static msgDefaut = "You do not have sufficient permissions to access this content.";
 }
 
 export class NotFound extends CoreError {

package/src/common/router/layouts.ts

@@ -8,6 +8,7 @@ import type { ComponentChild } from 'preact';
 import type { ClientContext } from '@/client/context';
 import type { TRouteOptions } from '.';
 // App
+import internalLayout from '@client/pages/_layout';
 import layouts from '@/client/pages/**/_layout/index.tsx';
 
 /*----------------------------------
@@ -43,8 +44,6 @@ export const getLayout = (routePath: string, routeOptions?: TRouteOptions): Layo
     const chunkId = routeOptions["id"];
     if (chunkId === undefined)
         throw new Error(`ID has not injected for the following page route: ${routePath}`);
-
-    let layout: Layout | undefined;
     
     // Layout via name
     if (routeOptions.layout !== undefined) {
@@ -53,30 +52,30 @@ export const getLayout = (routePath: string, routeOptions?: TRouteOptions): Layo
         if (LayoutComponent === undefined)
             throw new Error(`No layout found with ID: ${routeOptions.layout}. registered layouts: ${Object.keys(layouts)}`);
 
-        layout = { 
+        return { 
             path: routeOptions.layout, 
             Component: layouts[routeOptions.layout] 
         }
-
-    } else {
+    } 
             
-        // Automatic layout via the nearest _layout folder
-        for (const layoutPath in layouts)
-            if (
-                // The layout is nammed index when it's at the root (@/client/pages/_layout)
-                layoutPath === 'index' 
-                // Exact match
-                || chunkId === layoutPath 
-                // Parent
-                || chunkId.startsWith( layoutPath + '_' )
-            )
-                layout = { 
-                    path: layoutPath, 
-                    Component: layouts[layoutPath] 
-                };
-    }
-    
-    //console.log(`[router][layouts] Get layout for "${routePath}". Found:`, layout);
+    // Automatic layout via the nearest _layout folder
+    for (const layoutPath in layouts)
+        if (
+            // The layout is nammed index when it's at the root (@/client/pages/_layout)
+            layoutPath === 'index' 
+            // Exact match
+            || chunkId === layoutPath 
+            // Parent
+            || chunkId.startsWith( layoutPath + '_' )
+        )
+            return { 
+                path: layoutPath, 
+                Component: layouts[layoutPath] 
+            };
 
-    return layout;
+    // Internal layout
+    return {
+        path: '/',
+        Component: internalLayout
+    }
 }

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

@@ -1,8 +1,8 @@
 /*----------------------------------
 - DEPENDANCES
 ----------------------------------*/
-
 // Npm
+import { v4 as uuid } from 'uuid';
 import { Logger, ILogObject } from "tslog";
 import { format as formatSql } from 'sql-formatter';
 import highlight from 'cli-highlight';
@@ -11,10 +11,10 @@ import highlight from 'cli-highlight';
 import Application, { Service, TPriority } from '@server/app';
 import context from '@server/context';
 import type ServerRequest from '@server/services/router/request';
+import { SqlError } from '@server/services/database/debug';
 
 // Specific
 import logToHTML from './html';
-import BugReporter from "./bugReporter";
 
 /*----------------------------------
 - SERVICE CONFIG
@@ -81,10 +81,36 @@ export type TLog = ChannelInfos & {
 
 }
 
+/*----------------------------------
+- TYPES: BUG REPORT
+----------------------------------*/
+export type ServerBug = {
+
+    type: 'server',
+
+    // Context
+    hash: string,
+    date: Date, // Timestamp
+    channelType?: string, 
+    channelId?: string,
+
+    user: string | null | undefined,
+    ip: string | null | undefined,
+    
+    // Error
+    error: Error,
+    stacktrace: string,
+    logs: string,
+}
+
 /*----------------------------------
 - CONST
 ----------------------------------*/
 
+const LogPrefix = '[console]'
+
+const errorMailInterval = (1 * 60 * 60 * 1000); // 1 hour
+
 const logFields = [
     'date',
     'logLevelId',
@@ -111,13 +137,14 @@ export default class Console extends Service<Config, Hooks, Application> {
 
     // Services
     public logger!: Logger;
-    public bugReport = new BugReporter(this);
 
     // Buffers
     public logs: TLog[] = [];
     public clients: TGuestLogs[] = [];
     public requests: TRequestLogs[] = [];
     public sqlQueries: TQueryLogs[] = [];
+    // Bug ID => Timestamp latest send
+    private sentBugs: {[bugId: string]: number} = {};
 
     // Adapters
     public log = console.log;
@@ -162,7 +189,7 @@ export default class Console extends Service<Config, Hooks, Application> {
         setInterval(() => this.clean(), 60000);
 
         // Send email report
-        this.app.on('error', (error: Error, request?: ServerRequest) => this.bugReport.server(error, request));
+        this.app.on('error', this.createBugReport.bind(this));
     }
 
     private clean() {
@@ -173,6 +200,61 @@ export default class Console extends Service<Config, Hooks, Application> {
     - LOGGING
     ----------------------------------*/
 
+    public async createBugReport( error: Error, request?: ServerRequest ) {
+
+        // Print the error so it's accessible via logs
+        if (error instanceof SqlError)  {
+            let printedQuery: string;
+            try {
+                printedQuery = this.printSql( error.query );
+            } catch (error) {
+                printedQuery = 'Failed to print query:' + (error || 'unknown error');
+            }
+            console.error(`Error caused by this query:`, printedQuery);
+        }
+        console.error(LogPrefix, `Sending bug report for the following error:`, error);
+
+        // Prevent spamming the mailbox if infinite loop 
+        const bugId = ['server', request?.user?.name, undefined, error.message].filter(e => !!e).join('::');
+        const lastSending = this.sentBugs[bugId];
+        this.sentBugs[bugId] = Date.now();
+        const shouldSendReport = lastSending === undefined || lastSending < Date.now() - errorMailInterval;
+        if (!shouldSendReport)
+            return;
+
+        // Get context
+        const now = new Date();
+        const hash = uuid();
+        const { channelType, channelId } = this.getChannel();
+
+        // On envoi l'email avant l'insertion dans bla bdd
+        // Car cette denrière a plus de chances de provoquer une erreur
+        const logsHtml = this.printHtml(
+            this.logs.filter(e => e.channelId === channelId), 
+            true
+        );
+
+        const bugReport: ServerBug = {
+
+            type: 'server',
+
+            // Context
+            hash: hash,
+            date: now,
+            channelType, 
+            channelId,
+            // User
+            user: request?.user?.email,
+            ip: request?.ip,
+            // Error
+            error,
+            stacktrace: error.stack || error.message,
+            logs: logsHtml
+        }
+
+        await this.runHook('bugReport', bugReport);
+    }
+
     public getChannel() {
         return context.getStore() || {
             channelType: 'master',