5htp 0.0.6 → 0.0.8-1

package/skeleton/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "{{ PROJECT_NAME }}",
+    "version": "1.0.0",
+    "private": true,
+    "engines": {
+        "node": ">=16.1.0",
+        "npm": ">=3.10.10"
+    },
+    "browserslist": [
+        ">0.2%",
+        "not dead",
+        "not op_mini all"
+    ],
+    "scripts": {
+        "dev": "export NODE_ENV=development && 5htp dev",
+        "build": "5htp build",
+        "deploy": "docker compose up --build",
+        "start": "export NODE_ENV=production && node ./bin/server.js",
+        "update-ecs-tasks": "aws ecs describe-task-definition --task-definition run-app --query taskDefinition > .github/workflows/ecs-task.json"
+    },
+    "dependencies": {
+        "5htp-core": "^0.0.7",
+        "core-js": "^3.18.1",
+        "preact": "^10.5.15",
+        "tslog": "^3.2.2"
+    },
+    "devDependencies": {
+        "ts-node": "^10.9.1"
+    }
+}

package/skeleton/src/client/assets/identity/logo.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="bolt_bg.svg"
+   width="512"
+   height="512"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1817"
+     inkscape:window-height="1317"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="1.6738281"
+     inkscape:cx="235.66125"
+     inkscape:cy="253.90898"
+     inkscape:window-x="23"
+     inkscape:window-y="15"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4"
+     inkscape:document-rotation="0" />
+  <rect
+     style="fill:#ffb169;fill-opacity:1;stroke:#6d6afb;stroke-width:1.00157;stroke-linecap:round"
+     id="rect830"
+     width="512.65814"
+     height="514.03961"
+     x="-1.0011668"
+     y="-3.5215869"
+     ry="106.86349" />
+  <path
+     d="m 307.72506,219.49055 h -43.88742 l 16.20108,-49.36383 c 1.52124,-5.78066 -2.8523,-11.48527 -8.82312,-11.48527 h -54.76418 c -4.56369,0 -8.44282,3.38473 -9.05131,7.91039 l -12.16981,91.27364 c -0.72258,5.47641 3.53685,10.34434 9.0513,10.34434 h 45.14242 l -17.53214,73.96968 c -1.36911,5.78066 3.04245,11.21905 8.86114,11.21905 3.19458,0 6.23704,-1.67335 7.91039,-4.56368 L 315.59742,233.1816 c 3.53684,-6.04689 -0.83669,-13.69105 -7.87236,-13.69105 z"
+     id="path2"
+     style="stroke-width:0.380307" />
+</svg>

package/skeleton/src/client/assets/identity/logoAndText.svg

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 2299.7934 515.0412"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="logoAndText.svg"
+   width="2299.7935"
+   height="515.0412"
+   inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8">
+    <rect
+       x="661.95569"
+       y="74.08168"
+       width="1933.2928"
+       height="365.62894"
+       id="rect1642" />
+    <rect
+       x="721.69897"
+       y="54.963825"
+       width="1899.8365"
+       height="425.37222"
+       id="rect1636" />
+    <rect
+       x="698.23108"
+       y="67.033836"
+       width="2697.0457"
+       height="417.13885"
+       id="rect833" />
+  </defs>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1900"
+     inkscape:window-height="962"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="0.41845703"
+     inkscape:cx="1504.3361"
+     inkscape:cy="277.20887"
+     inkscape:window-x="81"
+     inkscape:window-y="84"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4"
+     inkscape:document-rotation="0"
+     inkscape:snap-page="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <rect
+     style="fill:#9125ff;fill-opacity:1;stroke:#9125ff;stroke-width:1.00157;stroke-linecap:round;stroke-opacity:1"
+     id="rect830"
+     width="512.65814"
+     height="514.03961"
+     x="0.50078499"
+     y="0.50078499"
+     ry="106.86349" />
+  <g
+     aria-label="MegaCharger"
+     transform="translate(1.5019518,2.8997169)"
+     id="text831"
+     style="font-style:normal;font-weight:normal;font-size:320px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect833);fill:#000000;fill-opacity:1;stroke:none" />
+  <text
+     xml:space="preserve"
+     id="text1634"
+     style="white-space:pre;shape-inside:url(#rect1636);fill:#9125ff;fill-opacity:1;stroke:#9125ff;stroke-opacity:1" />
+  <text
+     xml:space="preserve"
+     id="text1640"
+     style="font-size:320px;white-space:pre;shape-inside:url(#rect1642);fill:#9125ff;fill-opacity:1;stroke:#9125ff;stroke-opacity:1"
+     transform="translate(59.743291,-9.5589267)"><tspan
+       x="661.95508"
+       y="366.57148"
+       id="tspan1819"><tspan
+         style="font-weight:bold;font-family:Rubik;-inkscape-font-specification:'Rubik Bold';fill:#1a1a1a"
+         id="tspan1817">Your Logo</tspan></tspan></text>
+</svg>

