//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);
}

 

GitHub: https://github.com/Sokhavuth/Node.js_backend

Vercel: https://vercel.com/sokhavuth/node-js-backend