Restrict access to your site to a set of users you invite.
Visitors will be prompted to enter an email address and password.
To set up user account authentication for your site:
To add a user to your site:
The user receives an email with instructions to set a password. You can remove them at any time.
To remove a user:
Visitors to your site will be prompted for an email address and password to view. They can also reset their passwords from this screen.
Customize these authentication pages 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.
For Jekyll-generated pages, use raw tags so Jekyll outputs it for CloudCannon to process later: {% raw %}{{messageClasses}}{% endraw %}.
Filename: login.html
Form action: not required
Form inputs: email, password
Message classes: has-incorrect-login
Important
<!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 email address or password.
</div>
<label for="email">Email Address</label>
<input id="email" type="email" name="email" autofocus>
<label for="password">Password</label>
<input id="password" type="password" name="password">
<input type="submit" value="Log in">
</form>
<a href="/reset-password">Forgot your password?</a>
</body>
</html>Filename: set-password.html
Form action: /set-password
Form inputs: password, password-confirm, token
Message classes: has-password-mismatch, has-invalid-link, has-token-expired, has-success
<!DOCTYPE html>
<html>
<head>
<title>Set Password</title>
<style>
.password-mismatch-message,
.invalid-link-message,
.token-expired-message,
.success-message {
display: none;
}
.has-password-mismatch .password-mismatch-message,
.has-invalid-link .invalid-link-message,
.has-token-expired .token-expired-message,
.has-success .success-message {
display: block;
}
.has-success label,
.has-success input {
display: none;
}
</style>
</head>
<body class="{{messageClasses}}">
<h1>Set Password</h1>
<form action="/set-password" method="post">
<div class="password-mismatch-message">
Password did not match confirmation.
</div>
<div class="invalid-link-message">
Your reset link is no longer valid.
<a href="/reset-password">Reset your password</a> to get another.
</div>
<div class="token-expired-message">
Your reset link has expired.
<a href="/reset-password">Reset your password</a> to get another.
</div>
<div class="success-message">
Successfully set your password.
</div>
<label for="password">Password</label>
<input id="password" type="password" name="password" autofocus>
<label for="password-confirm">Confirm Password</label>
<input id="password-confirm" type="password" name="password-confirm">
<input type="hidden" name="token" value="{{token}}">
<input type="submit" value="Set Password">
</form>
</body>
</html>Filename: reset-password.html
Form action: /reset-password
Form inputs: email
Message classes: has-no-email, has-success
<!DOCTYPE html>
<html>
<head>
<title>Reset Password</title>
<style>
.no-email-message,
.success-message {
display: none;
}
.has-success .success-message,
.has-no-email .no-email-message {
display: block;
}
</style>
</head>
<body>
<h1>Reset Password</h1>
<form action="/reset-password" method="post" class="{{messageClasses}}">
<div class="no-email-message">
You must provide an email address.
</div>
<div class="success-message">
We've sent you an email with instructions to reset your password.
</div>
<label for="email">Email Address</label>
<input id="email" type="email" name="email" autofocus>
<input type="submit" value="Reset Password">
</form>
</body>
</html>