package/skeleton/src/client/assets/logos/google-play-store.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 408 466.9" width="2185" height="2500"><style>.st0{fill:url(#SVGID_1_)}.st1{fill:url(#SVGID_2_)}.st2{fill:url(#SVGID_3_)}.st3{fill:url(#SVGID_4_)}</style><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" y1="112.094" x2="261.746" y2="112.094"><stop offset="0" stop-color="#63be6b"/><stop offset=".506" stop-color="#5bbc6a"/><stop offset="1" stop-color="#4ab96a"/></linearGradient><path class="st0" d="M261.7 142.3L15 1.3C11.9-.5 8-.4 5 1.4c-3.1 1.8-5 5-5 8.6 0 0 .1 13 .2 34.4l179.7 179.7 81.8-81.8z"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1=".152" y1="223.393" x2="179.896" y2="223.393"><stop offset="0" stop-color="#3ec6f2"/><stop offset="1" stop-color="#45afe3"/></linearGradient><path class="st1" d="M.2 44.4C.5 121.6 1.4 309 1.8 402.3L180 224.1.2 44.4z"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="179.896" y1="229.464" x2="407.976" y2="229.464"><stop offset="0" stop-color="#faa51a"/><stop offset=".387" stop-color="#fab716"/><stop offset=".741" stop-color="#fac412"/><stop offset="1" stop-color="#fac80f"/></linearGradient><path class="st2" d="M402.9 223l-141.2-80.7-81.9 81.8 92.4 92.4L403 240.3c3.1-1.8 5-5.1 5-8.6 0-3.6-2-6.9-5.1-8.7z"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1.744" y1="345.521" x2="272.296" y2="345.521"><stop offset="0" stop-color="#ec3b50"/><stop offset="1" stop-color="#e7515b"/></linearGradient><path class="st3" d="M1.7 402.3c.2 33.3.3 54.6.3 54.6 0 3.6 1.9 6.9 5 8.6 3.1 1.8 6.9 1.8 10 0l255.3-148.9-92.4-92.4L1.7 402.3z"/></svg>

package/skeleton/src/client/assets/logos/googleauth.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
+    <path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/>
+    <path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/>
+    <path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"/>
+    <path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"/>
+  </g>
+</svg>

package/skeleton/src/client/assets/theme.less

