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

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

{% block title %}
    {% if tab == 'import' %}{{ 'app.import.tab'|trans }}{% elseif tab == 'account' %}{{ 'app.account.page_title_account'|trans }}{% else %}{{ 'app.account.page_title_user'|trans }}{% endif %}
{% endblock %}

{% block body %}

    <script>
        window.ACCOUNT = {
            tab:         '{{ tab }}',
            isSuperAdmin: {{ isSuperAdmin ? 'true' : 'false' }},
            theme:        '{{ user.theme|default('standard') }}',
            i18n: {
                invalidHex:       {{ 'app.account.invalid_hex'|trans|json_encode|raw }},
                saved:            {{ 'app.account.saved'|trans|json_encode|raw }},
                savedReloading:   {{ 'app.account.saved_reloading'|trans|json_encode|raw }},
                ownerChanged:     {{ 'app.account.owner_changed'|trans|json_encode|raw }},
                ownerConfirm:     {{ 'app.account.owner_confirm'|trans|json_encode|raw }},
                themeChanged:     {{ 'app.account.theme_changed'|trans|json_encode|raw }},
                passwordMismatch: {{ 'app.account.password_mismatch'|trans|json_encode|raw }},
                changeLabel:      {{ 'app.account.change_label'|trans|json_encode|raw }},
                cancelLabel:      {{ 'app.account.cancel_label'|trans|json_encode|raw }},
                errorGeneric:     {{ 'app.account.error_generic'|trans|json_encode|raw }},
                importAnalyze:       {{ 'app.import.btn_analyze'|trans|json_encode|raw }},
                importAnalyzing:     {{ 'app.import.btn_analyzing'|trans|json_encode|raw }},
                importExecute:       {{ 'app.import.btn_execute'|trans|json_encode|raw }},
                importExecuting:     {{ 'app.import.btn_executing'|trans|json_encode|raw }},
                importSuccess:       {{ 'app.import.success'|trans|json_encode|raw }},
                importConfirm:       {{ 'app.import.confirm'|trans|json_encode|raw }},
                importErrorNoFile:   {{ 'app.import.error_no_file'|trans|json_encode|raw }},
                importLabelClients:  {{ 'app.import.label_clients'|trans|json_encode|raw }},
                importLabelProjects: {{ 'app.import.label_projects'|trans|json_encode|raw }},
                importLabelServices: {{ 'app.import.label_services'|trans|json_encode|raw }},
                importLabelEntries:  {{ 'app.import.label_entries'|trans|json_encode|raw }},
                importLabelUsers:    {{ 'app.import.label_users'|trans|json_encode|raw }},
                importLabelDateRange: {{ 'app.import.label_date_range'|trans|json_encode|raw }},
                importLabelWarnings: {{ 'app.import.label_warnings'|trans|json_encode|raw }},
                importUserMatched:   {{ 'app.import.user_matched'|trans|json_encode|raw }},
                importUserFallback:  {{ 'app.import.user_fallback'|trans|json_encode|raw }},
                importNewLabel:      {{ 'app.import.new_label'|trans|json_encode|raw }},
                importExistingLabel: {{ 'app.import.existing_label'|trans|json_encode|raw }},
                importResultClients: {{ 'app.import.result_clients'|trans|json_encode|raw }},
                importResultProjects: {{ 'app.import.result_projects'|trans|json_encode|raw }},
                importResultServices: {{ 'app.import.result_services'|trans|json_encode|raw }},
                importResultEntries: {{ 'app.import.result_entries'|trans|json_encode|raw }},
                importResultUsers:   {{ 'app.import.result_users'|trans|json_encode|raw }},
                importUserAssignMe:  {{ 'app.import.user_assign_me'|trans|json_encode|raw }},
                importUserCreate:    {{ 'app.import.user_create'|trans|json_encode|raw }},
            },
        };
    </script>

    <div class="account-page">

        <div class="account-header">
            <h1 class="account-header__title">
                {% if tab == 'import' %}{{ 'app.import.tab'|trans }}{% elseif tab == 'account' %}{{ 'app.account.page_title_account'|trans }}{% else %}{{ 'app.account.page_title_user'|trans }}{% 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 %}">
                        {{ 'app.account.tab_account'|trans }}
                    </a>
                    <a href="{{ path('account_index', {tab: 'user'}) }}"
                       class="account-tab{% if tab == 'user' %} account-tab--active{% endif %}">
                        {{ 'app.account.tab_user'|trans }}
                    </a>
                    <a href="{{ path('account_index', {tab: 'import'}) }}"
                       class="account-tab{% if tab == 'import' %} account-tab--active{% endif %}">
                        {{ 'app.import.tab'|trans }}
                    </a>
                </nav>
            {% endif %}
        </div>

        <div class="account-content">

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

                <div class="account-card">
                    <h2 class="import-section__title">{{ 'app.import.title_mite'|trans }}</h2>
                    <p class="import-section__desc">{{ 'app.import.desc_mite'|trans }}</p>

                    <div class="import-upload" id="import-upload">
                        <label class="import-upload__area" id="import-drop-area">
                            <input type="file" id="import-file" accept=".xml" hidden />
                            <span class="import-upload__icon">
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                    <polyline points="17 8 12 3 7 8"/>
                                    <line x1="12" y1="3" x2="12" y2="15"/>
                                </svg>
                            </span>
                            <span class="import-upload__text">{{ 'app.import.upload_text'|trans }}</span>
                            <span class="import-upload__hint">{{ 'app.import.upload_hint'|trans }}</span>
                        </label>
                        <div class="import-upload__file-info" id="import-file-info" hidden>
                            <span id="import-file-name"></span>
                            <button type="button" class="import-upload__remove" id="import-file-remove">&times;</button>
                        </div>
                    </div>

                    <div class="import-actions" id="import-actions">
                        <button type="button" class="btn btn-primary" id="btn-import-analyze" disabled>
                            {{ 'app.import.btn_analyze'|trans }}
                        </button>
                    </div>
                </div>

                <div class="account-card" id="import-preview" hidden>
                    <h2 class="import-section__title">{{ 'app.import.title_preview'|trans }}</h2>
                    <div id="import-preview-content"></div>
                    <div class="import-actions import-actions--preview">
                        <button type="button" class="btn btn-primary" id="btn-import-execute">
                            {{ 'app.import.btn_execute'|trans }}
                        </button>
                        <button type="button" class="btn btn-secondary" id="btn-import-reset">
                            {{ 'app.import.btn_reset'|trans }}
                        </button>
                    </div>
                </div>

                <div class="account-card import-result" id="import-result" hidden>
                    <h2 class="import-section__title">{{ 'app.import.title_result'|trans }}</h2>
                    <div id="import-result-content"></div>
                </div>

            {% else %}

            <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">{{ 'app.account.label_company_name'|trans }}</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">
                                {{ 'app.account.hint_subdomain'|trans({'%subdomain%': account.slug ~ '.' ~ (app.request.host|split('.')|slice(1)|join('.'))}) }}
                            </span>
                        </div>

                        <label class="account-form__label" for="account-interval">{{ 'app.account.label_interval'|trans }}</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">{{ 'app.account.hint_interval'|trans }}</span>
                        </div>

                        {% if isSuperAdmin %}
                        <label class="account-form__label" for="account-color">{{ 'app.account.label_color'|trans }}</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">{{ 'app.account.hint_color'|trans }}</span>
                        </div>
                        {% endif %}

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

                        <label class="account-form__label">{{ 'app.account.label_lexoffice_key'|trans }}</label>
                        <div class="account-form__field">
                            {% if account.hasLexofficeApiKey() %}
                                <span class="account-form__key-status" id="lexoffice-key-status">
                                    <span class="account-form__key-mask">••••••••</span>
                                    <a href="#" class="account-form__link" id="btn-lexoffice-key-change">{{ 'app.account.change_label'|trans }}</a>
                                </span>
                            {% endif %}
                            <input type="text" id="account-lexoffice-key" class="input"
                                   {{ account.hasLexofficeApiKey() ? 'hidden' : '' }}
                                   placeholder="{{ 'app.account.placeholder_lexoffice_key'|trans }}"
                                   autocomplete="off" data-1p-ignore data-lpignore="true" />
                            <span class="account-form__hint">{{ 'app.account.hint_lexoffice_key'|trans }}</span>
                        </div>

                        <div class="account-form__actions">
                            <button type="button" class="btn btn-primary" id="btn-account-save">{{ 'app.entry.btn_save'|trans }}</button>
                            <a href="{{ path('account_index', {tab: 'account'}) }}" class="btn btn-secondary">{{ 'app.entry.btn_cancel'|trans }}</a>
                        </div>

                    </div>

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

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

                        <label class="account-form__label" for="user-firstname">{{ 'app.account.label_first_name'|trans }}</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">{{ 'app.account.label_last_name'|trans }}</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">{{ 'app.account.label_email'|trans }}</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">{{ 'app.account.label_password'|trans }}</label>
                        <div class="account-form__field">
                            <a href="#" class="account-form__link" id="btn-pw-toggle">{{ 'app.account.change_label'|trans }}</a>
                        </div>

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

                            <label class="account-form__label" for="user-pw-current">{{ 'app.account.label_current_password'|trans }}</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">{{ 'app.account.label_new_password'|trans }}</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">{{ 'app.account.label_password_repeat'|trans }}</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">{{ 'app.entry.btn_save'|trans }}</button>
                            <a href="{{ path('account_index', {tab: 'user'}) }}" class="btn btn-secondary">{{ 'app.entry.btn_cancel'|trans }}</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">{{ 'app.account.label_appearance'|trans }}</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">{{ 'app.account.theme_standard'|trans }}</span>
                                    <span class="theme-option__desc">{{ 'app.account.theme_standard_desc'|trans }}</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">{{ 'app.account.theme_minimal'|trans }}</span>
                                    <span class="theme-option__desc">{{ 'app.account.theme_minimal_desc'|trans }}</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">{{ 'app.account.label_owner'|trans }}</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">
                                {{ 'app.account.hint_owner'|trans }}
                            </p>
                        </div>

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

            {% endif %}{# Ende Import-else #}

        </div>

    </div>

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

{% endblock %}

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