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.