@@ -0,0 +1,278 @@
+/*----------------------------------
+- SIZES
+----------------------------------*/
+
+@import (reference) "@client/assets/css/theme.less";
+
+/*
+    WARN: ALL MEASURES SHOULD BE IN EM
+*/
+
+// Text
+@sTxtPage: calc(16px + 0.10vw);
+@sIcon: 1.3em;
+
+// Components
+@radius: 0.75rem;
+@layoutRadius: @radius * 2rem;
+@sizeComponent: 3.8em;
+@sizeActiveIndicator: 6px;
+
+// Spacing
+@spacing: 1.2em;
+@spacingComponent: @spacing;
+@spacingLayout: @spacing * 2;
+
+// Responsive
+@layoutWidth: 60rem;
+@pageWidth: 30rem;
+@focusWidth: 40rem;
+
+@responsive1: 50em;
+@responsive2: 46em;
+@responsive3: 36em;
+@responsive4: 36em;
+
+/*----------------------------------
+- COLORS
+----------------------------------*/
+
+@cBgPage: #fff;
+
+@c1: #9125FF;
+@c1Light: #FFB169; // #64feda
+@c1SuperLight: #FFEBD9;
+@c2: #9125FF;
+@c3: #f2eee9;
+@c4: #f1dfde;
+
+@cSuccess: #16f7e8 - #333;
+@cError: #f67273;
+@cWarn: #FFBA7B;
+@cInfo: #4abdff;
+
+@cDark: #333;//#2C0653;
+
+:root {
+
+    --pageWidth: @pageWidth;
+    --focusWidth: @focusWidth;
+
+    --c1: @c1;
+    --c2: @c2;
+
+    --bgOverlay: fade(@c1 + #666, 70%);
+
+    --cSuccess: @cSuccess;
+    --cError: @cError;
+}   
+
+#githubRibbon {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 149px;
+    height: 149px;
+    background: url(https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149);
+
+}
+
+/*----------------------------------
+- SKINS: PRIMARY COLORS
+----------------------------------*/
+
+// Light silver
+body {
+    // Background
+    @cBgPage2: @cBgPage - #090909;
+    --cBg: @cBgPage;
+    --cBg2: @cBgPage2;
+    --cBgControl: #fff;
+    --cBgHover: #f5f5f5;
+
+    // Other
+    @cLine: #eee;
+    @cLine2: @cBgPage - #191919;
+    --cLine: @cLine;
+    --cLine2: @cLine2;
+
+    // Text
+    @cTxtBase: #8E8E8E;
+    @cTxtDesc: #B1B1B1;
+    @cTxtDiscret: #D6D6D6;
+    @cTxtImportant: @cDark;
+
+    --cTxtDiscret: @cTxtDiscret;
+    --cTxtDesc: @cTxtDesc;
+    --cTxtBase: @cTxtBase;
+    --cTxtImportant: @cTxtImportant;
+
+    ::selection {
+        background: @cDark;
+        color: #fff;
+    }
+
+}
+
+// White
+.white,
+.corpsChamp,
+.input,
+.card,
+i.solid { 
+
+    // Background
+    --cBg: #fff;
+    --cBgControl: #fff;
+    --cBgHover: #f5f5f5;
+
+    // Other
+    @cLine: #eee;
+    @cLine2: #fff - #191919;
+    --cLine: @cLine;
+    --cLine2: @cLine2;
+
+    // Text
+    @cTxtBase: #8E8E8E;
+    @cTxtDesc: #B1B1B1;
+    @cTxtDiscret: #D6D6D6;
+    @cTxtImportant: @cDark;
+
+    --cTxtDiscret: @cTxtDiscret;
+    --cTxtDesc: @cTxtDesc;
+    --cTxtBase: @cTxtBase;
+    --cTxtImportant: @cTxtImportant;
+
+    border-radius: @radius;
+}
+
+&.c1, 
+&.primary { 
+    .build-theme(@c1, @c1 + #aaa);
+
+    @cBgHighlight: @c1 + #111;
+    --cBgHighlight: @cBgHighlight;
+
+    &.card {
+        border-bottom: solid 3px @c1 - #222;
+        box-shadow: 0 2px 50px fade(@c1 + #333, 100%);
+
+        .btn {
+            border: solid 1px fade(#fff, 20%);
+        }
+    }
+}
+
+.btn.secondary {
+    border: solid 2px fade(#000, 10%);
+    color: @c1 - #222;
+    &:hover {
+        border-color: @c1;
+        background: transparent !important;
+    }
+}
+
+// Color
+.color {
+
+    &.c1, 
+    &.primary { 
+         // Background
+         @cBgHighlight: @c1 + #333;
+         --cBg: @c1;
+         --cBgHighlight: @cBgHighlight;
+         --cBgControl: #fff;
+ 
+         // Other
+         @cLine: fade(#fff, 20%);
+         @cLine2: fade(#fff, 40%);
+         --cLine: @cLine;
+         --cLine2: @cLine2;
+ 
+         // Text
+         @cTxtDiscret: @c1 + #666;
+         @cTxtDesc: @c1 + #888;
+         @cTxtBase: @c1 + #888;
+         @cTxtImportant: #fff;
+ 
+         --cTxtDiscret: @cTxtDiscret;
+         --cTxtDesc: @cTxtDesc;
+         --cTxtBase: @cTxtBase;
+         --cTxtImportant: @cTxtImportant;
+    }
+    &.c2 { --color: @c2; }
+    &.c3 { --color: @c3; }
+    &.c4 { --color: @c4; }
+
+    &.dark { 
+        // Background
+        --cBg: @cDark;
+        --cBgControl: #fff;
+
+        // Other
+        @cLine: fade(#fff, 20%);
+        @cLine2: fade(#fff, 40%);
+        --cLine: @cLine;
+        --cLine2: @cLine2;
+
+        // Text
+        @cTxtDiscret: fade(#fff, 30%);
+        @cTxtDesc: fade(#fff, 50%);
+        @cTxtBase: fade(#fff, 70%);
+        @cTxtImportant: #fff;
+
+        --cTxtDiscret: @cTxtDiscret;
+        --cTxtDesc: @cTxtDesc;
+        --cTxtBase: @cTxtBase;
+        --cTxtImportant: @cTxtImportant;
+    }
+
+    &.success { --color: @cSuccess; }
+    &.info { --color: @cInfo; }
+    &.warn { --color: @cWarn; }
+    &.error { --color: @cError; }
+
+    
+}
+
+/*----------------------------------
+- APPLY SKINS TO ELEMENTS
+----------------------------------*/
+i {
+    &.color {
+        color: var(--color);
+        text-shadow: 0 0 20px var(--color);
+    }
+}
+
+.card {
+    box-shadow: 0 2px 4px fade(#000, 10%);
+}
+
+.card {
+    &.color {
+        background: var(--color);
+        
+        &.gray {
+            @cBgGray: @cBgPage - #060606;
+            --color: @cBgGray;
+            background-color: var(--color);
+            box-shadow: inset 0 0 30px fade(#000, 10%);
+            
+            @cTxtBase: @cBgGray - #666;
+            --cTxtBase: @cTxtBase;
+            color: var(--cTxtBase);
+        }
+
+        &.glass {
+            --color: fade(#000, 85%);
+            background-color: var(--color);
+            box-sizing: 0;
+            backdrop-filter: blur(10px) saturate(180%);
+
+            h2 {
+                font-weight: 400;
+            }
+        }
+    }
+}

package/skeleton/src/client/components/LoginModal.tsx

@@ -0,0 +1,45 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import useContext from '@client/context';
+import { Props as ModalProps } from '@client/components/Dialog/card';
+
+// Core components
+import Input from '@client/components/input';
+import Button from '@client/components/button';
+
+// App
+
+/*----------------------------------
+- CONTROLEUR
+----------------------------------*/
+export default ({ close }: ModalProps) => {
+
+    const { api, page } = useContext();
+
+    const [username, setUserName] = React.useState("");
+
+    const login = () => api.post('/login', { username }).then(() => {
+        close(true);
+        return page.go('/app');
+    });
+
+    return (
+        <div class="card col w-3-4">
+            <header>
+                <h2>Login</h2>
+            </header>
+
+            <Input title="Username" value={username} onChange={setUserName} />
+
+            <Button type="primary" iconR="long-arrow-right" async onClick={login}>
+                Let's go
+            </Button>
+        </div>
+    )
+}

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

@@ -0,0 +1,20 @@
+@import (reference) "@/client/assets/theme.less";
+
+@layoutWidth: 80em;
+
+#layout.app {
+
+    background: #fff;
+
+    > .page {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 2em;
+
+        min-height: 100vh;
+        padding: 1.2em;
+    }
+   
+}

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

@@ -0,0 +1,33 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import { ClientContext } from '@client/context';
+
+// Core components
+import Router from '@client/router/component';
+
+// Resources
+import "./index.less";
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+
+/*----------------------------------
+- COMPOSANT
+----------------------------------*/
+export default function App ({ context }: { context: ClientContext }) {
+    return (
+        <div id="layout" class="app">
+
+            <Router />
+
+        </div>
+    )
+}

package/skeleton/src/client/pages/app/index.tsx

@@ -0,0 +1,57 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import route from '@router';
+import greetings from '@common/data/chaines/greetings';
+
+// Core components
+import Button from '@client/components/button';
+
+// App
+import useHeader from '@client/pages/useHeader';
+
+/*----------------------------------
+- CONTROLEUR
+----------------------------------*/
+route.page('/app', {  }, ({}, { api }) => ({
+
+    // Get data from your API here
+
+}), ({ }, { api, page, user, socket }) => {
+
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+
+    const [connected, setConnected] = React.useState(0);
+    React.useEffect(() => {
+        const client = socket.open("/user").on('connected', setConnected)
+        return () => client.close();
+    }, []);
+
+    useHeader({
+        title: "Megacharger: Rent your mobile Internet without compromise",
+        subtitle: "Get passive incomes by sharing your internet access to the world developpers. Low battery usage, fully transparent.",
+    });
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+    const logout = () => api.post('/auth/logout').then(() => page.go('/'))
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    return <>
+        {greetings( user.name )}
+
+        <strong class="xxl">Connected users: {connected}</strong>
+
+        <Button onClick={logout}>Logout</Button>
+    </>
+});