login.html

{% extends "_layouts/basecp" %}
{% import "_includes/forms" as forms %}
{% set title = "Login"|t('app') %}
{% set bodyClass = 'login' %}
{% do view.registerAssetBundle("craft\\web\\assets\\login\\LoginAsset") %}

{% set username = craft.app.config.general.rememberUsernameDuration ? craft.app.user.getRememberedUsername(): '' %}
{% set showRememberMe = craft.app.config.general.rememberedUserSessionDuration %}

{% if craft.app.config.general.useEmailAsUsername %}
    {% set usernameLabel = 'Email'|t('app') %}
    {% set usernameType = 'email' %}
{% else %}
    {% set usernameLabel = 'Username or Email'|t('app') %}
    {% set usernameType = 'text' %}
{% endif %}

{% set hasLogo = CraftEdition == CraftPro and craft.rebrand.isLogoUploaded %}

{% set formAttributes = {
    id: 'login-form',
    method: 'post',
    class: showRememberMe ? 'remember-me' : '',
    'accept-charset': 'UTF-8',
} %}

{% if hasLogo %}
    {% set logo = craft.rebrand.logo %}
{% endif %}

{% set formHtml %}
    <main>
        <div id="login">

            <h1>
                {% if hasLogo %}
                    {{ tag('img', {
                        id: 'login-logo',
                        src: logo.url,
                        alt: systemName,
                        width: logo.width,
                        height: logo.height,
                    }) }}
                {% else %}
                    {{ systemName }}
                {% endif %}
            </h1>

            <form {{ attr(formAttributes) }}>

                <div id="login-form-top">
                    {{ forms.textField({
                        id: 'loginName',
                        name: 'username',
                        placeholder: usernameLabel,
                        value: username,
                        autocomplete: 'username',
                        type: usernameType,
                        inputAttributes: {
                            aria: {
                                label: usernameLabel,
                                required: 'true',
                            },
                        },
                    }) }}
                    {{ forms.passwordField({
                        id: 'password',
                        name: 'password',
                        placeholder: 'Password'|t('app'),
                        autocomplete: 'current-password',
                        inputAttributes: {
                            aria: {
                                label: 'Password'|t('app'),
                                required: 'true',
                            },
                        },
                    }) }}
                </div>

                <div id="login-form-bottom">
                    {% if showRememberMe %}
                        {{ forms.checkboxField({ id: 'rememberMe', label: 'Keep me logged in'|t('app') }) }}
                    {% endif %}
                    <button id="forgot-password" type="button">{{ 'Forgot your password?'|t('app') }}</button>
                    <button id="remember-password" type="button">{{ 'Remember your password?'|t('app') }}</button>
                </div>

                <div class="buttons">
                    <button id="submit" class="btn submit" type="submit">{{ 'Login'|t('app') }}</button>
                    <div id="spinner" class="spinner hidden"></div>
                </div>
            </form>

            <div id="login-errors" role="alert">
            </div>

            <a id="poweredby" href="http://craftcms.com/" title="{{ 'Powered by Craft CMS'|t('app') }}" aria-label="{{ 'Powered by Craft CMS'|t('app') }}">
                {{ svg('@app/web/assets/cp/dist/images/craftcms.svg') }}
            </a>

        </div>

    </main>
{% endset %}

{% set noCookiesHtml %}
    <main>
        <div class="message-container no-access">
            <div class="pane notice">
                <p>{{ 'Cookies must be enabled to access the Craft CMS control panel.'|t('app') }}</p>
            </div>
        </div>
    </main>
{% endset %}

{% block body %}
    <script type="text/javascript">
        var cookieTest = 'CraftCookieTest='+Math.floor(Math.random() * 1000000);
        document.cookie = cookieTest;
        if (document.cookie.search(cookieTest) != -1) {
            document.cookie = cookieTest + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
            document.write({{ formHtml|json_encode|raw }});

            {% if not craft.app.request.isMobileBrowser(true) %}
                document.getElementById("{{ (username ? 'password' : 'loginName') }}").focus();
            {% endif %}
        } else {
            document.write({{ noCookiesHtml|json_encode|raw }});
        }
    </script>
{% endblock %}