templates/website/user/profile/user-profile-edit.html.twig line 1

Open in your IDE?
  1. {% from 'utils.html.twig' import ico, imgUpload, switch %}
  3. {# SETUP - IS BRAZILIAN #}
  4. {% if user.document is null %}
  5.     {% set isBrazilSetup = (getConfig('checkout_default_region') == '1')? false : true %}
  6. {% else %}
  7.     {% set isBrazilSetup = (user.country is not null and user.country.id == enum('AbstractEnum::COUNTRY_BRAZIL')) %}
  8. {% endif %}
  10. <div class="profile-edit">
  11.     <form action="{{ path('userEditInfoProfile') }}" method="POST"
  12.           id="formUserInfo" class="form-geral form-user"
  13.           data-is-brazil-active="{{ isBrazilSetup? '1':'0' }}">
  15.         {# WARN REQUIRED #}
  16.         <p class="warn-required">{{ getLanguage('required_fields', 'util')|raw }}</p>
  18.         {% set confreq = getConfig('complete_registration') ? 'required' : '' %}
  19.         {% set req = confreq ? ' <em>*</em>' :'' %}
  21.         {# PERFIL #}
  22.         <div class="cp-cols">
  23.             <div class="cp cp-4 cp-sm-md-2">
  24.                 <label for="name">{{ getLanguage('name', 'profile') }} <em>*</em></label>
  25.                 <input type="text" id="name" name="name" placeholder="{{ getLanguage('enter_full_name', 'profile') }}" value="{{ user.name }}" required>
  26.             </div>
  27.             <div class="cp cp-4 cp-sm-md-2">
  28.                 <label for="profile-phone">{{ getLanguage('phone', 'profile') }} <em>*</em></label>
  29.                 <input type="text" id="profile-phone" class="intlPhone" name="phone" value="{{ user.phone }}" required>
  30.             </div>
  31.             <div class="cp cp-4 cp-sm-md-2">
  32.                 <label for="email">E-mail</label>
  33.                 <input type="email" id="email" name="email" value="{{ user.email }}" disabled="disabled">
  34.             </div>
  35.             <div class="cp cp-4 cp-sm-md-2">
  36.                 <label for="password">{{ getLanguage('password', 'profile') }} <em>*</em></label>
  37.                 <input type="password" name="password" id="password" value="{{ user.password }}" required>
  38.             </div>
  39.         </div>
  41.         <div class="cp-cols">
  42.             <div class="cp cp-gd">
  43.                 {# DOCUMENT #}
  44.                 <label for="profile-document" data-country="{{ isBrazilSetup? 1:'' }}">
  45.                     {{ getLanguage('document', 'profile') }}
  46.                     <span class="document-type">&nbsp;(CPF&thinsp;/&thinsp;CNPJ)</span>
  47.                     {{ req|raw }}
  48.                 </label>
  49.                 <input type="text" name="document" id="profile-document" value="{{ user.document }}"
  50.                     data-apply-validation="{{ isBrazilSetup? 'true':'false' }}"
  51.                     data-alt-placeholder="{{ getLanguage('type_document', 'profile') }}" placeholder="{{ getLanguage('type_document', 'profile') }}" {{ confreq }}>
  52.             </div>
  53.             <div class="cp cp-gd">
  54.                 <label for="profile-birth-date">{{ getLanguage('birth_date', 'profile') }}{{ req|raw }}</label>
  55.                 <input type="text" id="profile-birth-date" name="birthDate" value="{{ user.birthDate ? user.birthDate|date('Y-m-d') : '' }}" {{ confreq }}>
  56.             </div>
  57.             <div class="cp cp-gd">
  58.                 <label for="user-name">{{ getLanguage('username', 'profile') }}</label>
  59.                 <div class="input-tag">
  60.                     <label for="username">
  61.                         <div class="domainMobile">{{ ico('user') }}</div>
  62.                         <div class="domainDesktop">{{ eadDomain }}/p/</div>
  63.                     </label>
  64.                     <input type="text" name="username" id="username" value="{{ user.username }}" placeholder="username" required>
  65.                 </div>
  66.             </div>
  67.         </div>
  69.         <section class="fotos">
  71.             {# PROFILE AVATAR #}
  72.             <div class="dropfile js--dropfile" data-status="{{ user.photo is empty? 'empty' }}">
  73.                 <div class="label-help">
  74.                     {{ getLanguage('profile_picture', 'profile') }}
  75.                 </div>
  76.                 <div class="avatar js--dropfile-area">
  77.                     {% if user.photo %}
  78.                         {{ imgUpload(user.photo, enum('AbstractEnum::PATH_PROFILES'), 'user-profile-big', user.name, 'js--dropfile-mini') }}
  79.                     {% else %}
  80.                         <img src="" class="js--dropfile-mini" onerror="imgError(this)">
  81.                     {% endif %}
  82.                     <div class="loader">{{ ico('loader-wish') }}</div>
  83.                 </div>
  84.                 <p class="filename js--dropfile-file-label">&hellip;</p>
  85.                     <input type="file" id="photo" name="photo" class="js--dropfile-input" accept="image/*"
  86.                       data-drop-url="{{ path('userEditTheme',   {'id': user.id}) }}"
  87.                     data-delete-url="{{ path('userDeletePhoto', {'id': user.id}) }}">
  88.                 <nav class="actions">
  89.                     <button type="button" class="js--dropfile-btn-edit btn-ed">{{ ico('edit') }}{{ getLanguage('edit', 'profile') }}</button>
  90.                     <button type="button" class="js--dropfile-btn-delete btn-ed btn-delete">{{ ico('delete') }}{{ getLanguage('delete', 'profile') }}</button>
  91.                 </nav>
  92.             </div>
  94.             {# PROFILE COVER #}
  95.             <div class="dropfile js--dropfile" data-status="{{ user.cover is empty? 'empty' }}">
  96.                 <p class="label-help">{{ getLanguage('cover_photo', 'profile') }}</p>
  97.                 <div class="cover js--dropfile-area">
  98.                     {% if user.cover %}
  99.                         {{ imgUpload(user.cover, enum('AbstractEnum::PATH_COVERS_PROFILE'), 'user-profile-cover', user.name, 'js--dropfile-mini') }}
  100.                     {% else %}
  101.                         <img src="" class="js--dropfile-mini" onerror="imgError(this)">
  102.                     {% endif %}
  103.                     <div class="drop-label">
  104.                         {{ ico('upload') }}
  105.                         <p>{{ getLanguage('drop_the_file', 'profile') }}</p>
  106.                     </div>
  107.                     <div class="loader">{{ ico('loader-wish') }}</div>
  108.                 </div>
  109.                 <p class="filename js--dropfile-file-label">&hellip;</p>
  110.                     <input type="file" name="cover" class="js--dropfile-input" accept="image/*"
  111.                       data-drop-url="{{ path('userEditTheme',   {'id': user.id}) }}"
  112.                     data-delete-url="{{ path('userDeleteCover', {'id': user.id}) }}">
  113.                 <nav class="actions actions-dir">
  114.                     <button type="button" class="js--dropfile-btn-edit btn-ed">{{ ico('edit') }}{{ getLanguage('edit', 'profile') }}</button>
  115.                     <button type="button" class="js--dropfile-btn-delete btn-ed btn-delete">{{ ico('delete') }}{{ getLanguage('delete', 'profile') }}</button>
  116.                 </nav>
  117.             </div>
  118.         </section>
  120.         {# BIOGRAPHY #}
  121.         <div class="cp-cols">
  122.             <div class="cp cp-1">
  123.                 <label for="biography">{{ getLanguage('biography', 'profile') }}</label>
  124.                 <input type="text" name="biography" id="biography" value="{{ user.biography }}" placeholder="{{ getLanguage('talk_about_you', 'profile') }}">
  125.                 <p class="count-result-caracteres"><span class="caracteres"></span></p>
  126.             </div>
  127.         </div>
  129.         {# RESUME #}
  130.         <div class="cp-cols">
  131.             <div class="cp cp-1">
  132.                 <label for="resume">{{ getLanguage('resume', 'profile') }}</label>
  133.                 <textarea name="resume" id="resume" placeholder="{{ getLanguage('resume', 'profile') }}" class="js--editor">{{ user.resume }}</textarea>
  134.                 <p class="count-result-caracteres"><span class="caracteres"></span></p>
  135.             </div>
  136.         </div>
  138.         {# ADDRESS #}
  139.         <h3>{{ getLanguage('address', 'profile') }}</h3>
  140.         <div class="cp-cols">
  141.             {# IS BRAZILIAN #}
  142.             <div class="cp cp-pq">
  143.                 <label for="profile-country">{{ getLanguage('am_brazilian', 'util') }}</label>
  144.                 {{ switch({
  145.                     id: 'profile-country',
  146.                     name: 'country',
  147.                     checked: isBrazilSetup,
  148.                     attribs: 'class="isBrazil_userProfile"',
  149.                 })}}
  150.             </div>
  152.             {# ZIP CODE #}
  153.             <div class="cp cp-4 cp-sm-md-2">
  154.                 <label for="profile-zipCode">{{ getLanguage('zipcode', 'profile') }}{{ req|raw }}</label>
  155.                 <input type="text" id="profile-zipCode" name="zipCode" placeholder="{{ getLanguage('enter_zip_code', 'profile') }}" data-apply-search="true" value="{{ user.zipCode }}" {{ confreq }}>
  156.             </div>
  158.             {# STATE #}
  159.             <div class="cp cp-4 cp-sm-md-2" data-show-brazil>
  160.                 <label for="profile-state">{{ getLanguage('state', 'profile') }}{{ req|raw }}</label>
  161.                 <div class="select-wrap">
  162.                     <select id="profile-state"
  163.                         name="state"
  164.                         class="custom-select custom-select--search"
  165.                         request="{{ path('stateList') }}" 
  166.                         save="{{ user.state ? user.state.id }}"
  167.                         {{ confreq }}>
  168.                     </select>
  169.                     <i class="loader">{{ ico('loader-wish') }}</i>
  170.                 </div>
  171.             </div>
  173.             {# CITY #}
  174.             <div class="cp cp-4 cp-sm-md-2" data-show-brazil>
  175.                 <label for="profile-city">{{ getLanguage('city', 'profile') }}{{ req|raw }}</label>
  176.                 <div class="select-wrap">
  177.                     <select id="profile-city"
  178.                         name="city" 
  179.                         class="custom-select custom-select--search"
  180.                         request="{{ path('cityList') }}" 
  181.                         save="{{ user.city ? user.city.id }}"
  182.                         {{ confreq }}>
  183.                     </select>
  184.                     <i class="loader">{{ ico('loader-wish') }}</i>
  185.                 </div>
  186.             </div>
  188.             {# ADDRESS #}
  189.             <div class="cp cp-4 cp-sm-md-2">
  190.                 <label for="profile-address">{{ getLanguage('address', 'profile') }}{{ req|raw }}</label>
  191.                 <input type="text" id="profile-address" name="address" placeholder="{{ getLanguage('type_your_address', 'profile') }}" value="{{ user.address }}" {{ confreq }}>
  192.             </div>
  194.             {# NUMBER #}
  195.             <div class="cp cp-4 cp-sm-md-2">
  196.                 <label for="profile-addressNumber">{{ getLanguage('number', 'profile') }}<span data-show-brazil>{{ req|raw }}</span></label>
  197.                 <input type="text" id="profile-addressNumber" name="addressNumber" placeholder="{{ getLanguage('type_your_number', 'profile') }}" value="{{ user.addressNumber }}" {{ confreq }}>
  198.             </div>
  200.             {# COMPLEMENT #}
  201.             <div class="cp cp-4 cp-sm-md-2">
  202.                 <label for="profile-addressComplement">{{ getLanguage('complement', 'profile') }}</label>
  203.                 <input type="text" id="profile-addressComplement" name="addressComplement" placeholder="{{ getLanguage('type_your_complement', 'profile') }}" value="{{ user.addressComplement }}">
  204.             </div>
  206.             {# NEIGHBORHOOD #}
  207.             <div class="cp cp-4 cp-sm-md-2">
  208.                 <label for="profile-addressNeighborhood">{{ getLanguage('district', 'profile') }}{{ req|raw }}</label>
  209.                 <input type="text" id="profile-addressNeighborhood" name="addressNeighborhood" placeholder="{{ getLanguage('enter_district', 'profile') }}" value="{{ user.addressNeighborhood }}" {{ confreq }}>
  210.             </div>
  211.         </div>
  213.         {# DADOS COMPLEMENTARES #}
  214.         {% if fields|length > 0 %}
  215.             <h3>{{ getLanguage('additional_data', 'profile') }}</h3>
  216.             <div class="cp-cols">
  217.                 {% include 'website/user/profile/user-custom-form.html.twig' %}
  218.             </div>
  219.         {% endif %}
  221.         {# CONTATO #}
  222.         <h3>{{ getLanguage('contacts', 'profile') }}</h3>
  223.         <div class="cp-cols">
  225.             <div class="cp cp-3 cp-sm-1 cp-md-2">
  226.                 <label for="linkedin">LinkedIn</label>
  227.                 <div class="input-tag">
  228.                     <label for="linkedin">
  229.                         <div class="icon">
  230.                             {{ ico('linkedin') }}
  231.                         </div>
  232.                     </label>
  233.                     <input type="text" name="linkedin" id="linkedin" value="{{ user.linkedin }}">
  234.                 </div>
  235.             </div>
  237.             <div class="cp cp-3 cp-sm-1 cp-md-2">
  238.                 <label for="website">{{ getLanguage('website_or_portfolio', 'profile') }}</label>
  239.                 <div class="input-tag">
  240.                     <label for="website">
  241.                         <div class="icon">
  242.                             {{ ico('globe') }}
  243.                         </div>
  244.                     </label>
  245.                     <input type="text" name="website" id="website" value="{{ user.website }}" >
  246.                 </div>
  247.             </div>
  249.             <div class="cp cp-3 cp-sm-1 cp-md-2">
  250.                 <label for="facebook">Facebook</label>
  251.                 <div class="input-tag">
  252.                     <label for="facebook">
  253.                         <div class="icon">
  254.                             {{ ico('facebook') }}
  255.                         </div>
  256.                     </label>
  257.                     <input type="text" name="facebook" id="facebook" value="{{ user.facebook }}">
  258.                 </div>
  259.             </div>
  261.             <div class="cp cp-3 cp-sm-1 cp-md-2">
  262.                 <label for="twitter">Twitter</label>
  263.                 <div class="input-tag">
  264.                     <label for="twitter">
  265.                         <div class="icon">
  266.                             {{ ico('twitter') }}
  267.                         </div>
  268.                     </label>
  269.                     <input type="text" name="twitter" id="twitter" value="{{ user.twitter }}">
  270.                 </div>
  271.             </div>
  273.             <div class="cp cp-3 cp-sm-1 cp-md-2">
  274.                 <label for="instagram">Instagram</label>
  275.                 <div class="input-tag">
  276.                     <label for="instagram">
  277.                         <div class="icon">
  278.                             {{ ico('instagram') }}
  279.                         </div>
  280.                     </label>
  281.                     <input type="text" name="instagram" id="instagram" value="{{ user.instagram }}">
  282.                 </div>
  283.             </div>
  285.             <div class="cp cp-3 cp-sm-1 cp-md-2">
  286.                 <label for="youtube">Youtube</label>
  287.                 <div class="input-tag">
  288.                     <label for="youtube">
  289.                         <div class="icon">
  290.                             {{ ico('youtube') }}
  291.                         </div>
  292.                     </label>
  293.                     <input type="text" name="youtube" id="youtube" value="{{ user.youtube }}">
  294.                 </div>
  295.             </div>
  297.             <div class="cp cp-3 cp-sm-1 cp-md-2">
  298.                 <label for="tiktok">Tiktok</label>
  299.                 <div class="input-tag">
  300.                     <label for="tiktok">
  301.                         <div class="icon">
  302.                             {{ ico('tiktok') }}
  303.                         </div>
  304.                     </label>
  305.                     <input type="text" name="tiktok" id="tiktok" value="{{ user.tiktok }}">
  306.                 </div>
  307.             </div>
  308.         </div>
  310.         <input type="hidden" name="customField" value="{{ user.customField }}">
  312.         <nav class="actions-confirm">
  313.             <a href="{{ path('userProfilePublic', { username: user.username }) }}" class="btn-visualizar-peq">{{ ico('eye') }}&nbsp;{{ getLanguage('view_profile', 'profile') }}</a>
  314.             <button type="button" id="btnUserInfo" class="btn-continuar-peq btn-load">
  315.                 <span>{{ ico('check-circle') }}&nbsp;&nbsp;{{ getLanguage('save', 'profile') }}</span>
  316.                 <span>{{ getLanguage('wait', 'util') }}&thinsp;&hellip;&ensp;<i class="loader">{{ ico('loader-wish') }}</i></span>
  317.             </button>
  318.         </nav>
  319.     </form>
  320. </div>