207 lines
13 KiB
Smarty
207 lines
13 KiB
Smarty
<div class="container py-4">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-9">
|
||
<div class="card shadow-sm border-0">
|
||
<div class="card-header bg-primary text-white py-3">
|
||
<h2 class="h5 mb-0"><i class="bi bi-pencil-square me-2"></i> {#LOGIN_CHANGE_DETAILS#}</h2>
|
||
</div>
|
||
<div class="card-body p-4">
|
||
<p class="text-muted small mb-4">{#LOGIN_DETAILS_INFO#}</p>
|
||
|
||
{if $errors}
|
||
<div class="alert alert-danger shadow-sm mb-4">
|
||
<p class="fw-bold mb-2 small text-uppercase"><i class="bi bi-exclamation-triangle me-2"></i> {#LOGIN_ERRORS#}</p>
|
||
<ul class="mb-0 small">
|
||
{foreach from=$errors item=error}
|
||
<li>{$error}</li>
|
||
{/foreach}
|
||
</ul>
|
||
</div>
|
||
{/if}
|
||
|
||
<form method="post" action="{$ABS_PATH}index.php?module=login&action=profile" enctype="multipart/form-data">
|
||
<input type="hidden" name="sub" value="update" />
|
||
|
||
{* Группа: Аватар пользователя *}
|
||
<div class="row mb-4 align-items-center bg-light p-3 rounded-3 border">
|
||
<div class="col-auto">
|
||
<div class="position-relative" id="avatar-container">
|
||
<img src="{$user_avatar}" id="avatar-preview" alt="Avatar" class="rounded-circle img-thumbnail shadow-sm" style="width: 100px; height: 100px; object-fit: cover;">
|
||
|
||
<button type="button" id="btn-remove-avatar" class="btn btn-danger btn-sm position-absolute top-0 start-100 translate-middle rounded-circle d-none" title="Удалить фото">
|
||
<i class="bi bi-x"></i>
|
||
</button>
|
||
|
||
<input type="checkbox" name="delete_avatar" id="delete_avatar_check" class="d-none" value="1">
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<h5 class="text-primary small fw-bold text-uppercase mb-2">Ваше фото (Avatar)</h5>
|
||
<div class="input-group">
|
||
<label class="input-group-text bg-white shadow-sm" for="avatar-upload">
|
||
<i class="bi bi-cloud-arrow-up text-primary"></i>
|
||
</label>
|
||
<input type="file" name="avatar" class="form-control shadow-sm" id="avatar-upload" accept="image/jpeg,image/png,image/gif,image/webp">
|
||
</div>
|
||
<div class="form-text small mt-1">Поддерживаются JPG, PNG, GIF и WebP.</div>
|
||
</div>
|
||
</div>
|
||
|
||
{* Группа: Личные данные *}
|
||
<div class="row g-3 mb-4">
|
||
<h5 class="text-primary border-bottom pb-2 mb-3 small fw-bold text-uppercase">{#LOGIN_YOUR_PRIVAT_DATA#}</h5>
|
||
|
||
<div class="col-md-6">
|
||
<label for="firstname" class="form-label fw-bold small">
|
||
<i class="bi bi-person text-muted me-1"></i> {#LOGIN_YOUR_FIRSTNAME#}
|
||
</label>
|
||
<input name="firstname" type="text" class="form-control shadow-sm" id="firstname" value="{$smarty.request.firstname|default:$row.firstname|escape|stripslashes}">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label for="lastname" class="form-label fw-bold small">
|
||
<i class="bi bi-person-vcard text-muted me-1"></i> {#LOGIN_YOUR_LASTNAME#}
|
||
</label>
|
||
<input name="lastname" type="text" class="form-control shadow-sm" id="lastname" value="{$smarty.request.lastname|default:$row.lastname|escape|stripslashes}">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label for="email" class="form-label fw-bold small">
|
||
<i class="bi bi-envelope text-muted me-1"></i> {#LOGIN_YOUR_MAIL#}
|
||
</label>
|
||
<input name="email" type="email" class="form-control shadow-sm" id="email" value="{$smarty.request.email|default:$row.email|escape|stripslashes}">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label for="birthday-picker" class="form-label fw-bold small">
|
||
<i class="bi bi-calendar3 text-muted me-1"></i> {#LOGIN_YOUR_BIRTHDAY#}
|
||
</label>
|
||
<div class="input-group shadow-sm">
|
||
<input name="birthday" type="text" class="form-control" id="birthday-picker" placeholder="Выберите дату" value="{$smarty.request.birthday|default:$row.birthday|escape|stripslashes}">
|
||
<span class="input-group-text bg-light text-primary border-start-0"><i class="bi bi-calendar-check"></i></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{* Группа: Адрес проживания *}
|
||
<div class="row g-3 mb-4">
|
||
<h5 class="text-primary border-bottom pb-2 mb-3 small fw-bold text-uppercase">{#LOGIN_YOUR_PRIVAT_ADR#}</h5>
|
||
|
||
<div class="col-md-8">
|
||
<label for="street" class="form-label fw-bold small">
|
||
<i class="bi bi-geo-alt text-muted me-1"></i> {#LOGIN_YOUR_STREET#}
|
||
</label>
|
||
<input name="street" type="text" class="form-control shadow-sm" id="street" value="{$smarty.request.street|default:$row.street|escape|stripslashes}">
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<label for="street_nr" class="form-label fw-bold small">
|
||
<i class="bi bi-house text-muted me-1"></i> {#LOGIN_YOUR_HOUSE#}
|
||
</label>
|
||
<input name="street_nr" type="text" class="form-control shadow-sm" id="street_nr" value="{$smarty.request.street_nr|default:$row.street_nr|escape|stripslashes}">
|
||
</div>
|
||
|
||
<div class="col-md-5">
|
||
<label for="city" class="form-label fw-bold small">
|
||
<i class="bi bi-building text-muted me-1"></i> {#LOGIN_YOUR_TOWN#}
|
||
</label>
|
||
<input name="city" type="text" class="form-control shadow-sm" id="city" value="{$smarty.request.city|default:$row.city|escape|stripslashes}">
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<label for="country" class="form-label fw-bold small">
|
||
<i class="bi bi-globe text-muted me-1"></i> {#LOGIN_YOUR_COUNTRY#}
|
||
</label>
|
||
<select id="country" class="form-select shadow-sm" name="country">
|
||
{foreach from=$available_countries item=land}
|
||
<option value="{$land->country_code}"{if $land->country_code == $smarty.request.country|default:$row.country|default:$smarty.session.user_language} selected="selected"{/if}>{$land->country_name}</option>
|
||
{/foreach}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<label for="zipcode" class="form-label fw-bold small">
|
||
<i class="bi bi-hash text-muted me-1"></i> {#LOGIN_YOUR_ZIP#}
|
||
</label>
|
||
<input name="zipcode" type="text" class="form-control shadow-sm" id="zipcode" value="{$smarty.request.zipcode|default:$row.zipcode|escape|stripslashes}">
|
||
</div>
|
||
</div>
|
||
|
||
{* Группа: Связь и работа *}
|
||
<div class="row g-3 mb-4">
|
||
<h5 class="text-primary border-bottom pb-2 mb-3 small fw-bold text-uppercase">{#LOGIN_YOUR_PRIVAT_JOB#}</h5>
|
||
|
||
<div class="col-md-6">
|
||
<label for="phone" class="form-label fw-bold small">
|
||
<i class="bi bi-telephone text-muted me-1"></i> {#LOGIN_YOUR_PHONE#}
|
||
</label>
|
||
<input name="phone" type="text" class="form-control shadow-sm" id="phone" value="{$smarty.request.phone|default:$row.phone|escape|stripslashes}">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label for="company" class="form-label fw-bold small">
|
||
<i class="bi bi-briefcase text-muted me-1"></i> {#LOGIN_YOUR_COMPANY#}
|
||
</label>
|
||
<input name="company" type="text" class="form-control shadow-sm" id="company" value="{$smarty.request.company|default:$row.company|escape|stripslashes}">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-grid gap-2 d-md-flex justify-content-md-start pt-3 border-top">
|
||
<button type="submit" class="btn btn-primary btn-lg px-5 fw-bold shadow">
|
||
<i class="bi bi-save me-2"></i> {#LOGIN_BUTTON_CHANGE#}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
||
|
||
{assign var="current_lang" value=$smarty.session.user_language|default:'ru'|lower}
|
||
{if $current_lang == 'ua'}{assign var="current_lang" value="uk"}{/if}
|
||
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/{$current_lang}.js"></script>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
flatpickr("#birthday-picker", {
|
||
locale: "{$current_lang}",
|
||
dateFormat: "d.m.Y",
|
||
allowInput: true,
|
||
maxDate: "today"
|
||
});
|
||
|
||
const uploadInput = document.getElementById('avatar-upload');
|
||
const previewImg = document.getElementById('avatar-preview');
|
||
const removeBtn = document.getElementById('btn-remove-avatar');
|
||
const deleteCheck = document.getElementById('delete_avatar_check');
|
||
|
||
// Логика инициализации: показываем крестик только если аватар НЕ дефолтный
|
||
if (previewImg && previewImg.src.indexOf('default.png') === -1 && previewImg.src !== '' && !previewImg.src.startsWith('data:')) {
|
||
removeBtn.classList.remove('d-none');
|
||
}
|
||
|
||
uploadInput.addEventListener('change', function() {
|
||
if (this.files && this.files[0]) {
|
||
const reader = new FileReader();
|
||
reader.onload = function(e) {
|
||
previewImg.src = e.target.result;
|
||
removeBtn.classList.remove('d-none');
|
||
deleteCheck.checked = false;
|
||
}
|
||
reader.readAsDataURL(this.files[0]);
|
||
}
|
||
});
|
||
|
||
removeBtn.addEventListener('click', function() {
|
||
// Устанавливаем дефолтное изображение с timestamp для сброса кеша
|
||
previewImg.src = '{$ABS_PATH}uploads/avatars/default.png?t=' + new Date().getTime();
|
||
uploadInput.value = '';
|
||
deleteCheck.checked = true;
|
||
this.classList.add('d-none'); // Скрываем крестик, так как теперь там дефолт
|
||
});
|
||
});
|
||
</script> |