Bring mockup markup inline with reality and update scss/css

mockup/index.html

@@ -30,17 +30,33 @@
             <div class="dragresize dragresize-tm"></div>
             <div class="chat-head controlbox-head">
                 <ul id="controlbox-tabs">
-                    <li><a class="current" href="#login">Sign in</a></li>
+                    <li><a class="current" href="#login-dialog">Sign in</a></li>
+                    <li><a class="s" href="#register">Register</a></li>
                 </ul>
                 <a class="close-chatbox-button icon-close"></a>
             </div>
-            <div id="login-dialog">
-                <form id="converse-login">
-                    <label>XMPP/Jabber Username:</label><input type="text" id="jid">
-                    <label>Password:</label><input type="password" id="password">
-                    <input class="login-submit" type="submit" value="Log In">
+            <div class="controlbox-panes">
+                <div id="login-dialog" class="controlbox-pane"><form id="converse-login" method="post">
+                    <label>XMPP Username:</label>
+                    <input type="username" name="jid" placeholder="user@server">
+                    <label>Password:</label>
+                    <input type="password" name="password" placeholder="password">
+                    <input class="submit" type="submit" value="Log In">
+                    <span class="conn-feedback"></span>
                 </form>
-                <span class="conn-feedback"></span>
+                </div>
+                <div id="register" class="controlbox-pane" style="display: none;">
+                    <form id="converse-register">
+                        <span class="reg-feedback"></span>
+                        <label>Your XMPP provider's domain name:</label>
+                        <input type="text" name="domain" placeholder=" e.g. conversejs.org">
+                        <p class="form-help">
+                            Tip: A list of public XMPP providers is available 
+                            <a href="https://xmpp.net/directory.php" class="url" target="_blank">here</a>.
+                        </p>
+                        <input class="submit" type="submit" value="Fetch registration form">
+                    </form>
+                </div>
             </div>
         </div>
     </div>
@@ -115,11 +131,13 @@
                     </dd>
                 </dl>
                 <div id="converse-roster">
-                    <input class="roster-filter" placeholder="Type to filter">
-                    <select class="filter-type">
-                        <option value="contacts">Contacts</option>
-                        <option value="groups">Groups</option>
-                    </select>
+                    <span class="roster-filter-group">
+                        <input class="roster-filter" placeholder="Type to filter">
+                        <select class="filter-type">
+                            <option value="contacts">Contacts</option>
+                            <option value="groups">Groups</option>
+                        </select>
+                    </span>
                     <dl class="roster-contacts" style="display: block;">
                         <dt class="roster-group" style="display: block;">
                             <a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
@@ -301,6 +319,7 @@
                         <span class="chat-message-content">Another message to check that scrolling works.</span>
                     </div>
                 </div>
+
                 <form class="sendXMPPMessage" action="" method="post">
                     <ul class="chat-toolbar no-text-select">
                         <li class="toggle-smiley icon-happy" title="Insert a smilery">
@@ -321,13 +340,11 @@
                             </ul>
                         </li>
                         <li class="toggle-clear"><a class="icon-remove" title="Clear all messages"></a></li>
-                        <li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption">
-                            <span class="chat-toolbar-text">unencrypted</span>
+                        <li class="toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
+                        <span class="chat-toolbar-text">unencrypted</span>
                             <span class="icon-unlocked"></span>
-                            <ul>
-                                <li><a href="#">Start private conversation</a></li>
-                                <li><a href="#">End private conversation</a></li>
-                                <li><a href="#">Authenticate buddy</a></li>
+                                <ul>
+                                <li><a class="start-otr" href="#">Start encrypted conversation</a></li>
                                 <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
                             </ul>
                         </li>
@@ -434,7 +451,8 @@
                     <form class="chatroom-form">
                         <!-- TODO: Make this a long form that scrolls -->
                         <legend>This chatroom requires a password</legend>
-                        <label>Password: <input type="password" name="password"></label>
+                        <label>Password:</label>
+                        <input type="password" name="password">
                     </form>
                 </div>
             </div>