[open]
<article class="inform hentry">
    <form action="profile/edit" method="post" enctype="multipart/form-data" onsubmit="showload();">
        <table style="width: 100%; border: 0; border-spacing: 1px; border-collapse: separate; margin-bottom:5px;">
            <tr>
                <th colspan="3">[lang_tpl:personal_data]</th>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:Surname]</td>
                <td class="in_conf_input">
                    <label>
                        <input name="surname" value="{%SURNAME%}" style="width:394px;" type="text" size="11" maxlength="40"/>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:Name]</td>
                <td class="in_conf_input">
                    <label>
                        <input name="name" value="{%NAME%}" style="width:394px;" type="text" size="11" maxlength="40"/>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:Patronymic]</td>
                <td class="in_conf_input">
                    <label>
                        <input name="ochestvo" value="{%OCH%}" style="width:394px;" type="text" size="11" maxlength="40"/>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:Births_date]</td>
                <td class="in_conf_input">
                    <label>
                        <select name="birthDay" style="width:130px;">{%DAY_LIST%}</select>
                    </label>
                    <label>
                        <select name="birthMonth" style="width:130px;">{%MONTH_LIST%}</select>
                    </label>
                    <label>
                        <select name="birthYear" style="width:130px;">{%YEAR_LIST%}</select>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:births_day]</td>
                <td class="in_conf_input">
                    <label>
                        <select name="bday_visibility" style="width:394px;">{%BDAY_VISIBILITY%}</select>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:Gender]</td>
                <td class="in_conf_input">
                    <label>
                        <select name="date_selection" style="width:394px;">{%GENDER_LIST%}</select>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:Hobby]</td>
                <td class="in_conf_input">
                    <label>
                        <input name="hobby" value="{%HOBBY%}" style="width:394px;" type="text" size="11" maxlength="40"/>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:time_zone]</td>
                <td class="in_conf_input">
                    <label>
                        <select name="timezones" style="width:394px;">{%TIMEZONES%}</select>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:place_residence]</td>
                <td class="in_conf_input">
                    <label>
                        <input name="place" value="{%PLACE%}" style="width:394px;" type="text" size="11" maxlength="40"/>
                    </label>
                </td>
            </tr>
        </table>
        <table style="width: 100%;border: 0; border-spacing: 1px; border-collapse: separate;margin-bottom:5px;">
            <tr>
                <th colspan="3">[lang_tpl:avatar_settings]</th>
            </tr>
            <tr>
                <td class="in_conf_input">
                    <label>
                        <input name="avatar_link" value="[lang_tpl:enter_url_image]" style="width:98%;" type="text" size="11"/>
                    </label>
                </td>
                <td style="width:150px;" rowspan="2">
                    <div style="text-align:left;">
                        <img id="preview_avatar" src="{%AVATAR%}" style="border:0;" alt=""/>
                        <div style="margin-top:5px;">
                            <label>
                                <input type="checkbox" name="deleteAvatar" value="1"/>
                            </label>[lang_tpl:delete_i]
                        </div>
                    </div>
                </td>
            </tr>
            {%AVATAR_LOAD%}
            <tr>
                <td class="in_conf_input">
                    <input type="file" id="avatar" name="avatar" style="width:335px;"/>
                </td>
            </tr>
            {%/AVATAR_LOAD%}
        </table>
        <table style="width: 100%; border: 0; border-spacing: 1px; border-collapse: separate; margin-bottom:5px;">
            <tr>
                <th colspan="3">[lang_tpl:profile_picture_settings]</th>
            </tr>
            <tr>
                <td class="in_conf_input">
                    <label>
                        <input name="pimage_link" value="[lang_tpl:enter_url_image]" style="width:98%;" type="text" size="11"/>
                    </label>
                </td>
                <td style="width:150px;" rowspan="2">
                    <div style="text-align:center;">
                        <img id="preview_pimage" src="{%PIMAGE%}" alt="" style="width:98%;border:0;"/>
                        <div style="margin-top:5px;">
                            <label>
                                <input type="checkbox" name="deletePimage" value="1"/>
                            </label> [lang_tpl:delete_i]
                        </div>
                    </div>
                </td>
            </tr>
            {%PIMAGE_LOAD%}
            <tr>
                <td class="in_conf_input">
                    <input type="file" id="pimage" name="pimage" style="width:335px;"/>
                </td>
            </tr>
            {%/PIMAGE_LOAD%}
        </table>
        <table style="width: 100%; border: 0; border-spacing: 1px; border-collapse: separate; margin-bottom:5px;">
            <tr>
                <th>[lang_tpl:signature_settings]</th>
            </tr>
            <tr>
                <td class="in_conf_input">{%BB_AREA%}</td>
            </tr>
        </table>
        <table style="width: 100%; border: 0; border-spacing: 1px; border-collapse: separate; margin-bottom:5px;">
            <tr>
                <th colspan="3">[lang_tpl:other_settings]</th>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:email]</td>
                <td class="in_conf_input">
                    <label for="email"></label><input name="mail" id="email" value="{%EMAIL%}" style="width:394px;" type="text" size="11" maxlength="40" onchange="check_email(gid('email').value, 'check_email');"/>
                    <div class="descreg">
                        <div id="check_email"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:Icq]</td>
                <td class="in_conf_input">
                    <label>
                        <input name="icq" value="{%ICQ%}" style="width:394px;" type="text" size="11" maxlength="40"/>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:Phone]</td>
                <td class="in_conf_input">
                    <label>
                        <input name="phone" value="{%PHONE%}" style="width:394px;" type="text" size="11" maxlength="40"/>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:Skype]</td>
                <td class="in_conf_input">
                    <label>
                        <input name="skype" value="{%SKYPE%}" style="width:394px;" type="text" size="11" maxlength="40"/>
                    </label>
                </td>
            </tr>
        </table>
        <div class="l-link">
            <div class="login-line">
                <div style="text-align:center;">
                    <a href="javascript:void(0)" onclick="showhide('change_pass')">[lang_tpl:change_pass]</a>
                    <br/>
                </div>
            </div>
        </div>
        <table id="change_pass"
               style="width: 100%; border: 0; border-spacing: 1px; border-collapse: separate; margin-bottom:5px; display:none;">
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:old_password]</td>
                <td class="in_conf_input">
                    <label for="oldpass"></label><input name="oldpass" id="oldpass" type="password" value="" style="width:394px;" size="14" maxlength="40"/>
                    <span toggle="#oldpass-field" class="fa fa-fw fa-eye field_icon toggle-oldpass login-oldpass form-line-tt-right"></span>
                    <div class="descreg">
                        [lang_tpl:old_password_info_edit]
                    </div>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:new_password]</td>
                <td class="in_conf_input">
                    <label for="newpass"></label><input name="newpass" id="newpass" type="password" value="" style="width:394px;" size="14" maxlength="40" onblur="check_password(this.value, 'renewpass');" onkeyup="return passwordChanged();"/>
                    <span toggle="#newpass-field"
                          class="fa fa-fw fa-eye field_icon toggle-newpass login-repass form-line-tt-right"></span>
                    <div class="descreg">
                        [lang_tpl:password_info_edit]
                    </div>
                </td>
                <td>
                    <div class="passwordChanged">
                        <span id="strength"></span> <br>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="in_conf_input" style="text-align:left;">[lang_tpl:repeat]</td>
                <td class="in_conf_input">
                    <label for="renewpass"></label><input name="renewpass" id="renewpass" type="password" value="" style="width:394px;" size="14" maxlength="40" onblur="check_password(this.value, 'newpass');"/>
                    <span toggle="#renewpass-field"
                          class="fa fa-fw fa-eye field_icon toggle-renewpass login-repass form-line-tt-right"></span>
                    <div class="descreg">[lang_tpl:repassword_info]</div>
                    <div id="checkPassword"></div>
                </td>
            </tr>
        </table>
        <table style="width: 100%; border: 0; border-spacing: 1px; border-collapse: separate; margin-bottom:5px;">
            <tr>
                <td class="in_conf_input">
                    {%AUDIO_ALERT%}
                </td>
            </tr>
            <tr>
                <td class="in_conf_input">
                    {%NO_MAIL%}
                </td>
            </tr>
        </table>
        [xfield_tpl]
        <table style="width: 100%; border: 0; border-spacing: 1px; border-collapse: separate; margin-bottom:5px;">
            <tr>
                <td class="in_conf_input" style="width:100%;text-align:left;">{%XTITLE%}</td>
                <td class="in_conf_input">{%XBODY:[style="width:394px;"]%}</td>
            </tr>
        </table>
        [/xfield_tpl]
        [fields]
        <table style="width: 100%; border: 0; border-spacing: 1px; border-collapse: separate; margin-bottom:5px;">
            <tr>
                <th colspan="2">[lang_tpl:addit_settings]</th>
            </tr>
            {%XFIELDS%}
        </table>
        [/fields]
        <table style="width: 100%; border: 0; border-spacing: 1px; border-collapse: separate; margin-bottom:5px;">
            <tr>
                <td class="in_conf_input">
                    <div style="text-align:center;">
                        <input type="submit" value="[lang_tpl:save]" id="submit" size="11" maxlength="40"/>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</article>
