• Pricing
Skip to content

Password

On this page:

Loading...

Require a password to access your site.

To set up password authentication for your site:

  1. Go to the Site Settings / Authentication section
  2. Select Password and click Switch to Password authentication
  3. Enter a password and click Update Site Password
Screenshot of password tab in the authentication interface

Visitors to your site will be prompted for the password to view.

Screenshot of password login splash screen

Custom Interface

Customize the password login page with your own branding.

CloudCannon injects classes into the HTML to indicate the result of the action. They are injected into {{messageClasses}}. Use these classes to provide error handling and success notifications in your forms.

Important

For Jekyll-generated pages, use raw tags so Jekyll outputs it for CloudCannon to process later: {% raw %}{{messageClasses}}{% endraw %}.

Password Login

Filename: login.html

Form action: not required

Form inputs: username, password

Message classes: has-incorrect-login

Important

CloudCannon requires a hidden username input here for internal reasons. The value is ignored.

login.html
<!DOCTYPE html>

<html>
  <head>
    <title>Log in</title>
    <style>
      .incorrect-login-message {
        display: none;
      }

      .has-incorrect-login .incorrect-login-message {
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>Log in</h1>

    <form action="" method="post" class="{{messageClasses}}">
      <div class="incorrect-login-message">
        Incorrect password.
      </div>

      <label for="password">Password</label>
      <input id="password" type="password" name="password" autofocus>

      <input type="hidden" name="username" value="user">

      <input type="submit" value="Log in">
    </form>
  </body>
</html>
On this page:

Loading...

Don’t miss the latest
CloudCannon news freshly delivered to your inbox
Illustration of woman holding an envilope