//routes/backend.js
import express from 'express'
const backendRouter = express.Router()
import loginRouter from './backend/login.js'
backendRouter.use('/login', loginRouter)
export default backendRouter
//routes/backend/login.js
import express from 'express'
const loginRouter = express.Router()
loginRouter.get('/',async function(req,res) {
let module = await import('../../controllers/backend/login.js')
module.default(req,res)
})
export default loginRouter
//controllers/backend/login.js
import settings from '../../settings.js'
export default (req,res)=>{
if(req.session.user){
res.redirect('/backend/post')
}else{
settings.pageTitle = 'ទំព័រចុះឈ្មោះ'
settings.message = ''
settings.route = '/backend/login'
res.render('base', {data:settings})
}
}
<!--views/backend/login.ejs-->
<link href="/styles/backend/login.css" rel="stylesheet"></link>
<section class='Login'>
<div class='title'>ចុះឈ្មោះចូលទំព័រគ្រប់គ្រង</div>
<form action='/users' method='post' >
<a>Email:</a><input type='email' name='email' required />
<a>ពាក្យសំងាត់ៈ</a><input type='password' name='password' required />
<a></a><input type='submit' value='បញ្ជូន' />
<a></a><div class='info'><%= data.message %></div>
</form>
</section>
/* public/styles/admin/login.css */
.Login{
width: 400px;
margin: 100px auto;
background: var(--background);
}
.Login .title{
text-align: center;
font: 18px/1.5 Koulen, Oswald;
padding: 5px;
border-bottom: 1px solid white;
}
.Login form{
padding: 20px 20px;
display: grid;
grid-template-columns: 20% auto;
grid-gap: 5px;
align-items: center;
}
.Login form a{
text-align: right;
color: white;
}
.Login form input{
padding: 0 5px;
font: var(--body-font);
}
.Login .info{
text-align: center;
}
.Login form input[type=submit]{
font: var(--body-font);
padding-top: 0;
}
@media only screen and (max-width: 600px){
.Login{
width: 100%;
}
.Login form{
grid-template-columns: 100%;
}
.Login form a{
text-align: left;
}
}
/* public/styles/base.css */
:root{
--background: #d7532c;
--background-dark: #2b2b2b;
--background-light: #f9dd89;
--body-font: 14px/1.5 Vidaloka, OdorMeanChey;
--link: lightgrey;
--color: white;
--item-listing: white;
--item-listing-color: grey;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: var(--link);
}
a:hover{
opacity: .7;
}
.region{
max-width: 1150px;
margin: 0 auto;
}
body{
color: var(--color);
font: var(--body-font);
background: var(--background-light);
}