From ec792abbda6dde8b34b69929df22620cb3965dd9 Mon Sep 17 00:00:00 2001
From: Kim Alvefur <zash@zash.se>
Date: Wed, 23 Oct 2019 20:40:52 +0200
Subject: [PATCH] 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        |  1 +
 conversejs.doap   |  7 +++++++
 src/utils/html.js | 20 +++++++++++++++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/CHANGES.md b/CHANGES.md
index 67b02d2cb..44176df27 100644
--- a/CHANGES.md
+++ b/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
 
diff --git a/conversejs.doap b/conversejs.doap
index e961899fd..b998701eb 100644
--- a/conversejs.doap
+++ b/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"/>
diff --git a/src/utils/html.js b/src/utils/html.js
index 9b67dff4c..3270cd159 100644
--- a/src/utils/html.js
+++ b/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) {