Make sure required registration fields have "required" attribute

CHANGES.md

@@ -14,6 +14,7 @@
 - Render inline images served over HTTP if Converse itself was loaded on an unsecured (HTTP) page.
 - Document new API method [sendMessage](https://conversejs.org/docs/html/api/-_converse.ChatBox.html#sendMessage)
 - Make sure `nickname` passed in via `_converse.initialize` has first preference as MUC nickname
+- Make sure required registration fields have "required" attribute
 - #1149: With `xhr_user_search_url`, contact requests are not being sent out
 - #1213: Switch roster filter input and icons
 - #1327: fix False mentions positives in URLs and Email addresses

dist/converse.js

@@ -93864,7 +93864,7 @@ __e(o.data) +
 __e(o.name) +
 '" type="text" ';
  if (o.required) { ;
-__p += ' class="required" ';
+__p += ' required="required" ';
  } ;
 __p += ' />\n\n\n';
 return __p
@@ -93942,7 +93942,7 @@ __e(o.value) +
  } ;
 __p += '\n        ';
  if (o.required) { ;
-__p += ' required ';
+__p += ' required="required" ';
  } ;
 __p += ' />\n</div>\n';
 return __p
@@ -94054,7 +94054,7 @@ __e(o.value) +
  } ;
 __p += '\n                ';
  if (o.required) { ;
-__p += ' class="required" ';
+__p += ' required="required" ';
  } ;
 __p += ' />\n            <div class="input-group-text col" title="' +
 __e(o.domain) +

spec/register.js

@@ -264,5 +264,69 @@
             );
             done();
         }));
