Add XHTML compatibility

This is mainly a testing tool, which makes a mode where all HTML bugs
which could slightly mess up the rendering will trigger proper errors in
the browser.

Fixes #1131.

src/headless/converse-muc.js

@@ -289,9 +289,11 @@ converse.plugins.add('converse-muc', {
                  */
                 this.occupants.browserStorage._clear();
                 this.occupants.reset();
-                const disco_entity = _converse.disco_entities.get(this.get('jid'));
-                if (disco_entity) {
-                    disco_entity.destroy();
+                if (_converse.disco_entities) {
+                    const disco_entity = _converse.disco_entities.get(this.get('jid'));
+                    if (disco_entity) {
+                        disco_entity.destroy();
+                    }
                 }
                 if (_converse.connection.connected) {
                     this.sendUnavailablePresence(exit_msg);

src/templates/add_chatroom_modal.html

@@ -5,20 +5,20 @@
                 <h5 class="modal-title"
                     id="add-chatroom-modal-label">{{{o.heading_new_chatroom}}}</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">×</span>
                 </button>
             </div>
             <div class="modal-body">
                 <form class="converse-form add-chatroom">
                     <div class="form-group">
                         <label for="chatroom">{{{o.label_room_address}}}:</label>
-                        <input type="text" required="required" name="chatroom" class="form-control" placeholder="{{{o.chatroom_placeholder}}}">
+                        <input type="text" required="required" name="chatroom" class="form-control" placeholder="{{{o.chatroom_placeholder}}}"/>
                     </div>
                     <div class="form-group">
                         <label for="nickname">{{{o.label_nickname}}}:</label>
-                        <input type="text" name="nickname" value="{{{o.nick}}}" class="form-control">
+                        <input type="text" name="nickname" value="{{{o.nick}}}" class="form-control"/>
                     </div>
-                    <input type="submit" class="btn btn-primary" name="join" value="{{{o.label_join}}}">
+                    <input type="submit" class="btn btn-primary" name="join" value="{{{o.label_join}}}"/>
                 </form>
             </div>
         </div>

src/templates/add_contact_modal.html

@@ -4,7 +4,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="addContactModalLabel">{{{o.heading_new_contact}}}</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
             </div>
             <form class="converse-form add-xmpp-contact">
                 <div class="modal-body">

src/templates/alert_modal.html

@@ -4,13 +4,13 @@
       <div class="modal-header {{{o.type}}}">
         <h5 class="modal-title">{{{o.title}}}</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+          <span aria-hidden="true">×</span>
         </button>
       </div>
       <div class="modal-body">{[o.messages.forEach(function (message) { ]}
           <p>{{{message}}}</p>
       {[ }) ]}
-    </div>
+      </div>
     </div>
   </div>
 </div>

src/templates/bookmark.html

@@ -2,5 +2,5 @@
     <a class="list-item-link open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
     <a class="list-item-action remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
         data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
-        title="{{{o.info_remove_bookmark}}}" href="#">&nbsp;</a>
+        title="{{{o.info_remove_bookmark}}}" href="#"></a>
 </div>

src/templates/chat_status_modal.html

@@ -5,7 +5,7 @@
             <div class="modal-header">
                 <h5 class="modal-title" id="changeStatusModalLabel">{{{o.modal_title}}}</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}">
-                    <span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">×</span>
                 </button>
             </div>
             <div class="modal-body">
@@ -13,33 +13,33 @@
                     <div class="form-group">
                         <div class="custom-control custom-radio">
                             <input {[ if (o.status === 'online') { ]} checked="checked" {[ } ]}
-                                   type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input">
+                                   type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input"/>
                             <label class="custom-control-label" for="radio-online">
-                                <span class="fa fa-circle chat-status chat-status--online"></span>&nbsp;{{{o.label_online}}}</label>
+                                <span class="fa fa-circle chat-status chat-status--online"></span>{{{o.label_online}}}</label>
                         </div>
                         <div class="custom-control custom-radio">
                             <input {[ if (o.status === 'busy') { ]} checked="checked" {[ } ]}
-                                   type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input">
+                                   type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input"/>
                             <label class="custom-control-label" for="radio-busy">
-                                <span class="fa fa-minus-circle  chat-status chat-status--busy"></span>&nbsp;{{{o.label_busy}}}</label>
+                                <span class="fa fa-minus-circle  chat-status chat-status--busy"></span>{{{o.label_busy}}}</label>
                         </div>
                         <div class="custom-control custom-radio">
                             <input {[ if (o.status === 'away') { ]} checked="checked" {[ } ]}
-                                   type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input">
+                                   type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input"/>
                             <label class="custom-control-label" for="radio-away">
-                                <span class="fa fa-circle chat-status chat-status--away"></span>&nbsp;{{{o.label_away}}}</label>
+                                <span class="fa fa-circle chat-status chat-status--away"></span>{{{o.label_away}}}</label>
                         </div>
                         <div class="custom-control custom-radio">
                             <input {[ if (o.status === 'xa') { ]} checked="checked" {[ } ]}
-                                   type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">
+                                   type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input"/>
                             <label class="custom-control-label" for="radio-xa">
-                                <span class="far fa-circle chat-status chat-status--xa"></span>&nbsp;{{{o.label_xa}}}</label>
+                                <span class="far fa-circle chat-status chat-status--xa"></span>{{{o.label_xa}}}</label>
                         </div>
                     </div>
                     <div class="form-group">
                         <div class="btn-group w-100">
                             <input name="status_message" type="text" class="form-control" 
-                                value="{{{o.status_message}}}" placeholder="{{{o.placeholder_status_message}}}">
+                                value="{{{o.status_message}}}" placeholder="{{{o.placeholder_status_message}}}"/>
                             <span class="clear-input fa fa-times {[ if (!o.status_message) { ]} hidden {[ } ]}"></span>
                         </div>
                     </div>

src/templates/chatbox.html

 <div class="flyout box-flyout">
     <div class="chat-body">
         <div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
-        <div class="message-form-container"/>
+        <div class="message-form-container"></div>
     </div>
 </div>

src/templates/chatbox_head.html

@@ -16,7 +16,7 @@
         </div>
     </div>
     <div class="chatbox-buttons row no-gutters">
-        <a class="chatbox-btn close-chatbox-button fa fa-times" title={{{o.info_close}}}></a>
+        <a class="chatbox-btn close-chatbox-button fa fa-times" title="{{{o.info_close}}}"></a>
         <a class="chatbox-btn show-user-details-modal fa fa-id-card" title="{{{o.info_details}}}"></a>
     </div>
 </div>

src/templates/chatbox_message_form.html

@@ -8,7 +8,7 @@
            class="{[ if (!o.composing_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
 
     <div class="suggestion-box">
-        <ul class="suggestion-box__results suggestion-box__results--above" hidden></ul>
+        <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
         <textarea
             type="text"
             class="chat-textarea suggestion-box__input

src/templates/chatroom_details_modal.html

@@ -3,7 +3,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="room-details-modal-label">{{{o.display_name}}}</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">&times;</span></button>
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">×</span></button>
             </div>
             <div class="modal-body">
                 <div class="room-info">

src/templates/chatroom_registration_modal.html

@@ -3,7 +3,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="room-registration-modal-label">{{{o.display_name}}}</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">&times;</span></button>
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">×</span></button>
             </div>
             <div class="modal-body">
                 <form class="converse-form">

src/templates/client_info_modal.html

@@ -5,16 +5,15 @@
             <div class="modal-header">
                 <h5 class="modal-title" id="changeStatusModalLabel">{{{o.modal_title}}}</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}">
-                    <span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">×</span>
                 </button>
             </div>
             <div class="modal-body">
                 <div class="container brand-heading-container">
                     <h6 class="brand-heading"><i class="icon-conversejs"></i>Converse</h6>
                     <p class="brand-subtitle">{{{o.version_name}}}</p>
-                    <p class="brand-subtitle">{{o.first_subtitle}}</a> </p>
+                    <p class="brand-subtitle">{{o.first_subtitle}}</p>
                     <p class="brand-subtitle">{{o.second_subtitle}}</p>
-                <div>
                 </div>
             </div>
         </div>

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) { ]} class="required" {[ } ]} />
 
 

