Merge branch 'forms-refactor' into 'master'

Amélioration des formulaires

See merge request acides/hiboo!65

hiboo/account/forms.py

@@ -21,7 +21,8 @@ class SignupForm(flask_wtf.FlaskForm):
         validators.DataRequired(),
         validators.Regexp("(^[a-z0-9-_]+$)", message=(_("Your username must be \
            comprised of lowercase letters, numbers and '-' '_' only")))
-    ])
+    ], description = (_("Your username must be \
+           comprised of lowercase letters, numbers and '-' '_' only")))
     password = fields.PasswordField(_('Password'), [validators.DataRequired()])
     password2 = fields.PasswordField(_('Confirm password'),
         [validators.DataRequired(), validators.EqualTo('password')])

hiboo/captcha/captcha.py

@@ -54,7 +54,7 @@ class ImageCaptchaField(fields.CaptchaField):
 
     def __init__(self, *args, **kwargs):
         font_path = os.path.join(captcha.__path__[0], "captcha.ttf")
-        self.font = ImageFont.truetype(font_path, 14)
+        self.font = ImageFont.truetype(font_path, 20)
         self.bgcolor = "#ffffff"
         self.fgcolor = "#000000"
         super(ImageCaptchaField, self).__init__(*args, **kwargs)
@@ -82,7 +82,7 @@ class ImageCaptchaField(fields.CaptchaField):
         """ Renders a text
         """
         size = self.font.getsize(text)
-        size = (size[0] * 2, int(size[1] * 1.4))
+        size = (size[0] * 2, int(size[1] * 1.433))
         image = Image.new("RGB", size, self.bgcolor)
         xpos = 2
         for char in text:

hiboo/templates/macros.html

@@ -87,49 +87,65 @@
 </div>
 {% endmacro %}
 
-{% macro form_fields(fields, prepend='', append='', label=True) %}
-  {% set width = (12 / fields|length)|int %}
-  <div class="form-group">
-    <div class="row">
+{% macro form_fields(fields, layout='', prepend='', append='', label=True) %}
+  <div class="form-group {% if layout == "2col" %}col-12 col-md-6{% else %}row{% endif %}">
       {% for field in fields %}
-      <div class="col-lg-{{ width }} col {{ 'has-error' if field.errors else '' }}">
-        {{ form_individual_field(field, prepend=prepend, append=append, label=label, **kwargs) }}
-      </div>
+        {{ form_individual_field(field, layout=layout, prepend=prepend, append=append, label=label, **kwargs) }}
       {% endfor %}
-    </div>
   </div>
 {% endmacro %}
 
-{% macro form_individual_field(field, prepend='', append='', label=True, class_="") %}
+{% macro form_individual_field(field, layout='', prepend='', append='', label=True, class_="") %}
   {% if field.type == "BooleanField" %}
-    {{ field(**kwargs) }}<span>&nbsp;&nbsp;</span>
-    {{ field.label if label else '' }}
+    {% if layout == "" %}<div class="col-md-10 col-lg-6 offset-sm-2">{% endif %}
+    <div class="custom-control custom-switch">
+      {{ field(class_="custom-control-input", **kwargs) }}<span>&nbsp;</span>
+      {{ field.label(class_="custom-control-label") if label else '' }}
+    </div>
+    {% if layout == "" %}</div>{% endif %}
   {% else %}
-    {{ field.label if label else '' }}
+    {{ field.label(class_="col-md-2 col-form-label" if layout == "") if label else '' }}
+    {% if layout == "" %}<div class="col-md-10 col-lg-6">{% endif %}
+    {% if prepend or append %}<div class="input-group">{% endif %}
+    {% if field.type == "MultiCheckboxField" %}
+      <ul class="list-group {{ 'border border-danger' if field.errors else '' }}" style="max-height: 70vh; overflow: auto">
+      {% for items in field %}
+        <li class="form-check list-group-item">
+          <div class="custom-control custom-checkbox">
+          {{ prepend|safe }}{{ items(class_="custom-control-input " + class_, **kwargs) }}{{ append|safe }}
+          {{ prepend|safe }}{{ items.label(class_="custom-control-label " + class_, **kwargs) }}{{ append|safe }}
+          </div>
+        </li>
+      {% endfor %}
+      </ul>
+    {% else %}
+      {{ prepend|safe }}{{ field(class_="form-control " + ("border-danger" if field.errors else "") + class_, **kwargs) }}{{ append|safe }}
+    {% endif %}
     {% if field.errors %}
       {% for error in field.errors %}
-        <p class="help-block inline">{{ error }}</p>
+        <div class="invalid-feedback d-block" role="alert"><strong>{{ error }}</strong></div>
       {% endfor %}
+    {% elif field.description %}
+      <small class="form-text text-muted">{{ field.description }}</small>
     {% endif %}
-    {% if prepend or append %}<div class="input-group">{% endif %}
-      {{ prepend|safe }}{{ field(class_="form-control " + class_, **kwargs) }}{{ append|safe }}
     {% if prepend or append %}</div>{% endif %}
+    {% if layout == "" %}</div>{% endif %}
   {% endif %}
 {% endmacro %}
 
-{% macro form_field(field) %}
+{% macro form_field(field, layout='') %}
   {% if field.type == 'SubmitField' %}
-  {{ form_fields((field,), label=False, class="btn btn-info", **kwargs) }}
+  {{ form_fields((field,), layout=layout, label=False, class="btn btn-info", **kwargs) }}
   {% elif field.type not in ('HiddenField', 'CSRFTokenField') %}
-  {{ form_fields((field,), **kwargs) }}
+  {{ form_fields((field,), layout=layout, **kwargs) }}
   {% endif %}
 {% endmacro %}
 
-{% macro form(form) %}
-<form class="form" method="post" role="form">
+{% macro form(form, layout='') %}
+<form class="form{% if layout == "2col" %} row{% endif %}" method="post" role="form">
   {{ form.hidden_tag() }}
   {% for field in form %}
-    {{ form_field(field) }}
+    {{ form_field(field, layout=layout) }}
   {% endfor %}
 </form>
 {% endmacro %}