From aa4c95bd2d54d48185f2b1aa0f47b83ad99b6018 Mon Sep 17 00:00:00 2001 From: gnieark Date: Fri, 27 Dec 2019 14:53:15 +0100 Subject: [PATCH] twig template form --- config/packages/twig.yaml | 1 + public/css/style.css | 42 +++ src/Controller/SecurityController.php | 4 +- templates/base.html.twig | 13 +- templates/form/simpleForm.html.twig | 453 ++++++++++++++++++++++++++ templates/security/login.html.twig | 43 +-- templates/security/register.html.twig | 2 +- 7 files changed, 516 insertions(+), 42 deletions(-) create mode 100644 public/css/style.css create mode 100644 templates/form/simpleForm.html.twig diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml index b3cdf30..4112909 100644 --- a/config/packages/twig.yaml +++ b/config/packages/twig.yaml @@ -1,2 +1,3 @@ twig: default_path: '%kernel.project_dir%/templates' + form_themes: ['form/simpleForm.html.twig'] diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..03cb77f --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,42 @@ + +body{ + top: 0px; + word-wrap:break-word; + text-rendering:optimizelegibility; + margin:0 auto;font-family : "lucida grande", "gill sans", arial, sans-serif; + margin-left: 1em; + margin-right: 1em; + margin-top: 1em; + + + display: grid; + grid-template-areas: "header header" + "nav content" + "footer footer"; + grid-template-columns: 20% auto; +} + +body header { + grid-area: header; + text-align: center; +} +body nav { + grid-area: nav; +} +section#main { + grid-area: content; +} +body footer { + grid-area: footer; +} + +form{ + display: grid; + grid-template-columns: 200px 1fr; +} +form label { + grid-column: 1 / 2; +} +form input, form button { + grid-column: 2 / 3; +} \ No newline at end of file diff --git a/src/Controller/SecurityController.php b/src/Controller/SecurityController.php index 985862b..3159bfb 100644 --- a/src/Controller/SecurityController.php +++ b/src/Controller/SecurityController.php @@ -43,10 +43,10 @@ class SecurityController extends AbstractController private function getRegisterForm() { return $this->createFormBuilder() - ->add('email', EmailType::class) + ->add('email', EmailType::class,[]) ->add('password', PasswordType::class, []) ->add('display_name', TextType::class,[]) - ->add('save', SubmitType::class) + ->add('save', SubmitType::class,[]) ->getForm(); } diff --git a/templates/base.html.twig b/templates/base.html.twig index 18e0f47..12573b6 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -2,12 +2,19 @@ - {% block title %}Welcome!{% endblock %} - {% block stylesheets %}{% endblock %} + + {% block title %}Resources manager{% endblock %} + {% block stylesheets %} + + {% endblock %}
{% block header %}

Resources booking manager

