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=250open 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.,

/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:

  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:
http://www.directadmin.com/features.php?id=250open in new window

Also, if you need to host your own images on that login page, use this feature:
http://www.directadmin.com/features.php?id=609open in new window

Last Updated: