css

2024-11-25 14:12:43 -05:00 · 2024-11-25 14:12:43 -05:00 · 9287290479
commit 9287290479
parent 153c74bd22
11 changed files with 321 additions and 24 deletions
--- a/client/login.js
+++ b/client/login.js
@ -1,13 +1,12 @@
 import Route from "../route.js";
+import form from "../comp/form.js";

 // TODO: rewrite
 let main = new Route([], async function (req, res, input) {
-    return `<div class='form-message'></div>
-    <form enctype='multipart/form-data' method='POST' action='/api/form/login'>
-    Username: <input type='text' name='user'><br/>
-    Password: <input type='password' name='pass'><br/>
-    <input type='submit'>
-    </form>`;
+    return form([
+        { label: "Username", type: "text", name: "user" },
+        { label: "Password", type: "password", name: "pass" }
+    ],'/api/form/register')
 });

 export default main;
--- a/client/main.js
+++ b/client/main.js
@ -1,9 +1,23 @@
 import Route from "../route.js";
-import Auth from "../form/auth.js";
-import Format from "../common/format.js";
+import auth from "../form/auth.js";
+import format from "../common/format.js";

-let main = new Route([Auth], async function (req, res, input) {
-    return `Hello world! Your name is: ${Format.escape(input.username)}`
+let main = new Route([auth], async function (req, res, input) {
+    let { username } = input;
+    let cta = (username == '!nobody') ?
+        '<div class="button"><a href="/client/register">Join</a></div>' :
+        '<div class="button"><a href="/client/chat?channel=main">Chat</a></div>';
+
+    return `<div class='area'>
+            <h1>About</h1>
+            <p>
+                <b>BiglyChat</b> is a chat service built on <a href='https://codeberg.org/onezDerv/bigly-chat'>free software</a>.
+            </p>
+            <p>
+                Anyone can selfhost an instance to take control of their community.
+            </p>
+            ${cta}
+        </div>`
 });

 export default main;
--- a/client/register.js
+++ b/client/register.js
@ -1,14 +1,13 @@
 import Route from "../route.js";
+import form from "../comp/form.js";

 // TODO: rewrite
 let main = new Route([], async function (req, res, input) {
-    return `<div class='form-message'></div>
-    <form enctype='multipart/form-data' method='POST' action='/api/form/register'>
-    Username: <input type='text' name='user'><br/>
-    Password: <input type='password' name='pass'><br/>
-    Password (again): <input type='password' name='pass2'><br/>
-    <input type='submit'>
-    </form>`;
+    return form([
+        { label: "Username", type: "text", name: "user" },
+        { label: "Password", type: "password", name: "pass" },
+        { label: "Password (again)", type: "password", name: "pass2" },
+    ],'/api/form/register')
 });

 export default main;
--- a/comp/form.js
+++ b/comp/form.js
@ -0,0 +1,15 @@
+function form(elems, action) {
+    elems.push({
+        'label': 'Submit',
+        'type': 'Submit',
+        'name': 'submit'
+    });
+
+    let mapped = elems.map(elem => 
+        `<span class='form-entry'> <span class='form-key'>${elem.label}</span> <input type='${elem.type}' name='${elem.name}'></span>`
+    ).join('\n');
+
+    return `<form enctype='multipart/form-data' method='POST' action='${action}'><div class='form-message'></div>${mapped}</form>`
+}
+
+export default form;
--- a/form/login.js
+++ b/form/login.js
@ -6,18 +6,12 @@ import { randomBytes } from 'node:crypto';

 let db = await initDb();

-function isValid(user) {
-    return user.search(/[^A-Za-z0-9\-\_]/g) == -1;
-}
-
 // TODO: rewrite
 let main = new Route([], async function (req, res, input) {
    let { user, pass } = req.body;

    if (!pass || !user) return { 'success': false, 'message': 'Some fields are missing' };

-    if (!isValid(user)) return { 'success': false, 'message': 'Username is invalid' };
-
    let isExist = await db.all('SELECT * FROM auth WHERE UPPER(username) LIKE UPPER(?)', [
        user
    ]);
--- a/route.js
+++ b/route.js
@ -4,8 +4,9 @@ function Route(deps, exec) {
 }

 Route.prototype.run = async function (req, res, input) {
+    input = input || {};
    for (let dep of this.deps) {
-        input = await dep.run(req, res, input)
+        input = {...input, ...(await dep.run(req, res, input))};
    };
    return await this.exec(req,res,input);
 }
--- a/static/img/channel.svg
+++ b/static/img/channel.svg
@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="256"
+   height="256"
+   viewBox="0 0 256 256"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="channel.svg"
+   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">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#000000"
+     bordercolor="#ffffff"
+     borderopacity="0.24705882"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="122.32947"
+     inkscape:cy="96.166522"
+     inkscape:window-width="1860"
+     inkscape:window-height="1004"
+     inkscape:window-x="30"
+     inkscape:window-y="46"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path21"
+       style="color:#000000;fill:#ffffff;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
+       d="M 105.20508 14.765625 A 12.5 12.5 0 0 0 90.914062 25.171875 L 83.042969 75.189453 L 39.90625 75.189453 A 12.5 12.5 0 0 0 27.40625 87.689453 A 12.5 12.5 0 0 0 39.90625 100.18945 L 79.109375 100.18945 L 70.357422 155.81055 L 39.90625 155.81055 A 12.5 12.5 0 0 0 27.40625 168.31055 A 12.5 12.5 0 0 0 39.90625 180.81055 L 66.423828 180.81055 L 59.164062 226.94336 A 12.5 12.5 0 0 0 69.570312 241.23438 A 12.5 12.5 0 0 0 83.861328 230.82812 L 91.730469 180.81055 L 139.18555 180.81055 L 131.92578 226.94336 A 12.5 12.5 0 0 0 142.33203 241.23438 A 12.5 12.5 0 0 0 156.62305 230.82812 L 164.49219 180.81055 L 216.09375 180.81055 A 12.5 12.5 0 0 0 228.59375 168.31055 A 12.5 12.5 0 0 0 216.09375 155.81055 L 168.42773 155.81055 L 177.17773 100.18945 L 216.09375 100.18945 A 12.5 12.5 0 0 0 228.59375 87.689453 A 12.5 12.5 0 0 0 216.09375 75.189453 L 181.11133 75.189453 L 188.37109 29.056641 A 12.5 12.5 0 0 0 177.9668 14.765625 A 12.5 12.5 0 0 0 163.67578 25.171875 L 155.80469 75.189453 L 108.34961 75.189453 L 115.60938 29.056641 A 12.5 12.5 0 0 0 105.20508 14.765625 z M 104.41602 100.18945 L 151.87109 100.18945 L 143.11914 155.81055 L 95.666016 155.81055 L 104.41602 100.18945 z " />
+  </g>
+</svg>
--- a/static/img/chat.svg
+++ b/static/img/chat.svg
@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="256"
+   height="256"
+   viewBox="0 0 256 256"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="chat.svg"
+   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">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#000000"
+     bordercolor="#ffffff"
+     borderopacity="0.24705882"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="122.32947"
+     inkscape:cy="96.166522"
+     inkscape:window-width="1860"
+     inkscape:window-height="1004"
+     inkscape:window-x="30"
+     inkscape:window-y="46"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="rect5"
+       style="fill:#ffffff;stroke:#ffffff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;paint-order:stroke fill markers"
+       d="m 75.453401,45.088826 c -32.320369,0 -58.33923,26.061849 -58.33923,58.435624 0,32.37377 26.018861,58.43562 58.33923,58.43562 h 26.272709 c -2.62751,23.22026 -18.803725,39.27367 -47.03315,48.9513 48.88863,-4.55457 71.98574,-28.43749 99.57855,-48.9513 h 26.27269 c 32.32037,0 58.34163,-26.06185 58.34163,-58.43562 0,-32.373775 -26.02126,-58.435624 -58.34163,-58.435624 z M 54.375589,78.436904 c 13.832827,-5.15e-4 25.046675,11.23186 25.046161,25.087546 5.14e-4,13.85567 -11.213335,25.08805 -25.046161,25.08754 -13.831893,-8.1e-4 -25.04429,-11.2328 -25.043777,-25.08754 -5.14e-4,-13.854749 11.211882,-25.086742 25.043777,-25.087546 z m 73.305851,0 c 13.83282,-5.15e-4 25.04667,11.23186 25.04617,25.087546 5e-4,13.85567 -11.21335,25.08805 -25.04617,25.08754 -13.8319,-8.1e-4 -25.04429,-11.2328 -25.04378,-25.08754 -5.1e-4,-13.854749 11.21188,-25.086743 25.04378,-25.087546 z m 73.30585,0 c 13.83281,-5.15e-4 25.04667,11.23186 25.04616,25.087546 5.1e-4,13.85567 -11.21335,25.08805 -25.04616,25.08754 -13.8319,-8.1e-4 -25.0443,-11.2328 -25.04379,-25.08754 -5.1e-4,-13.854749 11.21189,-25.086743 25.04379,-25.087546 z"
+       sodipodi:nodetypes="ssscccssssccccccccccccccc" />
+  </g>
+</svg>
--- a/static/img/extra.svg
+++ b/static/img/extra.svg
@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="256"
+   height="256"
+   viewBox="0 0 256 256"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="extra.svg"
+   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">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#000000"
+     bordercolor="#ffffff"
+     borderopacity="0.24705882"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="122.68302"
+     inkscape:cy="96.16652"
+     inkscape:window-width="1860"
+     inkscape:window-height="1004"
+     inkscape:window-x="30"
+     inkscape:window-y="46"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path7"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="M 127.98047 9.2089844 A 77.378253 77.378253 0 0 0 50.597656 86.589844 A 77.378253 77.378253 0 0 0 127.98047 163.9668 A 77.378253 77.378253 0 0 0 198.08594 118.64453 C 196.25399 119.46262 194.27647 119.94281 192.26562 119.97461 C 184.74478 120.36642 177.57152 114.36239 176.45703 106.94727 C 176.10249 98.548701 176.26522 90.137067 176.22852 81.732422 L 163.18164 81.732422 C 158.85576 81.553758 154.47904 82.145329 150.19531 81.3125 C 143.32593 80.00577 138.04382 73.379759 137.98242 66.439453 C 137.65472 58.954936 143.63387 51.843523 151.01562 50.734375 C 159.41375 50.384219 167.82436 50.541182 176.22852 50.507812 L 176.22852 47.916016 C 176.30386 40.684641 176.10075 33.44977 176.35547 26.220703 A 77.378253 77.378253 0 0 0 127.98047 9.2089844 z M 127.98047 181.50977 A 161.06057 225.06591 0 0 0 14.613281 246.79102 L 241.38672 246.79102 A 161.06057 225.06591 0 0 0 127.98047 181.50977 z " />
+    <path
+       id="path5"
+       style="color:#000000;fill:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
+       d="m 191.84044,18.097959 a 9.757645,9.757645 0 0 0 -9.75765,9.757645 v 28.507569 h -28.50757 a 9.757645,9.757645 0 0 0 -9.75764,9.757645 9.757645,9.757645 0 0 0 9.75764,9.757645 h 28.50757 v 28.507567 a 9.757645,9.757645 0 0 0 9.75765,9.75765 9.757645,9.757645 0 0 0 9.75764,-9.75765 V 75.878463 h 28.50757 a 9.757645,9.757645 0 0 0 9.75765,-9.757645 9.757645,9.757645 0 0 0 -9.75765,-9.757645 H 201.59808 V 27.855604 a 9.757645,9.757645 0 0 0 -9.75764,-9.757645 z" />
+  </g>
+</svg>
--- a/static/img/login.svg
+++ b/static/img/login.svg
@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="256"
+   height="256"
+   viewBox="0 0 256 256"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="login.svg"
+   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">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#000000"
+     bordercolor="#ffffff"
+     borderopacity="0.24705882"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="122.32947"
+     inkscape:cy="95.812966"
+     inkscape:window-width="1860"
+     inkscape:window-height="1005"
+     inkscape:window-x="30"
+     inkscape:window-y="45"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path7"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="M 127.98078,9.208089 A 77.378253,77.378253 0 0 0 50.59861,86.590271 77.378253,77.378253 0 0 0 127.98078,163.96761 77.378253,77.378253 0 0 0 205.35812,86.590271 77.378253,77.378253 0 0 0 127.98078,9.208089 Z m 0,172.302221 a 161.06057,225.06591 0 0 0 -113.36661,65.2816 h 226.77166 a 161.06057,225.06591 0 0 0 -113.40505,-65.2816 z" />
+  </g>
+</svg>
--- a/static/main.css
+++ b/static/main.css
@ -0,0 +1,86 @@
+/* https://git.zenoverse.net/bigly-archive/auth-thing/raw/branch/main/src/routes/+layout.svelte */
+body {
+    height: 100vh;
+    width: 100vw;
+    padding-top: 0px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    overflow-y: auto;
+}
+
+:root {
+    --dark-1: #2b2f36;
+    --dark-2: #d8d8d8;
+    --dark-3: rgb(73, 138, 236);
+
+    --light-1: #ffffff;
+    --light-2: #f8f8f8;
+
+    --hyperlink: rgb(139, 171, 219);
+
+    --shadow-1: 0px 0px 2px 2px var(--dark-2);
+
+    font-family: sans-serif;
+}
+
+a {
+    color: var(--hyperlink);
+    text-decoration: none;
+}
+
+input,
+textarea,
+.button {
+    border: 0;
+    border-radius: 0.2rem;
+    box-shadow: var(--shadow-1);
+
+    font-size: 1rem;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.button a {
+    text-decoration: none;
+    color: var(--light-1);
+}
+
+.area,
+form {
+    width: 700px;
+
+    box-shadow: var(--shadow-1);
+
+    padding: 10px;
+    margin-top: 10px;
+}
+
+form {
+    grid-template-columns: 0.7fr 1fr;
+}
+
+
+.form-entry {
+    display: block;
+}
+
+.form-key {
+    margin-right: 10px;
+}
+
+.form-message {
+    font-style: italic;
+}
+
+#main-content {
+    width: 720px;
+}
+
+.button {
+    background-color: var(--hyperlink);
+    font-weight: bold;
+    width: 150px;
+}