initial commit
This commit is contained in:
Ivan
281
static/templates/signup.html
Normal file
281
static/templates/signup.html
Normal file
@@ -0,0 +1,281 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../styles/main.css">
|
||||
<script src="../scripts/jquery.min.js"></script>
|
||||
<script src="../scripts/helpPopup.js"></script>
|
||||
<title>Регистрация</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #EEEFF5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Бюро пропусков</h1>
|
||||
<nav>
|
||||
<div class="dropdown">
|
||||
<a class="help-button" onclick="toggleDropdown('dropdownHelp-1')">Техническая поддержка</a>
|
||||
<div id="dropdownHelp-1" class="dropdown-help">
|
||||
<a href="tel:83477527706">8 (34775) 2-77-06</a>
|
||||
<a href="tel:89174023516">8 (917) 402-35-16</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<a class="help-button" onclick="toggleDropdown('dropdownHelp-2')">Инструкции</a>
|
||||
<div id="dropdownHelp-2" class="dropdown-help dropdown-manual">
|
||||
<a href="/docs/manual.pdf" target="_blank">Текст</a>
|
||||
<a href="https://drive.google.com/file/d/1CxrAgr2brQclZqtbbreSUU9tN-jsNTwf/view?usp=sharing" target="_blank">Видео</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/signin">Войти</a>
|
||||
<a href="/signup">Зарегистрироваться</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<form class="main-form" id="signup-form">
|
||||
<h1>Регистрация</h1>
|
||||
<div class="radio-inputs">
|
||||
<label class="radio">
|
||||
<input autocomplete="off" type="radio" id="person-radio" name="account-type" value="guest" checked>
|
||||
<span class="name">Физ лицо</span>
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input autocomplete="off" type="radio" id="legal-radio" name="account-type" value="legal">
|
||||
<span class="name">Юр лицо</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inputs" id="person-inputs">
|
||||
<div class="input-area">
|
||||
<label for="surname-input">Фамилия*</label>
|
||||
<input type="text" id="surname-input">
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="firstname-input">Имя*</label>
|
||||
<input type="text" id="firstname-input">
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="secondname-input">Отчество (при наличии)</label>
|
||||
<input type="text" id="secondname-input">
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="born-input">Дата рождения*</label>
|
||||
<input type="date" id="born-input">
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="phone-input">Номер телефона</label>
|
||||
<input type="text" id="phone-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: none;" class="inputs" id="legal-inputs">
|
||||
<div class="input-area">
|
||||
<label for="name-input">Наименование организации*</label>
|
||||
<input type="text" id="name-input">
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="inn-input">ИНН*</label>
|
||||
<input maxlength="10" type="text" id="inn-input">
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="ogrn-input">ОГРН*</label>
|
||||
<input maxlength="13" type="text" id="ogrn-input">
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="legaladdress-input">Юридический адрес*</label>
|
||||
<input type="text" id="legaladdress-input">
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="address-input">Фактический адрес*</label>
|
||||
<input type="text" id="address-input">
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="contact-input">Имя контактного лица</label>
|
||||
<input type="text" id="contact-input">
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="contactphone-input">Номер телефона контактного лица</label>
|
||||
<input type="text" id="contactphone-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="email-input">Email*</label>
|
||||
<input type="text" id="email-input" required>
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="password-input">Пароль*</label>
|
||||
<input type="password" id="password-input" new-password required>
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<label for="repeatpassword-input">Повторите пароль*</label>
|
||||
<input type="password" id="repeatpassword-input" required>
|
||||
</div>
|
||||
<div class="form-info">
|
||||
<p>Длина пароля должна быть не менее 8 символов.
|
||||
Пароль должен состоять из букв латинского алфавита (A-z),
|
||||
арабских цифр (0-9) и специальных символов ((пробел)!"#$%&()*+,-./:;<=>?@[\]^`{|}~)</p>
|
||||
</div>
|
||||
<button style="margin-top: 15px;" type="submit" id="signup-button">Регистрация</button>
|
||||
<button onclick="location.href='/signin'" type="button" class="bright">Авторизация</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const signupForm = document.getElementById("signup-form");
|
||||
|
||||
signupForm.addEventListener("submit", async function(event) {
|
||||
event.preventDefault();
|
||||
$('#signup-button').addClass('inactive');
|
||||
|
||||
if (document.getElementById('person-radio').checked) {
|
||||
const formrole = "guest";
|
||||
const firstname = $('#firstname-input').val();
|
||||
const surname = $('#surname-input').val();
|
||||
const secondname = $('#secondname-input').val();
|
||||
const born = $('#born-input').val();
|
||||
const phone = $('#phone-input').val();
|
||||
if (!$('#firstname-input').val() || !$('#surname-input').val() || !$('#born-input').val()) {
|
||||
alert("Пожалуйста, заполните все поля, помеченные звёздочкой.")
|
||||
$('#signup-button').removeClass('inactive');
|
||||
return;
|
||||
}
|
||||
|
||||
const email = $('#email-input').val();
|
||||
const password = $('#password-input').val();
|
||||
const repeatPassword = $('#repeatpassword-input').val();
|
||||
|
||||
if (password.length < 8) {
|
||||
alert('Длина пароля должна быть не менее 8 символов')
|
||||
$('#signup-button').removeClass('inactive');
|
||||
return;
|
||||
}
|
||||
|
||||
// Проверяем, совпадают ли пароли
|
||||
if (password !== repeatPassword) {
|
||||
alert("Пароли не совпадают");
|
||||
$('#signup-button').removeClass('inactive');
|
||||
return;
|
||||
}
|
||||
|
||||
// Отправляем запрос на сервер для авторизации
|
||||
const response = await fetch("{{API_SERVER}}/signup", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ firstname, surname, secondname, born, phone, email, password, formrole })
|
||||
});
|
||||
if (response.status === 201) {
|
||||
const data = await response.json();
|
||||
const token = data.token;
|
||||
|
||||
document.cookie = "token=" + token;
|
||||
|
||||
window.location.href = "/";
|
||||
$('#signup-button').removeClass('inactive');
|
||||
} else if (response.status === 400) {
|
||||
alert("Такой Email уже зарегистрирован");
|
||||
$('#signup-button').removeClass('inactive');
|
||||
} else {
|
||||
alert("Ошибка авторизации");
|
||||
$('#signup-button').removeClass('inactive');
|
||||
}
|
||||
} else if (document.getElementById('legal-radio').checked) {
|
||||
const formrole = "legal";
|
||||
const name = $('#name-input').val();
|
||||
const inn = $('#inn-input').val();
|
||||
const ogrn = $('#ogrn-input').val();
|
||||
const legaladdress = $('#legaladdress-input').val();
|
||||
const address = $('#address-input').val();
|
||||
const phone = $('#contactphone-input').val();
|
||||
const contact = $('#contact-input').val();
|
||||
if (!$('#name-input').val() || !$('#inn-input').val() || !$('#ogrn-input').val() || !$('#legaladdress-input').val()) {
|
||||
alert("Пожалуйста, заполните все поля, помеченные звёздочкой.")
|
||||
$('#signup-button').removeClass('inactive');
|
||||
return;
|
||||
}
|
||||
|
||||
const email = $('#email-input').val();
|
||||
const password = $('#password-input').val();
|
||||
const repeatPassword = $('#repeatpassword-input').val();
|
||||
|
||||
if (password.length < 8) {
|
||||
alert('Длина пароля должна быть не менее 8 символов')
|
||||
$('#signup-button').removeClass('inactive');
|
||||
return;
|
||||
}
|
||||
|
||||
// Проверяем, совпадают ли пароли
|
||||
if (password !== repeatPassword) {
|
||||
alert("Пароли не совпадают");
|
||||
$('#signup-button').removeClass('inactive');
|
||||
return;
|
||||
}
|
||||
|
||||
// Отправляем запрос на сервер для авторизации
|
||||
const response = await fetch("{{API_SERVER}}/signup", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ name, inn, ogrn, legaladdress, address, phone, email, contact, password, formrole })
|
||||
});
|
||||
|
||||
if (response.status === 201) {
|
||||
const data = await response.json();
|
||||
const token = data.token;
|
||||
|
||||
document.cookie = "token=" + token;
|
||||
|
||||
window.location.href = "/";
|
||||
$('#signup-button').removeClass('inactive');
|
||||
} else if (response.status === 400) {
|
||||
alert("Такой Email уже зарегистрирован");
|
||||
$('#signup-button').removeClass('inactive');
|
||||
} else {
|
||||
alert("Ошибка авторизации");
|
||||
$('#signup-button').removeClass('inactive');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#phone-input').inputmask({"mask": "+7 (999) 999-9999"});
|
||||
$('#contactphone-input').inputmask({"mask": "+7 (999) 999-9999"});
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
const radioInputs = document.querySelectorAll('input[name="account-type"]');
|
||||
const personInputs = document.getElementById('person-inputs');
|
||||
const legalInputs = document.getElementById('legal-inputs');
|
||||
|
||||
radioInputs.forEach(input => {
|
||||
input.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
if (this.value === "guest") {
|
||||
personInputs.style.display = 'flex';
|
||||
legalInputs.style.display = 'none';
|
||||
} else if (this.value === "legal") {
|
||||
personInputs.style.display = 'none';
|
||||
legalInputs.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user