210 lines
11 KiB
Plaintext
210 lines
11 KiB
Plaintext
<?php if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
|
||
/** @var array $arResult */
|
||
?>
|
||
|
||
<script>
|
||
// Передаем данные справочников напрямую в JS
|
||
var cmGeoData = {
|
||
countries: <?=json_encode($arResult['COUNTRIES'])?>,
|
||
cities: <?=json_encode($arResult['CITIES'])?>
|
||
};
|
||
var cmSessid = '<?=bitrix_sessid()?>';
|
||
</script>
|
||
|
||
<div class="cm-auth-card">
|
||
<div class="cm-auth-header">
|
||
<h2>Регистрация специалиста</h2>
|
||
<p>Создайте единый аккаунт для всех ресурсов Con-Med</p>
|
||
</div>
|
||
|
||
<div class="cm-auth-body">
|
||
<form id="cm-reg-page-form">
|
||
<?=bitrix_sessid_post()?>
|
||
|
||
<div class="cm-row">
|
||
<div class="cm-col-4">
|
||
<label class="cm-label">Фамилия*</label>
|
||
<input type="text" name="last_name" class="cm-input" required>
|
||
</div>
|
||
<div class="cm-col-4">
|
||
<label class="cm-label">Имя*</label>
|
||
<input type="text" name="name" class="cm-input" required>
|
||
</div>
|
||
<div class="cm-col-4">
|
||
<label class="cm-label">Отчество</label>
|
||
<input type="text" name="second_name" class="cm-input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cm-row">
|
||
<div class="cm-col-6">
|
||
<label class="cm-label">Email (Логин)*</label>
|
||
<input type="email" name="email" class="cm-input" required>
|
||
</div>
|
||
<div class="cm-col-6">
|
||
<label class="cm-label">Телефон*</label>
|
||
<input type="text" name="phone" id="f-phone" class="cm-input" placeholder="+7 (___) ___-__-__" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cm-row">
|
||
<div class="cm-col-6">
|
||
<label class="cm-label">Страна*</label>
|
||
<div class="cm-geo-wrap">
|
||
<input type="hidden" name="country" id="f-country-val">
|
||
<input type="text" id="f-country-search" class="cm-input" placeholder="Поиск страны..." autocomplete="off" required>
|
||
<div id="f-country-list" class="cm-dropdown"></div>
|
||
</div>
|
||
</div>
|
||
<div class="cm-col-6">
|
||
<label class="cm-label">Город*</label>
|
||
<div class="cm-geo-wrap">
|
||
<input type="text" name="city" id="f-city" class="cm-input" placeholder="Начните вводить..." autocomplete="off" required>
|
||
<div id="f-city-list" class="cm-dropdown"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cm-row">
|
||
<div class="cm-col-6">
|
||
<label class="cm-label">Пароль*</label>
|
||
<div style="position:relative">
|
||
<input type="password" name="password" id="cmP" class="cm-input" required minlength="6" placeholder="Буквы и цифры">
|
||
<div class="cm-pass-tools">
|
||
<span class="cm-pass-btn" onclick="togglePassVisibility()" title="Показать/скрыть">👁️</span>
|
||
<span class="cm-pass-btn" onclick="generateSsoPassword()" title="Сгенерировать">🎲 ГЕН</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cm-col-6">
|
||
<label class="cm-label">Специальность*</label>
|
||
<select name="specialty" class="cm-input" required>
|
||
<option value="">Выберите специальность</option>
|
||
<?foreach($arResult['SPECIALTIES'] as $spec):?>
|
||
<option value="<?=$spec['code']?>"><?=$spec['name']?></option>
|
||
<?endforeach;?>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cm-check-group">
|
||
<label><input type="checkbox" required checked> Я специалист здравоохранения</label>
|
||
<label><input type="checkbox" required checked> Согласен на обработку персональных данных</label>
|
||
</div>
|
||
|
||
<div id="reg-msg" class="cm-alert" style="display:none"></div>
|
||
|
||
<button type="submit" class="cm-btn-submit">Зарегистрироваться</button>
|
||
|
||
<div style="text-align:center; margin-top: 20px;">
|
||
<a href="/auth/" class="cm-link">Уже есть аккаунт? Войти</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.cm-auth-card { background:#fff; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,0.08); border:1px solid #eee; max-width:700px; margin:0 auto; font-family:sans-serif; overflow:hidden; }
|
||
.cm-auth-header { background:#f8f9fa; padding:30px; border-bottom:1px solid #eee; text-align:center; }
|
||
.cm-auth-header h2 { margin:0; color:#2c3e50; }
|
||
.cm-auth-body { padding:40px; }
|
||
.cm-row { display:flex; gap:20px; margin-bottom:15px; }
|
||
.cm-col-4 { width:33.33%; } .cm-col-6 { width:50%; }
|
||
.cm-label { display:block; margin-bottom:5px; font-size:12px; color:#999; font-weight:bold; text-transform:uppercase; }
|
||
.cm-input { width:100%; padding:12px; border:1px solid #ddd; border-radius:6px; box-sizing:border-box; font-size:14px; outline:none; }
|
||
.cm-input:focus { border-color: #2c3e50; }
|
||
.cm-btn-submit { width:100%; padding:16px; border:0; border-radius:6px; font-weight:bold; cursor:pointer; color:#fff; background:#28a745; font-size:18px; margin-top:20px; }
|
||
.cm-geo-wrap { position:relative; }
|
||
.cm-dropdown { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #ddd; z-index:100; max-height:150px; overflow-y:auto; border-radius:0 0 6px 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||
.cm-dropdown div { padding:10px; cursor:pointer; font-size:13px; border-bottom:1px solid #f9f9f9; text-align: left; }
|
||
.cm-dropdown div:hover { background:#f0f3f5; }
|
||
.cm-check-group label { display:block; font-size:13px; color:#666; margin-bottom:5px; cursor:pointer; }
|
||
.cm-link { color:#2c3e50; text-decoration:none; font-size:14px; }
|
||
.cm-alert { padding:15px; border-radius:6px; margin-bottom:20px; text-align:center; font-size:14px; }
|
||
.cm-error { background:#fff1f0; color:#e74c3c; border:1px solid #ffa39e; }
|
||
.cm-success { background:#e8f5e9; color:#2e7d32; border:1px solid #c8e6c9; }
|
||
|
||
/* Стили для пароля */
|
||
.cm-pass-tools { position: absolute; right: 5px; top: 5px; display: flex; gap: 5px; }
|
||
.cm-pass-btn { background: #f0f0f0; border-radius: 4px; padding: 4px 8px; font-size: 10px; cursor: pointer; color: #666; border: 1px solid #ddd; user-select: none; }
|
||
.cm-pass-btn:hover { background: #e5e5e5; }
|
||
|
||
@media (max-width:600px) { .cm-row { flex-direction:column; gap:10px; } .cm-col-4, .cm-col-6 { width:100%; } }
|
||
</style>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Инициализация поиска сразу, т.к. данные уже в cmGeoData
|
||
initAutocomplete('f-country-search', 'f-country-list', 'countries', 'f-country-val');
|
||
initAutocomplete('f-city', 'f-city-list', 'cities');
|
||
});
|
||
|
||
function initAutocomplete(inputId, listId, type, hiddenId = false) {
|
||
const input = document.getElementById(inputId), list = document.getElementById(listId);
|
||
if(!input || !list) return;
|
||
|
||
const render = (val) => {
|
||
list.innerHTML = '';
|
||
let filtered = cmGeoData[type].filter(item => (typeof item === 'string' ? item : item.name).toLowerCase().includes(val.toLowerCase())).slice(0, 50);
|
||
if(filtered.length > 0) {
|
||
filtered.forEach(item => {
|
||
let name = (typeof item === 'string') ? item : item.name;
|
||
let id = (typeof item === 'string') ? item : item.id;
|
||
let div = document.createElement('div'); div.innerText = name;
|
||
div.onclick = () => { input.value = name; if(hiddenId) document.getElementById(hiddenId).value = id; list.style.display = 'none'; };
|
||
list.appendChild(div);
|
||
});
|
||
list.style.display = 'block';
|
||
} else list.style.display = 'none';
|
||
};
|
||
input.onfocus = () => render(input.value);
|
||
input.oninput = (e) => render(e.target.value);
|
||
document.addEventListener('click', (e) => { if(!e.target.closest('.cm-geo-wrap')) list.style.display = 'none'; });
|
||
}
|
||
|
||
function generateSsoPassword() {
|
||
var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
|
||
var pass = "";
|
||
for (var i = 0; i < 12; i++) pass += charset.charAt(Math.floor(Math.random() * charset.length));
|
||
var input = document.getElementById('cmP');
|
||
input.value = pass;
|
||
input.type = "text";
|
||
}
|
||
|
||
function togglePassVisibility() {
|
||
var input = document.getElementById('cmP');
|
||
input.type = (input.type === 'password') ? 'text' : 'password';
|
||
}
|
||
|
||
document.getElementById('cm-reg-page-form').onsubmit = function(e) {
|
||
e.preventDefault();
|
||
let btn = this.querySelector('button'); btn.disabled = true; btn.innerText = 'Секунду...';
|
||
let msg = document.getElementById('reg-msg'); msg.style.display = 'none';
|
||
|
||
let fd = new FormData(this);
|
||
fd.append('action', 'register');
|
||
// Используем ключи сайта id для регистрации с сервера auth
|
||
fd.append('client_id', 'app_id_site');
|
||
fd.append('client_secret', 'secret_key_for_id_site_9988');
|
||
|
||
fetch('?ajax_reg=y&action=register', {method:'POST', body:fd}).then(r=>r.json()).then(res => {
|
||
if(res.status == 'success') {
|
||
msg.innerText = 'Регистрация успешна! Перенаправление...';
|
||
msg.className = 'cm-alert cm-success'; msg.style.display = 'block';
|
||
|
||
let backurl = new URLSearchParams(window.location.search).get('backurl');
|
||
if(backurl) {
|
||
window.location.href = '/api/oauth/authorize.php?client_id=app_id_site&redirect_uri=' + encodeURIComponent(backurl);
|
||
} else {
|
||
window.location.href = '/personal/';
|
||
}
|
||
} else {
|
||
msg.innerText = res.message; msg.className = 'cm-alert cm-error'; msg.style.display = 'block';
|
||
btn.disabled = false; btn.innerText = 'Зарегистрироваться';
|
||
}
|
||
}).catch(e => {
|
||
msg.innerText = 'Ошибка на сервере'; msg.className = 'cm-alert cm-error'; msg.style.display = 'block';
|
||
btn.disabled = false; btn.innerText = 'Зарегистрироваться';
|
||
});
|
||
};
|
||
</script> |