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 0000000..74f5dd6 Binary files /dev/null and b/app/static/img/paw.png differ diff --git a/app/templates/forms/validation-block.html b/app/templates/forms/validation-block.html new file mode 100644 index 0000000..037d6b7 --- /dev/null +++ b/app/templates/forms/validation-block.html @@ -0,0 +1,5 @@ +{% macro form_field_validation(invalid_feedback) %} +
+ {{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