tjdraper
4/24/2017 - 9:07 PM

Craft Login/Registration Form

Craft Login/Registration Form

{% set notice = craft.session.getFlash('notice') %}
{% set error = craft.session.getFlash('error') %}

{% if error == "Couldn’t save user." %}
    {% set error = "We were unable to create your account. The most likely cause of this is that your email address is already being used for an account. If you need to resset your password, please <a href='/account/iforgot'>click here</a>." %}
{% endif %}

<div class="{% if loginExcludeMod is not defined %}mod mod--centered mod--max-900 u--centered{% endif %}{% if loginExcludeVerticalSpacing is not defined %} vertical-spacing-more{% endif %}">

    <div class="log-in-form log-in-form--double">

        {% if error %}
            <div class="block-note">
                <div class="block-note__title">
                    Error
                </div>
                <p>{{ error|smartypants }}</p>
            </div>
        {% endif %}

        {% if notice %}
            {% if notice == 'User registered.' %}
                <div class="block-note">
                    <div class="block-note__title">
                        Almost there!
                    </div>
                    <p>Your registration has been submitted successfully. Check your email to verify your account and complete your registration.</p>
                </div>
            {% else %}
                <div class="block-note">
                    <div class="block-note__title">
                        Notice
                    </div>
                    <p>{{ notice|smartypants }}</p>
                </div>
            {% endif %}
        {% endif %}

        {% if includeLoginH1 is not defined or (includeLoginH1 is defined and includeLoginH1 != false) %}
            {% if customLoginHeadingLevel is defined and customLoginHeadingLevel %}
                {% set headingLevel = customLoginHeadingLevel %}
            {% else %}
                {% set headingLevel = 1 %}
            {% endif %}
            <h{{ headingLevel }} class="heading heading--level-{{ headingLevel }} log-in-form__heading">
                {% if customLoginH1 is defined and customLoginH1 %}
                    {{ customLoginH1|smartypants }}
                {% else %}
                    Log In or Register
                {% endif %}
            </h{{ headingLevel }}>
        {% endif %}

        <div class="log-in-form__container">

            {# Log In #}
            <div class="log-in-form__left u--left">
                <h2 class="heading heading--level-3">Log In</h2>
                <form
                    class="log-in-form__form"
                    method="post"
                    accept-charset="UTF-8"
                >
                    {{ getCsrfInput() }}
                    <input type="hidden" name="action" value="users/login">

                    {% if loginRedirect is defined %}
                        <input type="hidden" name="redirect" value="{{ loginRedirect }}">
                    {% endif %}

                    {% if errorMessage is defined %}
                        <p>{{ errorMessage }}</p>
                    {% endif %}

                    <div class="log-in-form__input-container">
                        <label
                            for="loginName"
                            class="label log-in-form__label"
                        >
                            Email Address
                        </label>
                        <input
                            class="input log-in-form__input"
                            id="loginName"
                            type="email"
                            name="loginName"
                            value="{{ craft.session.rememberedUsername }}"
                        >
                    </div>

                    <div class="log-in-form__input-container">
                        <label
                            for="password"
                            class="label log-in-form__label"
                        >
                            Password
                        </label>
                        <input
                            class="input log-in-form__input"
                            id="password"
                            type="password"
                            name="password"
                        >
                    </div>

                    <div class="log-in-form__button-container">
                        <input class="button log-in-form__button" type="submit" value="Log In">
                        <p><a class="log-in-form__text-button" href="/account/iforgot">Forget your password?</a></p>
                    </div>
                </form>
            </div>

            {# Register #}
            <div class="log-in-form__right u--left">
                <h2 class="heading heading--level-3">Register</h2>
                <form
                    class="log-in-form__form"
                    method="post"
                    accept-charset="UTF-8"
                >
                    {{ getCsrfInput() }}
                    <input type="hidden" name="action" value="users/saveUser">
                    <input type="hidden" name="redirect" value="/account">
                    <input type="hidden" name="sendVerificationEmail" value="1">

                    {% macro errorList(errors) %}
                        {% if errors %}
                            <ul class="log-in-form__input-errors">
                                {% for error in errors %}
                                    <li class="log-in-form__input-error">
                                        {{ error }}
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    {% endmacro %}

                    {% from _self import errorList %}

                    <div class="log-in-form__input-container">
                        <label
                            for="email"
                            class="label log-in-form__label"
                        >
                            Email Address
                        </label>
                        <input
                            class="input log-in-form__input{% if account is defined and account.getErrors('email')|length > 0 %} log-in-form__input--has-error{% endif %}"
                            id="email"
                            type="email"
                            name="email"
                            {% if account is defined %}
                            value="{{ account.email }}"
                            {% endif %}
                        >
                        {% if account is defined %}
                            {{ errorList(account.getErrors('email')) }}
                        {% endif %}
                    </div>

                    <div class="log-in-form__input-container">
                        <label
                            for="password"
                            class="label log-in-form__label"
                        >
                            Password
                        </label>
                        <input
                            class="input log-in-form__input{% if account is defined and account.getErrors('password')|length > 0 %} log-in-form__input--has-error{% endif %}"
                            id="password"
                            type="password"
                            name="password"
                        >
                        {% if account is defined %}
                            {{ errorList(account.getErrors('password')) }}
                        {% endif %}
                    </div>

                    <div class="log-in-form__button-container">
                        <input class="button log-in-form__button" type="submit" value="Register">
                    </div>
                </form>
            </div>

        </div>

    </div>

</div>