--- a/client.js
+++ b/client.js
@@ -23,7 +23,7 @@ document.addEventListener('DOMContentLoa
     }
 
     connect_button.addEventListener('click', function (evt) {
-        if (connect_button.value == 'connect') {
+        if (!connect_button.classList.contains('disconnect')) {
             const jid = jid_element.value;
             getBOSHService(jid).then((bosh_service) => {
                 connection = new Strophe.Connection(bosh_service);
@@ -72,7 +72,8 @@ document.addEventListener('DOMContentLoa
     {
         if (status == Strophe.Status.CONNECTING) {
             console.log('Strophe is connecting.');
-            connect_button.value = 'disconnect';
+            connect_button.value = 'Log out';
+            connect_button.classList.add('disconnect');
             jid_element.disabled = true;
             pass_element.disabled = true;
             spinner_img.hidden = false;
@@ -93,6 +94,8 @@ document.addEventListener('DOMContentLoa
 
     function onConnected()
     {
+        jid_element.hidden = true;
+        pass_element.hidden = true;
         connected_div.hidden = false;
         spinner_img.hidden = true;
         initRoster(connection);
@@ -103,8 +106,11 @@ document.addEventListener('DOMContentLoa
 
     function onDisconnected()
     {
-        connect_button.value = 'connect';
+        connect_button.value = 'Log in';
+        connect_button.classList.remove('disconnect');
+        jid_element.hidden = false;
         jid_element.disabled = false;
+        pass_element.hidden = false;
         pass_element.disabled = false;
         spinner_img.hidden = true;
         connected_div.hidden = true;