Problem with the Routing Path Express, NodeJS - node.js

Question

I have a question about deleting data in the database using Express and NodeJS as I have a form that is deleted.pug to get the ID input from the user then used that ID to find the record in the database to delete that.
I don't know why when I clicked on the "Delete Record" button in the index.pug, I get the error "Cannot GET /delete/". Therefore, I couldn't load the form for the user to input the id.
However, in the address bar, when I typed http://localhost:3000/api/delete/5, then the city with the id is 5 was deleted in the database. Can someone help me so that I can load the delete form to get the input from the user instead of letting them directly put the id in the URL? Thank you, and I appreciate it
api.js
const express = require('express');
const mysql = require('../config/db.config');
const router = express.Router();
router.get('/delete/:id', (req, res) => {
const sql = 'DELETE FROM tblCitiesImport WHERE id=?';
mysql.query(sql, req.params.id, (err) => {
if (err) throw err;
res.render('../views/deletesuccess');
});
});
module.exports = router;
delete.pug
html
head
body
form(action='/api/delete', method='POST')
p
| ID:
input(name='ID', value='', type='text')
input(value='Submit', type='submit')
index.pug
extends layout
block layout-content
div.View.WelcomeView
h1.Banner City Database Site
div.Message
div.Title
h3 IS219 Final
h1 Cities Project
span.Details Access the Cities Records Web Portal
div.NavButtons
if isAuthenticated
a(href="http://localhost:8000")
div.NavButton View Records
a(href="/user")
div.NavButton My Profile
a(href="/delete/")
div.NavButton Delete Record
a(href="/logout")
div.NavButton Logout
else
a(href="/login")
div.NavButton Log in
db structure
CREATE DATABASE citiesData;
use citiesData;
CREATE TABLE IF NOT EXISTS tblCitiesImport (
`id` int AUTO_INCREMENT,
`fldName` VARCHAR(21) CHARACTER SET utf8,
`fldLat` NUMERIC(6, 4),
`fldLong` NUMERIC(7, 4),
`fldCountry` VARCHAR(19) CHARACTER SET utf8,
`fldAbbreviation` VARCHAR(3) CHARACTER SET utf8,
`fldCapitalStatus` VARCHAR(7) CHARACTER SET utf8,
`fldPopulation` INT,
PRIMARY KEY (`id`)
);
app.js
const express = require('express');
const path = require('path');
const expressSession = require('express-session');
const passport = require('passport');
const Auth0Strategy = require('passport-auth0');
require('dotenv').config();
const open = require('open');
const bodyParser = require('body-parser');
const cors = require('cors');
const jwt = require('express-jwt');
const jwtAuthz = require('express-jwt-authz');
const jwksRsa = require('jwks-rsa');
const apiRouter = require('./routes/api');
const dbConn = require('./config/db.config');
const authRouter = require('./auth');
const citiesRoutes = require('./routes/cities.routes');
// App Variables
const app = express();
const port = process.env.PORT || '3000';
// Session Configuration
const session = {
secret: process.env.SESSION_SECRET,
cookie: {},
resave: false,
saveUninitialized: false,
};
if (app.get('env') === 'production') {
// Serve secure cookies, requires HTTPS
session.cookie.secure = true;
}
// Passport Configuration
const strategy = new Auth0Strategy(
{
domain: process.env.AUTH0_DOMAIN,
clientID: process.env.AUTH0_CLIENT_ID,
clientSecret: process.env.AUTH0_CLIENT_SECRET,
callbackURL: process.env.AUTH0_CALLBACK_URL,
},
(accessToken, refreshToken, extraParams, profile, done) => {
// Access tokens are used to authorize users to an API
// accessToken is the token to call the Auth0 API or a secured 3rd-party API
// extraParams.id_token has the JSON Web Token (JWT)
// profile has all the information from the user
return done(null, profile);
},
);
// App Configuration
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, 'public')));
app.use(expressSession(session));
app.use(bodyParser.urlencoded({ extended: true }));
passport.use(strategy);
app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser((user, done) => {
done(null, user);
});
passport.deserializeUser((user, done) => {
done(null, user);
});
// Creating custom middleware with Express
app.use((req, res, next) => {
res.locals.isAuthenticated = req.isAuthenticated();
next();
});
// Authorization middleware. When used, the
// Access Token must exist and be verified against
// the Auth0 JSON Web Key Set
const checkJwt = jwt({
// Dynamically provide a signing key
// based on the kid in the header and
// the signing keys provided by the JWKS endpoint.
secret: jwksRsa.expressJwtSecret({
cache: true,
rateLimit: true,
jwksRequestsPerMinute: 5,
jwksUri: 'https://YOURSDOMAIN.us.auth0.com/.well-known/jwks.json'
}),
// Validate the audience and the issuer.
audience: 'http://localhost:3000/api/v1/cities',
issuer: ['https://YOURSDOMAIN.us.auth0.com/'],
algorithms: ['RS256'],
});
// Router Mounting
app.use('/', authRouter);
app.use('/api', apiRouter);
// Routes Definitions
const secured = (req, res, next) => {
if (req.user) {
return next();
}
req.session.returnTo = req.originalUrl;
res.redirect('/login');
};
app.get('/', (req, res) => {
res.render('index', { title: 'Home' });
});
app.get('/user', secured, (req, res, next) => {
const { _raw, _json, ...userProfile } = req.user;
res.render('user', {
title: 'Profile',
userProfile: userProfile,
});
});
// This route is not needed authentication
app.get('/api/public', (req, res) => {
res.json({
message: 'You are in the public endpoint! Authentication is not needed to see this.',
});
});
// This route is needed authentication
app.get('/api/private', checkJwt, (req, res) => {
res.json({
message: 'You are in the private endpoint! Authentication is needed to see this.',
});
});
// using as middleware
app.use('/api/v1/cities', citiesRoutes);
app.set('port', process.env.PORT || 8000);
app.listen(port, () => {
console.log(`Listening to requests on http://localhost:${port}`);
});