login / register ui

init.js

@@ -1,31 +1,48 @@
+import { importRouters } from "./lib.js";
+
 const aliases = {
     '/': '/walls/get/home'
 };
 
+const routers = {
+    '/you': './you.js'
+}
+
 function doAliases(app) {
     for (let alias in aliases) {
-        app.all(alias, (req,res,next) => {
+        app.all(alias, (req, res, next) => {
             res.redirect(aliases[alias])
         })
     }
 }
 
-function doInit(app) {
+async function doInit(app) {
     app.use((req, res, next) => {
+        let headerCtx = [
+            { link: '/walls/get/home', icon: '/icon.svg', name: 'DervNet' },
+            { link: '/walls/list', icon: '/walls.svg', name: 'Explore' },
+            { link: '/you/logout', icon: '/logout.svg', name: 'Leave' } // fix icon
+        ];
+
+        if (!res.auth || !res.auth.valid) {
+            headerCtx = [
+                { link: '/walls/get/home', icon: '/icon.svg', name: 'DervNet' },
+                { link: '/you/login', icon: '/walls.svg', name: 'Log in' }
+            ];
+        }
+
         res.ctx = {
             mainPage: '404.ejs',
             mainCtx: {},
-            headerCtx: [
+            headerCtx
-                { link: '/walls/get/home', icon: '/icon.svg', name: 'DervNet' },
-                { link: '/walls/list', icon: '/walls.svg', name: 'Explore' },
-                { link: '/you/logout', icon: '/logout.svg', name: 'Leave' } // fix icon
-            ]
         };
         next();
     })
 
     doAliases(app);
 
+    await importRouters(app,routers);
+
     app.use('/api', (req, res, next) => {
         res.send(res.ctx);
     })

lib.js

@@ -0,0 +1,8 @@
+async function importRouters(app, routers) {
+    for (let router in routers) {
+        console.log(router)
+        await app.use(router, (await import(routers[router])).default)
+    }
+}
+
+export { importRouters };

public/index.css

@@ -7,6 +7,7 @@
     --main-3: rgb(223, 176, 219);
     --main-4: rgb(248, 224, 245);
     --main-5: rgb(69, 56, 90);
+    --main-6: rgb(28, 26, 31);
 
     color: var(--main-3);
 }
@@ -130,3 +131,43 @@ body {
     justify-content: center;
     text-decoration: none;
 }
+
+.form {
+    grid-template-columns: .3fr 1fr;
+    display: grid;
+}
+
+.form-heading,
+.form-message,
+.form-button {
+    grid-column: span 2;
+}
+
+.form-key {
+    font-weight: bold;
+    font-size: 1.2em;
+    height: 50px;
+    color: var(--main-4);
+    display: flex;
+    align-items: center;
+}
+
+.form-button,
+.form-input {
+    border: solid transparent 0px;
+    background: var(--main-6);
+    color: var(--main-4);
+    border-radius: 10px;
+    padding: .5rem;
+    margin-bottom: .5rem;
+    margin-top: .5rem;
+    text-decoration: none;
+}
+
+.form-button {
+    font-weight: 700;
+    display: inline-block;
+    background: var(--main-3);
+    color: var(--main-1);
+    margin: .5rem;
+}

views/form.ejs

@@ -0,0 +1,27 @@
+<form class='form main' enctype="multipart/form-data" method="POST" action="<%= action %>">
+    <h1 class="header">
+        <%= title %>
+    </h1>
+    <span class='form-message'>
+        <%= message %>
+    </span>
+    <% for (let kv of inputs) { %>
+        <span class='form-key'>
+            <%= kv.key %>
+        </span>
+
+        <%- kv.type=='textarea' ? '<textarea' : '<input' %>
+            class='form-input'
+            type="<%= kv.type %>"
+                name="<%= kv.name %>"
+                    <%- kv.type=='hidden' ? 'hidden' : '' %>
+                        value="<%= kv.type=='textarea' ? '' : kv.default %>"
+                            >
+
+                            <% if (kv.type=='textarea' ) { %>
+                                <%= kv.default %>
+                                    </textarea>
+                                    <% } %>
+                                        <% } %>
+                                            <input class='form-button' type="Submit" name="Submit" value="Submit">
+</form>

you.js

@@ -0,0 +1,58 @@
+import { Router } from "express";
+const router = Router();
+
+router.get('/login', (req, res, next) => {
+    res.ctx.mainPage = 'form'
+    res.ctx.mainCtx = {
+        title: "Log in",
+        message: "hi",
+        action: "/api/you/login",
+        inputs: [
+            {
+                "key": "Username",
+                "type": "text",
+                "name": "user",
+                "default": ""
+            },
+            {
+                "key": "Password",
+                "type": "password",
+                "name": "pass",
+                "default": ""
+            }
+        ]
+    }
+    next();
+})
+
+router.get('/new', (req, res, next) => {
+    res.ctx.mainPage = 'form'
+    res.ctx.mainCtx = {
+        title: "Register",
+        message: "hi",
+        action: "/api/you/new",
+        inputs: [
+            {
+                "key": "Username",
+                "type": "text",
+                "name": "user",
+                "default": ""
+            },
+            {
+                "key": "Password",
+                "type": "password",
+                "name": "pass",
+                "default": ""
+            },
+            {
+                "key": "Password (again)",
+                "type": "password",
+                "name": "pass2",
+                "default": ""
+            }
+        ]
+    }
+    next();
+})
+
+export default router;