CODEWITHSUNDEEP
htmlcssnode.jshandlebars.js
DeveloperLV
DeveloperLV

Reputation: 1781

Refused to apply style from auth/css when rendering

Problem:

I quite confused to why my render is not loading my css and images from uploads.

When I do not try to log in, every page loads it's images and css applies it's styles..

But when I try to render my page like so:

if(!results.length){
  res.status(401).render('home/login', {
    message: 'The email or password is incorrect'
  });
}

I get this error:

enter image description here

I realized it says ...:3000/auth/css/.. - it's not suppose to load auth?

This is my tree:

Index.js
|
├───controllers
├───helpers
│
├───public
│   ├───css
│   ├───javascript
│   └───uploads
├───routes
│   └───home
└───views
    ├───home
    ├───layouts
    └───partials
        └───home

index.js

const express = require('express');
const path = require('path');
const exphbs = require('express-handlebars');
const bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');

const app = express();

// Public path
app.use(express.static(path.join(__dirname, './public')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

//Parse URL encoded bodies
app.use(express.urlencoded({ extended: false }));
//Parse JSON bodies as sent by API clients
app.use(express.json());
app.use(cookieParser());

// View engine
app.engine('handlebars', exphbs({defaultLayout: 'home-index'}));
app.set('view engine', 'handlebars');

// Routing
app.use('/', require('./routes/home/page_routes'));
app.use('/auth', require('./routes/auth'));


app.listen(3000, () => {
    console.log('Listening');
  });

views/layouts/home-index.handlebars

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/home.css">
    <title></title>
  </head>
  <body>
    {{> home/home-nav}}

    {{{body}}}



  </body>
</html>

routes/auth.js

const { db } = require('./db');
var jwt = require('jsonwebtoken');
var bcrypt = require('bcryptjs');
var { promisify } = require('util');


// Login
exports.login = async function(req, res) {
    try {
      var {email, password} = req.body;
  
      if(!email || !password) {
        return res.status(400).render('home/login', {
          message: 'Please provide an email and password' ///////////////// This is the problem
        });
      }
  
      db.query('select * from users_website where email = ?', [email], async function(error, results){
        console.log(results)
  
        if(!results.length){
          res.status(401).render('home/login', {
            message: 'The email or password is incorrect' ///////////////// This is the problem
          });
        }
        else{
          var id = results[0].id;
          var token = jwt.sign({ id }, 'SuperSecretPassword9981998', {
            expiresIn: '90d'
          });
  
          console.log("The token is: " + token);
  
          var cookieOptions = {
            expires: new Date(
              Date.now() + 90 * 24 * 60 * 60 * 1000
            ),
            httpOnly: true
          }
  
          res.cookie('jwt', token, cookieOptions);
          res.status(200).redirect("/");
        }
      });
  
    } catch (e) {
      console.log(e);
    }
  }

routes/home/page_routes

const express = require('express');
const router = express.Router();
const auth_controller = require('../../controllers/auth');

// Home router
router.get('/', auth_controller.isLoggedIn, (req, res) => {
    res.render('home/index');
});

// Login
router.get('/login', (req, res) => {
    res.render('home/login');
});

module.exports = router;

Question

How do I get rid of the error - when trying to render the page?

Upvotes: 1

Views: 55

Answers (1)

Take-Some-Bytes
Take-Some-Bytes

Reputation: 952

The reason for this is that you are loading assets using relative URLs in your handlebars file, which means that the assets are loaded relative to the page's URL, which, in your case, is :3000/auth. To fix this, use an absolute URL instead.

Like this:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Notice the leading slash. -->
    <link rel="stylesheet" href="/css/home.css">
    <title></title>
  </head>
  <body>
    {{> home/home-nav}}

    {{{body}}}



  </body>
</html>

Upvotes: 1

Related Questions