gabdlr/a-dog-a-pet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(user): adds registration form template

Browse Source
This commit is contained in:
Gabriel De Los Rios
2024-11-05 00:26:12 -03:00
parent 2b43da4504
commit 1f3feece2f
6 changed files with 149 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/templates/forms/validation-block.html Normal file
View File

@@ -0,0 +1,5 @@
{% macro form_field_validation(invalid_feedback) %}
<div class="invalid-feedback">
{{invalid_feedback}}
</div>
{% endmacro %}

113
app/templates/users/register.html
View File

@@ -1,8 +1,117 @@
{% extends "layout/layout.html" %}
{% extends "layout/layout.html" %}
{% from "forms/validation-block.html" import form_field_validation %}
{% block title %} register {% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/register.css') }}">
{% endblock %}
{% block content %}
<h1>Register!</h1>
<div class="container">
<div class="register mx-auto">
<div class="row my-3 my-md-5">
<div class="col-2 register__header-logo">
</div>
<div class="col-10 gx-md-4 gx-0">
<h1 class="register__header-title">Register</h1>
</div>
</div>
<form class="row g-3 needs-validation" novalidate>
<div class="col-12">
<label class="form-label" for="name">Name</label>
<input
class="form-control"
id="name"
maxlength="255"
pattern="([A-Za-z]{2,}[A-Za-z ]*)"
placeholder="Enter your name"
required
type="text"
>
{{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['NAME_FORMAT']) }}
</div>
<div class="col-12">
<label class="form-label" for="lastname">Lastname</label>
<input
class="form-control"
id="lastname"
maxlength="255"
pattern="([A-Za-z]{2,}[A-Za-z ]*)"
placeholder="Enter your lastname"
required
type="text"
>
{{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['NAME_FORMAT']) }}
</div>
<div class="col-md-6">
<label class="form-label" for="birthdate">Birthdate</label>
<input class="form-control" id="birthdate" required type="date">
{{ form_field_validation(FORM_ERRORS['REQUIRED']) }}
</div>
<div class="col-md-6">
<label class="form-label" for="phonenumber">Phone number</label>
<input class="form-control" id="phonenumber" pattern="(\+\d{1,3}){0,1}[0-9]{7,}" placeholder="Enter your phone number" required type="tel">
{{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PHONE_NUMBER_FORMAT']) }}
</div>
<div class="col-12">
<label class="form-label" for="email">Email</label>
<input class="form-control" id="email" maxlength="255" placeholder="Enter your email address" required type="email">
{{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['VALID_EMAIL']) }}
</div>
<div class="col-md-6">
<label class="form-label" for="password">Password</label>
<input
class="form-control"
id="password"
maxlength="255"
minlength="6"
placeholder="Enter password"
required
type="password"
>
{{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PASSWORD_LENGTH']) }}
</div>
<div class="col-md-6">
<label class="form-label" for="password-confirmation">Repeat password</label>
<input
class="form-control"
id="password-confirmation"
maxlength="255"
minlength="6"
placeholder="Repeat password"
required
type="password"
>
{{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PASSWORD_LENGTH']) }}
</div>
<div class="col-12">
<label class="form-label" for="inputAddress">Address</label>
<input class="form-control" id="inputAddress" maxlength="255" placeholder="1234 Main St" required type="text">
{{ form_field_validation(FORM_ERRORS['REQUIRED']) }}
</div>
<div class="col-12 text-center">
<button class="btn btn-outline-primary register__form-button" type="submit">Register</button>
</div>
</form>
</div>
</div>
<script>
(() => {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
{% endblock %}