---
url: /user.md
---
# Registered Customers

## Login

Form for entering email and password for login. The form has automatic HTML5 validation.

```twig
{# shorthand notation #}
<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>

{# separate label notation #}
<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>
```

```html
<!-- output - subject to change! -->
<form action="/_login" method="post">
    <label for="email_snj554hj">Váš email</label>
    <input type="email" id="email_snj554hj" required>

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

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

## External-login

Buttons for logging in via external services (Facebook, Seznam, ...). The available services change based on the shop's configuration, so the template must account for a variable number of buttons.

**Attributes of a\[data-role="button"]**

| Attribute | Value | Description |
|---|---|---|
| button-img | url | button image URL |
| button-text | string | button text |
| class | string | CSS class for the button |

```twig
{# universal rendering with default appearance #}
<i:external-login>
    {% for service in availableExternalLoginServices() %}
        <a href="{{ service }}" data-role="button" ></a>
    {% endfor %}
    <div data-role="terms" ></div>
</i:external-login>

{# custom appearance for a specific service, default for the rest #}
<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" ></a>
        {% else %}
            <a href="{{ service }}" data-role="button" ></a>
        {% endif %}
    {% endfor %}
    <div data-role="terms" ></div>
</i:external-login>
```

## Password reset

Form for entering a new password. The link to this form comes from an email (see password reset request).
The form has automatic HTML5 validation. When the jquery-validation plugin is enabled, it automatically binds to the form.

```twig
{# shorthand notation #}
<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>

{# separate label notation #}
<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>
```

```html
<!-- output - subject to change! -->
<form action="/_password-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

Form for entering an email address to send a password reset link. The form has automatic HTML5 validation.
When the jquery-validation plugin is enabled, it automatically binds to the form.

```twig
{# shorthand notation #}
<i:password-reset-request>
    <input data-role="email" data-label="Váš email">
    <button data-role="submit">Resetovat heslo</button>
</i:password-reset-request>

{# separate label notation #}
<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>
```

```html
<!-- output - subject to change! -->
<form action="/_password-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>
```

## Signup

Complete registration form.

**Form fields for user-signup**

| data-role | Required | Description |
|---|---|---|
| **email** | **yes** | login email address |
| **password** | **yes** | password |
| **password\_again** | **yes** | password confirmation |
| phone | *no* | phone number |
| first\_name | *no* | first name |
| last\_name | *no* | last name |
| company | *no* | company name |
| cin | *no* | company identification number (CIN) |
| vatid | *no* | VAT identification number |
| street | *no* | delivery street and house number |
| city | *no* | delivery city |
| zip | *no* | delivery postal code |
| region | *no* | delivery region (state, province) |
| country | *no* | delivery country |
| billing\_phone | *no* | billing phone number |
| billing\_first\_name | *no* | billing first name |
| billing\_last\_name | *no* | billing last name |
| billing\_company | *no* | billing company name |
| billing\_cin | *no* | billing CIN |
| billing\_vatid | *no* | billing VAT ID |
| billing\_street | *no* | billing street and house number |
| billing\_city | *no* | billing city |
| billing\_zip | *no* | billing postal code |
| billing\_region | *no* | billing region (state, province) |
| billing\_country | *no* | billing country |
| newsletter | *no* | subscribe to newsletter |

* When **use-billing** is used, fields wrapped in **billing-fields** are automatically hidden.
* When the *jQuery-validation* plugin is active, it automatically binds to the form.
* Values (previously filled in or from the user profile) are populated automatically.
* The country list is based on configuration and the default selection is determined by GeoIP.

```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ě" ></select>
    </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" is only used together with "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ě" ></select>
        </div>
    </fieldset>

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

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

### Hiding company fields

By adding a checkbox, company fields can be automatically hidden -- no additional JavaScript is needed.

If *use-company* is placed inside the *delivery* or *billing* fieldset, it applies only to that address's fields. If placed outside, it applies to both at once.

*company-fields* can be used multiple times within a single fieldset -- for example, on table rows.

```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>
```