TT#84336 - Show webpassword in input when setting it

* In view mode, webpaswords are shown as '******'
	 * In edit mode, the generated or written password
	   is hidden
	 * A button with an eye icon can change wether the
	   password is shown or not
	 * When pushing 'Generate' button show '(modified)'
	   after the input

Change-Id: I494d61b0ea5808a1be0f518d0667bf75b9ab20d5

share/static/js/libs/ngcp-pwdgen.js

@@ -10,16 +10,42 @@
     var btn = '<div id="gen_password" class="btn btn-primary pull-right" style="width:10%">Generate</div>';
 
     var passwd_btn = $(btn);
+    var generated = '<div id="passwd_generated_text" style="width:10%; display:none; text-align:center">(modified)</div>';
+    var passwd_generated = $(generated);
     passwd_btn.click(function() {
         $('input#password').val(generate_password(16));
+        $('input#password').attr("style", "width: 70% !important");
+        document.getElementById('passwd_generated_text').style.display = "inline-block";
     });
     $('input#password').attr("style", "width: 80% !important");
+    $('input#password').after(passwd_generated);
     $('input#password').after(passwd_btn);
 
     var webpasswd_btn = $(btn);
+    var generated = '<div id="webpasswd_generated_text" style="width:10%; display:none; text-align:center">(modified)</div>';
+    var eye = '<div id="show_webpass" class="btn btn-info" style="display:inline-block" rel="tooltip" data-original-title="Show Web Password"><i id="show_webpass_icon" class="icon-eye-open" style="font-size:large"></i></div>';
+    var webpasswd_generated = $(generated);
+    var show_webpasswd = $(eye);
     webpasswd_btn.click(function() {
         $('input#webpassword').val(generate_password(16));
+        $('input#webpassword').attr("style", "width: 65% !important");
+        document.getElementById('webpasswd_generated_text').style.display = "inline-block";
     });
-    $('input#webpassword').attr("style", "width: 80% !important");
+    show_webpasswd.click(function() {
+        var webpass_input = document.getElementById("webpassword");
+        if (webpass_input.type === "password") {
+            webpass_input.type = "text";
+            $('i#show_webpass_icon').attr("class", "icon-eye-close");
+            $('div#show_webpass').attr("data-original-title", "Hide Web Password");
+        }
+        else {
+            webpass_input.type = "password";
+            $('i#show_webpass_icon').attr("class", "icon-eye-open");
+            $('div#show_webpass').attr("data-original-title", "Show Web Password");
+        }
+    });
+    $('input#webpassword').attr("style", "width: 75% !important");
+    $('input#webpassword').after(show_webpasswd);
+    $('input#webpassword').after(webpasswd_generated);
     $('input#webpassword').after(webpasswd_btn);
   });

share/templates/subscriber/edit_webpass.tt

@@ -41,6 +41,7 @@
                 elements.push({ value = subscriber.contact.email, desc = c.loc('Email Address') });
             END;
             elements.push({ value = subscriber.provisioning_voip_subscriber.webusername, desc = c.loc('Web Username') });
+            elements.push({ value = '******', desc = c.loc('Web Password') });
             elements.push({ value = subscriber.username _ '@' _ subscriber.domain.domain, desc = c.loc('SIP URI') });
             #elements.push({ value = , desc = c.loc('Primary Number') });
 

share/templates/subscriber/master.tt

@@ -83,6 +83,9 @@
                                 elements.push({ value = subscriber.contact.email, desc = c.loc('Email Address') });
                             END;
                             elements.push({ value = subscriber.provisioning_voip_subscriber.webusername, desc = c.loc('Web Username') });
+                            IF (c.user.roles == "admin" || c.user.roles == "reseller") && c.user.show_passwords;
+                                elements.push({ value = '******', desc = c.loc('Web Password') });
+                            END;
                             elements.push({ value = subscriber.username _ '@' _ subscriber.domain.domain, desc = c.loc('SIP URI') });
                             IF (c.user.roles == "admin" || c.user.roles == "reseller") && c.user.show_passwords;
                                 elements.push({ value = subscriber.provisioning_voip_subscriber.password, desc = c.loc('SIP Password') });