[/open]
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
<script type="text/javascript">
    function check_password(repass, id){password=gid(id).value;if(password.length>0&&repass.length>0){if(password==repass){text="<font color=\"green\">Пароли совпадают, всё в порядке.</font>";gid('submit').disabled=false}else{text="<font color=\"red\">Пароли не совпадают! Проверьте правильность ввода!</font>";gid('submit').disabled=true}gid('checkPassword').innerHTML=text}else{gid('checkPassword').innerHTML=''}}
    function check_email(val, id){if(val.length>3){AJAXEngine.setPostVar('email',encodeURI(val,true));AJAXEngine.sendRequest('ajax.php?do=check_email',id)}}
    $(document).on('click', '.toggle-oldpass', function () {
        $(this).toggleClass("fa-eye fa-eye-slash");
        const input = $("#oldpass");
        input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
    });
    $(document).on('click', '.toggle-newpass', function () {
        $(this).toggleClass("fa-eye fa-eye-slash");
        const input = $("#newpass");
        input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
    });
    $(document).on('click', '.toggle-renewpass', function () {
        $(this).toggleClass("fa-eye fa-eye-slash");
        const input = $("#renewpass");
        input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
    });

    function passwordChanged() {
        const strength = document.getElementById('strength');
        const strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        const mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        const enoughRegex = new RegExp("(?=.{6,}).*", "g");
        const pwd = document.getElementById("newpass");
        if (pwd.value.length == 0) {
            strength.innerHTML = '[lang_tpl:type_password]';
        } else if (false == enoughRegex.test(pwd.value)) {
            strength.innerHTML = '[lang_tpl:too_short]';
        } else if (strongRegex.test(pwd.value)) {
            strength.innerHTML = '[lang_tpl:hard]';
        } else if (mediumRegex.test(pwd.value)) {
            strength.innerHTML = '[lang_tpl:medium]';
        } else {
            strength.innerHTML = '[lang_tpl:easy]';
        }
    }
    $(document).ready(function () {
        function readImage(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    $('#preview_avatar').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $('#avatar').change(function () {
            readImage(this);
        });
    });
    $(document).ready(function () {
        function readImage(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    $('#preview_pimage').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $('#pimage').change(function () {
            readImage(this);
        });
    });
</script>