timetracking/httpdocs/templates/account/index.html.twig

{# templates/account/index.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}
    {% if tab == 'account' %}Account{% else %}Mein Benutzer{% endif %}
{% endblock %}

{% block body %}

    <script>
        window.ACCOUNT = {
            tab:         '{{ tab }}',
            isSuperAdmin: {{ isSuperAdmin ? 'true' : 'false' }},
            theme:        '{{ user.theme|default('standard') }}',
        };
    </script>

    <div class="account-page">

        <div class="account-header">
            <h1 class="account-header__title">
                {% if tab == 'account' %}Account{% else %}Mein Benutzer{% endif %}
            </h1>

            {% if isAdmin %}
                <nav class="account-tabs">
                    <a href="{{ path('account_index', {tab: 'account'}) }}"
                       class="account-tab{% if tab == 'account' %} account-tab--active{% endif %}">
                        Account
                    </a>
                    <a href="{{ path('account_index', {tab: 'user'}) }}"
                       class="account-tab{% if tab == 'user' %} account-tab--active{% endif %}">
                        Mein Benutzer
                    </a>
                </nav>
            {% endif %}
        </div>

        <div class="account-content">
            <div class="account-card">

                {# ── Account-Tab (nur Admin) ────────────────────────────────────────── #}
                {% if tab == 'account' and isAdmin %}

                    <div class="account-form__grid" id="account-form">

                        <label class="account-form__label" for="account-name">Firmenname</label>
                        <div class="account-form__field">
                            <input type="text" id="account-name" class="input"
                                   value="{{ account.name|e('html_attr') }}" />
                            <span class="account-form__hint">
                                Subdomain: <strong>{{ account.slug }}.{{ app.request.host|split('.')|slice(1)|join('.') }}</strong> — ändert sich nicht.
                            </span>
                        </div>

                        <label class="account-form__label" for="account-interval">Zeitintervall</label>
                        <div class="account-form__field">
                            <select id="account-interval" class="select">
                                {% for value, label in intervalOptions %}
                                    <option value="{{ value }}"{% if account.trackingInterval == value %} selected{% endif %}>
                                        {{ label }}
                                    </option>
                                {% endfor %}
                            </select>
                            <span class="account-form__hint">Auf welche Einheit werden erfasste Zeiten aufgerundet.</span>
                        </div>

                        {% if isSuperAdmin %}
                        <label class="account-form__label" for="account-color">Hauptfarbe</label>
                        <div class="account-form__field">
                            <div class="account-color-field">
                                <input type="color" id="account-color-picker"
                                       value="{{ account.primaryColor ?? '#3a7bbf' }}"
                                       class="account-color-field__swatch" />
                                <input type="text" id="account-color"
                                       value="{{ account.primaryColor ?? '#3a7bbf' }}"
                                       class="input account-color-field__hex"
                                       maxlength="7" placeholder="#3a7bbf" autocomplete="off" />
                            </div>
                            <span class="account-form__hint">Hex-Farbe für das Standard-Theme aller Benutzer. Standard: #3a7bbf</span>
                        </div>
                        {% endif %}

                        <div class="account-form__actions">
                            <button type="button" class="btn btn-primary" id="btn-account-save">Sichern</button>
                            <a href="{{ path('account_index', {tab: 'account'}) }}" class="btn btn-secondary">Abbrechen</a>
                        </div>

                    </div>

                    {# ── Benutzer-Tab ──────────────────────────────────────────────────── #}
                {% else %}

                    <div class="account-form__grid" id="user-form">

                        <label class="account-form__label" for="user-firstname">Vorname</label>
                        <div class="account-form__field">
                            <input type="text" id="user-firstname" class="input"
                                   value="{{ user.firstName|e('html_attr') }}" />
                        </div>

                        <label class="account-form__label" for="user-lastname">Nachname</label>
                        <div class="account-form__field">
                            <input type="text" id="user-lastname" class="input"
                                   value="{{ user.lastName|e('html_attr') }}" />
                        </div>

                        <label class="account-form__label" for="user-email">E-Mail</label>
                        <div class="account-form__field">
                            <input type="email" id="user-email" class="input"
                                   value="{{ user.email|e('html_attr') }}" />
                        </div>

                        <label class="account-form__label">Passwort</label>
                        <div class="account-form__field">
                            <a href="#" class="account-form__link" id="btn-pw-toggle">ändern</a>
                        </div>

                        <div class="account-form__pw-section" id="pw-section" hidden>

                            <label class="account-form__label" for="user-pw-current">Aktuelles Passwort</label>
                            <div class="account-form__field">
                                <input type="password" id="user-pw-current" class="input" autocomplete="current-password" />
                            </div>

                            <label class="account-form__label" for="user-pw-new">Neues Passwort</label>
                            <div class="account-form__field">
                                <input type="password" id="user-pw-new" class="input" autocomplete="new-password" minlength="8" />
                            </div>

                            <label class="account-form__label" for="user-pw-repeat">Wiederholen</label>
                            <div class="account-form__field">
                                <input type="password" id="user-pw-repeat" class="input" autocomplete="new-password" />
                            </div>

                        </div>

                        <div class="account-form__actions">
                            <button type="button" class="btn btn-primary" id="btn-user-save">Sichern</button>
                            <a href="{{ path('account_index', {tab: 'user'}) }}" class="btn btn-secondary">Abbrechen</a>
                        </div>

                    </div>

                    {# ── Darstellung ───────────────────────────────────────────────────── #}
                    <div class="account-form__grid account-form__grid--appearance" id="appearance-form">

                        <div class="account-form__divider-row">
                            <hr class="account-form__divider">
                        </div>

                        <label class="account-form__label">Darstellung</label>
                        <div class="account-form__field">
                            <div class="theme-picker" id="theme-picker">
                                <label class="theme-option{% if user.theme|default('standard') == 'standard' %} theme-option--active{% endif %}" data-theme="standard">
                                    <input type="radio" name="theme" value="standard"{% if user.theme|default('standard') == 'standard' %} checked{% endif %}>
                                    <span class="theme-option__label">Standard</span>
                                    <span class="theme-option__desc">Volle Navigation, alle Felder sichtbar</span>
                                </label>
                                <label class="theme-option{% if user.theme|default('standard') == 'minimal' %} theme-option--active{% endif %}" data-theme="minimal">
                                    <input type="radio" name="theme" value="minimal"{% if user.theme|default('standard') == 'minimal' %} checked{% endif %}>
                                    <span class="theme-option__label">Minimal</span>
                                    <span class="theme-option__desc">Ablenkungsfreie Ansicht, Hamburger-Menü</span>
                                </label>
                            </div>
                        </div>

                    </div>

                {% endif %}

            </div>

            {# ── Besitzer des Accounts (nur Admin, Account-Tab) ─────────────────── #}
            {% if tab == 'account' and isAdmin %}
                <div class="account-card account-card--owner">
                    <div class="account-form__grid">

                        <label class="account-form__label" for="superadmin-select">Besitzer des Accounts</label>
                        <div class="account-form__field">
                            <select id="superadmin-select" class="select"
                                    {% if superAdminUserId != user.id %}disabled{% endif %}>
                                {% for admin in adminUsers %}
                                    <option value="{{ admin.id }}"{% if admin.id == superAdminUserId %} selected{% endif %}>
                                        {{ admin.name }}
                                    </option>
                                {% endfor %}
                            </select>
                            <p class="account-form__hint account-form__hint--owner">
                                Der Besitzer des Accounts ist für die Verwaltung der Zahlungsdaten zuständig.
                                Nur er kann den Account kündigen.
                            </p>
                        </div>

                    </div>
                </div>
            {% endif %}

        </div>

    </div>

    <div class="account-toast" id="account-toast"></div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('account') }}
{% endblock %}