How to render a modal Bootstrap dialog popup

I have a node js application which handles all the client requests. I created the views using the express handlebars plugin. So I have a main layout and several views and partials. The main layout receives the views in the body and shows the complete web page.

mainlayout.handlebar

    <!DOCTYPE html>
   <html>
   <head>
       {{>vihead}} <!-- partial with the css includes -->
       <title>My APP</title>
   </head>
   <body>
       <div class="container">
             {{>vinav}} <!-- partial to show the nav bar -->
       </div>
       <div class="container">
               <div class="row">
                   <div class="col-lg-12">         
                       {{{body}}}
                   </div>
               </div>
           <footer class="col-12 py-3 bg-light">
               <p>&copy; 2018 myAPP, Inc.</p>
           </footer>
       </div> <!-- /container -->
       <!-- SCRIPTS -->
       {{>viscripts}} <!-- partial with the js scripts includes -->
   </body>
   </html> "

The partial vinav.handlebars is the navigation bar included in the main layout. It shows a navigation bar with "Login", "Register", ("Logout" if logged) and "Dashboard". The Dashboard page is always shown even if the user is not logged in.

vinav.handlebars

<nav class="navbar navbar-expand-lg navbar-light bg-faded">
    <a class="navbar-brand" href="#">MY APP</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ml-md-auto">
            {{#if user}}
                <li class="nav-item"><a class="nav-link" href="/">{{useremail}}</a></li>
                <li class="nav-item"><a class="nav-link" href="/users/logout">Logout</a></li>
            {{else}}
                <li class="nav-item" ><a class="nav-link" href="/users/login">Login</a></li>
                <li class="nav-item" ><a class="nav-link" href="/users/register">Register</a></li>
            {{/if}}
            <li class="nav-item active"><a class="nav-link" href="/">Dashboard <span class="sr-only">(current)</span></a></li>
        </ul>
    </div>
</nav>

So, for example, if the user clicks "Login" the server gets the /users/login command and sends back the login handlebars view which will be inserted in the {{{body}}} of the main layout.

login.handlebars

<h2 class="page-header">Account Login</h2>
<form method="post" action="/users/login">
  <div class="form-group">
    <label>EMail</label>
    <input type="text" class="form-control" name="email" placeholder="Email">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" name="password" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

The same for Register. Everything works fine.

Now I want to show the login page as a Bootstrap 4 popup in the main layout, I mean, leaving the Dashboard page intact (it must be always shown). I spent the whole day trying to find a way to show and handle the popup but I was not able to find a solution.

I know handlebars is logic-less, so I can't add pure javascript. I also know it has helpers, but I can't figure out how to handle this with an helper.

The popup for the login could be something like this (and another similar for Register):

loginpopup.handlebars

<!-- The boostrap modal login popup-->
<div class="modal fade" id="bpopup" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="modalLabel">Flip-flop</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      <!-- this is the login.handlebars shown above -->
      <h2 class="page-header">Account Login</h2>
      <form method="post" action="/users/login">
         <div class="form-group">
           <label>EMail</label>
           <input type="text" class="form-control" name="email" placeholder="Email">
         </div>
         <div class="form-group">
           <label>Password</label>
           <input type="password" class="form-control" name="password" placeholder="Password">
         </div>
         <button type="submit" class="btn btn-default">Submit</button>
      </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Any idea? Can someone helpme?

Thanks Roberto

ericf / express-handlebars

How to render a modal Bootstrap dialog popup #230