login / register ui
This commit is contained in:
parent
ae511a3871
commit
d1d2d08330
5 changed files with 158 additions and 7 deletions
31
init.js
31
init.js
|
@ -1,31 +1,48 @@
|
||||||
|
import { importRouters } from "./lib.js";
|
||||||
|
|
||||||
const aliases = {
|
const aliases = {
|
||||||
'/': '/walls/get/home'
|
'/': '/walls/get/home'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const routers = {
|
||||||
|
'/you': './you.js'
|
||||||
|
}
|
||||||
|
|
||||||
function doAliases(app) {
|
function doAliases(app) {
|
||||||
for (let alias in aliases) {
|
for (let alias in aliases) {
|
||||||
app.all(alias, (req,res,next) => {
|
app.all(alias, (req, res, next) => {
|
||||||
res.redirect(aliases[alias])
|
res.redirect(aliases[alias])
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function doInit(app) {
|
async function doInit(app) {
|
||||||
app.use((req, res, next) => {
|
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 = {
|
res.ctx = {
|
||||||
mainPage: '404.ejs',
|
mainPage: '404.ejs',
|
||||||
mainCtx: {},
|
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();
|
next();
|
||||||
})
|
})
|
||||||
|
|
||||||
doAliases(app);
|
doAliases(app);
|
||||||
|
|
||||||
|
await importRouters(app,routers);
|
||||||
|
|
||||||
app.use('/api', (req, res, next) => {
|
app.use('/api', (req, res, next) => {
|
||||||
res.send(res.ctx);
|
res.send(res.ctx);
|
||||||
})
|
})
|
||||||
|
|
8
lib.js
Normal file
8
lib.js
Normal file
|
@ -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 };
|
|
@ -7,6 +7,7 @@
|
||||||
--main-3: rgb(223, 176, 219);
|
--main-3: rgb(223, 176, 219);
|
||||||
--main-4: rgb(248, 224, 245);
|
--main-4: rgb(248, 224, 245);
|
||||||
--main-5: rgb(69, 56, 90);
|
--main-5: rgb(69, 56, 90);
|
||||||
|
--main-6: rgb(28, 26, 31);
|
||||||
|
|
||||||
color: var(--main-3);
|
color: var(--main-3);
|
||||||
}
|
}
|
||||||
|
@ -130,3 +131,43 @@ body {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-decoration: none;
|
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;
|
||||||
|
}
|
27
views/form.ejs
Normal file
27
views/form.ejs
Normal file
|
@ -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>
|
58
you.js
Normal file
58
you.js
Normal file
|
@ -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;
|
Loading…
Reference in a new issue