{% endblock %}
- {% block body %}{% endblock %} + +
+ {% block content %}{% endblock %} +
+ {% block javascripts %}{% endblock %} diff --git a/templates/form/simpleForm.html.twig b/templates/form/simpleForm.html.twig new file mode 100644 index 0000000..e987530 --- /dev/null +++ b/templates/form/simpleForm.html.twig @@ -0,0 +1,453 @@ +{# Widgets #} + +{%- block form_widget -%} + {% if compound %} + {{- block('form_widget_compound') -}} + {% else %} + {{- block('form_widget_simple') -}} + {% endif %} +{%- endblock form_widget -%} + +{%- block form_widget_simple -%} + {%- set type = type|default('text') -%} + {%- if type == 'range' or type == 'color' -%} + {# Attribute "required" is not supported #} + {%- set required = false -%} + {%- endif -%} + +{%- endblock form_widget_simple -%} + +{%- block form_widget_compound -%} + + {%- if form is rootform -%} + {{ form_errors(form) }} + {%- endif -%} + {{- block('form_rows') -}} + {{- form_rest(form) -}} + +{%- endblock form_widget_compound -%} + +{%- block collection_widget -%} + {% if prototype is defined and not prototype.rendered %} + {%- set attr = attr|merge({'data-prototype': form_row(prototype) }) -%} + {% endif %} + {{- block('form_widget') -}} +{%- endblock collection_widget -%} + +{%- block textarea_widget -%} + +{%- endblock textarea_widget -%} + +{%- block choice_widget -%} + {% if expanded %} + {{- block('choice_widget_expanded') -}} + {% else %} + {{- block('choice_widget_collapsed') -}} + {% endif %} +{%- endblock choice_widget -%} + +{%- block choice_widget_expanded -%} + + {%- for child in form %} + {{- form_widget(child) -}} + {{- form_label(child, null, {translation_domain: choice_translation_domain}) -}} + {% endfor -%} + +{%- endblock choice_widget_expanded -%} + +{%- block choice_widget_collapsed -%} + {%- if required and placeholder is none and not placeholder_in_choices and not multiple and (attr.size is not defined or attr.size <= 1) -%} + {% set required = false %} + {%- endif -%} + +{%- endblock choice_widget_collapsed -%} + +{%- block choice_widget_options -%} + {% for group_label, choice in options %} + {%- if choice is iterable -%} + + {% set options = choice %} + {{- block('choice_widget_options') -}} + + {%- else -%} + + {%- endif -%} + {% endfor %} +{%- endblock choice_widget_options -%} + +{%- block checkbox_widget -%} + +{%- endblock checkbox_widget -%} + +{%- block radio_widget -%} + +{%- endblock radio_widget -%} + +{%- block datetime_widget -%} + {% if widget == 'single_text' %} + {{- block('form_widget_simple') -}} + {%- else -%} + + {{- form_errors(form.date) -}} + {{- form_errors(form.time) -}} + {{- form_widget(form.date) -}} + {{- form_widget(form.time) -}} + + {%- endif -%} +{%- endblock datetime_widget -%} + +{%- block date_widget -%} + {%- if widget == 'single_text' -%} + {{ block('form_widget_simple') }} + {%- else -%} + + {{- date_pattern|replace({ + '{{ year }}': form_widget(form.year), + '{{ month }}': form_widget(form.month), + '{{ day }}': form_widget(form.day), + })|raw -}} + + {%- endif -%} +{%- endblock date_widget -%} + +{%- block time_widget -%} + {%- if widget == 'single_text' -%} + {{ block('form_widget_simple') }} + {%- else -%} + {%- set vars = widget == 'text' ? { 'attr': { 'size': 1 }} : {} -%} + + {{ form_widget(form.hour, vars) }}{% if with_minutes %}:{{ form_widget(form.minute, vars) }}{% endif %}{% if with_seconds %}:{{ form_widget(form.second, vars) }}{% endif %} + + {%- endif -%} +{%- endblock time_widget -%} + +{%- block dateinterval_widget -%} + {%- if widget == 'single_text' -%} + {{- block('form_widget_simple') -}} + {%- else -%} + + {{- form_errors(form) -}} + + + + {%- if with_years %}{% endif -%} + {%- if with_months %}{% endif -%} + {%- if with_weeks %}{% endif -%} + {%- if with_days %}{% endif -%} + {%- if with_hours %}{% endif -%} + {%- if with_minutes %}{% endif -%} + {%- if with_seconds %}{% endif -%} + + + + + {%- if with_years %}{% endif -%} + {%- if with_months %}{% endif -%} + {%- if with_weeks %}{% endif -%} + {%- if with_days %}{% endif -%} + {%- if with_hours %}{% endif -%} + {%- if with_minutes %}{% endif -%} + {%- if with_seconds %}{% endif -%} + + + + {%- if with_invert %}{{ form_widget(form.invert) }}{% endif -%} + + {%- endif -%} +{%- endblock dateinterval_widget -%} + +{%- block number_widget -%} + {# type="number" doesn't work with floats in localized formats #} + {%- set type = type|default('text') -%} + {{ block('form_widget_simple') }} +{%- endblock number_widget -%} + +{%- block integer_widget -%} + {%- set type = type|default('number') -%} + {{ block('form_widget_simple') }} +{%- endblock integer_widget -%} + +{%- block money_widget -%} + {{ money_pattern|form_encode_currency(block('form_widget_simple')) }} +{%- endblock money_widget -%} + +{%- block url_widget -%} + {%- set type = type|default('url') -%} + {{ block('form_widget_simple') }} +{%- endblock url_widget -%} + +{%- block search_widget -%} + {%- set type = type|default('search') -%} + {{ block('form_widget_simple') }} +{%- endblock search_widget -%} + +{%- block percent_widget -%} + {%- set type = type|default('text') -%} + {{ block('form_widget_simple') }}{% if symbol %} {{ symbol|default('%') }}{% endif %} +{%- endblock percent_widget -%} + +{%- block password_widget -%} + {%- set type = type|default('password') -%} + {{ block('form_widget_simple') }} +{%- endblock password_widget -%} + +{%- block hidden_widget -%} + {%- set type = type|default('hidden') -%} + {{ block('form_widget_simple') }} +{%- endblock hidden_widget -%} + +{%- block email_widget -%} + {%- set type = type|default('email') -%} + {{ block('form_widget_simple') }} +{%- endblock email_widget -%} + +{%- block range_widget -%} + {% set type = type|default('range') %} + {{- block('form_widget_simple') -}} +{%- endblock range_widget %} + +{%- block button_widget -%} + {%- if label is empty -%} + {%- if label_format is not empty -%} + {% set label = label_format|replace({ + '%name%': name, + '%id%': id, + }) %} + {%- elseif label is same as(false) -%} + {% set translation_domain = false %} + {%- else -%} + {% set label = name|humanize %} + {%- endif -%} + {%- endif -%} + +{%- endblock button_widget -%} + +{%- block submit_widget -%} + {%- set type = type|default('submit') -%} + {{ block('button_widget') }} +{%- endblock submit_widget -%} + +{%- block reset_widget -%} + {%- set type = type|default('reset') -%} + {{ block('button_widget') }} +{%- endblock reset_widget -%} + +{%- block tel_widget -%} + {%- set type = type|default('tel') -%} + {{ block('form_widget_simple') }} +{%- endblock tel_widget -%} + +{%- block color_widget -%} + {%- set type = type|default('color') -%} + {{ block('form_widget_simple') }} +{%- endblock color_widget -%} + +{%- block week_widget -%} + {%- if widget == 'single_text' -%} + {{ block('form_widget_simple') }} + {%- else -%} + {%- set vars = widget == 'text' ? { 'attr': { 'size': 1 }} : {} -%} + + {{ form_widget(form.year, vars) }}-{{ form_widget(form.week, vars) }} + + {%- endif -%} +{%- endblock week_widget -%} + +{# Labels #} + +{%- block form_label -%} + {% if label is not same as(false) -%} + {% if not compound -%} + {% set label_attr = label_attr|merge({'for': id}) %} + {%- endif -%} + {% if required -%} + {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %} + {%- endif -%} + {% if label is empty -%} + {%- if label_format is not empty -%} + {% set label = label_format|replace({ + '%name%': name, + '%id%': id, + }) %} + {%- else -%} + {% set label = name|humanize %} + {%- endif -%} + {%- endif -%} + <{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}> + {%- if translation_domain is same as(false) -%} + {{- label -}} + {%- else -%} + {{- label|trans(label_translation_parameters, translation_domain) -}} + {%- endif -%} + + {%- endif -%} +{%- endblock form_label -%} + +{%- block button_label -%}{%- endblock -%} + +{# Help #} + +{% block form_help -%} + {%- if help is not empty -%} + {%- set help_attr = help_attr|merge({class: (help_attr.class|default('') ~ ' help-text')|trim}) -%} +

+ {%- if translation_domain is same as(false) -%} + {%- if help_html is same as(false) -%} + {{- help -}} + {%- else -%} + {{- help|raw -}} + {%- endif -%} + {%- else -%} + {%- if help_html is same as(false) -%} + {{- help|trans(help_translation_parameters, translation_domain) -}} + {%- else -%} + {{- help|trans(help_translation_parameters, translation_domain)|raw -}} + {%- endif -%} + {%- endif -%} +

+ {%- endif -%} +{%- endblock form_help %} + +{# Rows #} + +{%- block repeated_row -%} + {# + No need to render the errors here, as all errors are mapped + to the first child (see RepeatedTypeValidatorExtension). + #} + {{- block('form_rows') -}} +{%- endblock repeated_row -%} + +{%- block form_row -%} + {%- set widget_attr = {} -%} + {%- if help is not empty -%} + {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%} + {%- endif -%} + + {{- form_label(form) -}} + {{- form_errors(form) -}} + {{- form_widget(form, widget_attr) -}} + {{- form_help(form) -}} + +{%- endblock form_row -%} + +{%- block button_row -%} + {{- form_widget(form) -}} + +{%- endblock button_row -%} + +{%- block hidden_row -%} + {{ form_widget(form) }} +{%- endblock hidden_row -%} + +{# Misc #} + +{%- block form -%} + {{ form_start(form) }} + {{- form_widget(form) -}} + {{ form_end(form) }} +{%- endblock form -%} + +{%- block form_start -%} + {%- do form.setMethodRendered() -%} + {% set method = method|upper %} + {%- if method in ["GET", "POST"] -%} + {% set form_method = method %} + {%- else -%} + {% set form_method = "POST" %} + {%- endif -%} + + {%- if form_method != method -%} + + {%- endif -%} +{%- endblock form_start -%} + +{%- block form_end -%} + {%- if not render_rest is defined or render_rest -%} + {{ form_rest(form) }} + {%- endif -%} + +{%- endblock form_end -%} + +{%- block form_errors -%} + {%- if errors|length > 0 -%} + + {%- endif -%} +{%- endblock form_errors -%} + +{%- block form_rest -%} + {% for child in form -%} + {% if not child.rendered %} + {{- form_row(child) -}} + {% endif %} + {%- endfor -%} + + {% if not form.methodRendered and form is rootform %} + {%- do form.setMethodRendered() -%} + {% set method = method|upper %} + {%- if method in ["GET", "POST"] -%} + {% set form_method = method %} + {%- else -%} + {% set form_method = "POST" %} + {%- endif -%} + + {%- if form_method != method -%} + + {%- endif -%} + {% endif -%} +{% endblock form_rest %} + +{# Support #} + +{%- block form_rows -%} + {% for child in form|filter(child => not child.rendered) %} + {{- form_row(child) -}} + {% endfor %} +{%- endblock form_rows -%} + +{%- block widget_attributes -%} + id="{{ id }}" name="{{ full_name }}" + {%- if disabled %} disabled="disabled"{% endif -%} + {%- if required %} required="required"{% endif -%} + {{ block('attributes') }} +{%- endblock widget_attributes -%} + +{%- block widget_container_attributes -%} + {%- if id is not empty %}id="{{ id }}"{% endif -%} + {{ block('attributes') }} +{%- endblock widget_container_attributes -%} + +{%- block button_attributes -%} + id="{{ id }}" name="{{ full_name }}"{% if disabled %} disabled="disabled"{% endif -%} + {{ block('attributes') }} +{%- endblock button_attributes -%} + +{% block attributes -%} + {%- for attrname, attrvalue in attr -%} + {{- " " -}} + {%- if attrname in ['placeholder', 'title'] -%} + {{- attrname }}="{{ translation_domain is same as(false) ? attrvalue : attrvalue|trans(attr_translation_parameters, translation_domain) }}" + {%- elseif attrvalue is same as(true) -%} + {{- attrname }}="{{ attrname }}" + {%- elseif attrvalue is not same as(false) -%} + {{- attrname }}="{{ attrvalue }}" + {%- endif -%} + {%- endfor -%} +{%- endblock attributes -%} \ No newline at end of file diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig index d461ea2..92f8b6d 100644 --- a/templates/security/login.html.twig +++ b/templates/security/login.html.twig @@ -1,42 +1,13 @@ {% extends 'base.html.twig' %} -{% block title %}Log in!{% endblock %} +{% block title %}Log in{% endblock %} -{% block body %} +{% block content %}
- {% if error %} -
{{ error.messageKey|trans(error.messageData, 'security') }}
- {% endif %} - - {% if app.user %} -
- You are logged in as {{ app.user.username }}, Logout -
- {% endif %} - -

Please sign in

- - - - - - - - {# - Uncomment this section and add a remember_me option below your firewall to activate remember me functionality. - See https://symfony.com/doc/current/security/remember_me.html - -
- -
- #} - - +

Please sign in

+ + + +
{% endblock %} diff --git a/templates/security/register.html.twig b/templates/security/register.html.twig index 67e4d59..f3c3537 100644 --- a/templates/security/register.html.twig +++ b/templates/security/register.html.twig @@ -1,7 +1,7 @@ {% extends 'base.html.twig' %} {% block title %}Register{% endblock %} {% block header %}

Register a new user

{% endblock %} -{% block body %} +{% block content %} {{ form(form) }}