Provided the same treatment to the role and group forms

templates/forms/group.html.twig

@@ -0,0 +1,11 @@
+{% extends "@admin/forms/group.html.twig" %}
+
+{% block group_form %}
+    {% include "forms/partials/input-group-name.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+    {% include "forms/partials/input-group-slug.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+    {% include "forms/partials/input-group-icon.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+    {% include "forms/partials/input-group-description.html.twig" with { 'col_width': 'col-sm-12' } %}
+{% endblock %}

templates/forms/partials/abstract/input-description.html.twig

@@ -0,0 +1,8 @@
+{% if 'description' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group">
+            <label for="input-{{type}}-description" class="control-label">{{field_name | default(translate('DESCRIPTION'))}}</label>
+            <textarea id="input-{{type}}-description" class="form-control" type="text" name="description" {% if 'description' in form.fields.disabled %}disabled{% endif %} rows=6>{{current_value}}</textarea>
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}

templates/forms/partials/abstract/input-icon.html.twig

@@ -0,0 +1,11 @@
+{% if 'icon' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group iconpicker-container">
+            <label for="input-{{type}}-icon" class="control-label">{{field_name | default(translate("ICON"))}}</label>
+            <div class="input-group">
+                <span class="input-group-addon icon-preview"><i class="{{current_value}} fa-fw"></i></span>
+                <input type="text" id="input-{{type}}-icon" class="form-control icp icp-auto" name="icon" autocomplete="off" value="{{current_value}}" placeholder="{{ placeholder | default(translate('ICON')) }}" {% if 'icon' in form.fields.disabled %}disabled{% endif %}>
+            </div>
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}

templates/forms/partials/abstract/input-name.html.twig

@@ -0,0 +1,11 @@
+{% if 'name' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group">
+            <label for="input-{{type}}-name" class="control-label">{{field_name | default(translate('NAME'))}}</label>
+            <div class="input-group">
+                <span class="input-group-addon"><i class="fas fa-edit fa-fw"></i></span>
+                <input type="text" id="input-{{type}}-name" class="form-control" name="name" autocomplete="off" value="{{current_value}}" placeholder="{{ placeholder | default(translate('NAME')) }}" {% if 'name' in form.fields.disabled %}disabled{% endif %}>
+            </div>
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}

templates/forms/partials/abstract/input-slug.html.twig

@@ -0,0 +1,18 @@
+{% if 'description' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group">
+            <label for="input-{{type}}-slug" class="control-label">{{field_name | default(translate('SLUG'))}}</label>
+            <div class="input-group">
+                <span class="input-group-addon"><i class="fas fa-tag fa-fw"></i></span>
+                <input type="text" id="input-{{type}}-slug" class="form-control" name="slug" autocomplete="off" value="{{current_value}}" placeholder="{{placeholder | default(translate('SLUG'))}}" {% if 'slug' in form.fields.disabled %}disabled{% endif %} readonly>
+                {% if 'slug' not in form.fields.disabled %}
+                    <span class="input-group-btn" data-toggle="buttons">
+                        <label class="btn btn-primary">
+                            <input type="checkbox" id="input-{{type}}-slug-override" autocomplete="off"> {{translate("OVERRIDE")}}
+                        </label>
+                    </span>
+                {% endif %}
+            </div>
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}

templates/forms/partials/input-group-description.html.twig

@@ -0,0 +1,9 @@
+{% block input_group_description %}
+{% include "forms/partials/abstract/input-description.html.twig" with
+    {
+        "type" : "group",
+        "current_value" : group.description,
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-group-icon.html.twig

@@ -0,0 +1,11 @@
+{% block input_group_icon %}
+{% include "forms/partials/abstract/input-icon.html.twig" with
+    {
+        "type" : "group",
+        "current_value" : group.icon,
+        "field_name" : translate('GROUP.ICON'),
+        "placeholder" : translate('GROUP.ICON_EXPLAIN'),
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-group-name.html.twig

@@ -0,0 +1,11 @@
+{% block input_group_name %}
+{% include "forms/partials/abstract/input-name.html.twig" with
+    {
+        "type" : "group",
+        "current_value" : group.name,
+        "field_name" : translate('GROUP.NAME'),
+        "placeholder" : translate('GROUP.NAME_EXPLAIN'),
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-group-slug.html.twig

@@ -0,0 +1,9 @@
+{% block input_group_slug %}
+{% include "forms/partials/abstract/input-slug.html.twig" with
+    {
+        "type" : "group",
+        "current_value" : group.slug,
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-role-description.html.twig

@@ -0,0 +1,9 @@
+{% block input_role_description %}
+{% include "forms/partials/abstract/input-description.html.twig" with
+    {
+        "type" : "role",
+        "current_value" : role.description,
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-role-name.html.twig

@@ -0,0 +1,10 @@
+{% block input_role_name %}
+{% include "forms/partials/abstract/input-name.html.twig" with
+    {
+        "type" : "role",
+        "current_value" : role.name,
+        "placeholder" : translate('ROLE.NAME_EXPLAIN'),
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-role-slug.html.twig

@@ -0,0 +1,9 @@
+{% block input_role_slug %}
+{% include "forms/partials/abstract/input-slug.html.twig" with
+    {
+        "type" : "role",
+        "current_value" : role.slug,
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-user-name.html.twig

@@ -0,0 +1,10 @@
+{% block input_user_name %}
+{% if 'name' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="row">
+            {% include "forms/partials/input-user-first_name.html.twig" with { 'col_width': 'col-sm-6' } %}
+            {% include "forms/partials/input-user-last_name.html.twig" with { 'col_width': 'col-sm-6' } %}
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}
+{% endblock %}

templates/forms/role.html.twig

@@ -0,0 +1,26 @@
+<form class="js-form" method="{{form.method | default('POST')}}" action="{{site.uri.public}}/{{form.action}}">
+    {% include "forms/csrf.html.twig" %}
+    <div class="js-form-alerts">
+    </div>
+    <div class="row">
+        {% block role_form %}
+            {% include "forms/partials/input-role-name.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+            {% include "forms/partials/input-role-slug.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+            {% include "forms/partials/input-role-description.html.twig" with { 'col_width': 'col-sm-12' } %}
+        {% endblock %}
+    </div><br>
+    <div class="row">
+        <div class="col-xs-8 col-sm-4">
+            <button type="submit" class="btn btn-block btn-lg btn-success">{{form.submit_text}}</button>
+        </div>
+        <div class="col-xs-4 col-sm-4 pull-right">
+            <button type="button" class="btn btn-block btn-lg btn-link" data-dismiss="modal">{{translate("CANCEL")}}</button>
+        </div>
+    </div>
+</form>
+<!-- Include validation rules -->
+<script>
+{% include "pages/partials/page.js.twig" %}
+</script>