Ensure that the passphrase field is shown when needed.

Previously the configRequiresPassphrase_ value wasn't always updating
when the security type changed, this resulted in the password field
getting shown/hidden at incorrect times.

Bug: 1019495
Change-Id: I127ad6bf57595afc1a244455a14386c00585eab9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1889470
Commit-Queue: Jon Mann <jonmann@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#711111}

chrome/test/data/webui/cr_components/network_config_test.js

@@ -66,6 +66,15 @@ suite('network-config', function() {
       assertTrue(!!networkConfig.$$('#security'));
       assertFalse(networkConfig.$$('#security').disabled);
     });
+
+    test('Passphrase field shows', function() {
+      assertFalse(!!networkConfig.$$('#wifi-passphrase'));
+      networkConfig.$$('#security').value =
+          chromeos.networkConfig.mojom.SecurityType.kWpaPsk;
+      return flushAsync().then(() => {
+        assertTrue(!!networkConfig.$$('#wifi-passphrase'));
+      });
+    });
   });
 
   suite('Existing WiFi Config', function() {

ui/webui/resources/cr_components/chromeos/network/network_config.html

@@ -54,8 +54,7 @@
       </template>
 
       <!-- Passphrase (WiFi) -->
-      <template is="dom-if" restamp
-          if="[[configRequiresPassphrase_(mojoType_, securityType_)]]">
+      <template is="dom-if" restamp if="[[configRequiresPassphrase_]]">
         <network-password-input id="wifi-passphrase"
             label="[[i18n('OncWiFi-Passphrase')]]"
             value="{{configProperties_.typeConfig.wifi.passphrase}}"

ui/webui/resources/cr_components/chromeos/network/network_config.js

@@ -303,6 +303,12 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /** @private */
+    configRequiresPassphrase_: {
+      type: Boolean,
+      computed: 'computeConfigRequiresPassphrase_(mojoType_, securityType_)',
+    },
   },
 
   observers: [
@@ -1205,7 +1211,7 @@ Polymer({
       if (!typeConfig.wifi.ssid) {
         return false;
       }
-      if (this.configRequiresPassphrase_()) {
+      if (this.configRequiresPassphrase_) {
         const passphrase = typeConfig.wifi.passphrase;
         if (!passphrase || passphrase.length < this.MIN_PASSPHRASE_LENGTH) {
           return false;
@@ -1605,14 +1611,16 @@ Polymer({
   },
 
   /**
+   * @param {chromeos.networkConfig.mojom.NetworkType|undefined} mojoType
+   * @param {chromeos.networkConfig.mojom.SecurityType|undefined} securityType
    * @return {boolean}
    * @private
    */
-  configRequiresPassphrase_: function() {
+  computeConfigRequiresPassphrase_: function(mojoType, securityType) {
     // Note: 'Passphrase' is only used by WiFi; Ethernet uses EAP.Password.
-    return this.mojoType_ == mojom.NetworkType.kWiFi &&
-        (this.securityType_ == mojom.SecurityType.kWepPsk ||
-         this.securityType_ == mojom.SecurityType.kWpaPsk);
+    return mojoType == mojom.NetworkType.kWiFi &&
+        (securityType == mojom.SecurityType.kWepPsk ||
+         securityType == mojom.SecurityType.kWpaPsk);
   },
 
   /**