+
+        it("renders the account registration form",
+            mock.initConverse(
+                null, ['connectionInitialized', 'chatBoxesInitialized'],
+                { auto_login: false,
+                  view_mode: 'fullscreen',
+                  allow_registration: true },
+                async function (done, _converse) {
+
+            await test_utils.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'));
+            test_utils.openControlBox();
+            const cbview = _converse.chatboxviews.get('controlbox');
+            cbview.el.querySelector('.toggle-register-login').click();
+            const registerview = _converse.chatboxviews.get('controlbox').registerpanel;
+            spyOn(registerview, 'onProviderChosen').and.callThrough();
+            spyOn(registerview, 'getRegistrationFields').and.callThrough();
+            spyOn(registerview, 'onRegistrationFields').and.callThrough();
+            spyOn(registerview, 'renderRegistrationForm').and.callThrough();
+            registerview.delegateEvents();  // We need to rebind all events otherwise our spy won't be called
+            spyOn(_converse.connection, 'connect').and.callThrough();
+
+            registerview.el.querySelector('input[name=domain]').value = 'conversejs.org';
+            registerview.el.querySelector('input[type=submit]').click();
+
+            let stanza = new Strophe.Builder("stream:features", {
+                        'xmlns:stream': "http://etherx.jabber.org/streams",
+                        'xmlns': "jabber:client"
+                    })
+                .c('register',  {xmlns: "http://jabber.org/features/iq-register"}).up()
+                .c('mechanisms', {xmlns: "urn:ietf:params:xml:ns:xmpp-sasl"});
+            _converse.connection._connect_cb(test_utils.createRequest(stanza));
+
+            stanza = u.toStanza(`
+                <iq xmlns="jabber:client" type="result" from="conversations.im" id="ad1e0d50-5adb-4397-a997-5feab56fe418:sendIQ" xml:lang="en">
+                    <query xmlns="jabber:iq:register">
+                        <x xmlns="jabber:x:data" type="form">
+                            <instructions>Choose a username and password to register with this server</instructions>
+                            <field var="FORM_TYPE" type="hidden"><value>urn:xmpp:captcha</value></field>
+                            <field var="username" type="text-single" label="User"><required/></field>
+                            <field var="password" type="text-private" label="Password"><required/></field>
+                            <field var="from" type="hidden"><value>conversations.im</value></field>
+                            <field var="challenge" type="hidden"><value>15376320046808160053</value></field>
+                            <field var="sid" type="hidden"><value>ad1e0d50-5adb-4397-a997-5feab56fe418:sendIQ</value></field>
+                            <field var="ocr" type="text-single" label="Enter the text you see">
+                                <media xmlns="urn:xmpp:media-element">
+                                    <uri type="image/png">cid:sha1+2df8c1b366f1e90ce60354f97d1fe75237290b8a@bob.xmpp.org</uri>
+                                </media>
+                                <required/>
+                            </field>
+                        </x>
+                        <data xmlns="urn:xmpp:bob" cid="sha1+2df8c1b366f1e90ce60354f97d1fe75237290b8a@bob.xmpp.org"
+                              type="image/png"
+                              max-age="0">iVBORw0KGgoAAAANSUhEUgAAALQAAAA8BAMAAAA9AI20AAAAMFBMVEX///8AAADf39+fn59fX19/f3+/v78fHx8/Pz9PT08bGxsvLy9jY2NTU1MXFxcnJyc84bkWAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAERUlEQVRYhe1WTXMaRxDdDxY4JWpYvDinpVyxdATLin0MiRLlCHEi+7hYUcVHTSI7urhK6yr5//gn5N/4Z7inX89+CQkTcFUO6gOwS8/r7tdvesbzvoT5ROR5JJ9bB97xAK22XWAY1WznlnUr7QaAzSOsWufXQ6wH/FmO60b4D936LJr8TWRwW4SNgOsodZr8m4vZUoRt2xZ3xHXgna1FCE5+f5aWwPU//bXgg8eHjyqPp4aXJeOlwLUIt0O39zOvPWW3WfHmCCkli816FxlK0rnFGKZ484dN+eIXsw1R+G+JfjwgOpMnm+r5SxA63gS2Q8MchO1RLN8jSn4W4F5OPed2evhTthKLG3bsfjLL874XGBpWHLrU0953i/ev7JsfViHbhsWSQTunJDOppeAe0hVGokJUHBOphmjrbBlgabviJKXbIP0B//gKSBHZh2rvJnQp3wsapMFz+VsTPNhPr0Hn9N57YOjywaxFSU6S79fUF39KBDgnt6yjZOeSffk+4IXDZovbQl9E96m34EzQKMepQcbzijAGiBmDsO+LaqzqG3m3kEf+DQ2mY+vdk5c2n2Iaj5QGi6n59FHDmcuP4t8MGlRaF39P6ENyIaB2EXdpjLnQq9IgdVxfax3ilBc10u4gowX9K6BaKiZNmCC7CF/WpkJvWxN00OjuoqGYLqAnpILLE68Ymrt9M0S9hcznUJ8RykdlLalUfFaDjvA8pT2kxmsl5fuMaM6mSWUpUhDoudSucdhiZFDwphEHwsMwhEpH0jsm+/UBK2wCzFIiitalN7YjWkyIBgTNPgpDXX4rjk4UH+yPPgfK4HNZQCP/KZ0fGnrnKl8+pXl3X7FwZuwNUdwDGO+BjPUn6XaKtbkm+MJ6vtaXSnIz6wBT/m+VvZNIhz7ayabQLSeRQDmYkjt0KlmHDa555v9DzFxx+CCvCG4K3dbx6mTYtfPs1Dgdh0i3W+cl4lnnhblMKKBBA23X1Ezc3E5ZoPS5KHjPiU1rKTviYe1fTsa6e3UwXGWI4ykB8uiGqkmA6Cbf3K4JTH3LOBlbX+yPWll57LKVeH8CTEvyVPV2TXL8kPnPqtA51CaFYxOH2rJoZunSnvsSj48WiaDccl6KEgiMSarITsa+rWWBnqFloYlT1qWW2GKw9nPSbEvoVHFst967XgNQjxdA66Q6VFEUh488xfaSo7cHB52XYzA4eRlVteeT8ostWfuPea0oF6MwzlwgZE9gQI+uUV0gzK+WlpUrNI8juhhX/OyNwZnRrsDfxOqS1aDR+gC6NUPvJpvQeVZ9eiNr9aDUuddY3bLnA4tH4r/49UboznH1ia8PV/uP3WUB3dxtzj1uxfDZgbEbZx17Itwrf0Jyc8N4en+5dhivtKeYjGJ8yXgUzKvSU/uWJZmsuAYtseDku+K3zMHi4lC1h0suPmtZaEp2tm3hEV2lXwb6zu7szv6f9glF5rPGT5xR7AAAAABJRU5ErkJggg==</data>
+                        <instructions>You need a client that supports x:data and CAPTCHA to register</instructions>
+                    </query>
+                </iq`);
+            _converse.connection._dataRecv(test_utils.createRequest(stanza));
+            expect(registerview.form_type).toBe('xform');
+            expect(registerview.el.querySelectorAll('#converse-register input[required="required"]').length).toBe(3);
+            // Hide the controlbox so that we can see whether the test
+            // passed or failed
+            u.addClass('hidden', _converse.chatboxviews.get('controlbox').el);
+            done();
+        }));
     });
 }));

src/templates/form_captcha.html

@@ -4,6 +4,6 @@
 </label>
 {[ } ]}
 <img src="data:{{{o.type}}};base64,{{{o.data}}}">
-<input name="{{{o.name}}}" type="text" {[ if (o.required) { ]} class="required" {[ } ]} />
+<input name="{{{o.name}}}" type="text" {[ if (o.required) { ]} required="required" {[ } ]} />
 
 

src/templates/form_input.html

@@ -5,5 +5,5 @@
     <input class="form-control" name="{{{o.name}}}" type="{{{o.type}}}" id="{{{o.id}}}"
         {[ if (o.placeholder) { ]} placeholder="{{{o.placeholder}}}" {[ } ]}
         {[ if (o.value) { ]} value="{{{o.value}}}" {[ } ]}
-        {[ if (o.required) { ]} required {[ } ]} />
+        {[ if (o.required) { ]} required="required" {[ } ]} />
 </div>

src/templates/form_username.html

@@ -8,7 +8,7 @@
         <div class="input-group-prepend">
             <input name="{{{o.name}}}" type="{{{o.type}}}"
                 {[ if (o.value) { ]} value="{{{o.value}}}" {[ } ]}
-                {[ if (o.required) { ]} class="required" {[ } ]} />
+                {[ if (o.required) { ]} required="required" {[ } ]} />
             <div class="input-group-text col" title="{{{o.domain}}}">{{{o.domain}}}</div>
         </div>
     </div>