new file mode 100644
--- /dev/null
+++ b/vcard.js
@@ -0,0 +1,90 @@
+'use strict';
+
+function initVCard(connection) {
+    const vcard_access = document.getElementById('vcard-access');
+    const vcard_fullname = document.getElementById('vcard-fullname');
+    const vcard_email = document.getElementById('vcard-email');
+    const spinner_img = document.getElementById('vcard-spinner');
+    const access_spinner_img = document.getElementById('vcard-access-spinner');
+
+    const vcard_data = {};
+
+    const iq = $iq({type: 'get'})
+        .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'})
+            .c('items', {node: 'urn:xmpp:vcard4'})
+                .c('item', {id: 'current'});
+    connection.sendIQ(iq, onVCard4, onVCard4RetrievalError.bind(null, 'PubSub query failed.'));
+    displaySpinner(spinner_img);
+
+    function onVCard4(result_iq)
+    {
+        const item = parseXPath(result_iq, './pubsub:pubsub/pubsub:items/pubsub:item');
+        if (item === null)
+            return onVCard4RetrievalError('no item found.');
+        const vcard = parseXPath(item, './vcard4:vcard');
+        if (vcard === null)
+            return onVCard4RetrievalError('no vCard4 found, your PubSub node is broken.');
+
+        vcard_data.fn = parseXPathText(vcard, './vcard4:fn/vcard4:text');
+        vcard_data.email = parseXPathText(vcard, './vcard4:email/vcard4:text');
+
+        vcard_fullname.value = vcard_data.fn;
+        vcard_fullname.disabled = false;
+        vcard_email.value = vcard_data.email;
+        vcard_email.disabled = false;
+        hideSpinner(spinner_img);
+    }
+
+    function onVCard4RetrievalError(string)
+    {
+        console.log('Failed to retrieve vCard4: ' + string);
+        vcard_fullname.disabled = false;
+        vcard_email.disabled = false;
+        hideSpinner(spinner_img);
+    }
+
+    function setVCard4() {
+        // TODO: avoid overriding fields we don’t understand.
+        const iq = $iq({type: 'set'})
+            .c('vcard', {xmlns: 'urn:ietf:params:xml:ns:vcard-4.0'})
+                .c('fn')
+                    .c('text').t(vcard_fullname.value).up().up()
+                .c('email')
+                    .c('text').t(vcard_email.value).up().up()
+        connection.sendIQ(iq, onVCard4Changed, onVCard4ChangeError.bind(null, 'coucou'));
+        displaySpinner(spinner_img);
+    }
+
+    vcard_fullname.addEventListener('blur', setVCard4);
+    vcard_email.addEventListener('blur', setVCard4);
+
+    function onVCard4Changed(result_iq)
+    {
+        console.log('Successfully set vCard4.')
+        spinnerOk(spinner_img);
+    }
+
+    function onVCard4ChangeError(string)
+    {
+        console.log('Failed to set vCard4: ' + string);
+        spinnerError(spinner_img);
+    }
+
+    vcard_access.addEventListener('change', function (evt) {
+        const iq = configurePEPField('urn:xmpp:vcard4', 'pubsub#access_model', evt.target.value);
+        connection.sendIQ(iq, onAccessConfigured, onAccessConfigureError.bind(null, 'PubSub configuration failed.'));
+        displaySpinner(access_spinner_img);
+    });
+
+    function onAccessConfigured(result_iq)
+    {
+        console.log('Successfully set vCard4 access model.')
+        spinnerOk(access_spinner_img);
+    }
+
+    function onAccessConfigureError(string)
+    {
+        console.log('Failed to configure vCard4 node: ' + string);
+        spinnerError(access_spinner_img);
+    }
+}