-
Notifications
You must be signed in to change notification settings - Fork 0
/
authorization.html
132 lines (113 loc) · 3.92 KB
/
authorization.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<title>Вход</title>
<meta charset="utf-8" />
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.first {
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
input {
font-family: "Roboto", sans-serif;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form input[type="submit"]:hover,
.form input[type="submit"]:active,
.form input[type="submit"]:focus {
background: #43A047;
}
h1 {
font-family: "Roboto", sans-serif;
text-align: center;
}
.form .first p {
font-family: "Roboto", sans-serif;
font-size: 14px;
}
ul {
list-style: none;
margin: 0 0 0 0;
padding: 0;
margin-top: 40px;
font-family: "Roboto", sans-serif;
text-align: center;
font-size: 25px;
}
li {
display: inline;
padding: 15px;
}
a {
text-decoration: none;
}
li:nth-child(1) {
background-color: #bcfdbf;
}
li:hover {
background-color: #bcfdbf;
}
.captcha {
width: 30%;
}
.captchaInput {
width: 30%;
}
</style>
<script>
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
window.onload = function () {
let number1 = getRandomInt(1, 10);
let number2 = getRandomInt(1, 10);
document.getElementById("captcha").value = number1 + "+" + number2;
document.getElementById('first').onsubmit = function () {
return isValidForm();
};
function isValidForm() {
if (document.getElementById('captchaInput').value == number1 + number2) {
return true;
}
else {
alert("Посчитайте и введите капчу заново");
return false;
}
}
}
</script>
</head>
<body>
<ul>
<li><a href="/authorization.html">Войти</a></li>
<li><a href="/">Регистрация</a></li>
<li><a href="/feedback.html">Обратная связь</a></li>
<li><a href="/feedbackOutput">Заданные вопросы</a></li>
<li><a href="/users"> Список пользователей</a></li>
</ul>
<h1>{Вход}</h1>
<div class="form">
<form method="post" class="first" id="first" onsubmit="return isFormValid()">
<input type="text" name="userLogin" placeholder="Логин" required minlength="6"/>
<input type="password" name="userPassword" id="userPassword" placeholder="Пароль" required minlength="8"/>
<p>Чему равна сумма ? (введите положительное целочисленное значение)</p>
<input type="text" name="captcha" id="captcha" class="captcha" value=" " readonly />
<input type="tel" name="captchaInput" id="captchaInput" class="captchaInput" pattern="^[ 0-9]+$" required />
<input type="submit" value="Войти" />
</form>
</div>
</body>
</html>