From 8fc5a164a4d7ded5f062211cf63d190919f246e3 Mon Sep 17 00:00:00 2001
From: Yanis Rigaudeau <yanis.rigaudeau@free.fr>
Date: Mon, 17 Oct 2022 19:15:38 +0200
Subject: [PATCH] login page

---
 api/src/framework/express/server.ts |   2 +-
 www/package-lock.json               | 145 ++++++++++++++++++++++++++--
 www/package.json                    |   3 +
 www/rollup.config.js                |   2 +-
 www/src/App.svelte                  |  31 +++---
 www/src/pages/Login.svelte          |  29 ++++++
 6 files changed, 182 insertions(+), 30 deletions(-)
 create mode 100644 www/src/pages/Login.svelte

diff --git a/api/src/framework/express/server.ts b/api/src/framework/express/server.ts
index 22f08ce..3f3a117 100644
--- a/api/src/framework/express/server.ts
+++ b/api/src/framework/express/server.ts
@@ -21,7 +21,7 @@ class Server {
     this.app.use(
       session({ secret: randomUUID(), cookie: { maxAge: 1000 * 3600 * 24 } }),
     );
-    this.app.use(checkPermissions());
+    //this.app.use(checkPermissions());
     this.app.use(getRoutes(services));
     this.app.use(ErrorHandler());
   }
diff --git a/www/package-lock.json b/www/package-lock.json
index 0147c13..679ede6 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -9,7 +9,10 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "papercss": "^1.8.3",
         "sirv-cli": "^2.0.0",
+        "spaper": "^0.9.6",
+        "svelte-navigator": "^3.2.2",
         "three": "^0.145.0"
       },
       "devDependencies": {
@@ -501,6 +504,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/dedent-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
+      "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ=="
+    },
     "node_modules/deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
@@ -852,6 +860,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -944,6 +960,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -968,6 +993,11 @@
       "integrity": "sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==",
       "dev": true
     },
+    "node_modules/papercss": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/papercss/-/papercss-1.8.3.tgz",
+      "integrity": "sha512-dRlaR5Kw6NbuMnHEIPLa6JvGndIE2RZ27ebSfjYXV6XAYEnxOMsNeYGDkmJgXol1A0LexmyP3F6F7+HL0XdGqA=="
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -980,6 +1010,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -1392,6 +1431,14 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "dev": true
     },
+    "node_modules/spaper": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/spaper/-/spaper-0.9.6.tgz",
+      "integrity": "sha512-Xg5uEG5t1VQKnEgoG6lw9KeV+LFrIa4ReTRhCHScehd7R78F5dNgUGxE4Rg7w5QefyFo4BluO/5D1G6EcKRGgA==",
+      "peerDependencies": {
+        "papercss": "^1.8.3"
+      }
+    },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -1432,7 +1479,6 @@
       "version": "3.50.1",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
       "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -1459,6 +1505,18 @@
         "svelte": "^3.24.0"
       }
     },
+    "node_modules/svelte-navigator": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/svelte-navigator/-/svelte-navigator-3.2.2.tgz",
+      "integrity": "sha512-Xio4ohLUG1nQJ+ENNbLphXXu9L189fnI1WGg+2Q3CIMPe8Jm2ipytKQthdBs8t0mN7p3Eb03SE9hq0xZAqwQNQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "svelte2tsx": "^0.1.151"
+      },
+      "peerDependencies": {
+        "svelte": "3.x"
+      }
+    },
     "node_modules/svelte-preprocess": {
       "version": "4.10.7",
       "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.7.tgz",
@@ -1525,6 +1583,19 @@
         }
       }
     },
+    "node_modules/svelte2tsx": {
+      "version": "0.1.193",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.1.193.tgz",
+      "integrity": "sha512-vzy4YQNYDnoqp2iZPnJy7kpPAY6y121L0HKrSBjU/IWW7DQ6T7RMJed2VVHFmVYm0zAGYMDl9urPc6R4DDUyhg==",
+      "dependencies": {
+        "dedent-js": "^1.0.1",
+        "pascal-case": "^3.1.1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.24",
+        "typescript": "^4.1.2"
+      }
+    },
     "node_modules/terser": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
@@ -1579,14 +1650,12 @@
     "node_modules/tslib": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
-      "dev": true
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/typescript": {
       "version": "4.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
       "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
-      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -1990,6 +2059,11 @@
       "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
       "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ=="
     },
+    "dedent-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
+      "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ=="
+    },
     "deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
@@ -2261,6 +2335,14 @@
       "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz",
       "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw=="
     },
+    "lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
     "magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -2332,6 +2414,15 @@
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
       "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw=="
     },
+    "no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "requires": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -2353,6 +2444,11 @@
       "integrity": "sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==",
       "dev": true
     },
