-
Notifications
You must be signed in to change notification settings - Fork 0
/
password.html
148 lines (129 loc) · 4.73 KB
/
password.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<video autoplay muted loop id="myVideo">
<source src="media/bgvd.mp4" type="video/mp4">
</video>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="login.css">
<link rel="stylesheet" href="jathin-intro.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bad+Script&display=swap" rel="stylesheet">
<title>Change Password</title>
<link rel="stylesheet" href="login.css">
</head>
<!--jathin part start-->
<body onload="myfunction()">
<div id="loading">
<video autoplay muted loop id="mypre">
<source src="bg image and videos/Polygon - 6824.mp4">
</video>
</div>
<div class="cursor"></div>
<div class="cursor2"></div>
<script>
var preloader = document.getElementById('loading');
setTimeout(function myfunction()
{
preloader.style.display = 'none';
}, 5000);
</script>
<script>
var cursor = document.querySelector(".cursor")
var cursor2 = document.querySelector(".cursor2")
document.addEventListener("mousemove", function(e)
{
cursor.style.cssText = cursor2.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px;";
});
</script>
<!-- jathin part end-->
<div class="container">
<form id="form" class="form">
<center><h1 class="main-heading">Change Password</h1> </center>
<div class="form-control">
<label for="username">Password</label>
<input id="password" type="password" placeholder="Enter Password">
<i class="far fa-eye-slash" id="show" onclick="myFunction()"></i>
<i class="far fa-eye" id="hide" onclick="myFunction()"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Confirm Password</label>
<input id="password2" type="password" placeholder="Confirm Password">
<small>Error message</small>
</div>
<button type ="submit">Save</button>
</form>
</div>
<script>
const form = document.getElementById('form');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
});
function checkInputs() {
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if(passwordValue === '') {
setErrorFor(password, 'Password cannot be blank');
} else {
setSuccessFor(password);
}
if(passwordValue.length<8){
setErrorFor(password,'Password should have atleast 8 characters');
return false;
}else if(passwordValue.search(/[0-9]/)===-1){
setErrorFor(password,'Password should have atleast 1 number');
return false;
}else if(passwordValue.search(/[a-z]/)===-1){
setErrorFor(password,'Password should have atleast 1 lowercase letter');
return false;
}else if(passwordValue.search(/[A-Z]/)===-1){
setErrorFor(password,'Password should have atleast 1 uppercase letter');
return false;
}else if(passwordValue.search(/[!\@\#\$\%\^\&\*\(\)\_\+\-\,\<\=\>\?]/)==-1){
setErrorFor(password,'Password should have atleast 1 special character');
return false;
}
else{
setSuccessFor(password);
}
if(password2Value === '') {
setErrorFor(password2, 'Password2 cannot be blank');
} else if(passwordValue !== password2Value) {
setErrorFor(password2, 'Passwords does not match');
} else{
setSuccessFor(password2);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function myFunction() {
var x = document.getElementById("password");
if (x.type==="password"){
x.type="text"
document.getElementById('hide').style.display="inline-block";
document.getElementById('show').style.display="none";
}
else{
x.type="password"
document.getElementById('hide').style.display="none";
document.getElementById('show').style.display="inline-block";
}
}
</script>
</body>
</html>