Password Protected Pages

Overview

You can set pages to be password protected to discourage them from being viewed publicly.

Warning: This is not a secure way to protect page content, file URLs, or any other data. The Password will be stored as plain text in your publicly accessible source code. Never add private or sensitive information about you or your clients to password protected pages.

How To Use

To password protect a page you must do the following:

Add a form wrapper container
Add a password form field and submit button
Add submit handler with password validation

Only visitors with the password can access the pages. Remember to set a unique password for these pages.

Login Form

Use the form element with the class of login to start creating a form. Add a div element with the class of form-wrapper as a container for all of the form-item classes. Add e-mail and password as form fields and a submit button to handle form submission.

Example Code

<form class="login" id="client-login" novalidate="novalidate">
   <span class="delete-contact-form"></span>
   <span class="mask-contact-form" contenteditable="false"></span>
   <div class="form-wrapper">
      <div class="form-item">
         <input type="password" name="client_pw" placeholder="Password" class="form-control">
      </div>
      <div class="form-item">
         <button class="btn" type="submit">Log In</button>
      </div>
   </div>
</form>

Form Validation

Use the validateFormClient() function to valid the email entered in the login form. Use the function for the client-login ID to run when a user clicks to submit the form. Replace the value (found in uppercase) for input[name=client_pw] to your unique password and the URL to the password protected content.

Example Code

$('#client-login').on('submit', function(e){
  e.preventDefault();
  if ($('input[name=client_pw]', this).val() == 'YOUR_PASSWORD') {
    window.location.href='/PASSWORD-PROTECTED-PAGE-SLUG';
  } else {
    // do something else on fail
  }
});