From 1f3feece2f18b29af54d6e416e2a9fa011baa088 Mon Sep 17 00:00:00 2001 From: Gabriel De Los Rios Date: Tue, 5 Nov 2024 00:26:12 -0300 Subject: [PATCH] feat(user): adds registration form template --- app/static/css/register.css | 24 +++++ app/static/img/paw.png | Bin 0 -> 10522 bytes app/templates/forms/validation-block.html | 5 + app/templates/users/register.html | 113 +++++++++++++++++++++- app/users/routes.py | 4 +- app/utils/form_errors_dict.py | 7 ++ 6 files changed, 149 insertions(+), 4 deletions(-) create mode 100644 app/static/css/register.css create mode 100644 app/static/img/paw.png create mode 100644 app/templates/forms/validation-block.html create mode 100644 app/utils/form_errors_dict.py diff --git a/app/static/css/register.css b/app/static/css/register.css new file mode 100644 index 0000000..41e48b3 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/app/static/img/paw.png b/app/static/img/paw.png new file mode 100644 index 0000000000000000000000000000000000000000..74f5dd6b651045346eb442ac7dd2bf0015e7cd5f GIT binary patch literal 10522 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 + {{invalid_feedback}} + +{% endmacro %} diff --git a/app/templates/users/register.html b/app/templates/users/register.html index dd1e05c..439f993 100644 --- a/app/templates/users/register.html +++ b/app/templates/users/register.html @@ -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() }} + {% endblock %} {% block content %} -

Register!

+
+
+
+ +
+

Register

+
+
+
+
+ + + {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['NAME_FORMAT']) }} +
+
+ + + {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['NAME_FORMAT']) }} +
+
+ + + {{ form_field_validation(FORM_ERRORS['REQUIRED']) }} +
+
+ + + {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PHONE_NUMBER_FORMAT']) }} +
+
+ + + {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['VALID_EMAIL']) }} +
+
+ + + {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PASSWORD_LENGTH']) }} +
+
+ + + {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PASSWORD_LENGTH']) }} +
+
+ + + {{ form_field_validation(FORM_ERRORS['REQUIRED']) }} +
+
+ +
+
+
+
+ {% endblock %} \ No newline at end of file diff --git a/app/users/routes.py b/app/users/routes.py index 9356492..0e240ed 100644 --- a/app/users/routes.py +++ b/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) diff --git a/app/utils/form_errors_dict.py b/app/utils/form_errors_dict.py new file mode 100644 index 0000000..aa2dde0 --- /dev/null +++ b/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.' +} \ No newline at end of file