Authentication templates

Authentication templates define HTML forms for use in form-based authentication policies.

Sophos Firewall provides customizable HTML and CSS templates. To ensure that the authentication templates work well, learn more about the variables.

Variables in authentication templates

You can use the variables listed here. Some are required and some are optional.

The template must have the following variables and structure:

Variable	Description
`<form action="<?login_path?>" method="POST">`	A form element with the following: method set to `Post` action set to `<?login_path?>`
`<input name="httpd_username" type="text">`	The form element must have an input element with name set to httpd_username. Example: `<form action="<?login_path?>" method="POST"><p><label for="httpd_username">Username:</label> <input name="httpd_username" type="text"></p></form>`
`<input name="httpd_password" type="password">`	The form element must have an input element with name set to httpd_password. Example: `<form action="<?login_path?>" method="POST"><p><label for="httpd_password">Password:</label> <input name="httpd_password" type="text"></p></form>`

Note

Only <?login_path?> is substituted.

Variable	Description
`<?assets_path?>`	Substituted by the path containing the assets you upload with the authentication template. To have a clean authentication template, place the style sheets, images, and other elements outside the template. Example: `<link rel="stylesheet" type="text/css" href="<?assets_path?>/stylesheet.css">`
`<?admin_contact?>`	Substituted by the email address entered in Administration > Notification settings > Email settings > Send notifications to email address.
`<?company_logo?>`	To replace the Sophos logo, insert the path to your logo.
`<?company_text?>`	Replace the variable with the text you want users to see.
`<?persistency?>`	Currently unused. You can remove the paragraph where it’s used.

Download authentication template

Sophos Firewall provides the following default authentication template to help you protect your web servers through WAF rules. See WAF.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="<?assets_path?>/default_stylesheet.css">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Login</title>
  </head>
  <body>
    <div id="container">
      <div class="info">
         <img src="<?company_logo?>" alt="">
         <p><?company_text?></p>
      </div>
      <form action="<?login_path?>" method="POST">
        <p><label for="httpd_username">Username:</label>
          <input name="httpd_username" type="text"></p>
        <p><label for="httpd_password">Password:</label>
          <input name="httpd_password" type="password"></p>
        <p style="visibility:<?persistency?>">
          <label for="httpd_persistency">Keep me logged in</label>
          <input name="httpd_persistency" type="checkbox"></p>
        <p><input type="submit" value="Login"></p>
      </form>
      <div class="note">If you encounter any problems or questions, please contact <b><?admin_contact?></b>.</div>
    </div>
  </body>
</html>

Download CSS template

html, body {
  width: 100%;
  height: 100%;
  color: #444;
  background: #f0f0f0;
  font: 9pt Arial,Helvetica,sans-serif;
}
#container {
  position: fixed;
  width: 340px;
  height: 470px;
  top: 40%;
  left: 50%;
  margin-top: -170px;
  margin-left: -170px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #ccc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.info {
  font-size: 14px;
  padding-left: 20px;
  padding-top: 20px;
  line-height: 23px;
  text-align: center;
}
.note {
  font-size: 11.5px;
  color: #606060;
  line-height: 14px;
  float: left;
  margin: 20px;
  text-align: justify;
}
form {
  margin: 0 auto;
  margin-top: 20px;
}
label {
  color: #555;
  display: inline-block;
  margin-left: 18px;
  padding-top: 10px;
  font-size: 14px;
}
input {
  font-size: 12px;
  outline: none;
}
input[type=text], input[type=password] {
  color: #777;
  padding-left: 10px;
  margin: 10px;
  margin-top: 12px;
  margin-left: 18px;
  width: 300px;
  height: 35px;
}
input[type=text]:focus, input[type=password]:focus {
  border: 1px solid #a8c9e4;
  box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
input[type=submit] {
  float: right;
  margin-right: 20px;
  margin-top: 20px;
  width: 80px;
  height: 30px;
  font-size: 14px;
  width: 80px;
  height: 30px;
  left: 50%;
}

More resources

Notification settings