Important note about SSL VPN compatibility for 20.0 MR1 with EoL SFOS versions and UTM9 OS. Learn more in the release notes.

This discussion has been locked.
You can no longer post new replies to this discussion. If you have a question you can start a new discussion

Instructions on WAF Custom Authentication Form with example: Clarifying Documentation

The WAF custom authentication form in the documentation is not that clear and required several rounds of testing to fix. 

Below I've added code that is easier to modify and quickly get up to speed without 30 minutes of troubleshooting and testing. I also added a stylesheet that works better with mobile devices.

The key to making the logo show up was to add the <?assets_path?>/... to the html code which is not in the original. I imagine you could add multiple images if you want get fancy as long as you reference this path for each uploaded asset. 

company_html

<!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?>/company_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="<?assets_path?>/company.png" alt="">
         <p>Please login to access the App <br>  <br> </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><input type="submit" value="Login"></p>
      </form>
      <div class="note">If you encounter any problems or questions,<br> please contact <b>helpdesk@company.com</b>.</div>
    </div>
  </body>
</html>

company_stylesheet.css

html, body {
  width: 100%;
  height: 100%;
  color: #444;
  background: #f0f0f0;
  font: 9pt Arial,Helvetica,sans-serif;
}
#container {
  position: fixed;
  width: 340px;
  height: 700px;
  top: 20%;
  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%;
}

Please like if this is useful, it's not a question, just a clarification of the documentation.



This thread was automatically locked due to age.
Parents Reply Children
No Data