Conceal certain navbar elements and display the logout button using ejs

For my web project, I am utilizing HTML, Java, and CSS. The website is hosted on an Express server generated with express-generator using EJS template. I want to implement a feature where once a user logs in (using Passport and Bcrypt), they are redirected to the "home" page but instead of seeing the "log in" and "subscribe" options, they should see a "logout" option and an icon to access their user profile. Can this be achieved in EJS?

I attempted using <% if (isLoggedIn) ... but it did not work, so I removed the code. Could you provide me with a practical example including a few lines of code, please?

      <header> /*home page*/
      <div class="container">
        <img src="/images/logo.png" alt="logo" class="logo">

        <nav>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/articles">Articles</a></li>
            <li><a href="/series">Series</a></li>
            <li><a href="/logout">Logout</a></li>
            <li><a href="/profile">Profile</a></li>
          </ul>
        </nav>
      </div>
    </header>
htmlcssnode.jsexpressejs

Answer №1

Ensure that user information is stored in the req.user object when logging in with Passport.

Check for the existence of req.user using a conditional operator - if it exists, display the logout option, otherwise show the normal menu.

const ensureAuthenticated = (req, res, next) => {
  if (req.isAuthenticated() || res.locals.isVerified) {
    return next();
  }
  req.flash("error_msg", "please signin to view this resource");
  res.redirect("/users/emailsignin");
};

Utilize the above middleware to verify whether the user is logged in or not.

In app.js:

app.use(function (req, res, next) {
  res.locals.isAuthenticated = req.isAuthenticated();
  next();
});

And in the navbar:

<% if(isAuthenticated ) { %>

Use the provided check to toggle the visibility of the menu items.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for centering elements in an image caption

I need some help with separating an image and text within an image caption from each other. Currently, they are overlapping and I want them to be distinct. I attempted using inner div elements for the text and image separately, but it caused issues by brea ...

htmlimagecss

Arrange text in a line below neatly in a list

My goal is to line up items on the same row, as shown in the screenshot. I need the opening hours to align consistently in the list. The data is retrieved from a database and displayed using Vue. This is how I currently display the opening hours and days. ...

htmlcsslistvue.js

The autocomplete attribute for "current-password" in React is failing to display the form fill option

Encountering an issue with the autocomplete="current-password" attribute not displaying the current password in a form, even though it is saved in Chrome. The input field is enclosed within a form. Is anyone else experiencing problems with the autocomplete ...

htmlreactjsautocomplete

Navigating with Angular 2: Expressing HTML 5 Routing Challenges

I'm currently working on a simple web application using Express 4 and Angular 2. The only Angular 2 specific aspect in this project is the utilization of its HTML5 router. Let me walk you through how the routing works in this app: There are two prim ...

javascriptnode.jsexpressroutesangular

Is there a single CSS property value that you want to exclude?

Is there a way to disable only one specific value of a CSS property? For example, when it comes to the 'text-decoration' property, options include none, underline, overline, line-through, blink, and inherit. I want to allow all values of text-de ...

htmlcsstext-decorations

Refreshing the chat input box exclusively for the sender in socket.io

I am currently developing an online chatting app for multiple users, but I am facing an issue where the chat input box is cleared for everyone when a message is sent. I want to only clear the chat input box for the sender. In my client.js file, I have us ...

node.jssocket.io

The <label> tag is divided into several lines

I'm facing an issue with the <label> element in my ASP.NET Core MVC project. Instead of displaying in a single line, it's splitting into multiple lines. Upon inspecting the element in Google Chrome, I noticed that it's inheriting style ...

htmlcssasp.net-mvcasp.net-core

Finding the index number of a DIV element when it is clicked

Here is an example of the HTML structure I am working with: <div id="preview-wrapper"> <div class="dz-preview dz-image-preview"> <a class="rotate-a" href="javascript:void(0);"> <img class="rotate" src="public/a ...

javascriptjqueryhtml

Enhancing User Interaction with Bootstrap Input Forms

Struggling with a CSS and Bootstrap issue, I am unable to find a solution. The problem I am facing is that the content in a div form is not responsive within its parent div. It always extends beyond the parent div and does not adjust its size when the scre ...

cssbootstrap-5

Tips for dynamically hiding/showing a button depending on the focus of two different HTML inputs

I'm working on a login section and looking to add a unique feature: When a user selects the email or password input field, I want the button text to change to 'LOGIN'. If neither input field is selected, the text should display 'NOT A ...

javascriptjquerycssanimation

Having issues with receiving phone authentication SMS from Firebase in a live environment

In my React+Node application, I have implemented Firebase phone authentication for user login using their mobile numbers. The process works perfectly fine in localhost: SMS with verification code are sent and users can log in without any issues. However, ...

node.jsreactjsfirebase-authenticationproduction-environment

Missing inkbar in Material UI tabs when using ReactJS

For some reason, the small inkbar is not appearing under this tab. I suspect it might be a css issue that I can't seem to figure out. It's possible that I'm missing something I don't know about or maybe the height of the tab is too high ...

cssreactjsmaterial-ui

HTML5 multi-linking options

Currently, I am enrolled in a beginner's web design course and I have encountered a roadblock. The assignment requires me to create a multi-link at the bottom of the page. Although I have successfully created it, I'm struggling with preventing a ...

htmlcss

Implement CSS styling on a single page by utilizing SCSS in conjunction with ReactJS and Redux

I'm currently working with ReactJS and Redux, utilizing SCSS for styling. Currently, my path is located at http://localhost:3000/login. I need to include the following on this page: html:{ overflow:hidden} However, on other pages, I want to remove th ...

csshtmlreactjssassredux

The ExcelJS conversion to CSV does not properly handle formulas

Utilizing ExcelJs to convert an Excel file to a .csv format can be quite complex, especially when dealing with columns determined by formulas. var workbook = new Excel.Workbook(); workbook.xlsx.load(results.rows[0].map) //reading from PostGres by ...

node.jsexcelexceljs

Issue with moving files after successful upload - encountering ENOENT Error

I am encountering a frustrating issue while trying to transfer files from the temp directory to the profile_pictures directory. This seemingly straightforward task has proven to be quite challenging as I have been stuck on it for an hour! The process shou ...

javascriptnode.jsexpressfs

The ongoing struggle of Socket.io's connection dance with an Express JS server

I've been tackling a React JS project that requires real-time full duplex communication between the client and server, both of which are deployed on Vercel. To achieve this, I decided to incorporate websockets using the Socket.io library. However, I&a ...

reactjsexpresswebsocketsocket.io

Creating CSS-in-JS Components in React JS without External Stylesheet interference

import React, { Component } from "react"; import './navbar.css' class NavBar extends Component { render() { return ( <div> navbar content </div> ); } } export default NavBar; If I were to ...

cssreactjs

Ensure that the link's color remains constant and remove any styling of text-decoration

Attempting to create a customized header. My goal is to change the color and remove text decoration in the navbar. Below is my code snippet: ReactJS: import React from 'react'; import './Header.css'; function Header() { return ( ...

javascriptcssreactjs

Utilize jQuery to dynamically apply Bootstrap classes while scrolling through a webpage

Having an issue with jQuery. Trying to include the fixed-top class (Bootstrap 4) when scrolling, but it's not working as expected. jQuery(document).ready(function($){ var scroll = $(window).scrollTop(); if (scroll >= 500) { $(".robig").a ...

javascriptjqueryhtmlbootstrap-4