feat(user): adds registration form template

app/static/css/register.css

@@ -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;  
+  }
+}

app/templates/forms/validation-block.html

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

app/templates/users/register.html

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

app/users/routes.py

@@ -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)

app/utils/form_errors_dict.py

@@ -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.'
+}