More work on the "add chatroom" modal. Working now.

Makefile

@@ -132,7 +132,7 @@ dev: stamp-bundler stamp-npm
 ## Builds
 
 .PHONY: css
-css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css css/fonts.css
+css: dev sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css css/fonts.css
 
 css/inverse.css:: stamp-bundler sass sass/*.scss
 	$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse/inverse.scss css/inverse.css

css/converse-muc-embedded.css

@@ -15,7 +15,7 @@
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box; }
-  #conversejs.converse-embedded form.pure-form.converse-centered-form {
+  #conversejs.converse-embedded form.converse-centered-form {
     position: absolute;
     top: 30%;
     transform: translateY(-50%); }

css/converse.css

@@ -4773,7 +4773,7 @@ body.reset {
     height: auto; }
   #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
   #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
-  #conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
+  #conversejs fieldset, #conversejs form, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
   #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
   #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
   #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
@@ -5016,8 +5016,6 @@ body.reset {
     border-radius: 25%; }
   #conversejs .activated {
     display: block !important; }
-  #conversejs .pure-form-message {
-    padding: 0.5em 0; }
   #conversejs .button-primary {
     color: white;
     background-color: #3AA569; }
@@ -5032,46 +5030,44 @@ body.reset {
     right: 0.2em;
     cursor: pointer;
     font-size: 0.75rem; }
-  #conversejs form.pure-form.converse-form {
+  #conversejs form.converse-form {
     background: white;
     padding: 1em; }
-    #conversejs form.pure-form.converse-form legend {
+    #conversejs form.converse-form legend {
       color: #777;
       font-size: 125%;
       margin-bottom: 1.5em; }
-    #conversejs form.pure-form.converse-form input[type=checkbox] {
+    #conversejs form.converse-form input[type=checkbox] {
       display: block; }
-    #conversejs form.pure-form.converse-form select,
-    #conversejs form.pure-form.converse-form input[type=password],
-    #conversejs form.pure-form.converse-form input[type=number],
-    #conversejs form.pure-form.converse-form input[type=text] {
+    #conversejs form.converse-form select,
+    #conversejs form.converse-form input[type=password],
+    #conversejs form.converse-form input[type=number],
+    #conversejs form.converse-form input[type=text] {
       min-width: 50%; }
-    #conversejs form.pure-form.converse-form label {
-      font-size: 16px; }
-    #conversejs form.pure-form.converse-form input[type=text],
-    #conversejs form.pure-form.converse-form input[type=password],
-    #conversejs form.pure-form.converse-form input[type=number],
-    #conversejs form.pure-form.converse-form input[type=button],
-    #conversejs form.pure-form.converse-form input[type=submit] {
+    #conversejs form.converse-form input[type=text],
+    #conversejs form.converse-form input[type=password],
+    #conversejs form.converse-form input[type=number],
+    #conversejs form.converse-form input[type=button],
+    #conversejs form.converse-form input[type=submit] {
       padding: 0.5em; }
-    #conversejs form.pure-form.converse-form input[type=button],
-    #conversejs form.pure-form.converse-form input[type=submit] {
+    #conversejs form.converse-form input[type=button],
+    #conversejs form.converse-form input[type=submit] {
       padding-left: 1em;
       padding-right: 1em;
       margin: 0.5em 0;
       border: none; }
-    #conversejs form.pure-form.converse-form input.error {
+    #conversejs form.converse-form input.error {
       border: 1px solid #A53214;
       color: #777; }
-    #conversejs form.pure-form.converse-form .form-help {
+    #conversejs form.converse-form .form-help {
       color: gray;
       font-size: 85%;
       padding-top: 0.5em; }
-      #conversejs form.pure-form.converse-form .form-help:hover {
+      #conversejs form.converse-form .form-help:hover {
         color: #777; }
-      #conversejs form.pure-form.converse-form .form-help.error {
+      #conversejs form.converse-form .form-help.error {
         color: #A53214; }
-  #conversejs form.pure-form.converse-centered-form {
+  #conversejs form.converse-centered-form {
     text-align: center;
     width: 100%; }
   #conversejs .chat-textarea-chatbox-selected {
@@ -5589,7 +5585,7 @@ body.reset {
 @media screen and (max-width: 767px) {
   #conversejs > .row {
     flex-direction: row-reverse; }
-  #conversejs #login-dialog .pure-form.converse-form {
+  #conversejs #login-dialog .converse-form {
     padding: 3em 2em 3em; }
   #conversejs .sidebar {
     display: block; }

css/inverse.css

@@ -4773,7 +4773,7 @@ body.reset {
     height: auto; }
   #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
   #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
-  #conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
+  #conversejs fieldset, #conversejs form, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
   #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
   #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
   #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
@@ -5016,8 +5016,6 @@ body.reset {
     border-radius: 25%; }
   #conversejs .activated {
     display: block !important; }
-  #conversejs .pure-form-message {
-    padding: 0.5em 0; }
   #conversejs .button-primary {
     color: white;
     background-color: #E7A151; }
@@ -5032,46 +5030,44 @@ body.reset {
     right: 0.2em;
     cursor: pointer;
     font-size: 0.75rem; }
-  #conversejs form.pure-form.converse-form {
+  #conversejs form.converse-form {
     background: white;
     padding: 1em; }
-    #conversejs form.pure-form.converse-form legend {
+    #conversejs form.converse-form legend {
       color: #777;
       font-size: 125%;
       margin-bottom: 1.5em; }
-    #conversejs form.pure-form.converse-form input[type=checkbox] {
+    #conversejs form.converse-form input[type=checkbox] {
       display: block; }
-    #conversejs form.pure-form.converse-form select,
-    #conversejs form.pure-form.converse-form input[type=password],
-    #conversejs form.pure-form.converse-form input[type=number],
-    #conversejs form.pure-form.converse-form input[type=text] {
+    #conversejs form.converse-form select,
+    #conversejs form.converse-form input[type=password],
+    #conversejs form.converse-form input[type=number],
+    #conversejs form.converse-form input[type=text] {
       min-width: 50%; }
-    #conversejs form.pure-form.converse-form label {
-      font-size: 18px; }
-    #conversejs form.pure-form.converse-form input[type=text],
-    #conversejs form.pure-form.converse-form input[type=password],
-    #conversejs form.pure-form.converse-form input[type=number],
-    #conversejs form.pure-form.converse-form input[type=button],
-    #conversejs form.pure-form.converse-form input[type=submit] {
+    #conversejs form.converse-form input[type=text],
+    #conversejs form.converse-form input[type=password],
+    #conversejs form.converse-form input[type=number],
+    #conversejs form.converse-form input[type=button],
+    #conversejs form.converse-form input[type=submit] {
       padding: 0.5em; }
-    #conversejs form.pure-form.converse-form input[type=button],
-    #conversejs form.pure-form.converse-form input[type=submit] {
+    #conversejs form.converse-form input[type=button],
+    #conversejs form.converse-form input[type=submit] {
       padding-left: 1em;
       padding-right: 1em;
       margin: 0.5em 0;
       border: none; }
-    #conversejs form.pure-form.converse-form input.error {
+    #conversejs form.converse-form input.error {
       border: 1px solid #A53214;
       color: #777; }
-    #conversejs form.pure-form.converse-form .form-help {
+    #conversejs form.converse-form .form-help {
       color: gray;
       font-size: 85%;
       padding-top: 0.5em; }
-      #conversejs form.pure-form.converse-form .form-help:hover {
+      #conversejs form.converse-form .form-help:hover {
         color: #777; }
-      #conversejs form.pure-form.converse-form .form-help.error {
+      #conversejs form.converse-form .form-help.error {
         color: #A53214; }
-  #conversejs form.pure-form.converse-centered-form {
+  #conversejs form.converse-centered-form {
     text-align: center;
     width: 100%; }
   #conversejs .chat-textarea-chatbox-selected {
@@ -5155,20 +5151,20 @@ body {
         padding-right: 10%;
         font-size: 120%; }
 
-#conversejs.fullscreen form.pure-form.converse-form {
+#conversejs.fullscreen form.converse-form {
   margin: 1em; }
-  #conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
+  #conversejs.fullscreen form.converse-form input[type=checkbox] {
     margin-left: 1em;
     display: inline;
     margin-bottom: 2em; }
-  #conversejs.fullscreen form.pure-form.converse-form input[type=text],
-  #conversejs.fullscreen form.pure-form.converse-form input[type=password],
-  #conversejs.fullscreen form.pure-form.converse-form input[type=number],
-  #conversejs.fullscreen form.pure-form.converse-form input[type=button],
-  #conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
+  #conversejs.fullscreen form.converse-form input[type=text],
+  #conversejs.fullscreen form.converse-form input[type=password],
+  #conversejs.fullscreen form.converse-form input[type=number],
+  #conversejs.fullscreen form.converse-form input[type=button],
+  #conversejs.fullscreen form.converse-form input[type=submit] {
     height: 2.2em; }
-  #conversejs.fullscreen form.pure-form.converse-form input[type=button],
-  #conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
+  #conversejs.fullscreen form.converse-form input[type=button],
+  #conversejs.fullscreen form.converse-form input[type=submit] {
     padding-left: 1em;
     padding-right: 1em;
     margin-right: 1em; }
@@ -5645,7 +5641,7 @@ body {
 @media screen and (max-width: 767px) {
   #conversejs > .row {
     flex-direction: row-reverse; }
-  #conversejs #login-dialog .pure-form.converse-form {
+  #conversejs #login-dialog .converse-form {
     padding: 3em 2em 3em; }
   #conversejs .sidebar {
     display: block; }

mockup/modals.html

@@ -149,12 +149,16 @@
                 </button>
             </div>
             <div class="modal-body">
-                <form class="pure-form pure-form-stacked converse-form add-chatroom">
+                <form class="converse-form add-chatroom">
                     <div class="form-group">
-                        <label for="chatroom">Room address</label>
+                        <label for="chatroom">Room address:</label>
                         <input type="text" name="chatroom" class="form-control" placeholder="room@conference.example.org">
-                        <input type="submit" class="btn btn-primary" name="join" value="Join">
                     </div>
+                    <div class="form-group">
+                        <label for="chatroom">Nickname:</label>
+                        <input type="text" name="nickname" class="form-control">
+                    </div>
+                    <input type="submit" class="btn btn-primary" name="join" value="Join">
                 </form>
             </div>
         </div>

sass/_chatbox.scss

@@ -494,7 +494,7 @@
         }
 
         #login-dialog {
-            .pure-form.converse-form {
+            .converse-form {
                 padding: 3em 2em 3em;
             }
         }

sass/_core.scss

@@ -80,7 +80,7 @@ body.reset {
     ul li { height: auto; }
     div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
     pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
-    fieldset, form, label, legend, table, caption, tbody,
+    fieldset, form, legend, table, caption, tbody,
     tfoot, thead, tr, th, td, article, aside, canvas, details,
     embed, figure, figcaption, footer, header, hgroup, menu,
     nav, output, ruby, section, summary, time, mark, audio, video {
@@ -338,10 +338,6 @@ body.reset {
         display: block !important;
     }
 
-    .pure-form-message {
-        padding: 0.5em 0;
-    }
-
     .button-primary {
         color: white;
         background-color: $primary-color;
@@ -363,7 +359,7 @@ body.reset {
             font-size: 0.75rem;
         }
 
-        &.pure-form.converse-form {
+        &.converse-form {
             background: white;
             padding: 1em;
             legend {
@@ -380,9 +376,6 @@ body.reset {
             input[type=text] {
                 min-width: 50%;
             }
-            label {
-                font-size: $font-size-large;
-            }
             input[type=text],
             input[type=password],
             input[type=number],
@@ -413,7 +406,7 @@ body.reset {
                 }
             }
         }
-        &.pure-form.converse-centered-form {
+        &.converse-centered-form {
             text-align: center;
             width: 100%;
         }

sass/_muc_embedded.scss

@@ -13,7 +13,7 @@
     width: 100%;
 
     form {
-        &.pure-form.converse-centered-form {
+        &.converse-centered-form {
             position: absolute;
             top: 30%;
             transform: translateY(-50%);

sass/inverse/_core.scss

@@ -37,7 +37,7 @@ body {
 #conversejs.fullscreen {
 
     form {
-        &.pure-form.converse-form {
+        &.converse-form {
             margin: 1em;
             input[type=checkbox] {
                 margin-left: 1em;

src/converse-muc-views.js

@@ -21,7 +21,6 @@
         "tpl!chatroom_form",
         "tpl!chatroom_head",
         "tpl!chatroom_invite",
-        "tpl!chatroom_join_form",
         "tpl!chatroom_nickname_form",
         "tpl!chatroom_password_form",
         "tpl!chatroom_sidebar",
@@ -46,7 +45,6 @@
     tpl_chatroom_form,
     tpl_chatroom_head,
     tpl_chatroom_invite,
-    tpl_chatroom_join_form,
     tpl_chatroom_nickname_form,
     tpl_chatroom_password_form,
     tpl_chatroom_sidebar,
@@ -154,6 +152,7 @@
 
             _converse.AddChatRoomModal = Backbone.VDOMView.extend({
                 events: {
+                    'submit form.add-chatroom': 'openChatRoom'
                 },
 
                 initialize () {
@@ -162,13 +161,44 @@
                         backdrop: 'static',
                         keyboard: true
                     });
+                    this.model.on('change:muc_domain', this.render, this);
                 },
 
                 toHTML () {
                     return tpl_add_chatroom_modal(_.extend(this.model.toJSON(), {
                         'heading_new_chatroom': __('Enter a new Chatroom'),
-                        'label_room_name': __('Room'),
+                        'label_room_address': __('Room address'),
+                        'label_nickname': __('Optional nickname')
                     }));
+                },
+
+                insertIntoDOM () {
+                    const container_el = _converse.chatboxviews.el.querySelector('#converse-modals');
+                    container_el.insertAdjacentElement('beforeEnd', this.el);
+                },
+
+                show () {
+                    this.render();
+                    this.modal.show();
+                },
+
+                parseRoomDataFromEvent (form) {
+                    const data = new FormData(form);
+                    const jid = data.get('chatroom');
+                    const server = Strophe.getDomainFromJid(jid);
+                    this.model.save('muc_domain', server);
+                    return {
+                        'jid': jid,
+                        'nick': data.get('nickname')
+                    }
+                },
+
+                openChatRoom (ev) {
+                    ev.preventDefault();
+                    const data = this.parseRoomDataFromEvent(ev.target);
+                    _converse.api.rooms.open(data.jid, data);
+                    this.modal.hide();
+                    ev.target.reset();
                 }
             });
 
@@ -1962,25 +1992,6 @@
             });
 
 
-            _converse.MUCJoinForm = Backbone.VDOMView.extend({
-                initialize () {
-                    this.model.on('change:muc_domain', this.render, this);
-                },
-
-                toHTML () {
-                    return tpl_chatroom_join_form(_.assign(this.model.toJSON(), {
-                        'server_input_type': _converse.hide_muc_server && 'hidden' || 'text',
-                        'server_label_global_attr': _converse.hide_muc_server && ' hidden' || '',
-                        'label_room_name': __('Room name'),
-                        'label_nickname': __('Nickname'),
-                        'label_server': __('Server'),
-                        'label_join': __('Join Room'),
-                        'label_show_rooms': __('Show rooms')
-                    }));
-                }
-            });
-
-
             _converse.RoomsPanel = Backbone.NativeView.extend({
                 /* Backbone.NativeView which renders MUC section of the control box.
                  *
@@ -1990,15 +2001,15 @@
                 className: 'controlbox-pane',
                 id: 'chatrooms',
                 events: {
-                    'submit form.add-chatroom': 'openChatRoom',
-                    'click input#show-rooms': 'showRooms',
-                    'click a.room-info': 'toggleRoomInfo',
+                    'click a.chatbox-btn.fa-users': 'showAddRoomModal',
+                    'change input[name=nick]': 'setNick',
                     'change input[name=server]': 'setDomain',
-                    'change input[name=nick]': 'setNick'
+                    'click a.room-info': 'toggleRoomInfo',
+                    'click input#show-rooms': 'showRooms',
                 },
 
                 initialize (cfg) {
-                    this.join_form = new _converse.MUCJoinForm({'model': this.model});
+                    this.add_room_modal = new _converse.AddChatRoomModal({'model': this.model});
                     this.model.on('change:muc_domain', this.onDomainChange, this);
                     this.model.on('change:nick', this.onNickChange, this);
                 },
@@ -2008,11 +2019,15 @@
                         'heading_chatrooms': __('Chatrooms'),
                         'title_new_room': __('Click to add a new room')
                     });
-                    this.join_form.setElement(this.el.querySelector('.add-chatroom'));
-                    this.join_form.render();
                     return this;
                 },
 
+                showAddRoomModal (ev) {
+                    ev.preventDefault();
+                    this.add_room_modal.show();
+                },
+
+
                 onDomainChange (model) {
                     if (_converse.auto_list_rooms) {
                         this.updateRoomsList();
@@ -2182,37 +2197,6 @@
                     }
                 },
 
-                parseRoomDataFromEvent (ev) {
-                    let jid;
-                    const name_el = this.el.querySelector('input.new-chatroom-name');
-                    const server_el= this.el.querySelector('input.new-chatroom-server');
-                    const server = server_el.value;
-                    const name = name_el.value.trim();
-                    name_el.value = ''; // Clear the input
-                    if (name && server) {
-                        jid = Strophe.escapeNode(name.toLowerCase()) + '@' + server.toLowerCase();
-                        name_el.classList.remove('error');
-                        server_el.classList.remove('error');
-                        this.model.save({muc_domain: server});
-                    } else {
-                        if (!name) { name_el.classList.add('error'); }
-                        if (!server) { server_el.classList.add('error'); }
-                        return;
-                    }
-                    return {
-                        'jid': jid,
-                        'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
-                    }
-                },
-
-                openChatRoom (ev) {
-                    ev.preventDefault();
-                    const data = this.parseRoomDataFromEvent(ev);
-                    if (!_.isUndefined(data)) {
-                        _converse.api.rooms.open(data.jid, data);
-                    }
-                },
-
                 setDomain (ev) {
                     this.model.save({muc_domain: ev.target.value});
                 },

src/converse-profile.js

@@ -38,7 +38,6 @@
 
 
             _converse.ChatStatusModal = Backbone.VDOMView.extend({
-                id: "modal-status-change",
                 events: {
                     "submit form#set-xmpp-status": "onFormSubmitted",
                     "click .clear-input": "clearStatusMessage"
@@ -126,6 +125,7 @@
                 },
 
                showStatusChangeModal (ev) {
+                    ev.preventDefault();
                     this.status_modal.show();
                 },
 

src/templates/add_chatroom_modal.html

@@ -9,10 +9,14 @@
                 </button>
             </div>
             <div class="modal-body">
-                <form class="pure-form pure-form-stacked converse-form add-chatroom">
+                <form class="converse-form add-chatroom">
                     <div class="form-group">
-                        <label for="chatroom">Room address</label>
-                        <input type="text" name="chatroom" class="form-control" placeholder="name@conference.example.org">
+                        <label for="chatroom">{{{o.label_room_address}}}:</label>
+                        <input type="text" required="required" name="chatroom" class="form-control" placeholder="name@conference.example.org">
+                    </div>
+                    <div class="form-group">
+                        <label for="chatroom">{{{o.label_nickname}}}:</label>
+                        <input type="text" name="nickname" class="form-control">
                     </div>
                     <input type="submit" class="btn btn-primary" name="join" value="Join">
                 </form>

src/templates/chatboxes.html

@@ -1,2 +1,2 @@
 <div class="row no-gutters"></div>
-<div id="converse-modals"></div>
+<div id="converse-modals" class="modals"></div>

src/templates/chatroom_join_form.html

@@ -1,16 +0,0 @@
-<form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
-    <fieldset>
-        <label>{{{o.label_room_name}}}</label>
-        <input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{{o.label_room_name}}}"/>
-        {[ if (o.server_input_type != 'hidden') { ]}
-        <label{{{o.server_label_global_attr}}}>{{{o.label_server}}}</label>
-        {[ } ]}
-        <input type="{{{o.server_input_type}}}"
-               name="server"
-               class="new-chatroom-server"
-               placeholder="{{{o.label_server}}}"
-               value="{{{o.muc_domain}}}"/>
-        <input type="submit" class="pure-button button-primary" name="join" value="{{{o.label_join}}}"/>
-        <input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{{o.label_show_rooms}}}"/>
-    </fieldset>
-</form>

src/templates/room_panel.html

@@ -1,5 +1,4 @@
 <!-- <div id="chatrooms"> -->
-<form class="add-chatroom"></form>
 <div class="d-flex">
     <span class="w-100">{{{o.heading_chatrooms}}}</span>
     <a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#chatroomsModal"></a>