src/MyBundle/Resources/views/Modules/auth.html.twig line 1

Open in your IDE?
  2. <link rel="stylesheet" type="text/css" href="{{ asset('bundles/my/css/auth.css') }}">
  3. {% include '@My/preloader-css.html.twig' %}
  4. {#popup enter cabinet#}
  6. <noindex>
  7.     {# Авторизація #}
  8.     <div class="modal-fw log-reg-modal" id="enterModal" v-show="showEnterModal" @click.self="closeEnterModal">
  9.         <div class="" role="document" id="auth-form">
  10.         <div class="modal-content" v-if="isInit">
  11.             <div class="modal-header w-100">
  12.                 <div class="enter_modal-title w-100 text-center">
  13.                     {% set referer = app.request.getSchemeAndHttpHost() %}
  14.                     {% if referer == 'https://insurance.vidi.ua' %}
  15.                         <div class="btn-group-slider">
  16.                             <a class="btn btn-primary btn-lg btn-red" style='font-size: 11px' href="/ua/">Повернутися на сайт ВІДІ СТРАХУВАННЯ</a>
  17.                         </div>
  18.                     {% endif %}
  19.                     <svg width="34" height="33" viewbox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
  20.                         <path d="M33 32C33 27.7565 31.3143 23.6869 28.3137 20.6863C25.3131 17.6857 21.2435 16 17 16C12.7565 16 8.68688 17.6857 5.68629 20.6863C2.68571 23.6869 1 27.7565 1 32" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
  21.                         <circle cx="17" cy="8" r="7" stroke="#333333" stroke-width="2"/>
  22.                     </svg>
  24.                 </div>
  25.                 {% set referer = app.request.getSchemeAndHttpHost() %}
  26.                 {% if referer == 'https://insurance.vidi.ua' %}
  27.                     <div class="modal-title" id="enterModalLabel" v-if="loginMode">{{ 'auth.enter_cab_insurance'|trans({},'loyality') }}
  29.                     </div>
  31.                 {% else %}
  32.                     <div class="modal-title" id="enterModalLabel" v-if="loginMode">{{ 'auth.enter_cab'|trans({},'loyality') }}</div>
  33.                 {% endif %}
  34.                 <div class="modal-title" id="enterModalLabel" v-if="registerMode">{{ 'auth.registration'|trans({},'loyality') }}</div>
  35.                 <button type="button" class="close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close" @click="resetForm">
  36.                     <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  37.                         <path d="M17.0001 1.00001L1.00014 17M17 17L1 1" stroke="#333333" stroke-linecap="round"/>
  38.                     </svg>
  39.                 </button>
  40.             </div>
  41.             <div class="modal-body row row-form justify-content-center">
  42.                 <div class="col-sm-9 col-md-7 col-lg-5 col-xl-3">
  44.                     {########################}
  45.                     {###  Вход в кабинет  ###}
  46.                     {########################}
  47.                         <div v-if="loginMode"> <div class="form-group">
  48.                             <p style="color: forestgreen" v-show="isRegisterSecondStep">
  49.                                 <svg class="mr-1" xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewbox="0 0 14 10" fill="none">
  50.                                     <path d="M1 3.45168L4.84199 8.67752M13 1L5.15801 9" stroke="#4CB30F" stroke-width="2" stroke-linecap="round"/>
  51.                                 </svg>
  52.                                 Вас успішно зареєстровано на сайті.
  53.                             </p>
  54.                             <p v-show="!confirmPhone && !brokenPhoneMode">{{ 'auth.info'|trans({},'loyality') }}</p>
  55.                             <p v-show="!confirmPhone && brokenPhoneMode" class="text-center">{{ 'auth.broken_phone_info'|trans({},'loyality')|raw }}</p>
  56.                             <p v-show="!confirmPhone && brokenEmailMode" class="text-center">{{ 'auth.broken_email_info'|trans({},'loyality')|raw }}</p>
  57.                             <p v-show="confirmPhone" id="loginPhoneInfo"></p>
  58.                         </div>
  60.                         <div id="loginOther" class="invalid-feedback" v-if="!brokenPhoneMode"></div>
  62.                         <div class="form-group" v-show="!confirmPhone && !brokenPhoneMode && !brokenEmailMode">
  63.                             <label for="loginEmail">{{ 'auth.email_or_phone'|trans({},'loyality') }}</label>
  64.                             <input class="form-control" @change="changeEventValidateLogin" v-model="login" type="text" id="memail" name="email">
  65.                             <div id="loginEmail" class="invalid-feedback"></div>
  66.                         </div>
  67.                         <div class="form-group" v-show="!confirmPhone && !brokenPhoneMode && !brokenEmailMode && showPasswordInputForAuthByCode">
  68.                             <label for="loginPassword">{{ 'auth.password'|trans({}, 'insurance') }}</label>
  69.                             <div class="form-inline d-flex justify-content-between">
  70.                                 <input @change="changeEventValidatePassword" v-if="!showPassword" class="form-control" style="width: 90%!important;" v-model="loginPassword" type="password" id="password" name="password">
  71.                                 <input @change="changeEventValidatePassword" v-else class="form-control" style="width: 90%!important;" v-model="loginPassword" type="text" id="password" name="password">
  72.                                 <a class="register-info-btn" style="cursor: pointer" @click="showPassword=!showPassword">
  73.                                     <svg v-if="showPassword" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="25px" viewbox="0 0 497.25 497.25" style="enable-background:new 0 0 497.25 497.25;" xml:space="preserve">
  74.                                         <g>
  75.                                             <g>
  76.                                                 <circle cx="248.625" cy="248.625" r="19.125" fill="currentColor"/>
  77.                                                 <path d="M248.625,172.125c-42.075,0-76.5,34.425-76.5,76.5s34.425,76.5,76.5,76.5s76.5-34.425,76.5-76.5
  78.                                                                                                             S290.7,172.125,248.625,172.125z M248.625,306c-32.513,0-57.375-24.862-57.375-57.375s24.862-57.375,57.375-57.375
  79.                                                                                                             S306,216.112,306,248.625S281.138,306,248.625,306z" fill="currentColor"/>
  80.                                                 <path d="M248.625,114.75C76.5,114.75,0,248.625,0,248.625S76.5,382.5,248.625,382.5S497.25,248.625,497.25,248.625
  81.                                                                                                             S420.75,114.75,248.625,114.75z M248.625,363.375c-153,0-225.675-114.75-225.675-114.75s72.675-114.75,225.675-114.75
  82.                                                                                                             S474.3,248.625,474.3,248.625S401.625,363.375,248.625,363.375z" fill="currentColor"/>
  83.                                             </g>
  84.                                         </g>
  85.                                     </svg>
  86.                                     <svg v-else version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="25px" viewbox="0 0 497.301 497.301" style="enable-background:new 0 0 497.301 497.301;" xml:space="preserve">
  87.                                         <g>
  88.                                             <path fill="currentColor" d="M97.5,342.351C30.6,302.15,0,248.65,0,248.65s76.5-133.9,248.6-133.9c24.9,0,47.8,1.9,68.8,7.6l-15.301,15.3
  89.                                                                                                 c-17.199-1.9-34.4-3.8-53.5-3.8c-153,0-225.7,114.8-225.7,114.8s28.7,45.9,88,80.3L97.5,342.351z M172.1,248.65
  90.                                                                                                 c0,5.7,0,11.5,1.9,17.2l17.2-17.2c0-15.3,5.7-28.7,17.2-40.2s26.8-17.2,40.2-17.2l17.201-17.2c-5.701-1.9-11.5-1.9-17.201-1.9
  91.                                                                                                 C206.5,172.15,172.1,206.55,172.1,248.65z M399.699,154.95l-13.398,13.4c59.299,34.4,88,80.3,88,80.3S401.6,363.45,248.6,363.45
  92.                                                                                                 c-19.1,0-36.3-1.899-53.5-3.8l-15.3,15.3c21,5.7,44,7.601,68.9,7.601c172.101,0,248.601-133.9,248.601-133.9
  93.                                                                                                 S466.6,195.15,399.699,154.95z M401.4,76.95L76.9,401.45l18.9,18.9l324.6-324.6L401.4,76.95z M288.801,288.851
  94.                                                                                                 c-11.5,11.5-24.9,17.2-40.201,17.2l-17.2,17.199c5.7,1.9,11.5,1.9,17.2,1.9c42.099,0,76.5-34.4,76.5-76.5c0-5.7,0-11.5-1.9-17.2
  95.                                                                                                 L306,248.65C306,263.95,300.199,277.351,288.801,288.851z"/>
  96.                                         </g>
  97.                                     </svg>
  98.                                 </a>
  99.                             </div>
  100.                             <div id="loginPassword" class="invalid-feedback"></div>
  101.                         </div>
  102.                         <div class="form-group" v-if="code && !brokenPhoneMode">
  103.                             <label for="userCode">Код</label>
  104.                             <input @input="changeEventUserCode" class="form-control" v-model="userCode" type="text" autocomplete="off" id="loginOtp" name="otp" required>
  105.                             <div id="loginOtpError" class="invalid-feedback"></div>
  106.                             <p style="font-size: 11px">{{ 'auth.code_not_send'|trans({}, 'loyality') }}
  107.                                 <a v-on:click.stop.prevent="getCode(1)" href="#">{{ 'auth.resent_code'|trans({}, 'loyality') }}</a>
  108.                             </p>
  109.                         </div>
  110.                         <a href="#" v-show="!confirmPhone && !brokenPhoneMode && !brokenEmailMode && showPasswordInputForAuthByCode" class="forgot-pass" id="restoreBtn" data-dismiss="modal" data-toggle="modal" data-target="#recoverPassModal">
  111.                             {{ 'auth.forgot_pass'|trans({}, 'loyality') }}
  112.                         </a>
  113.                         <div class="log-reg-btn-wrap position-relative">
  114.                             <div id="preloader-auth" v-show="stepPreloader">
  115.                                 <div id="fountainG">
  116.                                     <div id="fountainG_1" class="fountainG"></div>
  117.                                     <div id="fountainG_2" class="fountainG"></div>
  118.                                     <div id="fountainG_3" class="fountainG"></div>
  119.                                     <div id="fountainG_4" class="fountainG"></div>
  120.                                     <div id="fountainG_5" class="fountainG"></div>
  121.                                     <div id="fountainG_6" class="fountainG"></div>
  122.                                     <div id="fountainG_7" class="fountainG"></div>
  123.                                     <div id="fountainG_8" class="fountainG"></div>
  124.                                 </div>
  125.                             </div>
  126.                             <button v-if="!code && !brokenPhoneMode && !brokenEmailMode" type="button" v-on:click.stop.prevent="getCode(0)" class="btn-red">
  127.                                 {{ 'auth.get_code'|trans({},'loyality') }}
  128.                             </button>
  129.                             <button v-if="code && !brokenPhoneMode && !brokenEmailMode" type="button" v-on:click.stop.prevent="loginByCode" class="btn-red">
  130.                                 {{ 'auth.confirm'|trans({},'loyality') }}
  131.                             </button>
  132.                             <button v-if="!code && !brokenPhoneMode && !brokenEmailMode" class="btn-red-transparent" v-on:click.stop.prevent="(registerMode = true) & (loginMode = false)">
  133.                                 {{ 'auth.sign_up'|trans({},'loyality') }}
  134.                             </button>
  135.                             <a v-if="(code || brokenPhoneMode) && !brokenEmailMode" href="#" class="btn-red-transparent" data-dismiss="modal" data-toggle="modal" data-target="#changePhoneModal">
  136.                                 {{ 'change_phone.main_title'|trans({},'loyality') }}
  137.                             </a>
  138.                             <a v-if="!code && brokenEmailMode" href="{{ path('my_update_credentials') }}" class="btn-red-transparent">
  139.                                 {{ 'recovery.update_credentials'|trans({},'loyality') }}
  140.                             </a>
  141.                             <button v-if="brokenPhoneMode || brokenEmailMode" class="btn-red-transparent mt-3" @click="brokenPhoneMode = brokenEmailMode = false">
  142.                                 {{ 'auth.mentioned_pass'|trans({},'loyality') }}
  143.                             </button>
  144.                         </div>
  145.                     </div>
  147.                     {#####################}
  148.                     {###  Регистрация  ###}
  149.                     {#####################}
  150.                         <form v-on:submit.stop.prevent="registerUser" id="registerForm" class="position-relative" action="{{ path('my_register_user') }}" method="post" v-show="registerMode"> <input type="hidden" name="locale" value="{{ app.request.locale }}">
  151.                         <div class="form-group" v-show="!confirmPhone">
  152.                             <label for="regName">{{ 'auth.name'|trans({},'insurance') }}
  153.                                 *</label>
  154.                             <input class="form-control" v-model="regName" type="text" id="name" name="name">
  155.                             <div id="regName" class="invalid-feedback"></div>
  156.                         </div>
  157.                         <div class="form-group" v-show="!confirmPhone">
  158.                             <label for="lname">{{ 'auth.lname'|trans({},'insurance') }}
  159.                                 *</label>
  160.                             <input class="form-control" v-model="regLName" id="lname" type="text" name="lname">
  161.                             <div id="regLName" class="invalid-feedback"></div>
  162.                         </div>
  163.                         <div class="form-group" v-show="!confirmPhone">
  164.                             <label for="mname">{{ 'auth.mname'|trans({},'insurance') }}</label>
  165.                             <input class="form-control" v-model="regMName" type="text" id="mname" name="mname">
  166.                             <div id="regMName" class="invalid-feedback"></div>
  167.                         </div>
  168.                         <div class="form-group" v-show="!confirmPhone">
  169.                             <label for="memail">{{ 'auth.email'|trans({}, 'loyality') }}
  170.                                 *</label>
  171.                             <input class="form-control" v-model="regEmail" type="text" id="memail" name="email">
  172.                             <div id="regEmail" class="invalid-feedback"></div>
  173.                         </div>
  174.                         <div class="form-group position-relative" v-show="!confirmPhone">
  175.                             <label for="regPhone">{{ 'auth.phone'|trans({}, 'loyality') }}
  176.                                 *</label>
  177.                             <input autocomplete="off" @focus="focusEventPhone" @blur="blurEventPhone" class="form-control" data-toggle="tooltip" v-mask="'+38(###)###-##-##'" v-model="regPhone" type="text" name="phone" id="phone-reg" placeholder="+38 (0">
  178.                             <div id="regPhoneError" class="invalid-feedback"></div>
  179.                             <div class="tooltip bs-tooltip-bottom position-absolute d-none" id="phoneRegTooltip" style="z-index: 1; bottom: -80px" role="tooltip">
  180.                                 <div class="arrow"></div>
  181.                                 <div class="tooltip-inner">
  182.                                     {{ 'auth.send_sms'|trans({},'loyality') }}
  183.                                 </div>
  184.                             </div>
  185.                         </div>
  187.                         <div class="form-group position-relative" v-show="!confirmPhone && showPasswordInputForAuthByCode">
  188.                             <label for="password">{{ 'auth.password'|trans({}, 'insurance') }}
  189.                                 *</label>
  190.                             <div class="d-flex justify-content-between position-relative align-items-center">
  191.                                 <input autocomplete="off" @focus="focusEventPassword" @blur="blurEventPassword" data-toggle="tooltip" v-if="!showPassword && showPasswordInputForAuthByCode" class="form-control" style="width: 90%!important;" v-model="regPassword" type="password" id="password" name="password" required>
  192.                                 <input autocomplete="off" @focus="focusEventPassword" @blur="blurEventPassword" data-toggle="tooltip" v-if="showPasswordInputForAuthByCode" class="form-control" style="width: 90%!important;" v-model="regPassword" type="text" id="password" name="password" required>
  193.                                 <a class="register-info-btn" style="cursor: pointer" @click="showPassword=!showPassword">
  194.                                     <svg v-if="showPassword" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="25px" viewbox="0 0 497.25 497.25" style="enable-background:new 0 0 497.25 497.25;" xml:space="preserve">
  195.                                         <g>
  196.                                             <g>
  197.                                                 <circle cx="248.625" cy="248.625" r="19.125" fill="currentColor"/>
  198.                                                 <path d="M248.625,172.125c-42.075,0-76.5,34.425-76.5,76.5s34.425,76.5,76.5,76.5s76.5-34.425,76.5-76.5
  199.                                                                                                             S290.7,172.125,248.625,172.125z M248.625,306c-32.513,0-57.375-24.862-57.375-57.375s24.862-57.375,57.375-57.375
  200.                                                                                                             S306,216.112,306,248.625S281.138,306,248.625,306z" fill="currentColor"/>
  201.                                                 <path d="M248.625,114.75C76.5,114.75,0,248.625,0,248.625S76.5,382.5,248.625,382.5S497.25,248.625,497.25,248.625
  202.                                                                                                             S420.75,114.75,248.625,114.75z M248.625,363.375c-153,0-225.675-114.75-225.675-114.75s72.675-114.75,225.675-114.75
  203.                                                                                                             S474.3,248.625,474.3,248.625S401.625,363.375,248.625,363.375z" fill="currentColor"/>
  204.                                             </g>
  205.                                         </g>
  206.                                     </svg>
  207.                                     <svg v-else version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="25px" viewbox="0 0 497.301 497.301" style="enable-background:new 0 0 497.301 497.301;" xml:space="preserve">
  208.                                         <g>
  209.                                             <path d="M97.5,342.351C30.6,302.15,0,248.65,0,248.65s76.5-133.9,248.6-133.9c24.9,0,47.8,1.9,68.8,7.6l-15.301,15.3
  210.                                                                                                     c-17.199-1.9-34.4-3.8-53.5-3.8c-153,0-225.7,114.8-225.7,114.8s28.7,45.9,88,80.3L97.5,342.351z M172.1,248.65
  211.                                                                                                     c0,5.7,0,11.5,1.9,17.2l17.2-17.2c0-15.3,5.7-28.7,17.2-40.2s26.8-17.2,40.2-17.2l17.201-17.2c-5.701-1.9-11.5-1.9-17.201-1.9
  212.                                                                                                     C206.5,172.15,172.1,206.55,172.1,248.65z M399.699,154.95l-13.398,13.4c59.299,34.4,88,80.3,88,80.3S401.6,363.45,248.6,363.45
  213.                                                                                                     c-19.1,0-36.3-1.899-53.5-3.8l-15.3,15.3c21,5.7,44,7.601,68.9,7.601c172.101,0,248.601-133.9,248.601-133.9
  214.                                                                                                     S466.6,195.15,399.699,154.95z M401.4,76.95L76.9,401.45l18.9,18.9l324.6-324.6L401.4,76.95z M288.801,288.851
  215.                                                                                                     c-11.5,11.5-24.9,17.2-40.201,17.2l-17.2,17.199c5.7,1.9,11.5,1.9,17.2,1.9c42.099,0,76.5-34.4,76.5-76.5c0-5.7,0-11.5-1.9-17.2
  216.                                                                                                     L306,248.65C306,263.95,300.199,277.351,288.801,288.851z" fill="currentColor"/>
  217.                                         </g>
  218.                                     </svg>
  219.                                 </a>
  220.                                 <img v-show="showCheckPasswordIcon" v-if="!validatePasswordCheck" style="visibility: hidden" class="check-password-icon" width="18px;" src="{{ asset('/bundles/my/img/check-icon-error.png') }}" alt="">
  221.                                 <img v-show="showCheckPasswordIcon" v-else class="check-password-icon" width="18px;" data-src="{{ asset('/bundles/my/img/check-icon-success.png') }}" alt="">
  222.                             </div>
  223.                             <div id="regPassword" class="invalid-feedback"></div>
  224.                             <div class="tooltip bs-tooltip-bottom position-absolute d-none" id="passwordRegTooltip" style="z-index: 1;bottom: -122px" role="tooltip">
  225.                                 <div class="arrow"></div>
  226.                                 <div class="tooltip-inner">
  227.                                     {{ 'register.valid_password'|trans({},'loyality') }}
  228.                                 </div>
  229.                             </div>
  230.                         </div>
  232.                         <span class="modal-subtitle confirm-code" v-show="confirmPhone" v-text="confirmCodeSubtitle"></span>
  233.                         <div class="form-group" v-if="confirmPhone">
  234.                             <label for="confirmPhoneCodeF">Код</label>
  235.                             <input @input="changeEventUserCode" class="form-control" v-model="userCode" type="text" id="confirmPhoneCodeF" name="code" autocomplete="off" required>
  236.                             <div id="userCodeError" class="invalid-feedback"></div>
  237.                             <p style="font-size: 11px">{{'auth.code_not_send'|trans({}, 'loyality')}}
  238.                                 <a v-on:click.stop.prevent="registerResendCode" href="#">{{ 'auth.resent_code'|trans({}, 'loyality') }}</a>
  239.                             </p>
  240.                         </div>
  241.                         <div class="form-check" v-if="!confirmPhone">
  242.                             <input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="regUseCabinetConfirmation">
  243.                             <label class="form-check-label check-info-text" for="exampleCheck1">
  244.                                 {{'auth.true_rules'|trans({}, 'loyality')}}
  245.                                 <a href="{{ path('portal_information_rules') }}" target="_blank">
  246.                                     {{'auth.used_cabinet'|trans({}, 'loyality')}}
  247.                                 </a>
  248.                             </label>
  249.                         </div>
  250.                         <div class="align-items-center log-reg-btn-wrap position-relative flex-column align-items-stretch">
  251.                             <div id="preloader-auth" v-show="stepPreloader">
  252.                                 <div id="fountainG">
  253.                                     <div id="fountainG_1" class="fountainG"></div>
  254.                                     <div id="fountainG_2" class="fountainG"></div>
  255.                                     <div id="fountainG_3" class="fountainG"></div>
  256.                                     <div id="fountainG_4" class="fountainG"></div>
  257.                                     <div id="fountainG_5" class="fountainG"></div>
  258.                                     <div id="fountainG_6" class="fountainG"></div>
  259.                                     <div id="fountainG_7" class="fountainG"></div>
  260.                                     <div id="fountainG_8" class="fountainG"></div>
  261.                                 </div>
  262.                             </div>
  263.                             <button type="button" v-on:click.stop.prevent="confirmRegistration" v-if="confirmPhone" class="btn-red">
  264.                                 {{ 'auth.sign_in'|trans({},'loyality') }}
  265.                             </button>
  266.                             <button type="submit" v-else class="btn-red w-100">
  267.                                 {{ 'auth.sign_up'|trans({},'loyality') }}
  268.                             </button>
  269.                             <div class="text-center w-100" v-if="!confirmPhone">
  270.                                 <a href="#" v-on:click.stop.prevent="(registerMode = false) & (loginMode = true)" class="forgot-pass mb-0">{{ 'auth.alredy_reg'|trans({},'loyality') }}</a>
  271.                             </div>
  272.                         </div>
  273.                     </form>
  274.                 </div>
  275.             </div>
  276.         </div>
  277.         </div>
  278.     </div>
  280.     {# popup recover pass #}
  281.     <div class="modal-fw log-reg-modal" id="recoverPassModal" v-show="showRecoverModal" @click.self="closeRecoverModal">
  282.         <div class="" role="document" id="recovery-form">
  283.             <div class="modal-content" v-show="!newPasswordMode" v-if="isInit">
  284.                 <div class="modal-header w-100">
  285.                     <div class="modal-title" id="recoverPassModalLabel">
  286.                         {{ 'auth.recovery_pass'|trans({},'loyality') }}
  287.                     </div>
  288.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="resetForm">
  289.                         <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  290.                             <path d="M17.0001 1.00001L1.00014 17M17 17L1 1" stroke="#333333" stroke-linecap="round"/>
  291.                         </svg>
  292.                     </button>
  293.                 </div>
  294.                 <div class="modal-body row row-form justify-content-center">
  295.                     <div class="col-sm-9 col-md-7 col-lg-5 col-xl-3">
  296.                         <span class="modal-subtitle">
  297.                             {{ 'auth.enter_phone_text'|trans({},'loyality')|raw }}
  298.                         </span>
  299.                         <form id="restoreForm" action="" method="post">
  300.                             <div class="form-group" v-if="!confirmPhone">
  301.                                 <label for="recoveryEmail">
  302.                                     {{ 'auth.email_or_phone'|trans({},'loyality') }}
  303.                                 </label>
  304.                                 <input class="form-control" @change="changeEventValidateLogin" v-model="recoveryLogin" type="text" id="recoveryEmail" name="email">
  305.                                 <div id="recoveryEmailError" class="invalid-feedback"></div>
  306.                             </div>
  308.                             <div class="form-group" v-if="code">
  309.                                 <label for="otp">Код</label>
  310.                                 <input class="form-control" v-model="userCode" type="text" id="loginOtpconfirmPhoneCodeF" name="otp" required>
  311.                                 <div id="recoveryUserCode" class="invalid-feedback"></div>
  312.                                 <p style="font-size: 11px">{{ 'auth.code_not_send'|trans({}, 'loyality') }}
  313.                                     <a v-on:click.stop.prevent="getCode(1)" href="#">
  314.                                         {{ 'auth.resent_code'|trans({}, 'loyality') }}
  315.                                     </a>
  316.                                 </p>
  317.                             </div>
  319.                             <div class="form-group" v-if="code">
  320.                                 <label for="recoveryPassword">{{ 'auth.enter_new_password'|trans({},'loyality') }}</label>
  321.                                 <div class="d-flex justify-content-between position-relative align-items-center">
  322.                                     <input v-if="!showNewPassword && showPasswordInputForAuthByCode" class="form-control" style="width: 90%!important;" v-model="recoveryPassword" type="password" id="recoveryPassword" name="password" required>
  323.                                     <input v-else class="form-control" style="width: 90%!important;" v-model="recoveryPassword" type="text" id="recoveryPassword" name="password" required>
  324.                                     <a class="register-info-btn" style="cursor: pointer" @click="showNewPassword=!showNewPassword">
  325.                                         <svg v-if="showNewPassword" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="25px" viewbox="0 0 497.25 497.25" style="enable-background:new 0 0 497.25 497.25;" xml:space="preserve">
  326.                                             <g>
  327.                                                 <g>
  328.                                                     <circle cx="248.625" cy="248.625" r="19.125" fill="currentColor"/>
  329.                                                     <path d="M248.625,172.125c-42.075,0-76.5,34.425-76.5,76.5s34.425,76.5,76.5,76.5s76.5-34.425,76.5-76.5
  330.                                                                                                                     S290.7,172.125,248.625,172.125z M248.625,306c-32.513,0-57.375-24.862-57.375-57.375s24.862-57.375,57.375-57.375
  331.                                                                                                                     S306,216.112,306,248.625S281.138,306,248.625,306z" fill="currentColor"/>
  332.                                                     <path d="M248.625,114.75C76.5,114.75,0,248.625,0,248.625S76.5,382.5,248.625,382.5S497.25,248.625,497.25,248.625
  333.                                                                                                                     S420.75,114.75,248.625,114.75z M248.625,363.375c-153,0-225.675-114.75-225.675-114.75s72.675-114.75,225.675-114.75
  334.                                                                                                                     S474.3,248.625,474.3,248.625S401.625,363.375,248.625,363.375z" fill="currentColor"/>
  335.                                                 </g>
  336.                                             </g>
  337.                                         </svg>
  338.                                         <svg v-else version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="25px" viewbox="0 0 497.301 497.301" style="enable-background:new 0 0 497.301 497.301;" xml:space="preserve">
  339.                                             <g>
  340.                                                 <path d="M97.5,342.351C30.6,302.15,0,248.65,0,248.65s76.5-133.9,248.6-133.9c24.9,0,47.8,1.9,68.8,7.6l-15.301,15.3
  341.                                                                                                             c-17.199-1.9-34.4-3.8-53.5-3.8c-153,0-225.7,114.8-225.7,114.8s28.7,45.9,88,80.3L97.5,342.351z M172.1,248.65
  342.                                                                                                             c0,5.7,0,11.5,1.9,17.2l17.2-17.2c0-15.3,5.7-28.7,17.2-40.2s26.8-17.2,40.2-17.2l17.201-17.2c-5.701-1.9-11.5-1.9-17.201-1.9
  343.                                                                                                             C206.5,172.15,172.1,206.55,172.1,248.65z M399.699,154.95l-13.398,13.4c59.299,34.4,88,80.3,88,80.3S401.6,363.45,248.6,363.45
  344.                                                                                                             c-19.1,0-36.3-1.899-53.5-3.8l-15.3,15.3c21,5.7,44,7.601,68.9,7.601c172.101,0,248.601-133.9,248.601-133.9
  345.                                                                                                             S466.6,195.15,399.699,154.95z M401.4,76.95L76.9,401.45l18.9,18.9l324.6-324.6L401.4,76.95z M288.801,288.851
  346.                                                                                                             c-11.5,11.5-24.9,17.2-40.201,17.2l-17.2,17.199c5.7,1.9,11.5,1.9,17.2,1.9c42.099,0,76.5-34.4,76.5-76.5c0-5.7,0-11.5-1.9-17.2
  347.                                                                                                             L306,248.65C306,263.95,300.199,277.351,288.801,288.851z" fill="currentColor"/>
  348.                                             </g>
  349.                                         </svg>
  350.                                     </a>
  351.                                 </div>
  352.                                 <div id="recoveryPasswordError" class="invalid-feedback"></div>
  353.                             </div>
  354.                             <span v-if="code" class="register-info-text">{{ 'register.valid_password'|trans({},'loyality') }}</span>
  356.                             <div class="log-reg-btn-wrap position-relative">
  357.                                 <div id="preloader-auth" v-show="stepPreloader">
  358.                                     <div id="fountainG">
  359.                                         <div id="fountainG_1" class="fountainG"></div>
  360.                                         <div id="fountainG_2" class="fountainG"></div>
  361.                                         <div id="fountainG_3" class="fountainG"></div>
  362.                                         <div id="fountainG_4" class="fountainG"></div>
  363.                                         <div id="fountainG_5" class="fountainG"></div>
  364.                                         <div id="fountainG_6" class="fountainG"></div>
  365.                                         <div id="fountainG_7" class="fountainG"></div>
  366.                                         <div id="fountainG_8" class="fountainG"></div>
  367.                                     </div>
  368.                                 </div>
  369.                                 <button v-if="!code" type="button" v-on:click.stop.prevent="getCode(0)" class="btn-red">
  370.                                     {{ 'auth.restore_pass'|trans({},'loyality') }}
  371.                                 </button>
  372.                                 <button v-if="code" type="button" v-on:click.stop.prevent="recoveryConfirmCode" class="btn-red">
  373.                                     {{ 'auth.sign_in'|trans({},'loyality') }}
  374.                                 </button>
  375.                                 <button class="btn-red-transparent" id="cancelRestoreBtn" data-dismiss="modal" data-toggle="modal" data-target="#enterModal">
  376.                                     {{ 'auth.mentioned_pass'|trans({},'loyality') }}
  377.                                 </button>
  378.                             </div>
  379.                         </form>
  380.                     </div>
  381.                 </div>
  382.             </div>
  383.             <div class="modal-content" v-show="newPasswordMode" v-if="isInit">
  384.                 <div class="modal-header w-100">
  385.                     <div class="modal-title" id="updatePassModalLabel">{{ 'auth.recovery_pass'|trans({},'loyality') }}</div>
  386.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="resetForm">
  387.                         <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  388.                             <path d="M17.0001 1.00001L1.00014 17M17 17L1 1" stroke="#333333" stroke-linecap="round"/>
  389.                         </svg>
  390.                     </button>
  391.                 </div>
  392.                 <div class="modal-body row row-form justify-content-center">
  393.                     <div class="col-sm-9 col-md-7 col-lg-5 col-xl-3">
  394.                         <form id="setPasswordForm" action="" method="post">
  395.                             <div class="form-group">
  396.                                 <label for="recoveryPassword">
  397.                                     {{ 'auth.confirm_pass'|trans({},'loyality') }}
  398.                                 </label>
  399.                                 <input type="password" name="recoveryPassword" class="form-control" v-model="recoveryConfirmPassword" id="recoveryConfirmPassword" required="">
  400.                                 <div id="recoveryConfirmPasswordError" class="invalid-feedback"></div>
  401.                             </div>
  402.                             <div class="log-reg-btn-wrap position-relative">
  403.                                 <div id="preloader-auth" v-show="stepPreloader">
  404.                                     <div id="fountainG">
  405.                                         <div id="fountainG_1" class="fountainG"></div>
  406.                                         <div id="fountainG_2" class="fountainG"></div>
  407.                                         <div id="fountainG_3" class="fountainG"></div>
  408.                                         <div id="fountainG_4" class="fountainG"></div>
  409.                                         <div id="fountainG_5" class="fountainG"></div>
  410.                                         <div id="fountainG_6" class="fountainG"></div>
  411.                                         <div id="fountainG_7" class="fountainG"></div>
  412.                                         <div id="fountainG_8" class="fountainG"></div>
  413.                                     </div>
  414.                                 </div>
  415.                                 <button type="submit" v-on:click.stop.prevent="recoverySetPassword" class="btn-red">{{ 'auth.recover_pass'|trans({},'loyality') }}</button>
  416.                             </div>
  417.                         </form>
  418.                     </div>
  419.                 </div>
  420.             </div>
  421.         </div>
  422.     </div>
  424.     {# popup enter sms code #}
  425.     <div class="modal-fw log-reg-modal" id="confirmPhoneModal" v-show="showConfirmModal" @click.self="closeConfirmModal">
  426.         <div class="" role="document">
  427.             <div class="modal-content">
  428.                 <div class="modal-header w-100">
  429.                     <div class="modal-title" id="confirmPhoneModalLabel">{{ 'auth.recovery_pass'|trans({},'loyality') }}</div>
  430.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  431.                         <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  432.                             <path d="M17.0001 1.00001L1.00014 17M17 17L1 1" stroke="#333333" stroke-linecap="round"/>
  433.                         </svg>
  434.                     </button>
  435.                 </div>
  436.                 <div class="modal-body row row-form justify-content-center">
  437.                     <div class="col-sm-9 col-md-7 col-lg-5 col-xl-3">
  438.                         <span class="modal-subtitle">{{ 'auth.enter_code_message'|trans({},'loyality') }}</span>
  439.                         <form id="" action="" method="">
  440.                             <div class="form-group" id="">
  441.                                 <input type="number" name="name" maxlength="6" max="999999" class="form-control" id="confirmCodeInput" placeholder="××××××" required="">
  442.                             </div>
  443.                             <span class="d-block mb-4">{{ 'auth.sms_with_code'|trans({},'loyality') }}<b id="userPhone">+380666666666</b></span>
  444.                             <div class="log-reg-btn-wrap position-relative">
  445.                                 <div id="preloader-auth" v-show="stepPreloader">
  446.                                     <div id="fountainG">
  447.                                         <div id="fountainG_1" class="fountainG"></div>
  448.                                         <div id="fountainG_2" class="fountainG"></div>
  449.                                         <div id="fountainG_3" class="fountainG"></div>
  450.                                         <div id="fountainG_4" class="fountainG"></div>
  451.                                         <div id="fountainG_5" class="fountainG"></div>
  452.                                         <div id="fountainG_6" class="fountainG"></div>
  453.                                         <div id="fountainG_7" class="fountainG"></div>
  454.                                         <div id="fountainG_8" class="fountainG"></div>
  455.                                     </div>
  456.                                 </div>
  457.                                 <button type="submit" id="sendConfirmCode" class="btn-red">{{ 'auth.confirm'|trans({},'loyality') }}</button>
  458.                                 <a href="{{ path('my_resend_sms',{hash: '__hash__'}) }}" class="btn-red-transparent js-resend-sms">{{ 'auth.resubmit'|trans({},'loyality') }}</a>
  459.                             </div>
  460.                         </form>
  461.                     </div>
  462.                 </div>
  463.             </div>
  464.         </div>
  465.     </div>
  467.     {# popup change phone #}
  468.     <div class="modal-fw log-reg-modal" id="changePhoneModal" v-show="showChangeModal" @click.self="closeChangeModal">
  469.         <div class="" role="document" id="change-phone-form">
  470.             {#    Step 1    #}
  471.             <div class="modal-content" v-show="enterEmailAndPasswordMode" v-if="isInit">
  472.                 <div class="modal-header w-100">
  473.                     <div class="modal-title" id="recoverPassModalLabel">
  474.                         {{ 'auth.change_phone_form'|trans({},'loyality') }}
  475.                     </div>
  476.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="resetForm">
  477.                         <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  478.                             <path d="M17.0001 1.00001L1.00014 17M17 17L1 1" stroke="#333333" stroke-linecap="round"/>
  479.                         </svg>
  480.                     </button>
  481.                 </div>
  482.                 <div class="modal-body row row-form justify-content-center">
  483.                     <div class="col-sm-9 col-md-7 col-lg-5 col-xl-3">
  484.                         <span class="modal-subtitle">
  485.                             {{ 'auth.change_phone_description'|trans({},'loyality')|raw }}
  486.                         </span>
  488.                         <div id="changePhoneOtherError" class="invalid-feedback"></div>
  490.                         <form id="restoreForm" action="" method="post">
  492.                             <div class="form-group mb-3">
  493.                                 <label for="changePhoneEmail">
  494.                                     {{ 'auth.email'|trans({},'loyality') }}
  495.                                 </label>
  496.                                 <input class="form-control"
  497.                                        v-model="email"
  498.                                        type="text"
  499.                                        id="changePhoneEmail"
  500.                                        name="changePhoneEmail">
  501.                                 <div id="changePhoneEmailError" class="invalid-feedback"></div>
  502.                             </div>
  504.                             <div class="form-group" v-show="showPasswordInputForChangePhone">
  505.                                 <label for="changePhonePassword">{{ 'auth.enter_password'|trans({},'loyality') }}</label>
  506.                                 <div class="d-flex justify-content-between position-relative align-items-center">
  507.                                     <input v-if="!showPassword" class="form-control" style="width: 90%!important;" v-model="password" type="password" id="changePhonePassword" name="changePhonePassword">
  508.                                     <input v-else class="form-control" style="width: 90%!important;" v-model="password" type="text" id="changePhonePassword" name="changePhonePassword">
  509.                                     <a class="register-info-btn" style="cursor: pointer" @click="showPassword=!showPassword">
  510.                                         <svg v-if="showPassword" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  511.                                              width="25px" height="25px" viewBox="0 0 497.25 497.25" style="enable-background:new 0 0 497.25 497.25;"
  512.                                              xml:space="preserve">
  513.                                                 <g>
  514.                                                     <g>
  515.                                                         <circle cx="248.625" cy="248.625" r="19.125" fill="currentColor"/>
  516.                                                         <path d="M248.625,172.125c-42.075,0-76.5,34.425-76.5,76.5s34.425,76.5,76.5,76.5s76.5-34.425,76.5-76.5
  517.                                                             S290.7,172.125,248.625,172.125z M248.625,306c-32.513,0-57.375-24.862-57.375-57.375s24.862-57.375,57.375-57.375
  518.                                                             S306,216.112,306,248.625S281.138,306,248.625,306z" fill="currentColor"/>
  519.                                                         <path d="M248.625,114.75C76.5,114.75,0,248.625,0,248.625S76.5,382.5,248.625,382.5S497.25,248.625,497.25,248.625
  520.                                                             S420.75,114.75,248.625,114.75z M248.625,363.375c-153,0-225.675-114.75-225.675-114.75s72.675-114.75,225.675-114.75
  521.                                                             S474.3,248.625,474.3,248.625S401.625,363.375,248.625,363.375z" fill="currentColor"/>
  522.                                                     </g>
  523.                                                 </g>
  524.                                             </svg>
  525.                                         <svg v-else version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  526.                                              width="25px" height="25px" viewBox="0 0 497.301 497.301" style="enable-background:new 0 0 497.301 497.301;"
  527.                                              xml:space="preserve">
  528.                                             <g>
  529.                                                 <path d="M97.5,342.351C30.6,302.15,0,248.65,0,248.65s76.5-133.9,248.6-133.9c24.9,0,47.8,1.9,68.8,7.6l-15.301,15.3
  530.                                                     c-17.199-1.9-34.4-3.8-53.5-3.8c-153,0-225.7,114.8-225.7,114.8s28.7,45.9,88,80.3L97.5,342.351z M172.1,248.65
  531.                                                     c0,5.7,0,11.5,1.9,17.2l17.2-17.2c0-15.3,5.7-28.7,17.2-40.2s26.8-17.2,40.2-17.2l17.201-17.2c-5.701-1.9-11.5-1.9-17.201-1.9
  532.                                                     C206.5,172.15,172.1,206.55,172.1,248.65z M399.699,154.95l-13.398,13.4c59.299,34.4,88,80.3,88,80.3S401.6,363.45,248.6,363.45
  533.                                                     c-19.1,0-36.3-1.899-53.5-3.8l-15.3,15.3c21,5.7,44,7.601,68.9,7.601c172.101,0,248.601-133.9,248.601-133.9
  534.                                                     S466.6,195.15,399.699,154.95z M401.4,76.95L76.9,401.45l18.9,18.9l324.6-324.6L401.4,76.95z M288.801,288.851
  535.                                                     c-11.5,11.5-24.9,17.2-40.201,17.2l-17.2,17.199c5.7,1.9,11.5,1.9,17.2,1.9c42.099,0,76.5-34.4,76.5-76.5c0-5.7,0-11.5-1.9-17.2
  536.                                                     L306,248.65C306,263.95,300.199,277.351,288.801,288.851z" fill="currentColor"/>
  537.                                             </g>
  538.                                         </svg>
  539.                                     </a>
  540.                                 </div>
  541.                                 <div id="changePhonePasswordError" class="invalid-feedback"></div>
  542.                             </div>
  544.                             <div class="log-reg-btn-wrap position-relative">
  545.                                 <div id="preloader-auth" v-show="stepPreloader">
  546.                                     <div id="fountainG">
  547.                                         <div id="fountainG_1" class="fountainG"></div>
  548.                                         <div id="fountainG_2" class="fountainG"></div>
  549.                                         <div id="fountainG_3" class="fountainG"></div>
  550.                                         <div id="fountainG_4" class="fountainG"></div>
  551.                                         <div id="fountainG_5" class="fountainG"></div>
  552.                                         <div id="fountainG_6" class="fountainG"></div>
  553.                                         <div id="fountainG_7" class="fountainG"></div>
  554.                                         <div id="fountainG_8" class="fountainG"></div>
  555.                                     </div>
  556.                                 </div>
  557.                                 <button type="button" v-on:click.stop.prevent="getCode" class="btn-red">
  558.                                     {{ 'change_phone.button.confirm_email'|trans({},'loyality') }}
  559.                                 </button>
  560.                                 <button class="btn-red-transparent" id="cancelRestoreBtn" data-dismiss="modal"
  561.                                         data-toggle="modal" data-target="#enterModal">
  562.                                     {{ 'auth.mentioned_pass'|trans({},'loyality') }}
  563.                                 </button>
  564.                             </div>
  565.                         </form>
  567.                     </div>
  568.                 </div>
  569.             </div>
  570.             {#    Step 2    #}
  571.             <div class="modal-content" v-show="confirmCodeMode" v-if="isInit">
  572.                 <div class="modal-header w-100">
  573.                     <div class="modal-title" id="updatePassModalLabel">{{ 'change_phone.second_title'|trans({},'loyality') }}</div>
  574.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="resetForm">
  575.                         <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  576.                             <path d="M17.0001 1.00001L1.00014 17M17 17L1 1" stroke="#333333" stroke-linecap="round"/>
  577.                         </svg>
  578.                     </button>
  579.                 </div>
  580.                 <div class="modal-body row row-form justify-content-center">
  581.                     <div class="col-sm-9 col-md-7 col-lg-5 col-xl-3">
  583.                         <span class="modal-subtitle">
  584.                             {{ 'auth.change_phone_second_description'|trans({},'loyality')|raw }}
  585.                         </span>
  587.                         <div id="otherError" class="invalid-feedback"></div>
  589.                         <form action="" method="post" >
  591.                             <div class="form-group">
  592.                                 <label for="otp">Код</label>
  593.                                 <input class="form-control" v-model="userCode" type="text" name="otp" required>
  594.                                 <div id="changePhoneUserCodeError" class="invalid-feedback"></div>
  595.                                 <p style="font-size: 11px">{{ 'auth.code_not_send'|trans({}, 'loyality') }}
  596.                                     <a v-on:click.stop.prevent="getCode" href="#">
  597.                                         {{ 'auth.resent_code'|trans({}, 'loyality') }}
  598.                                     </a>
  599.                                 </p>
  600.                             </div>
  602.                             <div class="form-group">
  603.                                 <label for="phone">{{ 'change_phone.enter_new_phone'|trans({}, 'loyality') }}</label>
  604.                                 <input class="form-control" v-mask="'+38(###)###-##-##'" v-model="phone" type="text" name="phone" id="phone" placeholder="+38 (0" required>
  605.                                 <div id="changePhoneError" class="invalid-feedback"></div>
  606.                             </div>
  608.                             <div class="log-reg-btn-wrap position-relative">
  609.                                 <div id="preloader-auth" v-show="stepPreloader">
  610.                                     <div id="fountainG">
  611.                                         <div id="fountainG_1" class="fountainG"></div>
  612.                                         <div id="fountainG_2" class="fountainG"></div>
  613.                                         <div id="fountainG_3" class="fountainG"></div>
  614.                                         <div id="fountainG_4" class="fountainG"></div>
  615.                                         <div id="fountainG_5" class="fountainG"></div>
  616.                                         <div id="fountainG_6" class="fountainG"></div>
  617.                                         <div id="fountainG_7" class="fountainG"></div>
  618.                                         <div id="fountainG_8" class="fountainG"></div>
  619.                                     </div>
  620.                                 </div>
  621.                                 <button type="submit" v-on:click.stop.prevent="confirmCode" class="btn-red">
  622.                                     {{ 'change_phone.button.confirm_email'|trans({},'loyality') }}
  623.                                 </button>
  624.                             </div>
  625.                         </form>
  626.                     </div>
  627.                 </div>
  628.             </div>
  629.             {#    Step 3    #}
  630.             <div class="modal-content" v-show="enterSmsAfterChangePhoneMode" v-if="isInit">
  631.                 <div class="modal-header w-100">
  632.                     <div class="modal-title" id="updatePassModalLabel">{{ 'change_phone.second_title_confirm_phone'|trans({},'loyality') }}</div>
  633.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="resetForm">
  634.                         <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  635.                             <path d="M17.0001 1.00001L1.00014 17M17 17L1 1" stroke="#333333" stroke-linecap="round"/>
  636.                         </svg>
  637.                     </button>
  638.                 </div>
  639.                 <div class="modal-body row row-form justify-content-center">
  640.                     <div class="col-sm-9 col-md-7 col-lg-5 col-xl-3">
  641.                         <span class="modal-subtitle">
  642.                             {{ 'auth.enter_code_after_change_phone'|trans({},'loyality')|raw }}
  643.                         </span>
  644.                         <div id="otherError" class="invalid-feedback"></div>
  645.                         <form action="" method="post" >
  646.                             <div class="form-group">
  647.                                 <label for="otp">Код</label>
  648.                                 <input class="form-control" v-model="userCode" type="text" name="otp" required>
  649.                                 <div id="changePhoneError" class="invalid-feedback"></div>
  650.                             </div>
  652.                             <div class="log-reg-btn-wrap position-relative">
  653.                                 <div id="preloader-auth" v-show="stepPreloader">
  654.                                     <div id="fountainG">
  655.                                         <div id="fountainG_1" class="fountainG"></div>
  656.                                         <div id="fountainG_2" class="fountainG"></div>
  657.                                         <div id="fountainG_3" class="fountainG"></div>
  658.                                         <div id="fountainG_4" class="fountainG"></div>
  659.                                         <div id="fountainG_5" class="fountainG"></div>
  660.                                         <div id="fountainG_6" class="fountainG"></div>
  661.                                         <div id="fountainG_7" class="fountainG"></div>
  662.                                         <div id="fountainG_8" class="fountainG"></div>
  663.                                     </div>
  664.                                 </div>
  665.                                 <button type="submit" v-on:click.stop.prevent="loginByCode(true)" class="btn-red">
  666.                                     {{ 'change_phone.button.confirm_phone_and_enter'|trans({},'loyality') }}
  667.                                 </button>
  668.                             </div>
  669.                         </form>
  670.                     </div>
  671.                 </div>
  672.             </div>
  673.         </div>
  674.     </div>
  675. </noindex>