Map XEP-0122 data types to HTML5 form field types

This should invoke nicer UI some browsers have for certain types, like numbers.

CHANGES.md

@@ -18,6 +18,7 @@ Three config settings have been obsoleted:
   - show_images_inline
   - muc_show_ogp_unfurls
 
+- Use more specific types for form fields based on XEP-0122
 
 ### Breaking Changes
 

conversejs.doap

@@ -87,6 +87,13 @@
         <xmpp:note>advertises caps but no caching</xmpp:note>
       </xmpp:SupportedXep>
     </implements>
+    <implements>
+      <xmpp:SupportedXep>
+        <xmpp:xep rdf:resource="https://xmpp.org/extensions/xep-0122.html"/>
+        <xmpp:status>partial</xmpp:status>
+        <xmpp:note>basic string field sub-type usage</xmpp:note>
+      </xmpp:SupportedXep>
+    </implements>
     <implements>
       <xmpp:SupportedXep>
         <xmpp:xep rdf:resource="https://xmpp.org/extensions/xep-0124.html"/>

src/utils/html.js

@@ -44,8 +44,26 @@ const XFORM_TYPE_MAP = {
     'list-multi': 'dropdown'
 };
 
+const XFORM_VALIDATE_TYPE_MAP = {
+	'xs:anyURI': 'url',
+	'xs:byte': 'number',
+	'xs:date': 'date',
+	'xs:dateTime': 'datetime',
+	'xs:int': 'number',
+	'xs:integer': 'number',
+	'xs:time': 'time',
+}
+
 function getInputType(field) {
-	return XFORM_TYPE_MAP[field.getAttribute('type')]
+	const type = XFORM_TYPE_MAP[field.getAttribute('type')]
+	if (type == 'text') {
+		const datatypes = field.getElementsByTagNameNS("http://jabber.org/protocol/xdata-validate", "validate");
+		if (datatypes.length === 1) {
+			const datatype = datatypes[0].getAttribute("datatype");
+			return XFORM_VALIDATE_TYPE_MAP[datatype] || type;
+		}
+	}
+	return type;
 }
 
 function slideOutWrapup (el) {