Why did the CSS rendering suddenly come to a halt?

Question

Why did the CSS rendering suddenly come to a halt?

I am facing a confusion with EJS. When I make a post request, EJS renders my CSS properly. However, when I try the following code snippet:

exports.resetpassword = async (req, res) => {
  const {id, token} = req.params;
  
  
  const user = await LoginModel.findById(id).exec();
  const secret = process.env.TOKEN_SECRET + user.password
  
  try {
    const payload = jwt.verify(token, secret)
    req.flash('emailReseter', `${user.email}`);
    res.render("resetpassword.ejs", {messageMail: req.flash("emailReseter")});
  } catch (error) {
    console.log(error.message);
  }
  
};

Here's the issue I encounter:

https://i.sstatic.net/D6qSf.png

My CSS file is not applied and I can't figure out the root of the problem.

All my other EJS files are similar, except for the head link, and they apply the CSS correctly.

css node.js ejs

Answer 1

Answer №1

So far, this is how I have successfully implemented it:

In my routing setup, I included the following:

const router = require("express").Router();
const services = require('../service/render');

router.get("/", services.login);
router.get('/forgot-password', services.forgotpassword);
router.get('/reset-password/:id/:token', services.resetpassword);
router.get('/reset-password', services.resetpasswordredirect)

Inside my render.js file:

exports.resetpassword = async (req, res) => {
  const {id, token} = req.params;
  
  
  const user = await LoginModel.findById(id).exec();
  const secret = process.env.TOKEN_SECRET + user.password
  
  try {
    const payload = jwt.verify(token, secret)
    req.flash('emailReseter', `${user.email}`);
    res.redirect('/reset-password')
  } catch (error) {
    console.log(error.message);
  }
  
};

exports.resetpasswordredirect = async (req,res)=>{
  res.render("resetpassword.ejs", {messageMail: req.flash("emailReseter")});
  
}

Answer 2

So far, this is how I have successfully implemented it:

In my routing setup, I included the following:

const router = require("express").Router();
const services = require('../service/render');

router.get("/", services.login);
router.get('/forgot-password', services.forgotpassword);
router.get('/reset-password/:id/:token', services.resetpassword);
router.get('/reset-password', services.resetpasswordredirect)

Inside my render.js file:

exports.resetpassword = async (req, res) => {
  const {id, token} = req.params;
  
  
  const user = await LoginModel.findById(id).exec();
  const secret = process.env.TOKEN_SECRET + user.password
  
  try {
    const payload = jwt.verify(token, secret)
    req.flash('emailReseter', `${user.email}`);
    res.redirect('/reset-password')
  } catch (error) {
    console.log(error.message);
  }
  
};

exports.resetpasswordredirect = async (req,res)=>{
  res.render("resetpassword.ejs", {messageMail: req.flash("emailReseter")});
  
}

Answer 3

Answer №2

After encountering an issue where my CSS was not working when there was an ID in the params, I made a change to my server.js file.

Initially, I had:

app.use(express.static("public"));

And I modified it to:

app.use('/public', express.static("public"));

I also updated all my EJS files, such as transforming:

<link rel="stylesheet" href="css/login.css">

to:

<link rel="stylesheet" href="/public/css/login.css">

Answer 4

After encountering an issue where my CSS was not working when there was an ID in the params, I made a change to my server.js file.

Initially, I had:

app.use(express.static("public"));

And I modified it to:

app.use('/public', express.static("public"));

I also updated all my EJS files, such as transforming:

<link rel="stylesheet" href="css/login.css">

to:

<link rel="stylesheet" href="/public/css/login.css">

Why did the CSS rendering suddenly come to a halt?

Answer №1

Answer №2

Similar questions

Unable to locate my HTML file in the view section

Is there a way to use socket.io to send an emit message to a specific individual client

What benefits come from installing modules such as socket.io/express globally?

Adjusting the screen width to activate a responsive nav bar with a centered title

"Encountering an issue with Express.json where it fails to parse the

Convert the mongoDB information into various collections and transfer it to a fresh server

Troubleshooting Bootstrap's Margin Problem

What is the method for placing one object within another object?

CSS: selecting the adjacent siblings of a certain class, starting from the first and

Dependency on the selection of items in the Bootstrap dropdown menu

Splitting the express instance and routes into two separate server files

My React production build is not currently being served by the Express server

What is the process for integrating jQuery into a Node project following installation via npm?

Display an element that has been tucked away, and then bring it to life

The middleware in Expressjs is failing to override the response

Repeating every 3 to 6 months on later.js commencing from a specified date

"Ensure that the data in the div is being updated accurately via AJAX in ASP.NET MVC

A new thrower has been created, causing an unhandled 'error' event

Toggle class with jquery if the checkbox is checked

Container for grid template columns and responsive window in a single row