src/templates/form_checkbox.html

 <div class="form-group">
-    <input id="{{{o.id}}}" name="{{{o.name}}}" type="checkbox" {{{o.checked}}} {[ if (o.required) { ]} required {[ } ]} >
+    <input id="{{{o.id}}}" name="{{{o.name}}}" type="checkbox" {{{o.checked}}} {[ if (o.required) { ]} required {[ } ]} />
     <label class="form-check-label" for="{{{o.id}}}">{{{o.label}}}</label>
 </div>

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 {[ } ]} />
 </div>

src/templates/image.html

-<a href="{{{o.url}}}" target="_blank" rel="noopener"><img class="chat-image img-thumbnail" src="{{{o.url}}}"></a>
+<a href="{{{o.url}}}" target="_blank" rel="noopener"><img class="chat-image img-thumbnail" src="{{{o.url}}}"/></a>

src/templates/inverse_brand_heading.html

@@ -4,5 +4,5 @@
         <p class="brand-subtitle">{{{o.version_name}}}</p>
         <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> </p>
         <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> it into your own language</p>
-    <div>
+    </div>
 </div>

src/templates/list_chatrooms_modal.html

@@ -5,16 +5,16 @@
                 <h5 class="modal-title"
                     id="list-chatrooms-modal-label">{{{o.heading_list_chatrooms}}}</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">×</span>
                 </button>
             </div>
             <div class="modal-body">
                 <form class="converse-form list-chatrooms">
                     <div class="form-group">
                         <label for="chatroom">{{{o.label_server_address}}}:</label>
-                        <input type="text" value="{{{o.muc_domain}}}" required="required" name="server" class="form-control" placeholder="{{{o.server_placeholder}}}">
+                        <input type="text" value="{{{o.muc_domain}}}" required="required" name="server" class="form-control" placeholder="{{{o.server_placeholder}}}"/>
                     </div>
-                    <input type="submit" class="btn btn-primary" name="join" value="{{{o.label_query}}}">
+                    <input type="submit" class="btn btn-primary" name="join" value="{{{o.label_query}}}"/>
                 </form>
                 <ul class="available-chatrooms list-group"></ul>
             </div>

src/templates/login_panel.html

@@ -10,17 +10,17 @@
             {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
                 <div class="form-group">
                     <label for="converse-login-jid">{{{o.__("XMPP Username:")}}}</label>
-                    <input id="converse-login-jid" class="form-control" autofocus required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}">
+                    <input id="converse-login-jid" class="form-control" autofocus required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}"/>
                 </div>
                 {[ if (o.authentication !== o.EXTERNAL) { ]}
                 <div class="form-group">
                     <label for="converse-login-password">{{{o.__("Password:")}}}</label>
-                    <input id="converse-login-password" class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}">
+                    <input id="converse-login-password" class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}"/>
                 </div>
                 {[ } ]}
                 {[ if (o.show_trust_checkbox) { ]}
                     <div class="form-group form-check login-trusted">
-                        <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" {[ if (o._converse.config.get('trusted')) { ]} checked="checked" {[ } ]}>
+                        <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" {[ if (o._converse.config.get('trusted')) { ]} checked="checked" {[ } ]}/>
                         <label for="converse-login-trusted" class="form-check-label login-trusted__desc">{{{o.__('This is a trusted device')}}}</label>
                         <i class="fa fa-info-circle" data-toggle="popover"
                            data-title="Trusted device?"
@@ -29,7 +29,7 @@
                 {[ } ]}
 
                 <fieldset class="buttons">
