######################
Registrovaní zákazníci
######################

=====
Login
=====
Formulář pro zadání emailu a hesla pro přihlášení. Formulář má automaticky HTML5 validaci.

.. code-block:: html+twig

    {# zkrácený zápis #}
    <i:login>
        <input data-role="email" data-label="Váš email">
        <input data-role="password" data-label="Vaše heslo">
        <button data-role="submit">Přihlásit</button>
    </i:login>

    {# samostatný zápis label #}
    <i:login>
        <label for="role:email">Váš email</label>
        <input data-role="email">
        <label for="role:password">Vaše heslo</label>
        <input data-role="password">
        <button data-role="submit">Přihlásit</button>
    </i:login>


.. code-block:: html

    <!-- výstup - může se měnit! -->
    <form action="/_login" method="post">
        <label for="email_snj554hj">Váš email</label>
        <input type="email" id="email_snj554hj" requried>

        <label for="password_snj554hj">Vaše heslo</label>
        <input type="email" id="password_snj554hj" requried>

        <button type="submit">Přihlásit</button>
    </form>

==============
External-login
==============
Tlačítka pro přihlášení přes externí služby (Facebook, Seznam, ...). Dostupné služby se mění podle nastavení eshopu, takže šablonu musí počítat s různým počtem tlačítek.

.. csv-table:: Atributy **a[data-role="button"]**
    :header: "Atribut", "Hodnota", "Popis"

    button-img, url, adresa obrázku tlačítka
    button-text, string, text tlačítka
    class, string, CSS třída tlačítka

.. code-block:: html+twig

    {# univerzální výpis s defaultním vzhledem #}
    <i:external-login>
        {% for service in availableExternalLoginServices() %}
            <a href="{{ service }}" data-role="button" />
        {% endfor %}
        <div data-role="terms" />
    </i:external-login>

    {# vlastní vzhled pro konkrétní službu a defaultní pro zbytek #}
    <i:external-login>
        {% for service in availableExternalLoginServices() %}
            {% if service == 'facebook' %}
                <a href="{{ service }}" data-role="button" button-img="/images/facebook-button.png" class="facebook_login" />
            {% else %}
                <a href="{{ service }}" data-role="button" />
            {% endif %}
        {% endfor %}
        <div data-role="terms" />
    </i:external-login>

==============
Password reset
==============
Formulář pro zadání noého hesla. Odkaz na formulář vede z emailu (viz požadavek na reset hesla).
Formulář má automaticky HTML5 validaci. Při zapnutí pluginu jquery-validation se automaticky na formulář naváže.

.. code-block:: html+twig

    {# zkrácený zápis #}
    <i:password-reset>
        <input data-role="password" data-label="Nové heslo">
        <input data-role="password_again" data-label="Nové heslo (znovu)">
        <button data-role="submit">Nastavit heslo</button>
    </i:password-reset>

    {# samostatný zápis label #}
    <i:password-reset>
        <label for="role:password">Nové heslo</label>
        <input data-role="password">

        <label for="role:password_again">Nové heslo (znovu)</label>
        <input data-role="password_again">

        <button data-role="submit">Nastavit heslo</button>
    </i:password-reset>


.. code-block:: html

    <!-- výstup - může se měnit! -->
    <form action="/_pasword-reset" method="post">
        <label for="password_snj554hj">Nové heslo</label>
        <input name="password" type="password" id="password_snj554hj" required>

        <label for="password_snj554hj">Nové heslo (znovu)</label>
        <input name="password_again" type="password" id="password_again_snj554hj" required>

        <button type="submit">Nastavit heslo</button>
    </form>

======================
Password reset request
======================
Formulář pro zadání email k poslání odkaz na reset hesla. Formulář má automaticky HTML5 validaci.
Při zapnutí pluginu jquery-validation se automaticky na formulář naváže.

.. code-block:: html+twig

    {# zkrácený zápis #}
    <i:password-reset-request>
        <input data-role="email" data-label="Váš email">
        <button data-role="submit">Resetovat heslo</button>
    </i:password-reset-request>

    {# samostatný zápis label #}
    <i:password-reset-request>
        <label for="role:email">Váš email</label>
        <input data-role="email">
        <button data-role="submit">Resetovat heslo</button>
    </i:password-reset-request>


.. code-block:: html

    <!-- výstup - může se měnit! -->
    <form action="/_pasword-reset" method="post">
        <label for="email_snj554hj">Váš email</label>
        <input type="email" id="email_snj554hj" required data-msg-required="Vyplňte váš email">
        <button type="submit">Resetovat heslo</button>
    </form>

===================
Registrace (signup)
===================

Kompletní registrační formulář.

.. csv-table:: Pole formuláře **user-signup**
    :header: "data-role", "Povinný", "Popis"

    **email**, **ano**, adresa k přihlášení
    **password**, **ano**, heslo
    **password_again**, **ano**, opakování hesla
    phone, *ne*, telefon
    first_name, *ne*, křestní jméno
    last_name, *ne*, příjmení
    company, *ne*, firma
    cin, *ne*, IČ
    vatid, *ne*, DIČ
    street, *ne*, dodací ulice a č.p.
    city, *ne*, dodací město
    zip, *ne*, dodací PSČ
    region, *ne*, dodací region (kraj, stát federace)
    country, *ne*, dodací stát
    billing_phone, *ne*, fakturační telefon
    billing_first_name, *ne*, fakturační křestní jméno
    billing_last_name, *ne*, fakturační příjmení
    billing_company, *ne*, fakturační firma
    billing_cin, *ne*, fakturační IČ
    billing_vatid, *ne*, fakturační DIČ
    billing_street, *ne*, fakturační ulice a č.p.
    billing_city, *ne*, fakturační město
    billing_zip, *ne*, fakturační PSČ
    billing_region, *ne*, fakturační region (kraj, stát federace)
    billing_country, *ne*, fakturační stát
    newsletter, *ne*, registrovat odběr novinek

* Při použití **use-billing** se automaticky skrývají pole obalená v **billing-fields**.
* Při aktivním pluginu *jQuery-validation* se automaticky napojí na formulář.
* Hodnoty (dříve vyplněné nebo z profilu) se doplní automaticky
* Seznam zemí se bere dle nastavení a automaticky se vybere podle GeoIP

.. code-block:: html+twig

    <i:user-signup>
        <fieldset data-role="login">
            <legend>Přihlašovací údaje</legend>

            <input data-role="email" data-label="email">
            <input data-role="password" data-label="heslo">
            <input data-role="password_again" data-label="heslo (znovu)">
        </fieldset>

        <fieldset data-role="delivery">
            <legend>Dodací adresa</legend>

            <input data-role="phone" data-label="telefon">
            <input data-role="first_name" data-label="křestní jméno">
            <input data-role="last_name" data-label="příjmení">
            <input data-role="company" data-label="firma">
            <input data-role="cin" data-label="IČ">
            <input data-role="vatid" data-label="DIČ">
            <input data-role="street" data-label="ulice a č.p.">
            <input data-role="city" data-label="město">
            <input data-role="zip" data-label="PSČ">
            <select data-role="country" data-label="země" />
        </fieldset>

        <fieldset data-role="billing">
            <legend>Fakturační adresa</legend>

            <input data-role="use-billing" data-label="fakturovat na jinou adresu">

            <div data-role="billing-fields"> {# "billing-fields" se používá jen s "use-billing" #}
                <input data-role="billing-phone" data-label="telefon">
                <input data-role="billing-first_name" data-label="křestní jméno">
                <input data-role="billing-last_name" data-label="příjmení">
                <input data-role="billing-company" data-label="firma">
                <input data-role="billing-cin" data-label="IČ">
                <input data-role="billing-vatid" data-label="DIČ">
                <input data-role="billing-street" data-label="ulice a č.p.">
                <input data-role="billing-city" data-label="město">
                <input data-role="billing-zip" data-label="PSČ">
                <select data-role="billing-country" data-label="země" />
            </div>
        </fieldset>

        <input data-role="newsletter" data-label="odebírat newsletter">

        <button data-role="submit">Registrovat</button>
    </i:user-signup>

skrývání firemních údajů
------------------------

Přidáním zatržítka lze zajistit automatické skrývání firmních údajů -- není potřeba žádný další javascript.

Pokud je *use-company* uvnitř fieldsetu *delivery* nebo *billing*, použije se pouze na políčka dané adresy. Pokud je mimo, použije se na oboje najednou.

V jednom fieldsetu lze použít *company-fields* několikrát - například na řádky tabulky.

.. code-block:: html+twig

    <i:user-signup>
        <input data-role="use-company" data-label="nakupuji na firmu">

        <fieldset data-role="delivery">
            ...
            <div data-role="company-fields">
                <input data-role="company" data-label="firma">
                <input data-role="cin" data-label="IČ">
                <input data-role="vatid" data-label="DIČ">
            </div>
        </fieldset>

        <fieldset data-role="billing">
            ...
            <table>
                ...
                <tr data-role="company-fields"><td>
                    <input data-role="billing-company" data-label="firma">
                </td></tr>
                <tr data-role="company-fields"><td>
                    <input data-role="billing-cin" data-label="IČ">
                </td></tr>
                <tr data-role="company-fields"><td>
                    <input data-role="billing-vatid" data-label="DIČ">
                </td></tr>
            </table>
        </fieldset>
    </i:user-signup>