+    "papercss": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/papercss/-/papercss-1.8.3.tgz",
+      "integrity": "sha512-dRlaR5Kw6NbuMnHEIPLa6JvGndIE2RZ27ebSfjYXV6XAYEnxOMsNeYGDkmJgXol1A0LexmyP3F6F7+HL0XdGqA=="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2362,6 +2458,15 @@
         "callsites": "^3.0.0"
       }
     },
+    "pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -2647,6 +2752,12 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "dev": true
     },
+    "spaper": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/spaper/-/spaper-0.9.6.tgz",
+      "integrity": "sha512-Xg5uEG5t1VQKnEgoG6lw9KeV+LFrIa4ReTRhCHScehd7R78F5dNgUGxE4Rg7w5QefyFo4BluO/5D1G6EcKRGgA==",
+      "requires": {}
+    },
     "strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -2674,8 +2785,7 @@
     "svelte": {
       "version": "3.50.1",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
-      "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==",
-      "dev": true
+      "integrity": "sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA=="
     },
     "svelte-check": {
       "version": "2.9.0",
@@ -2693,6 +2803,14 @@
         "typescript": "*"
       }
     },
+    "svelte-navigator": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/svelte-navigator/-/svelte-navigator-3.2.2.tgz",
+      "integrity": "sha512-Xio4ohLUG1nQJ+ENNbLphXXu9L189fnI1WGg+2Q3CIMPe8Jm2ipytKQthdBs8t0mN7p3Eb03SE9hq0xZAqwQNQ==",
+      "requires": {
+        "svelte2tsx": "^0.1.151"
+      }
+    },
     "svelte-preprocess": {
       "version": "4.10.7",
       "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.7.tgz",
@@ -2707,6 +2825,15 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "svelte2tsx": {
+      "version": "0.1.193",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.1.193.tgz",
+      "integrity": "sha512-vzy4YQNYDnoqp2iZPnJy7kpPAY6y121L0HKrSBjU/IWW7DQ6T7RMJed2VVHFmVYm0zAGYMDl9urPc6R4DDUyhg==",
+      "requires": {
+        "dedent-js": "^1.0.1",
+        "pascal-case": "^3.1.1"
+      }
+    },
     "terser": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
@@ -2746,14 +2873,12 @@
     "tslib": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
-      "dev": true
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "typescript": {
       "version": "4.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
-      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
-      "dev": true
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig=="
     },
     "wrappy": {
       "version": "1.0.2",
diff --git a/www/package.json b/www/package.json
index 0f5bdd7..70e7546 100644
--- a/www/package.json
+++ b/www/package.json
@@ -31,7 +31,10 @@
     "typescript": "^4.0.0"
   },
   "dependencies": {
+    "papercss": "^1.8.3",
     "sirv-cli": "^2.0.0",
+    "spaper": "^0.9.6",
+    "svelte-navigator": "^3.2.2",
     "three": "^0.145.0"
   },
   "main": "rollup.config.js",
diff --git a/www/rollup.config.js b/www/rollup.config.js
index 106812d..59186f2 100644
--- a/www/rollup.config.js
+++ b/www/rollup.config.js
@@ -21,7 +21,7 @@ function serve() {
       if (server) return;
       server = require('child_process').spawn(
         'npm',
-        ['run', 'start', '--', '--dev'],
+        ['run', 'start', '--', '--dev', '--single'],
         {
           stdio: ['ignore', 'inherit', 'inherit'],
           shell: true,
diff --git a/www/src/App.svelte b/www/src/App.svelte
index b89f293..90bc7e8 100644
--- a/www/src/App.svelte
+++ b/www/src/App.svelte
@@ -1,21 +1,16 @@
-<script lang="ts">
-  // export let name: string;
+<script>
+  import 'papercss/dist/paper.min.css';
+
+  import { Router, Route, Link } from 'svelte-navigator';
   import Test3D from './components/test3D.svelte';
+  import Login from './pages/Login.svelte';
 </script>
 
-<main>
-  <Test3D />
-</main>
-
-<style>
-  main {
-    text-align: center;
-    max-width: 240px;
-  }
-
-  @media (min-width: 640px) {
-    main {
-      max-width: none;
-    }
-  }
-</style>
+<Router>
+  <Route path="/">
+    <Test3D />
+  </Route>
+  <Route path="/login">
+    <Login />
+  </Route>
+</Router>
diff --git a/www/src/pages/Login.svelte b/www/src/pages/Login.svelte
new file mode 100644
index 0000000..3f7b62b
--- /dev/null
+++ b/www/src/pages/Login.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Form, Input, Button } from 'spaper';
+</script>
+
+<main>
+  <div class="row" id="container">
+    <Form class="">
+      <Input placeholder="email" class="row" />
+      <Input placeholder="password" type="password" class="row" />
+
+      <Button type="secondary" class="row" id="button">Sign in</Button>
+    </Form>
+  </div>
+</main>
+
+<style>
+  main {
+    height: 100%;
+  }
+  #button {
+    display: flex;
+  }
+  #container {
+    height: inherit;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+</style>