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:

    * {
        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;
    const hostname = ''; // 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 = {
            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,
            case 'sec':
                credentials.securityQuestion = {
                    id: fmData.get(''),
                    answer: fmData.get('securityQuestion.answer'),
        fetch(hostname + '/api/login', {
            method: 'POST',
            mode: 'cors',
            body: JSON.stringify(credentials),
            (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';
                        case 'LOGIN_FAILED_SEC':
                            additional = 'sec';
                            form.querySelector('#sec-auth #sec-text').textContent = data.question;
                            form.querySelector('#sec-auth #sec-id').value =;
                            form.querySelector('#main-auth').style.display = 'none';
                            form.querySelector('#sec-auth').style.display = 'table-row-group';
                        case undefined:
                            window.location.href = data.loginURL;
                            form.querySelector('#FailMessage').innerText = "authorization failed";
    <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">
                    <td class="listtitle" colspan="2">Please enter your Username and Password</td>
                    <td class="list" align="right">Username:</td>
                    <td class="list"><input class="inset" type="text" name="username" autocapitalize="none"></td>
                    <td class="list" align="right">Password:</td>
                    <td class="list"><input class="inset" type="password" name="password"></td>
            <tbody class="auth-block" id="otp-auth">
                    <td class="listtitle" colspan="2">Enter your Two-Step Authentication Code</td>
                    <td class="list" align="right">Code:</td>
                    <td class="list"><input class="inset" type="text" name="otp.code"></td>
                    <td class="list" align="right">Remember me:</td>
                    <td class="list"><input type="checkbox" name="otp.remember"></td>
            <tbody class="auth-block" id="sec-auth">
                    <td class="listtitle" colspan="2">Please answer this Security Question</td>
                <input type="hidden" name="" id="sec-id">
                    <td class="list" align="right" id="sec-text"></td>
                    <td class="list"><input type="text" name="securityQuestion.answer" /></td>
                <td class="listtitle" align="right" colspan="2"><input type="submit" value="Login"></td>

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: in new window

How to change the appearance of login page

If a skin creates the file login.html in its top level directory, e.g.,


then whatever skin is set in the directadmin.conf for


will be searched for that login.html, and used if it exists.

The priority order is:

  1. /usr/local/directadmin/data/templates/custom/login.html
  2. /usr/local/directadmin/data/templates/login.html
  3. ${docsroot}/login.html
  4. 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: in new window

Also, if you need to host your own images on that login page, use this feature: in new window

Last Updated: