Customizing login page
How to create a login page
Many webhosts want to make an easy one stop location for logging into DirectAdmin. This can be accomplished by adding a login form on your webpage. Replace with your domain. It's fairly simple to do, just add the following code to your website:
<style>
* {
font-size: 8.5pt;
font-family: verdana;
}
b {
font-weight: bold;
}
.listtitle {
background: #425984;
color: #EEEEEE;
white-space: nowrap;
border-radius: 3px;
box-shadow: 1px 1px 3px #727272;
}
td.list {
background: #EEEEEE;
white-space: nowrap;
}
input {
border-radius: 3px;
padding-left: 4px;
padding-right: 4px;
}
.inset {
border: 1px inset #DDDDDD;
}
.auth-block {
display: none;
}
#main-auth {
display: table-row-group;
}
</style>
<script>
const hostname = 'https://directadmin.example.com:2222'; // CHANGE-ME: DirectAdmin server URL
const logoutURL = ''; // CHANGE-ME: URL to redirect user when logging out
let additional = '';
async function login(form) {
const getEl = function (selector) {
return form.querySelector(selector);
};
const fmData = new FormData(form);
const credentials = {
logoutURL,
username: fmData.get('username'),
password: fmData.get('password'),
};
switch (additional) {
case 'otp':
credentials.otp = {
code: fmData.get('otp.code'),
remember: fmData.get('otp.remember') !== null,
}
break;
case 'sec':
credentials.securityQuestion = {
id: fmData.get('securityQuestion.id'),
answer: fmData.get('securityQuestion.answer'),
};
break;
}
fetch(hostname + '/api/login', {
method: 'POST',
mode: 'cors',
body: JSON.stringify(credentials),
}).then(
(response) => {
response.json().then(data => {
switch (data.type) {
case 'LOGIN_FAILED_OTP':
additional = 'otp';
form.querySelector('#main-auth').style.display = 'none';
form.querySelector('#otp-auth').style.display = 'table-row-group';
break;
case 'LOGIN_FAILED_SEC':
additional = 'sec';
form.querySelector('#sec-auth #sec-text').textContent = data.question;
form.querySelector('#sec-auth #sec-id').value = data.id;
form.querySelector('#main-auth').style.display = 'none';
form.querySelector('#sec-auth').style.display = 'table-row-group';
break;
case undefined:
window.location.href = data.loginURL;
break;
default:
form.querySelector('#FailMessage').innerText = "authorization failed";
}
});
}
);
}
</script>
<center><br><br><br><br>
<h1>DirectAdmin Login Page</h1>
<form id="login" name="form" onsubmit="login(this); return false;">
<h1 id="FailMessage"></h1>
<table cellspacing="1" cellpadding="5">
<tbody class="auth-block" id="main-auth">
<tr>
<td class="listtitle" colspan="2">Please enter your Username and Password</td>
</tr>
<tr>
<td class="list" align="right">Username:</td>
<td class="list"><input class="inset" type="text" name="username" autocapitalize="none"></td>
</tr>
<tr>
<td class="list" align="right">Password:</td>
<td class="list"><input class="inset" type="password" name="password"></td>
</tr>
</tbody>
<tbody class="auth-block" id="otp-auth">
<tr>
<td class="listtitle" colspan="2">Enter your Two-Step Authentication Code</td>
</tr>
<tr>
<td class="list" align="right">Code:</td>
<td class="list"><input class="inset" type="text" name="otp.code"></td>
</tr>
<tr>
<td class="list" align="right">Remember me:</td>
<td class="list"><input type="checkbox" name="otp.remember"></td>
</tr>
</tbody>
<tbody class="auth-block" id="sec-auth">
<tr>
<td class="listtitle" colspan="2">Please answer this Security Question</td>
</tr>
<input type="hidden" name="securityQuestion.id" id="sec-id">
<tr>
<td class="list" align="right" id="sec-text"></td>
<td class="list"><input type="text" name="securityQuestion.answer" /></td>
</tr>
</tbody>
<tr>
<td class="listtitle" align="right" colspan="2"><input type="submit" value="Login"></td>
</tr>
</table>
</form>
</center>
</body>
Also included in this form are the optional FAIL_URL and LOGOUT_URL values. You can set them so that if a user enters a wrong username or password, the login_failed.html will be shown, and when they hit "Logout" from within DirectAdmin, they'll be taken to the logged_out.html page. You can change the values as needed. If you remove those 2 options, then the default DA settings will take over. Both the login_failed.html and logged_out.html would be stored on your own website, and not through DA (as set, in this example).
If you want the login page to go straight to a particular page, you can change the "referer" value from "/" to "/CMD_USER_STATS" for example, if you wanted it to go straight to the statistics page upon successful login.
A related feature exists to change the DirectAdmin Login page itself: http://www.directadmin.com/features.php?id=250
How to change the appearance of login page
If a skin creates the file login.html in its top level directory, e.g.,
/usr/local/directadmin/data/skins/enhanced/login.html
then whatever skin is set in the directadmin.conf for
docsroot=./data/skins/enhanced
will be searched for that login.html, and used if it exists.
The priority order is:
/usr/local/directadmin/data/templates/custom/login.html/usr/local/directadmin/data/templates/login.html${docsroot}/login.html- internal login page
Similarly, you can now create your own skin's "login_images" path, e.g., /usr/local/directadmin/data/skins/enhanced/login_images/logo.png.
If you want to change the look of the login page when you access port 2222, use this feature to create your own login.html file:
http://www.directadmin.com/features.php?id=250
Also, if you need to host your own images on that login page, use this feature:
http://www.directadmin.com/features.php?id=609