collarbone-annihilation/iu9-ca-web-chat
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Upgrade of registration page

Browse Source
This commit is contained in:
vladimir 2024-08-06 15:11:27 +03:00
parent af537a7639
commit 3a8d1207b1
3 changed files with 82 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
assets/css/registration.css
View File

@ -47,8 +47,31 @@ button {
outline: none; outline: none;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
transition: background-color 0.3s;
} }
button:hover { button:hover,
button:focus-visible {
background-color: #007bb5; background-color: #007bb5;
} }
.hide-cursor::placeholder {
color: #000;
}
.hide-cursor {
caret-color: transparent;
}
.no-select {
-webkit-user-select: none; /* Для Safari */
-moz-user-select: none; /* Для Firefox */
user-select: none; /* Для всех остальных браузеров */
}
div {
color: red;
font-size: 15px;
margin-top: 10px;
display: none;
}

26
assets/html/registration.html
View File

@ -4,20 +4,22 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Страница Регистрации</title> <title>Страница Регистрации</title>
<link rel="stylesheet" href="/assets/css/registration.css"> <link rel="stylesheet" href="assets/css/registration.css">
</head> </head>
<body>
<div class="form-container">
<h1>Вход</h1>
<form action="/pathToChat" method="post">
<input type="text" name="username" placeholder="Имя пользователя" id="username"><br>
<input type="text" name="login" placeholder="Логин" id="login"><br>
<input type="password" name="password" placeholder="Пароль" id="password"><br>
<button type="submit">Зарегистрироваться</button>
</form>
</div>
<script src="/assets/js/registration.js"></script>
<body>
<div class="form-container">
<h1 class="hide-cursor no-select">Вход</h1>
<form action="assets/html/list-rooms.html" method="post">
<input type="text" name="username" placeholder="Имя пользователя" id="username"><br>
<input type="text" name="login" placeholder="Логин" id="login"><br>
<input type="password" name="password" placeholder="Пароль" id="password"><br>
<button type="submit" class="hide-cursor no-select">Зарегистрироваться</button>
<div id="error"></div>
</form>
</div>
<script src="assets/js/registration.js"></script>
</body> </body>
</html> </html>

54
assets/js/registration.js
View File

@ -1,16 +1,50 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form'); const form = document.querySelector('form');
form.addEventListener('keydown', function(event) { const submitButton = form.querySelector('button[type="submit"]');
if (event.key === 'Enter') { const errorElement = document.getElementById('error');
form.addEventListener('keydown', function(event) {
const activeElement = document.activeElement; const activeElement = document.activeElement;
if (activeElement.tagName === 'INPUT' && activeElement.type !== 'submit') { const formElements = Array.from(form.elements);
event.preventDefault(); const currentIndex = formElements.indexOf(activeElement);
const formElements = Array.from(form.elements);
const currentIndex = formElements.indexOf(activeElement); if (activeElement.tagName === 'INPUT') {
if (currentIndex !== -1 && formElements[currentIndex + 1]) { if (event.key === 'Enter') {
formElements[currentIndex + 1].focus(); event.preventDefault();
if (currentIndex === formElements.length - 1) {
submitButton.focus();
} else if (currentIndex !== -1 && formElements[currentIndex + 1]) {
formElements[currentIndex + 1].focus();
}
} }
} }
});
submitButton.addEventListener('focus', function() {
submitButton.classList.add('focus-visible');
});
submitButton.addEventListener('blur', function() {
submitButton.classList.remove('focus-visible');
});
form.addEventListener('submit', function(event) {
if (!validateForm()) {
event.preventDefault();
}
});
function validateForm() {
const username = document.getElementById('username').value.trim();
const login = document.getElementById('login').value.trim();
const password = document.getElementById('password').value.trim();
if (username === '' || login === '' || password === '') {
errorElement.textContent = 'Пожалуйста, заполните все поля';
errorElement.style.display = 'block';
return false;
}
return true;
} }
}); });
});