Our Job Announcement Application needs a frontend and a backend to be fully functional. The backend will be used to create job items and to store them in the MongoDB database. But, the backend is not for everybody, it will be used only for a number of trusted users. So, a logging page needs to be built to allow trusted users enter their username and password to get in the backend where a dashboard will also be built.
Usually, It is very important to create a config.js file or module that will be imported into almost all module in the application. This config module will be also used to configure the entire application.
// config.js
export default async ()=>{
let config = {
siteTitle: 'ការងារយើង',
pageTitle: '',
route: '',
message: ''
}
return config
}
After that, we need to define a route that will call a controller that will call render method to render login template by passing a number necessary data to the template engine.
//route/login.js
import express from 'express'
const loginRoute = express.Router()
loginRoute.get('/login',async (req,res,next)=>{
const module = await import('../controller/login/getLogin.js')
module.default(req,res)
})
export default loginRoute
// controller/login/getLogin.js
import config from '../../config.js'
export default async (req,res)=>{
const setting = await config()
setting.pageTitle = 'ទំព័រចុះឈ្មោះ'
setting.route = '/login'
res.render('base',{data:setting})
}
<!--view/base.ejs-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title><%= data.siteTitle %> | <%= data.pageTitle %></title>
<link href="/images/siteLogo.png" rel="icon" />
<link href="/styles/base.css" rel="stylesheet" />
<link href="/fonts/setup.css" rel="stylesheet" />
<script src="/scripts/jquery.js"></script>
</head>
<body>
<% if(data.route === '/'){ %>
<%- include('front/home.ejs') %>
<% }else if(data.route === '/login'){ %>
<%- include('front/login.ejs') %>
<% } %>
</body>
</html>
<!--view/front/login.ejs-->
<link rel="stylesheet" href="/styles/front/login.css" />
<section class="Login">
<div class="title">ចុះឈ្មោះចូលទំព័រគ្រប់គ្រង</div>
<form action="/login" method="post">
<a>Email:</a><input name="email" type="email" required placeholder="Email" />
<a>ពាក្យសំងាត់ៈ</a><input name="password" type="password" required />
<a></a><input type="submit" value="បញ្ជូន" />
<a></a><div><%= data.message %></div>
</form>
</section>
/* static/styles/front/login.css */
.Login{
width: 400px;
margin: 100px auto 0;
}
.Login .title{
background: var(--background);
text-align: center;
font: 20px/1.5 Oswald, Limonf3;
padding: 5px;
}
.Login form{
background: #4d4d64;
padding: 20px;
display: grid;
grid-template-columns: 20% auto;
grid-gap: 5px;
align-items: center;
}
.Login form a{
color: white;
text-align: right;
}
.Login form input{
padding: 2px 5px;
font: var(--body-font);
}
.Login form div{
text-align: center;
}
To update our GitHub repository for this app, we need to write git commands as below:
$ git add .
$ git commit -m "Make it better"
$ git push origin master
