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:

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

angular contains vulnerabilities of a moderate severity level

Can an error be thrown from a catch block within a Promise in a NodeJs environment?

Attempted to run npm install -g truffle but encountered a gyp error

Encountering an incorrect number of parameters for "undefined" during the deployment of a smart contract

Is the Packery image grid only functional when the background image is specified in CSS and not in JavaScript? Perhaps we need to look into using Await/Sem

Clicking on the menu in mobile view will cause it to slide upward

Unusual behavior of middleware in express 4 causing a strange dynamic effect

struggle to locate / Node.js Error

Ways to incorporate a dictionary into your website's content

Jenkins encounters error during NPM update

Animating a CSS overlay

What is the best way to maintain consistent scaling for elements of varying widths and heights?

The background is set and the vertical scrolling overflow is enabled

Is it possible to include a local directory as a dependency in the package.json file

Issues with Bootstrap's hamburger menu not functioning properly when clicked

"Placing the save button on top of a div - a step

Styling with CSS 3: Adding Shadows and Rounded Edges

Arrange a pair of div containers side by side on the webpage without the need to alter the existing

Encountering a syntax error when running newman on an Ubuntu system

Show off a sleek slider within a Bootstrap dropdown menu