-                    <input class="btn btn-primary" type="submit" value="{{{o.__('Log in')}}}">
+                    <input class="btn btn-primary" type="submit" value="{{{o.__('Log in')}}}"/>
                 </fieldset>
             {[ } ]}
             {[ if (o.authentication == o.ANONYMOUS) { ]}

src/templates/message.html

@@ -12,7 +12,7 @@
             {[ if (o.is_encrypted) { ]}<span class="fa fa-lock"></span>{[ } ]}
         </span>
         {[ if (!o.is_me_message) { ]}<div class="chat-msg__body">{[ } ]}
-            {[ if (o.received) { ]} <span class="fa fa-check chat-msg__receipt">&nbsp;</span> {[ } ]}
+            {[ if (o.received) { ]} <span class="fa fa-check chat-msg__receipt"></span> {[ } ]}
             {[ if (o.edited) { ]} <i title="{{{o.__('This message has been edited')}}}" class="fa fa-edit chat-msg__edit-modal"></i> {[ } ]}
             {[ if (!o.is_me_message) { ]}<div class="chat-msg__message">{[ } ]}
                 {[ if (o.is_spoiler) { ]}
@@ -26,7 +26,7 @@
             {[ if (!o.is_me_message) { ]}</div>{[ } ]}
             {[ if (o.type !== 'headline' && !o.is_me_message && o.sender === 'me') { ]}
             <div class="chat-msg__actions">
-                <button class="chat-msg__action chat-msg__action-edit fa fa-pencil-alt" title="{{{o.__('Edit this message')}}}">&nbsp;</button>
+                <button class="chat-msg__action chat-msg__action-edit fa fa-pencil-alt" title="{{{o.__('Edit this message')}}}"></button>
             </div>
             {[ } ]}
 

src/templates/message_versions_modal.html

@@ -3,12 +3,12 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h4 class="modal-title" id="message-versions-modal-label">{{{o.__('Message versions')}}}</h4>
-                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">&times;</span></button>
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">×</span></button>
             </div>
             <div class="modal-body">
                 <h4>Older versions</h4>
                 {[o.older_versions.forEach(function (text) { ]} <p class="older-msg">{{{text}}}</p> {[ }); ]}
-                <hr>
+                <hr/>
                 <h4>Current version</h4>
                 <p>{{{o.message}}}</p>
             </div>

src/templates/new_day.html

 <div class="message date-separator" data-isodate="{{{o.isodate}}}">
-    <hr class="separator">
+    <hr class="separator"/>
     <time class="separator-text" datetime="{{{o.isodate}}}"><span>{{{o.datestring}}}</span></time>
 </div>

src/templates/oauth_providers.html

@@ -2,7 +2,7 @@
     {[ o._.forEach(o.providers, function (provider) { ]}
     <p class="oauth-provider">
         <a class="oauth-login" href="#" data-id="{{provider.id}}">
-            <i class="fa {{ provider.class}}"></i>{{provider.login_text}}</span>
+            <i class="fa {{ provider.class}}"></i>{{provider.login_text}}
         </a>
     </p>
     {[ }); ]}

src/templates/profile_modal.html

@@ -3,7 +3,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="user-profile-modal-label">{{{o.heading_profile}}}</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">&times;</span></button>
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">×</span></button>
             </div>
             <div class="modal-body">
                 {[ if (o._converse.pluggable.plugins['converse-omemo'].enabled(o._converse)) { ]}
@@ -29,7 +29,7 @@
                                             <canvas class="avatar" height="100px" width="100px"></canvas>
                                         {[ } ]}
                                     </a>
-                                    <input class="hidden" name="image" type="file">
+                                    <input class="hidden" name="image" type="file"/>
                                 </div>
                                 <div class="col">
                                     <div class="form-group">
@@ -40,23 +40,23 @@
                             </div>
                             <div class="form-group">
                                 <label for="vcard-fullname" class="col-form-label">{{{o.label_fullname}}}:</label>
-                                <input id="vcard-fullname" type="text" class="form-control" name="fn" value="{{{o.fullname}}}">
+                                <input id="vcard-fullname" type="text" class="form-control" name="fn" value="{{{o.fullname}}}"/>
                             </div>
                             <div class="form-group">
                                 <label for="vcard-nickname" class="col-form-label">{{{o.label_nickname}}}:</label>
-                                <input id="vcard-nickname" type="text" class="form-control" name="nickname" value="{{{o.nickname}}}">
+                                <input id="vcard-nickname" type="text" class="form-control" name="nickname" value="{{{o.nickname}}}"/>
                             </div>
                             <div class="form-group">
                                 <label for="vcard-url" class="col-form-label">{{{o.label_url}}}:</label>
-                                <input id="vcard-url" type="url" class="form-control" name="url" value="{{{o.url}}}">
+                                <input id="vcard-url" type="url" class="form-control" name="url" value="{{{o.url}}}"/>
                             </div>
                             <div class="form-group">
                                 <label for="vcard-email" class="col-form-label">{{{o.label_email}}}:</label>
-                                <input id="vcard-email" type="email" class="form-control" name="email" value="{{{o.email}}}">
+                                <input id="vcard-email" type="email" class="form-control" name="email" value="{{{o.email}}}"/>
                             </div>
                             <div class="form-group">
                                 <label for="vcard-role" class="col-form-label">{{{o.label_role}}}:</label>
-                                <input id="vcard-role" type="text" class="form-control" name="role" value="{{{o.role}}}" aria-describedby="vcard-role-help">
+                                <input id="vcard-role" type="text" class="form-control" name="role" value="{{{o.role}}}" aria-describedby="vcard-role-help"/>
                                 <small id="vcard-role-help" class="form-text text-muted">{{{o.label_role_help}}}</small>
                             </div>
                             <hr/>
@@ -87,7 +87,7 @@
                                         <li class="list-group-item nopadding active">
                                             <label>
                                             <input type="checkbox" class="select-all" title="{{{o.__('Select all')}}}"
-                                                   aria-label="{{{o.__('Checkbox to select fingerprints of all other OMEMO devices')}}}">
+                                                   aria-label="{{{o.__('Checkbox to select fingerprints of all other OMEMO devices')}}}"/>
                                             {{{o.__('Other OMEMO-enabled devices')}}}
                                             </label>
                                         </li>
@@ -96,7 +96,7 @@
                                             <li class="fingerprint-removal-item list-group-item nopadding">
                                                 <label>
                                                 <input type="checkbox" value="{{{device.get('id')}}}"
-                                                       aria-label="{{{o.__('Checkbox for selecting the following fingerprint')}}}">
+                                                       aria-label="{{{o.__('Checkbox for selecting the following fingerprint')}}}"/>
                                                 <span class="fingerprint">{{{o.utils.formatFingerprint(device.get('bundle').fingerprint)}}}</span>
                                                 </label>
                                             </li>
@@ -104,7 +104,7 @@
                                             <li class="fingerprint-removal-item list-group-item nopadding">
                                                 <label>
                                                 <input type="checkbox" value="{{{device.get('id')}}}"
-                                                       aria-label="{{{o.__('Checkbox for selecting the following fingerprint')}}}">
+                                                       aria-label="{{{o.__('Checkbox for selecting the following fingerprint')}}}"/>
                                                 <span>{{{o.__('Device without a fingerprint')}}}</span>
                                                 </label>
                                             </li>

src/templates/register_panel.html

@@ -9,19 +9,18 @@
             {[ if (o.default_domain) { ]}
                 {{{o.default_domain}}}
             </div>
-            {[ } ]}
-            {[ if (!o.default_domain) { ]}
-                <input class="form-control" autofocus="autofocus" required="required" type="text" name="domain" placeholder="{{{o.domain_placeholder}}}">
+            {[ } else { ]}
+                <input class="form-control" autofocus="autofocus" required="required" type="text" name="domain" placeholder="{{{o.domain_placeholder}}}"/>
                 <p class="form-text text-muted">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p>
             </div>
             <fieldset class="buttons">
-                <input class="btn btn-primary" type="submit" value="{{{o.label_register}}}">
+                <input class="btn btn-primary" type="submit" value="{{{o.label_register}}}"/>
                 <div class="switch-form">
                     <p>{{{ o.__("Already have a chat account?") }}}</p>
                     <p><a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a></p>
                 </div>
             </fieldset>
             {[ } ]}
-        </div>
+        <!--</div>-->
     </form>
 </div>

src/templates/room_item.html

@@ -7,6 +7,6 @@
        href="#">{{{o.name}}}</a>
     <a class="right room-info icon-room-info"
        data-room-jid="{{{o.jid}}}"
-       title="{{{o.info_title}}}" href="#">&nbsp;</a>
+       title="{{{o.info_title}}}" href="#"></a>
   </div>
 </li>

src/templates/rooms_list_item.html

@@ -13,15 +13,15 @@
 <a class="list-item-action fa {[ if (o.bookmarked) { ]} fa-bookmark remove-bookmark button-on {[ } else { ]} add-bookmark fa-bookmark-o {[ } ]}"
    data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
    title="{[ if (o.bookmarked) { ]} {{{o.info_remove_bookmark}}} {[ } else { ]} {{{o.info_add_bookmark}}} {[ } ]}"
-   href="#">&nbsp;</a>
+   href="#"></a>
 {[ } ]}
 
 <a class="list-item-action room-info fa fa-info-circle" data-room-jid="{{{o.jid}}}"
-   title="{{{o.info_title}}}" href="#">&nbsp;</a>
+   title="{{{o.info_title}}}" href="#"></a>
 
 <a class="list-item-action fa fa-times close-room"
    data-room-jid="{{{o.jid}}}"
    data-room-name="{{{o.name || o.jid}}}"
-   title="{{{o.info_leave_room}}}" href="#">&nbsp;</a>
+   title="{{{o.info_leave_room}}}" href="#"></a>
 
 </div>

src/templates/rooms_results.html

-<li class="list-group-item active">{{{ o.feedback_text }}}</dt>
+<li class="list-group-item active">{{{ o.feedback_text }}}</li>

src/templates/roster_filter.html

@@ -3,7 +3,7 @@
         <div class="btn-group">
             <input {[ if (o.filter_text) { ]} value="{{{o.filter_text}}}" {[ } ]}
                 class="roster-filter form-control {[ if (o.filter_type === 'state') { ]} hidden {[ } ]}"
-                placeholder="{{{o.placeholder}}}">
+                placeholder="{{{o.placeholder}}}"/>
             <span class="clear-input fa fa-times {[ if (!o.filter_text || o.filter_type === 'state') { ]} hidden {[ } ]}"></span>
         </div>
 

src/templates/spoiler_button.html

 <li class="toggle-compose-spoiler fa {[ if (o.composing_spoiler)  { ]} fa-eye-slash {[ } ]} {[ if (!o.composing_spoiler)  { ]} fa-eye {[ } ]}"
-    title="{{ o.label_toggle_spoiler }}"></a>
+    title="{{ o.label_toggle_spoiler }}">
 </li>

src/templates/toolbar_fileupload.html

 <li class="upload-file">
     <a class="fa fa-paperclip" title="{{{o.tooltip_upload_file}}}"></a>
-    <input type="file" class="fileupload" multiple style="display:none"/>
+    <input type="file" class="fileupload" multiple="" style="display:none"/>
 </li> 

src/templates/user_details_modal.html

@@ -3,7 +3,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="user-details-modal-label">{{{o.display_name}}}</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.__('Close')}}}"><span aria-hidden="true">&times;</span></button>
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.__('Close')}}}"><span aria-hidden="true">×</span></button>
             </div>
             <div class="modal-body">
                 {[ if (o.image) { ]}
@@ -12,24 +12,24 @@
                     height="100" width="100" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
                 {[ } ]}
                 {[ if (o.fullname) { ]}
-                <p><label>{{{o.__('Full Name:')}}}</label>&nbsp;{{{o.fullname}}}</p>
+                <p><label>{{{o.__('Full Name:')}}}</label> {{{o.fullname}}}</p>
                 {[ } ]}
