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

24
app/static/css/register.css Normal file
View File

@@ -0,0 +1,24 @@
.register {
max-width: 480px;
}
.register__form-button {
width: 100%;
@media(min-width: 576px) {
width: 200px;
}
}
.register__header-logo {
background-image: url('./../img/paw.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.register__header-title {
margin-bottom: 0px;
@media(min-width: 576px) {
margin-bottom: .5rem;
}
}

BIN
app/static/img/paw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

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 %}

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

@@ -1,8 +1,117 @@
{% 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 %}

4
app/users/routes.py
View File

@@ -1,6 +1,6 @@
from flask import render_template
from app.users import bp
from app.utils.form_errors_dict import FORM_ERRORS
@bp.route('/')
def index():
return render_template("users/index.html")
@@ -11,4 +11,4 @@ def login():
@bp.route('/register')
def register():
return render_template("users/register.html")
return render_template("users/register.html", FORM_ERRORS=FORM_ERRORS)

7
app/utils/form_errors_dict.py Normal file
View File

@@ -0,0 +1,7 @@
FORM_ERRORS = {
'REQUIRED': "This field is required.",
'PASSWORD_LENGTH': 'It must be at least 6 characters long.',
'VALID_EMAIL': 'Enter a valid email address.',
'PHONE_NUMBER_FORMAT': 'It can be prefixed with the "+" sign and may only contain numbers after it.',
'NAME_FORMAT': 'It must be at least 2 characters long, it may only contain letters.'
}