Allow users the option of seeing their registry lock password (#663)

* Allow users the option of seeing their registry lock password

Only when entering it for the first time, of course.

core/src/main/javascript/google/registry/ui/js/registrar/contact_settings.js

@@ -106,6 +106,7 @@ registry.registrar.ContactSettings.prototype.renderItem = function(rspObj) {
           registryLockAllowedForRegistrar: rspObj.registryLockAllowed
         });
     this.setupAppbar();
+    this.setupPasswordElemIfNecessary_(targetContactNdx);
   } else {
     var contactsByType = {};
     for (var c in contacts) {
@@ -251,3 +252,26 @@ registry.registrar.ContactSettings.prototype.handleDeleteResponse =
   }
   return rsp;
 };
+
+// Show or hide the password based on what the user chooses
+registry.registrar.ContactSettings.prototype.setupPasswordElemIfNecessary_ =
+    function(contactIndex) {
+  var showOrHidePasswordButton = goog.dom.getElement('showOrHideRegistryLockPassword')
+  var showOrHidePassword = function() {
+    var inputElement = goog.dom.getRequiredElement(
+        'contacts[' + contactIndex + '].registryLockPassword')
+    var type = inputElement.getAttribute('type')
+    if (type === 'password') {
+      showOrHidePasswordButton.text = 'Hide password';
+      inputElement.setAttribute('type', 'text');
+    } else {
+      showOrHidePasswordButton.text = 'Show password';
+      inputElement.setAttribute('type', 'password');
+    }
+  };
+
+  if (showOrHidePasswordButton != null) {
+    goog.events.listen(showOrHidePasswordButton,
+        goog.events.EventType.CLICK, showOrHidePassword, false, this);
+  }
+};

core/src/main/resources/google/registry/ui/soy/registrar/ContactSettings.soy

@@ -260,6 +260,15 @@
       {param isPassword: true /}
       {param placeholder: $placeholder /}
     {/call}
+    {if $item['allowedToSetRegistryLockPassword']}
+      <tr>
+        <td></td>
+        <td>
+          <a id="showOrHideRegistryLockPassword">Show password</a>
+        </td>
+      </tr>
+    {/if}
+
   {/if}
   <input type="hidden" name="{$namePrefix}allowedToSetRegistryLockPassword"
       {if isNonnull($item['allowedToSetRegistryLockPassword'])}

core/src/test/java/google/registry/webdriver/RegistrarConsoleScreenshotTest.java

@@ -167,13 +167,24 @@ public class RegistrarConsoleScreenshotTest extends WebDriverTestCase {
     Thread.sleep(1000);
     driver.waitForElement(By.tagName("h1"));
     driver.waitForElement(By.id("reg-app-btn-edit")).click();
-    driver.diffPage("page");
+    // The password should show as dots when the user types it in
+    driver.findElement(By.id("contacts[1].registryLockPassword")).sendKeys("password");
+    driver.diffPage("page_with_password");
+
+    // Show the password if the user clicks the button
+    driver.findElement(By.id("showOrHideRegistryLockPassword")).click();
+    Thread.sleep(5);
+    driver.diffPage("page_with_shown_password");
+
+    // Hide it again
+    driver.findElement(By.id("showOrHideRegistryLockPassword")).click();
+    Thread.sleep(5);
+    driver.diffPage("page_with_password_after_hide");
 
     // now actually set the password
-    driver.findElement(By.id("contacts[1].registryLockPassword")).sendKeys("password");
     driver.waitForElement(By.id("reg-app-btn-save")).click();
     Thread.sleep(500);
-    driver.diffPage("contactview");
+    driver.diffPage("contact_view");
 
     server.runInAppEngineEnvironment(
         () -> {