make username top right button usable (a bit)

2 files changed, 25 insertions, 22 deletions

diff --git a/index.html b/index.html
index 9bd50ef1..2686ce06 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,12 @@
       <div class="username">
         <div class="profile-circle"></div>
         <span class="profile-initials">UH</span>
-        <h4 class="profile-username">Username here</h4>
+        <div class="profile-username">
+            <h4 id="username-label">logged out</h4>
+            <form id="username-form" class="set-user-form" style="display: none">
+                <input id="username-input" class="set-user-input" style="width: 100px">
+            </form>
+        </div>
       </div>
       <img class="organization-logo" src="res/img/cri-logo.png">
     </div>
@@ -84,16 +89,6 @@
     <div class="debug-ui">
     <div class="debug-ui-row">
         <div class="debug-ui-left">
-            <a class="set-user" href="#">Set user</a>
-        </div>
-        <div class="debug-ui-right">
-            <form class="set-user-form" style="display: none">
-                <input class="set-user-input" style="width: 100px" value="username">
-            </form>
-        </div>
-    </div>
-    <div class="debug-ui-row">
-        <div class="debug-ui-left">
             <a class="save-history" style="display: none" href="#">Save history</a>
         </div>
         <div class="debug-ui-right">
diff --git a/src/buttons.js b/src/buttons.js
index fa51a527..c147c2a6 100644
--- a/src/buttons.js
+++ b/src/buttons.js
@@ -67,29 +67,37 @@ $('.local-storage-load a').click(function(){
   rz_core.load_from_json(json_blob);
 });
 
+var username_label = $('#username-label'),
+    username_form = $('#username-form'),
+    username_input = $('#username-input'),
+    username_default_text = 'logged out';
+
 var onUserSet = function(user) {
     if (user) {
-        $('.set-user').html('user: ' + user);
-        $('.set-user').show();
-        $('.set-user-form').hide();
+        username_label.html(user);
+        username_label.show();
+        username_form.hide();
         $('.save-history').show();
     } else {
-        $('.set-user').html('');
-        $('.set-user').hide();
-        $('.set-user-form').show();
+        username_label.html(username_default_text);
+        username_label.hide();
+        username_form.show();
     }
 }
 
 rz_core.graph.userBus.onValue(onUserSet);
 
-$('.set-user-form').submit(function() {
-    var user = $('.set-user-input').val();
+username_form.submit(function() {
+    var user = username_input.val();
     rz_core.graph.set_user(user);
     return false;
 });
-$('a.set-user').click(function() {
-    $('.set-user').hide();
-    $('.set-user-form').show();
+username_label.click(function() {
+    username_label.hide();
+    username_input.val(
+        username_label.text() == username_default_text ? 'J. Doe' :
+        username_label.text());
+    username_form.show();
 });
 
 $('a.save-history').click(function() {