How to create registration form
Download example from here:
In this topic we’ll assume that you have created a users item from the previous topic.
Now we create a register.html file.
It contains a registration form:
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class ="modal-header">
<h5>Register form</h5>
</div>
<form class="form-horizontal" action="" method="post">
<div class="modal-body">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Name" value="%(name)s" required>
</div>
<div class="mb-3">
<label for="login" class="form-label">Login</label>
<input type="text" class="form-control" name="login" id="login" placeholder="Login" value="%(login)s" required>
</div>
<div class="mb-3">
<div class="col-sm">
<label for="password" class="form-label">Password</label>
<div class="input-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" value="%(password)s" required>
<button class="btn btn-outline" type="button" id="toggle_password" tabindex="-1">
<i class="bi bi-eye-fill"></i>
</button>
</div>
</div>
</div>
<div class="mb-3">
<div class="col-sm">
<label for="password2" class="form-label">Repeat password</label>
<div class="input-group">
<input type="password" class="form-control" name="password2" id="password2" placeholder="Repeat password" value="%(password2)s" required>
<button class="btn btn-outline" type="button" id="toggle_password_2" tabindex="-1">
<i class="bi bi-eye-fill"></i>
</button>
</div>
</div>
</div>
<div class="alert alert-danger d-none" role="alert" style="margin: 0;">
%(error)s
</div>
<div class="modal-footer">
<input class="btn btn-primary px-4" type="submit" value="OK">
</div>
</div>
</form>
</div>
</div>
</div>
and a javascript code:
$(document).ready(function(){
var errorText = $("div.alert-danger").text().trim();
if(errorText !== ""){
$("div.alert-danger").removeClass("d-none");
}
});
$('#toggle_password').click(function() {
const passwordInput = $('#password');
const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
passwordInput.attr('type', type);
$(this).html(type === 'password' ? '<i class="bi bi-eye-fill"></i>' : '<i class="bi bi-eye-slash-fill"></i>');
});
$('#toggle_password_2').click(function() {
const passwordInput = $('#password2');
const type = passwordInput.attr('type') === 'password2' ? 'text' : 'password2';
passwordInput.attr('type', type);
$(this).html(type === 'password2' ? '<i class="bi bi-eye-fill"></i>' : '<i class="bi bi-eye-slash-fill"></i>');
});
The task server module has the following on_request event handler:
def on_request(task, request):
parts = request.split('/')
if not parts[0]:
...
elif parts[0] == 'register.html':
if request.method == 'POST':
form = request.form.to_dict()
if form['password'] != form['password2']:
return task.serve_page('register.html',
register_format("Passwords don't match", form))
else:
users = task.users.copy(handlers=False)
users.set_where(login=form['login'])
users.open()
if users.rec_count:
return task.serve_page('register.html',
register_format("Existing login, please use different login!!!", form))
users.append()
users.name.value = form['name']
users.login.value = form['login']
users.password_hash.value = task.generate_password_hash(form['password'])
users.role.value = 2
users.post()
users.apply()
return task.redirect('/login.html')
else:
return task.serve_page('register.html', register_format())
It checks if there is ‘register’ in url and then looks if there is no user with the login and then register the user.