-                <p><label>{{{o.__('XMPP Address:')}}}</label>&nbsp;<a href="xmpp:{{{o.jid}}}">{{{o.jid}}}</a></p>
+                <p><label>{{{o.__('XMPP Address:')}}}</label> <a href="xmpp:{{{o.jid}}}">{{{o.jid}}}</a></p>
                 {[ if (o.nickname) { ]}
-                <p><label>{{{o.__('Nickname:')}}}</label>&nbsp;{{{o.nickname}}}</p>
+                <p><label>{{{o.__('Nickname:')}}}</label> {{{o.nickname}}}</p>
                 {[ } ]}
                 {[ if (o.url) { ]}
-                <p><label>{{{o.__('URL:')}}}</label>&nbsp;<a target="_blank" rel="noopener" href="{{{o.url}}}">{{{o.url}}}</a></p>
+                <p><label>{{{o.__('URL:')}}}</label> <a target="_blank" rel="noopener" href="{{{o.url}}}">{{{o.url}}}</a></p>
                 {[ } ]}
                 {[ if (o.email) { ]}
-                <p><label>{{{o.__('Email:')}}}</label>&nbsp;<a href="mailto:{{{o.email}}}">{{{o.email}}}</a></p>
+                <p><label>{{{o.__('Email:')}}}</label> <a href="mailto:{{{o.email}}}">{{{o.email}}}</a></p>
                 {[ } ]}
                 {[ if (o.role) { ]}
-                <p><label>{{{o.__('Role:')}}}</label>&nbsp;{{{o.role}}}</p>
+                <p><label>{{{o.__('Role:')}}}</label> {{{o.role}}}</p>
                 {[ } ]}
 
                 {[ if (o._converse.pluggable.plugins['converse-omemo'].enabled(o._converse)) { ]}
-                    <hr>
+                    <hr/>
                     <ul class="list-group fingerprints">
                         <li class="list-group-item active">{{{o.__('OMEMO Fingerprints')}}}</li>
                         {[ if (!o.view.devicelist.devices) { ]}
@@ -43,11 +43,11 @@
                                     <div class="btn-group btn-group-toggle">
                                         <label class="btn btn--small {[ if (device.get('trusted') !== -1) { ]} btn-primary active {[ } else { ]}  btn-secondary {[ } ]}">
                                             <input type="radio" name="{{{device.get('id')}}}" value="1"
-                                                {[ if (device.get('trusted') !== -1) { ]} checked="checked" {[ } ]}>{{{o.__('Trusted')}}}
+                                                {[ if (device.get('trusted') !== -1) { ]} checked="checked" {[ } ]}/>{{{o.__('Trusted')}}}
                                         </label>
                                         <label class="btn btn--small {[ if (device.get('trusted') === -1) { ]} btn-primary active {[ } else { ]} btn-secondary {[ } ]}">
                                             <input type="radio" name="{{{device.get('id')}}}" value="-1"
-                                                {[ if (device.get('trusted') === -1) { ]} checked="checked" {[ } ]}>{{{o.__('Untrusted')}}}
+                                                {[ if (device.get('trusted') === -1) { ]} checked="checked" {[ } ]}/>{{{o.__('Untrusted')}}}
                                         </label>
                                     </div>
                                     <span class="fingerprint">{{{o.utils.formatFingerprint(device.get('bundle').fingerprint)}}}</span>