From 9287290479db9b5c132e090b60ebe5f3ea614b79 Mon Sep 17 00:00:00 2001 From: biglyderv Date: Mon, 25 Nov 2024 14:12:43 -0500 Subject: [PATCH] css --- client/login.js | 11 +++--- client/main.js | 22 +++++++++-- client/register.js | 13 +++---- comp/form.js | 15 ++++++++ form/login.js | 6 --- route.js | 3 +- static/img/channel.svg | 46 ++++++++++++++++++++++ static/img/chat.svg | 47 +++++++++++++++++++++++ static/img/extra.svg | 50 ++++++++++++++++++++++++ static/img/login.svg | 46 ++++++++++++++++++++++ static/main.css | 86 ++++++++++++++++++++++++++++++++++++++++++ 11 files changed, 321 insertions(+), 24 deletions(-) create mode 100644 comp/form.js create mode 100644 static/img/channel.svg create mode 100644 static/img/chat.svg create mode 100644 static/img/extra.svg create mode 100644 static/img/login.svg diff --git a/client/login.js b/client/login.js index 3052a86..2d30e8d 100644 --- 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 `
-
- Username:
- Password:
- -
`; + return form([ + { label: "Username", type: "text", name: "user" }, + { label: "Password", type: "password", name: "pass" } + ],'/api/form/register') }); export default main; \ No newline at end of file diff --git a/client/main.js b/client/main.js index a08b13b..105c7fe 100644 --- 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') ? + '
Join
' : + '
Chat
'; + + return `
+

About

+

+ BiglyChat is a chat service built on free software. +

+

+ Anyone can selfhost an instance to take control of their community. +

+ ${cta} +
` }); export default main; \ No newline at end of file diff --git a/client/register.js b/client/register.js index 1f88e4c..9ec57c0 100644 --- 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 `
-
- Username:
- Password:
- Password (again):
- -
`; + 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; \ No newline at end of file diff --git a/comp/form.js b/comp/form.js new file mode 100644 index 0000000..3457f69 --- /dev/null +++ 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 => + ` ${elem.label} ` + ).join('\n'); + + return `
${mapped}
` +} + +export default form; \ No newline at end of file diff --git a/form/login.js b/form/login.js index 6ef4e7d..5307253 100644 --- 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 ]); diff --git a/route.js b/route.js index 796ca6e..c7327e3 100644 --- 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); } diff --git a/static/img/channel.svg b/static/img/channel.svg new file mode 100644 index 0000000..da65227 --- /dev/null +++ b/static/img/channel.svg @@ -0,0 +1,46 @@ + + + + + + + + + + diff --git a/static/img/chat.svg b/static/img/chat.svg new file mode 100644 index 0000000..0b4d95b --- /dev/null +++ b/static/img/chat.svg @@ -0,0 +1,47 @@ + + + + + + + + + + diff --git a/static/img/extra.svg b/static/img/extra.svg new file mode 100644 index 0000000..2f393be --- /dev/null +++ b/static/img/extra.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + diff --git a/static/img/login.svg b/static/img/login.svg new file mode 100644 index 0000000..8173ed6 --- /dev/null +++ b/static/img/login.svg @@ -0,0 +1,46 @@ + + + + + + + + + + diff --git a/static/main.css b/static/main.css index e69de29..d3a64e6 100644 --- 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; +} \ No newline at end of file