-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathforgot_password.html
118 lines (118 loc) · 3.39 KB
/
forgot_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
<!DOCTYPE html>
<html lang="en-NG">
<head>
<title> Forgot-pin </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="description" content="Text Bar Log in form" />
<meta name="keywords" content="HTML, CSS, JavaScript" />
<meta name="author" content="Umar BK" >
<script src='script/navs.js' defer></script>
<style>
*
{ box-sizing:border-box;}
html
{ background-color:#333; }
body
{ margin-top:0;}
form
{ color:white;
display:block;
border:1px solid rgba(255, 255, 255, .1);
border-radius:1vw;
animation:form 5s infinite;
background-color:rgba(0, 0, 0, .1);
margin:8em 2% 0;}
@keyframes form {
50%
{ box-shadow: 10px 20px 30px rgba(255, 255, 255, .5);}
}
form h1
{ padding:3%;
text-align:center;
font-size:2em;}
form label
{ margin:0 13%;
font-weight:bold;}
form input
{ margin:0 13%;
width:74%;
display:block;
color:rgba(255, 255, 255, .7);
font-weight:bold;
padding:3% 5%;
border:none;
outline:none;
border-radius:1vw;
font-size:1em;
margin-bottom:1em;
background-color:rgba(255, 255, 255, .1);}
form div
{ margin:-1em 13% 1em;
width:74%;
font-size:1.5vh;
color:orangered;}
form input[type=button]
{ background-color:white;
color:black;}
@media screen and (min-width:600px) {
form
{ width: 500px;
margin:5em auto;}
}
</style>
</head>
<body>
<header> </header>
<form>
<h1> Forgot PIN </h1>
<label> Your Security Question </label>
<input type="text" disabled="disabled" >
<label> Your Answer </label>
<input type="text" placeholder="Write the answer here" oninput="answer_()">
<div> </div>
<label> Your new pin </label>
<input type="number" placeholder="Only 4 numbers are allowed" oninput="input_pin()">
<input type="button" value="Change" onclick="log_in()">
</form>
<script>
(() => {
if (!localStorage.getItem('USER_DATA')) {
location.href = 'sign_up.html';
}
})();
let user_data = JSON.parse(localStorage.getItem('USER_DATA'));
document.getElementsByTagName('input')[0].value = user_data['FORGOTTEN QUESTION'];
let answer = document.getElementsByTagName('input')[1];
let pin = document.querySelector('input[type=number]');
function answer_() {
answer.style.backgroundColor = answer.value;
if (answer.value.toLowerCase().trim() == user_data['QUESTION ANSWER'].toLowerCase()) {
document.querySelector('form div').innerText = 'Correct Answer';
return true;
} else {
document.querySelector('form div').innerText = 'Is not correct Answer';
return false;
}
}
function input_pin() {
if (!pin.value.match(/^[0-9]{4}$/)) {
pin.type = 'text';
pin.style.color = 'orangered';
return false;
} else {
pin.type = 'pin';
pin.style.color = 'rgba(255, 255, 255, .7)';
return true;
}
}
function log_in() {
if (answer_() && input_pin()) {
user_data['PIN'] = pin.value;
localStorage.setItem('USER_DATA', JSON.stringify(user_data));
window.open('log_in.html');
}
}
</script>
</body>
</html>