//routes/admin.js
import express from 'express'
const admin = express.Router()

import loginRoute from './admin/login.js'
admin.use('/login', loginRoute) 
 
export default admin

 

//routes/admin/login.js
import express from 'express'
const login = express.Router()
import settings from '../../settings.js'

login.get('/',async function(req,res) {
    let module = await import('../../controllers/admin/login/get.js')
    module.default(req,res)
})

export default login

 

//settings.js

let settings = {}

settings.siteTitle = 'កាសែត​យើង'
settings.pageTitle = ''
settings.description = 'ព័ត៌មាន ចំណេះដឹង វប្បធម៌ កំសាន្ត'
settings.dLogo = ''
settings.dItemLimit = 10
settings.indexPostLimit = 13
settings.categoryPostLimit = 20
settings.route = ''

export default settings

 

//controllers/admin/login/get.js
import settings from '../../../settings.js'

export default (req,res)=>{
    if(req.session.user){
        res.redirect('/admin/post')
    }else{
        settings.pageTitle = 'ទំព័រ​ចុះ​ឈ្មោះ'
        settings.message = ''
        settings.route = '/admin/login'
  
        res.render('base', settings)
    }
}

 

<!--views/base.ejs-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title><%= siteTitle %> | <%= pageTitle %></title>
        <link href="/fonts/setup.css" rel="stylesheet">
        <link href="/styles/base.css" rel="stylesheet">
        <link href="/images/siteLogo.png" rel="icon" ></link>
        <script src="/scripts/jquery.js"></script>
    </head>
    <body>
        <% if(route == 'admin/login'){ %>
            <%- include('admin/login.ejs') %>
        <% } %>
    </body>
</html>

 

<!--views/admin/login.ejs-->
<link href="/styles/admin/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'><%= message %></div>
    </form>
</section>

 

/* public/styles/admin/login.css */
.Login{
    width: 400px;
    margin: 100px auto;
    background: var(--background-light);
} 

.Login .title{
    text-align: center;
    font: 18px/1.5 Koulen, Oswald;
    padding: 5px;
    border-bottom: 1px solid grey;
}

.Login form{
    padding: 20px 20px;
    display: grid;
    grid-template-columns: 20% auto; 
    grid-gap: 5px;
    align-items: center;
}

.Login form a{
    text-align: right;
}

.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: grey;
    --background-dark: black;
    --background-light: lightgrey;
    --body-font: 14px/1.5 Vidaloka, OdorMeanChey;
    --link: teal;
    --color: black;
}
  
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color: var(--link);
}
a:hover{
    opacity: .7;
}
.region{
    max-width: 1200px;
    margin: 0 auto;
}
  
body{
    color: var(--color);
    font: var(--body-font);
    background: var(--background);
}

 

GitHub: https://github.com/Sokhavuth/Blog_

Vercel: https://khmerweb-blog.vercel.app/