Need To Add A Password to a link

David Schure
David Schure used Ask the Experts™
on
Need to add a password pop up modal in order to access the press page.

http://www.mediascrubber.com/index.html

When you click on the Media Assests the press page opens.  I have a few different codes for modal popup forms but I am not sure on how to add it to a link.  Any help is appreciated.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David FavorFractional CTO
Distinguished Expert 2018

Commented:
There are many ways.

Most simple will be to just add an Apache ACL using basic authorization.

Since your site uses raw Apache (no CMS) https://www.digitalocean.com/community/tutorials/how-to-set-up-password-authentication-with-apache-on-ubuntu-14-04 provides a good overview.

If you have many pages or will eventually require session management, consider switching to use WordPress.
Hi,

I'm not sure what you are trying to do, can you elaborate...

If you have session with login then you can display the links / content depending of the role using server side code once they logged in no need for extra password.

htpasswd work ok to protect a page but this is not for popup so if the link open a popup that won't work.

Login and session is the best way for long term, I'm using this script this is very well coded
https://codecanyon.net/item/advanced-security-php-registerlogin-system/5282621

Check on your hosting panel most of them have password protection for page.
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
You are using bootstrap so you have code already.  Check, out https://getbootstrap.com/docs/4.4/components/modal/

Their sample code
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window


Instead of using a button to open or close you can use jquery
.modal('show')

Open in new window


Sometimes you need to have what looks like multiple modals but you still only use the one modal and instead inject text/html using jquery inside of
 <div class="modal-body">
        ...
      </div>

Open in new window

Use server side code to detect a log in session. If detected, then take action such as printing modal('show') on page load.  If you are using the modal as a log in form, then submit the form as an ajax request to your log in page.

For what you are doing, there is not really personal or confidential data you are trying to keep safe and you can create a simple log in system pretty easily or use a social log in like faceook or google.
OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

Author

Commented:
Thank you Everyone for your suggestions!
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
For reference a popup is actually a very simple thing to implement. It is basically a div inside an overlay that is styled.

You can do like so
<!doctype html>
<html>
    <head>
        <title>Test</title>
<style>
.dialogOverlay {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.75);
    z-index: 1000000;
}
.popupDialog {
    width: 50%;
    position: relative;
    background: white;
    color: #444;
    padding: 1rem;
    border: 2px solid #000;
    left: 50%;
    transform: translateX(-50%);
    top: 10%;
}
</style>
    </head>
<body>
<!-- This is a trick we use to include template data in the page so it is not visible. The browser will ignore the content 
as the script element has a type of text/template - but we can still access the contents through the ID.
You can create any content you like for your popup in the template -->
<script type="text/template" id="dlgTemplate">

    <p>My popup textxx</p>
    <button id="popupAccept">Accept</button>
    <button class="popupClose">Reject</button>
</script>

<script>
window.addEventListener('load', function() {
    // Get the template for this popup dialog
    var tmplt = document.getElementById('dlgTemplate').innerHTML;
    // Create a dialog for it
    dlg = new Dialog(tmplt);

    // Add listeners for custom dialog events
    document.addEventListener('click', function(e) {
        switch(e.target.id) {
            case 'popupAccept':
                alert('Accepted');
                dlg.destroy();
                break;
        }
    });
    document.addEventListener('popupClose', function() {
        alert('Close dialog fired');
    })
})

// This is the actual work horse. It creates the dialog and destroys it
function Dialog(template) {
    // Create the Overlay for the dialog
    var overlay = document.createElement('div');
    var evnts = [];
    overlay.classList.add('dialogOverlay');

    // Create the popup and populate it with template
    var popup = document.createElement('div');
    popup.classList.add('popupDialog');
    popup.innerHTML = template;
    popup.addEventListener('click', onCloseDialog)
    
    // Add to overlay
    overlay.appendChild(popup);

    // Append overlay to document
    document.body.appendChild(overlay);

    // Event handler for when an internal close event is fired
    function onCloseDialog(e) {
        if(e.target.classList.contains('popupClose')) {
            destroy();
        }
        var popupClose = new Event('popupClose');
        document.dispatchEvent(popupClose)
    }

    // Destroy the popup
    function destroy() {
        document.body.removeChild(overlay);
        evnts.forEach(function(listener) {
            popup.removeEventListener('click', onCloseDialog);
        });
    }

    // Exposed methods
    return {
        destroy: destroy
    }
}
</script>
</body>
</html>

Open in new window


Working sample here

Author

Commented:
Thank you so much Julian!  You are the best!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome David,

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial