Thread Info
Options
Suggested
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

Itility

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

Fullscreen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

company_stylesheet.css

Fullscreen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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.