112 lines
4.3 KiB
HTML
112 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Signup</title>
|
|
|
|
<!-- Compiled and minified CSS -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
|
|
|
<!-- Compiled and minified JavaScript -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
{% block content %}
|
|
<div class="container section">
|
|
<h1 class="center">Signup</h1>
|
|
<div class="row center">
|
|
<form class="col s12" method="post">
|
|
<div class="row">
|
|
<div class="input-field col s6">
|
|
<input placeholder="Placeholder" id="first_name" type="text" class="validate" name="firstname">
|
|
<label for="first_name">First Name</label>
|
|
</div>
|
|
<div class="input-field col s6">
|
|
<input id="last_name" type="text" class="validate" name="lastname">
|
|
<label for="last_name">Last Name</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s12">
|
|
<input id="username" type="text" class="validate" name="username">
|
|
<label for="username">Username</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s5">
|
|
<input id="password" type="password" class="validate" name="password">
|
|
<label for="password">Password</label>
|
|
</div>
|
|
<div class="input-field col s5">
|
|
<input id="confirm_password" type="password" class="validate" name="confirm_password">
|
|
<label for="confirm_password">Confirm Password</label>
|
|
</div>
|
|
<div class="col s2 left-align">
|
|
<p id="message"></p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s12">
|
|
<input id="email" type="email" class="validate" name="email">
|
|
<label for="email">Email</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<button class="btn waves-effect waves-light" type="submit" name="action" id="submit">Submit
|
|
<i class="material-icons right"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
<script>
|
|
let match = false
|
|
let input = document.getElementById("username")
|
|
let button = document.getElementById("submit")
|
|
let pass = document.getElementById('password')
|
|
let con_pass = document.getElementById('confirm_password')
|
|
let message = document.getElementById('message')
|
|
|
|
button.disabled = true
|
|
|
|
input.addEventListener("change", stateHandle)
|
|
pass.addEventListener("change", checkPassword)
|
|
con_pass.addEventListener("change", checkPassword)
|
|
pass.addEventListener("change", stateHandle)
|
|
con_pass.addEventListener("change", stateHandle)\
|
|
|
|
function checkPassword() {
|
|
if (pass.value == "" || con_pass.value == "") {
|
|
console.log('empty')
|
|
message.style.color = 'red';
|
|
message.innerHTML = '';
|
|
match = false
|
|
} else if (pass.value != con_pass.value) {
|
|
console.log('not')
|
|
message.style.color = 'red';
|
|
message.innerHTML = 'not matching';
|
|
match = false
|
|
} else if (pass.value ==
|
|
con_pass.value) {
|
|
console.log('equal')
|
|
|
|
message.style.color = 'green';
|
|
message.innerHTML = 'matching';
|
|
match = true
|
|
}
|
|
}
|
|
|
|
function stateHandle() {
|
|
console.log(match)
|
|
if (document.getElementById("username").value != "" && match == true) {
|
|
button.disabled = false
|
|
} else {
|
|
button.disabled = true
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |