From f4ee9d96b8137774b124eb89ff53671066d0c0a1 Mon Sep 17 00:00:00 2001
From: Jens Pelzetter <jens@jp-digital.de>
Date: Wed, 18 Nov 2020 21:14:29 +0100
Subject: [PATCH] More form group components

---
 .../components/bootstrap/formGroupColor.xhtml | 48 +++++++++++
 .../components/bootstrap/formGroupDate.xhtml  | 60 ++++++++++++++
 .../components/bootstrap/formGroupEmail.xhtml | 82 ++++++++++++++++++
 .../components/bootstrap/formGroupFile.xhtml  | 69 +++++++++++++++
 .../bootstrap/formGroupNumber.xhtml           | 47 ++++-------
 .../bootstrap/formGroupPassword.xhtml         | 75 +++++++++++++++++
 .../components/bootstrap/formGroupRange.xhtml | 68 +++++++++++++++
 .../bootstrap/formGroupSearch.xhtml           | 74 +++++++++++++++++
 .../components/bootstrap/formGroupTel.xhtml   | 78 +++++++++++++++++
 .../components/bootstrap/formGroupText.xhtml  |  5 +-
 .../bootstrap/formGroupTextarea.xhtml         | 69 +++++++++++++++
 .../components/bootstrap/formGroupTime.xhtml  | 61 ++++++++++++++
 .../components/bootstrap/formGroupUrl.xhtml   | 83 +++++++++++++++++++
 .../ui/admin/categories/category-form.xhtml   | 74 +++++++++++++++--
 14 files changed, 854 insertions(+), 39 deletions(-)
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupColor.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupDate.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupEmail.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupFile.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupPassword.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupRange.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupSearch.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTel.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTextarea.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTime.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupUrl.xhtml
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupColor.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupColor.xhtml
new file mode 100644
index 000000000..d03a66e42
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupColor.xhtml
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
+    <cc:interface shortDescription="Component for a form group with a number input">
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server." 
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="value"
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   id="#{cc.attrs.inputId}"
+                   name="#{cc.attrs.name}"
+                   required="#{cc.attrs.required ? 'required' : null}"
+                   type="color"
+                   value="#{not empty cc.attrs.value ? cc.attrs.value : null}" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
+
+
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupDate.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupDate.xhtml
new file mode 100644
index 000000000..d4c920c1d
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupDate.xhtml
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
+    <cc:interface shortDescription="Component for a form grouo with an HTML date input field">
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="max"
+                      required="false"
+                      shortDescription="The latest acceptable data"
+                      type="String" />
+        <cc:attribute name="min"
+                      required="false"
+                      shortDescription="The earlist acceptable data"
+                      type="String" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server." 
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="step"
+                      required="false"
+                      shortDescription="The stepping interval (in days)"
+                      type="int" />
+        <cc:attribute name="value"
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   id="#{cc.attrs.inputId}"
+                   max="#{cc.attrs.max}"
+                   min="#{cc.attrs.min}"
+                   name="#{cc.attrs.name}"
+                   step="#{cc.attrs.step}"
+                   type="date" 
+                   value="#{cc.attrs.value}" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupEmail.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupEmail.xhtml
new file mode 100644
index 000000000..00b0d5b92
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupEmail.xhtml
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
+    <cc:interface shortDescription="Component for a form group with a text input">
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="maxlength" 
+                      required="false"
+                      shortDescription="Maximum length of the text in this field."
+                      type="int" />
+        <cc:attribute name="minlength" 
+                      required="false"
+                      shortDescription="Minium length of the text in this field."
+                      type="int" />
+        <cc:attribute default="false"
+                      name="multiple"
+                      required="false"
+                      shortDescription="Whether or not to allow multiple, comma-separated, e-mail addresses to be entered"
+                      type="boolean" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server."
+                      type="String" />
+        <cc:attribute name="pattern"
+                      required="false"
+                      shortDescription="A RegEx pattern that the value entered into this field must match"
+                      type="String" />
+        <cc:attribute name="placeholder"
+                      required="false"
+                      shortDescription="A placeholder to show in the empty field."
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="size"
+                      shortDescription="Length of the field. Can be overwritten using CSS."
+                      required="false"
+                      type="int" />
+        <cc:attribute name="value"
+                      default=""
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   id="#{cc.attrs.inputId}"
+                   maxlength="#{(not empty cc.attrs.maxlength) ? cc.attrs.maxlength : null}"
+                   minlength="#{(not empty cc.attrs.minlength) ? cc.attrs.minlength : null}"
+                   multiple="#{cc.attrs.multiple ? 'multiple' : null}"
+                   name="#{cc.attrs.name}"
+                   pattern="#{not empty cc.attrs.pattern ? cc.attrs.pattern : null}"
+                   placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder: null}"
+                   required="#{cc.attrs.required ? 'required' : null}"
+                   size="#{not empty cc.attrs.size ? cc.attrs.size : null}"
+                   type="email" 
+                   value="#{not empty cc.attrs.value ? cc.attrs.value : ''}" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
+
+
+
+
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupFile.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupFile.xhtml
new file mode 100644
index 000000000..f0984a644
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupFile.xhtml
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
+    <cc:interface shortDescription="Component for a form group with a number input">
+        <cc:attribute name="accept"
+                      required="false"
+                      shortDescription="One or more unique file type specifiers describing file types to allow"
+                      type="String" />
+        <cc:attribute name="capture"
+                      required="false"
+                      shortDescription="What source to use for capturing image or video data"
+                      type="String" />
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="max"
+                      required="false"
+                      shortDescription="Maximum allowed value."
+                      type="String" />
+        <cc:attribute name="min"
+                      required="false"
+                      shortDescription="Minimum allowed value."
+                      type="String" />
+        <cc:attribute default="false"
+                      name="multiple"
+                      required="false"
+                      shortDescription="A Boolean which, if present, indicates that the user may choose more than one file"
+                      type="boolean" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server." 
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input accept="#{not empty cc.attrs.accept ? cc.attrs.accept : null}"
+                   aria-describedby="#{cc.attrs.inputId}-help"
+                   capture="#{not empty cc.attrs.capture ? cc.attrs.capture : null}"
+                   id="#{cc.attrs.inputId}"
+                   max="#{not empty cc.attrs.max ? cc.attrs.max : null}"
+                   min="#{not empty cc.attrs.min ? cc.attrs.min : null}"
+                   multiple="#{cc.attrs.multiple ? cc.attrs.multiple : null}"
+                   name="#{cc.attrs.name}"
+                   required="#{cc.attrs.required ? 'required' : null}"
+                   type="file" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
+
+
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupNumber.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupNumber.xhtml
index ed31d82a2..693717010 100644
--- a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupNumber.xhtml
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupNumber.xhtml
@@ -1,9 +1,6 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
-      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
-      xmlns:cc="http://xmlns.jcp.org/jsf/composite"
-      xmlns:f="http://xmlns.jcp.org/jsf/core">
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
     <cc:interface shortDescription="Component for a form group with a number input">
         <cc:attribute name="help"
                       required="true"
@@ -48,32 +45,22 @@
                       type="String" />
     </cc:interface>
     <cc:implementation>
-        <pre>
-            step = #{cc.attrs.step}
-            step = #{(not empty cc.attrs.step) ? cc.attrs.step : null}
-            step not empty? #{not empty cc.attrs.step}
-        </pre>
-        <div>
-            <div class="form-group">
-                <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
-                <!--<cc:renderFacet name="input" />-->
-                <input aria-describedby="#{cc.attrs.inputId}-help"
-                       data-step="#{cc.attrs.step}"
-                       id="#{cc.attrs.inputId}"
-                       max="#{not empty cc.attrs.max ? cc.attrs.max : null}"
-                       min="#{not empty cc.attrs.min ? cc.attrs.min : null}"
-                       name="#{cc.attrs.name}"
-                       placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder : null}"
-                       required="#{cc.attrs.required ? 'required' : null}"
-                       step="#{cc.attrs.step}"
-                       type="number"
-                       value="#{not empty cc.attrs.value ? cc.attrs.value : null}" />
-                <small class="form-text text-muted"
-                       id="#{cc.attrs.inputId}-help">
-                    #{cc.attrs.help}
-                </small>
-            </div>
-
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   id="#{cc.attrs.inputId}"
+                   max="#{not empty cc.attrs.max ? cc.attrs.max : null}"
+                   min="#{not empty cc.attrs.min ? cc.attrs.min : null}"
+                   name="#{cc.attrs.name}"
+                   placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder : null}"
+                   required="#{cc.attrs.required ? 'required' : null}"
+                   step="#{cc.attrs.step}"
+                   type="number"
+                   value="#{not empty cc.attrs.value ? cc.attrs.value : null}" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
         </div>
     </cc:implementation>
 </html>
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupPassword.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupPassword.xhtml
new file mode 100644
index 000000000..ca9e387f8
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupPassword.xhtml
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
+    <cc:interface shortDescription="Component for a form group with a text input">
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="maxlength" 
+                      required="false"
+                      shortDescription="Maximum length of the text in this field."
+                      type="int" />
+        <cc:attribute name="minlength" 
+                      required="false"
+                      shortDescription="Minium length of the text in this field."
+                      type="int" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server."
+                      type="String" />
+        <cc:attribute name="pattern"
+                      required="false"
+                      shortDescription="A RegEx pattern that the value entered into this field must match"
+                      type="String" />
+        <cc:attribute name="placeholder"
+                      required="false"
+                      shortDescription="A placeholder to show in the empty field."
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="size"
+                      shortDescription="Length of the field. Can be overwritten using CSS."
+                      required="false"
+                      type="int" />
+        <cc:attribute name="value"
+                      default=""
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   id="#{cc.attrs.inputId}"
+                   maxlength="#{(not empty cc.attrs.maxlength) ? cc.attrs.maxlength : null}"
+                   minlength="#{(not empty cc.attrs.minlength) ? cc.attrs.minlength : null}"
+                   name="#{cc.attrs.name}"
+                   pattern="#{not empty cc.attrs.pattern ? cc.attrs.pattern : null}"
+                   placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder: null}"
+                   required="#{cc.attrs.required ? 'required' : null}"
+                   size="#{not empty cc.attrs.size ? cc.attrs.size : null}"
+                   type="password" 
+                   value="#{not empty cc.attrs.value ? cc.attrs.value : ''}" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
+
+
+
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupRange.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupRange.xhtml
new file mode 100644
index 000000000..aec116750
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupRange.xhtml
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
+    <cc:interface shortDescription="Component for a form group with a number input">
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="max"
+                      required="false"
+                      shortDescription="Maximum allowed value."
+                      type="String" />
+        <cc:attribute name="min"
+                      required="false"
+                      shortDescription="Minimum allowed value."
+                      type="String" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server." 
+                      type="String" />
+        <cc:attribute name="placeholder"
+                      required="false"
+                      shortDescription="A placeholder to show in the empty field."
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="step"
+                      required="false"
+                      shortDescription="Stepping interval for the input"
+                      type="String" />
+        <cc:attribute name="value"
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   class="custom-range"
+                   id="#{cc.attrs.inputId}"
+                   max="#{not empty cc.attrs.max ? cc.attrs.max : null}"
+                   min="#{not empty cc.attrs.min ? cc.attrs.min : null}"
+                   name="#{cc.attrs.name}"
+                   placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder : null}"
+                   required="#{cc.attrs.required ? 'required' : null}"
+                   step="#{cc.attrs.step}"
+                   type="range"
+                   value="#{not empty cc.attrs.value ? cc.attrs.value : null}" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
+
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupSearch.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupSearch.xhtml
new file mode 100644
index 000000000..447e953bd
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupSearch.xhtml
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
+    <cc:interface shortDescription="Component for a form group with a text input">
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="maxlength" 
+                      required="false"
+                      shortDescription="Maximum length of the text in this field."
+                      type="int" />
+        <cc:attribute name="minlength" 
+                      required="false"
+                      shortDescription="Minium length of the text in this field."
+                      type="int" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server."
+                      type="String" />
+        <cc:attribute name="pattern"
+                      required="false"
+                      shortDescription="A RegEx pattern that the value entered into this field must match"
+                      type="String" />
+        <cc:attribute name="placeholder"
+                      required="false"
+                      shortDescription="A placeholder to show in the empty field."
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="size"
+                      shortDescription="Length of the field. Can be overwritten using CSS."
+                      required="false"
+                      type="int" />
+        <cc:attribute name="value"
+                      default=""
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   id="#{cc.attrs.inputId}"
+                   maxlength="#{(not empty cc.attrs.maxlength) ? cc.attrs.maxlength : null}"
+                   minlength="#{(not empty cc.attrs.minlength) ? cc.attrs.minlength : null}"
+                   name="#{cc.attrs.name}"
+                   pattern="#{not empty cc.attrs.pattern ? cc.attrs.pattern : null}"
+                   placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder: null}"
+                   required="#{cc.attrs.required ? 'required' : null}"
+                   size="#{not empty cc.attrs.size ? cc.attrs.size : null}"
+                   type="search" 
+                   value="#{not empty cc.attrs.value ? cc.attrs.value : ''}" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
+
+
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTel.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTel.xhtml
new file mode 100644
index 000000000..21c89fc3c
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTel.xhtml
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
+    <cc:interface shortDescription="Component for a form group with a text input">
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="maxlength" 
+                      required="false"
+                      shortDescription="Maximum length of the text in this field."
+                      type="int" />
+        <cc:attribute name="minlength" 
+                      required="false"
+                      shortDescription="Minium length of the text in this field."
+                      type="int" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server."
+                      type="String" />
+        <cc:attribute name="pattern"
+                      required="false"
+                      shortDescription="A RegEx pattern that the value entered into this field must match"
+                      type="String" />
+        <cc:attribute name="placeholder"
+                      required="false"
+                      shortDescription="A placeholder to show in the empty field."
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="size"
+                      shortDescription="Length of the field. Can be overwritten using CSS."
+                      required="false"
+                      type="int" />
+        <cc:attribute name="value"
+                      default=""
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   id="#{cc.attrs.inputId}"
+                   maxlength="#{(not empty cc.attrs.maxlength) ? cc.attrs.maxlength : null}"
+                   minlength="#{(not empty cc.attrs.minlength) ? cc.attrs.minlength : null}"
+                   multiple="#{cc.attrs.multiple ? 'multiple' : null}"
+                   name="#{cc.attrs.name}"
+                   pattern="#{not empty cc.attrs.pattern ? cc.attrs.pattern : null}"
+                   placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder: null}"
+                   required="#{cc.attrs.required ? 'required' : null}"
+                   size="#{not empty cc.attrs.size ? cc.attrs.size : null}"
+                   type="tel" 
+                   value="#{not empty cc.attrs.value ? cc.attrs.value : ''}" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
+
+
+
+
+
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupText.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupText.xhtml
index a25af17ba..ad68cfeca 100644
--- a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupText.xhtml
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupText.xhtml
@@ -1,9 +1,6 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
-      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
-      xmlns:cc="http://xmlns.jcp.org/jsf/composite"
-      xmlns:f="http://xmlns.jcp.org/jsf/core">
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
     <cc:interface shortDescription="Component for a form group with a text input">
         <cc:attribute name="help"
                       required="true"
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTextarea.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTextarea.xhtml
new file mode 100644
index 000000000..5df333d2f
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTextarea.xhtml
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
+    <cc:interface shortDescription="Component for a form group with a number input">
+        <cc:attribute name="cols"
+                      required="false"
+                      shortDescription="The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20."
+                      type="int" />
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+         <cc:attribute name="maxlength" 
+                      required="false"
+                      shortDescription="Maximum length of the text in this field."
+                      type="int" />
+        <cc:attribute name="minlength" 
+                      required="false"
+                      shortDescription="Minium length of the text in this field."
+                      type="int" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server." 
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="rows"
+                      required="false"
+                      shortDescription="The number of visible text lines for the control."
+                      type="int" />
+        <cc:attribute name="value"
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+        <cc:attribute name="wrap"
+                      required="false"
+                      shortDescription="Indicates how the control wraps text."
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <textarea aria-describedby="#{cc.attrs.inputId}-help"
+                      cols="#{not empty cc.attrs.cols ? cc.attrs.cols : null}"
+                      id="#{cc.attrs.inputId}"
+                      maxlength="#{not empty cc.attrs.maxlength ? cc.attrs.maxlength : null}"
+                      minlength="#{not empty cc.attrs.minlength ? cc.attrs.maxlength : null}"
+                      name="#{cc.attrs.name}"
+                      rows="#{not empty cc.attrs.rows ? cc.attrs.rows : null}"
+                      wrap="#{not empty cc.attrs.wrap ? cc.attrs.wrap : null}">#{cc.attrs.value}</textarea>
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
+
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTime.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTime.xhtml
new file mode 100644
index 000000000..7c7907051
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupTime.xhtml
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
+    <cc:interface shortDescription="Component for a form grouo with an HTML date input field">
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="max"
+                      required="false"
+                      shortDescription="The latest time to accept."
+                      type="String" />
+        <cc:attribute name="min"
+                      required="false"
+                      shortDescription="The earliest time to accept as a valid input"
+                      type="String" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server." 
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="step"
+                      required="false"
+                      shortDescription="The stepping interval (in seconds)"
+                      type="int" />
+        <cc:attribute name="value"
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   id="#{cc.attrs.inputId}"
+                   max="#{cc.attrs.max}"
+                   min="#{cc.attrs.min}"
+                   name="#{cc.attrs.name}"
+                   step="#{cc.attrs.step}"
+                   type="time" 
+                   value="#{cc.attrs.value}" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
+
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupUrl.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupUrl.xhtml
new file mode 100644
index 000000000..8a5cbc55a
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupUrl.xhtml
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
+    <cc:interface shortDescription="Component for a form group with a text input">
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="maxlength" 
+                      required="false"
+                      shortDescription="Maximum length of the text in this field."
+                      type="int" />
+        <cc:attribute name="minlength" 
+                      required="false"
+                      shortDescription="Minium length of the text in this field."
+                      type="int" />
+        <cc:attribute default="false"
+                      name="multiple"
+                      required="false"
+                      shortDescription="Whether or not to allow multiple, comma-separated, e-mail addresses to be entered"
+                      type="boolean" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server."
+                      type="String" />
+        <cc:attribute name="pattern"
+                      required="false"
+                      shortDescription="A RegEx pattern that the value entered into this field must match"
+                      type="String" />
+        <cc:attribute name="placeholder"
+                      required="false"
+                      shortDescription="A placeholder to show in the empty field."
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="size"
+                      shortDescription="Length of the field. Can be overwritten using CSS."
+                      required="false"
+                      type="int" />
+        <cc:attribute name="value"
+                      default=""
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   id="#{cc.attrs.inputId}"
+                   maxlength="#{(not empty cc.attrs.maxlength) ? cc.attrs.maxlength : null}"
+                   minlength="#{(not empty cc.attrs.minlength) ? cc.attrs.minlength : null}"
+                   multiple="#{cc.attrs.multiple ? 'multiple' : null}"
+                   name="#{cc.attrs.name}"
+                   pattern="#{not empty cc.attrs.pattern ? cc.attrs.pattern : null}"
+                   placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder: null}"
+                   required="#{cc.attrs.required ? 'required' : null}"
+                   size="#{not empty cc.attrs.size ? cc.attrs.size : null}"
+                   type="url" 
+                   value="#{not empty cc.attrs.value ? cc.attrs.value : ''}" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
+
+
+
+
+
diff --git a/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/category-form.xhtml b/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/category-form.xhtml
index 846ea9b5d..39b376562 100644
--- a/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/category-form.xhtml
+++ b/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/category-form.xhtml
@@ -5,20 +5,20 @@
       xmlns:h="http://xmlns.jcp.org/jsf/html"
       xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
     <ui:composition template="/WEB-INF/views/org/libreccm/ui/admin/ccm-admin.xhtml">
-        
+
         <ui:param name="activePage" value="categories" />
         <ui:param name="title" value="#{AdminMessages['categories.label']}" />
-    
+
         <ui:define name="breadcrumb">
             <li class="breadcrumb-item active">
                 #{AdminMessages['categories.label']}
             </li>
         </ui:define>
-        
+
         <ui:define name="main">
             <div class="container">
                 <h1>#{AdminMessages['categories.label']}</h1>
-                
+
                 <form action="#" method="post">
                     <bootstrap:formGroupText help="test"
                                              inputId="test"
@@ -31,10 +31,74 @@
                                                name="price" 
                                                step="0.01" 
                                                value="10.0" />
+                    <bootstrap:formGroupDate help="Test of date form group"
+                                             inputId="dateTest"
+                                             label="Date Test"
+                                             max="2020-11-30"
+                                             min="2020-11-02"
+                                             name="dateTest"
+                                             step="7"
+                                             value="2020-11-02" />
+                    <bootstrap:formGroupTime help="Test of date form group"
+                                             inputId="dateTest"
+                                             label="Date Test"
+                                             max="08:00"
+                                             min="18:00"
+                                             name="dateTest"
+                                             step="900"
+                                             value="08:00" />
+                    <bootstrap:formGroupSearch help="search test"
+                                               inputId="searchtest"
+                                               label="Search Test"
+                                               name="searchtest" 
+                                               placeholder="Search" />
+                    <bootstrap:formGroupPassword help="password test"
+                                                 inputId="passwordtest"
+                                                 label="Password Test"
+                                                 name="passwordtest" 
+                                                 placeholder="Password" />
+                    <bootstrap:formGroupEmail help="email test"
+                                              inputId="emailtest"
+                                              label="Email Test"
+                                              name="emailtest" 
+                                              placeholder="foo@example.com" />
+                    <bootstrap:formGroupTel help="Tel test"
+                                            inputId="teltest"
+                                            label="Tel Test"
+                                            name="teltest" 
+                                            placeholder="00000 00000" />
+                    <bootstrap:formGroupFile help="File test"
+                                             inputId="filetest"
+                                             label="File Test"
+                                             name="filetest"  />
+                    <bootstrap:formGroupUrl help="URL test"
+                                            inputId="urltest"
+                                            label="URL Test"
+                                            name="urltest" 
+                                            placeholder="https://www.example.org/foo/bar" />
+                    <bootstrap:formGroupColor help="Color Test"
+                                              inputId="colortest"
+                                              label="Color"
+                                              name="color" />
+                    <bootstrap:formGroupRange help="A range"
+                                              inputId="rangetest"
+                                              label="Range"
+                                              max="20"
+                                              min="5"
+                                              name="rangetest" 
+                                              step="0.1" 
+                                              value="10.0" />
+                    <bootstrap:formGroupTextarea cols="80"
+                                                 help="Textarea Test"
+                                                 label="Textarea"
+                                                 inputId="textareatest"
+                                                 name="textareatest"
+                                                 rows="10" />
+
                 </form>
                 <p>ToDo</p>
             </div>
         </ui:define>
-    
+
     </ui:composition>
 </html>
