chrome/browser/resources/settings/internet_page/internet_detail_page.js

   1 // Copyright 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview
   7  * 'cr-settings-internet-detail' is the settings subpage containing details
   8  * for a network.
   9  *
  10  * @group Chrome Settings Elements
  11  * @element cr-settings-internet-detail
  12  */
  13 (function() {
  14
  15 /** @const */ var CARRIER_VERIZON = 'Verizon Wireless';
  16
  17 Polymer({
  18   is: 'cr-settings-internet-detail-page',
  19
  20   properties: {
  21     /**
  22      * ID of the page.
  23      * @attribute PAGE_ID
  24      * @const {string}
  25      */
  26     PAGE_ID: {
  27       type: String,
  28       value: 'internet-detail',
  29       readOnly: true
  30     },
  31
  32     /**
  33      * Route for the page.
  34      */
  35     route: {
  36       type: String,
  37       value: ''
  38     },
  39
  40     /**
  41      * Whether the page is a subpage.
  42      */
  43     subpage: {
  44       type: Boolean,
  45       value: false
  46     },
  47
  48     /**
  49      * Title for the page header and navigation menu.
  50      */
  51     pageTitle: {
  52       type: String,
  53       value: function() {
  54         return loadTimeData.getString('internetDetailPageTitle');
  55       }
  56     },
  57
  58     /**
  59      * Reflects the selected settings page. We use this to extract guid from
  60      * window.location.href when this page is navigated to. This is a
  61      * workaround for a bug in the 1.0 version of more-routing where
  62      * selected-params='{{params}}' is not correctly setting params in
  63      * settings_main.html. TODO(stevenjb): Remove once more-routing is fixed.
  64      */
  65     selectedPage: {
  66       type: String,
  67       value: '',
  68       observer: 'selectedPageChanged_'
  69     },
  70
  71     /**
  72      * Name of the 'core-icon' to show. TODO(stevenjb): Update this with the
  73      * icon for the active internet connection.
  74      */
  75     icon: {
  76       type: String,
  77       value: 'settings-ethernet',
  78       readOnly: true
  79     },
  80
  81     /**
  82      * The network GUID to display details for.
  83      */
  84     guid: {
  85       type: String,
  86       value: '',
  87       observer: 'guidChanged_',
  88     },
  89
  90     /**
  91      * The current state for the network matching |guid|.
  92      * @type {?CrOnc.NetworkStateProperties}
  93      */
  94     networkState: {
  95       type: Object,
  96       value: null,
  97       observer: 'networkStateChanged_'
  98     },
  99
 100     /**
 101      * The network AutoConnect state.
 102      */
 103     autoConnect: {
 104       type: Boolean,
 105       value: false,
 106       observer: 'autoConnectChanged_'
 107     },
 108
 109     /**
 110      * The network preferred state.
 111      */
 112     preferNetwork: {
 113       type: Boolean,
 114       value: false,
 115       observer: 'preferNetworkChanged_'
 116     },
 117
 118     /**
 119      * The network IP Address.
 120      */
 121     IPAddress: {
 122       type: String,
 123       value: ''
 124     },
 125
 126     /**
 127      * Object providing network type values for data binding.
 128      * @type {!Object}
 129      * @const
 130      */
 131     NetworkType: {
 132       type: Object,
 133       value: {
 134         CELLULAR: CrOnc.Type.CELLULAR,
 135         ETHERNET: CrOnc.Type.ETHERNET,
 136         VPN: CrOnc.Type.VPN,
 137         WIFI: CrOnc.Type.WIFI,
 138         WIMAX: CrOnc.Type.WIMAX,
 139       },
 140       readOnly: true
 141     },
 142   },
 143
 144   /**
 145    * Listener function for chrome.networkingPrivate.onNetworksChanged event.
 146    * @type {?function(!Array<string>)}
 147    * @private
 148    */
 149   networksChangedListener_: null,
 150
 151   /** @override */
 152   attached: function() {
 153     this.networksChangedListener_ = this.onNetworksChangedEvent_.bind(this);
 154     chrome.networkingPrivate.onNetworksChanged.addListener(
 155         this.networksChangedListener_);
 156   },
 157
 158   /** @override */
 159   detached: function() {
 160     chrome.networkingPrivate.onNetworksChanged.removeListener(
 161         this.networksChangedListener_);
 162   },
 163
 164   /**
 165    * Polymer guid changed method.
 166    */
 167   guidChanged_: function() {
 168     if (!this.guid)
 169       return;
 170     this.getNetworkDetails_();
 171   },
 172
 173   /**
 174    * Polymer guid changed method. TODO(stevenjb): Remove, see TODO above.
 175    */
 176   selectedPageChanged_: function() {
 177     if ((this.selectedPage && this.selectedPage.PAGE_ID) != this.PAGE_ID)
 178       return;
 179     var href = window.location.href;
 180     var idx = href.lastIndexOf('/');
 181     var guid = href.slice(idx + 1);
 182     this.guid = guid;
 183   },
 184
 185   /**
 186    * Polymer networkState changed method.
 187    */
 188   networkStateChanged_: function() {
 189     if (!this.networkState)
 190       return;
 191
 192     // Update autoConnect if it has changed. Default value is false.
 193     var autoConnect =
 194         CrOnc.getActiveTypeValue(this.networkState, 'AutoConnect') || false;
 195     if (autoConnect != this.autoConnect)
 196       this.autoConnect = autoConnect;
 197
 198     // Update preferNetwork if it has changed. Default value is false.
 199     var preferNetwork = this.networkState.Priority > 0;
 200     if (preferNetwork != this.preferNetwork)
 201       this.preferNetwork = preferNetwork;
 202
 203     // Set the IPAddress property to the IPV4 Address.
 204     var ipv4 = CrOnc.getIPConfigForType(this.networkState, CrOnc.IPType.IPV4);
 205     this.IPAddress = (ipv4 && ipv4.IPAddress) || '';
 206   },
 207
 208   /**
 209    * Polymer autoConnect changed method.
 210    */
 211   autoConnectChanged_: function() {
 212     if (!this.networkState || !this.guid)
 213       return;
 214     var onc = {Type: this.networkState.Type};
 215     CrOnc.setTypeProperty(onc, 'AutoConnect', this.autoConnect);
 216     this.setNetworkProperties_(onc);
 217   },
 218
 219   /**
 220    * Polymer preferNetwork changed method.
 221    */
 222   preferNetworkChanged_: function() {
 223     if (!this.networkState || !this.guid)
 224       return;
 225     var priority = this.preferNetwork ? 1 : 0;
 226     this.setNetworkProperties_(
 227         {Type: this.networkState.Type, Priority: priority});
 228   },
 229
 230   /**
 231    * networkingPrivate.onNetworksChanged event callback.
 232    * @param {!Array<string>} networkIds The list of changed network GUIDs.
 233    * @private
 234    */
 235   onNetworksChangedEvent_: function(networkIds) {
 236     if (networkIds.indexOf(this.guid) != -1)
 237       this.getNetworkDetails_();
 238   },
 239
 240   /**
 241    * Calls networkingPrivate.getProperties for this.guid.
 242    * @private
 243    */
 244   getNetworkDetails_: function() {
 245     if (!this.guid)
 246       return;
 247     chrome.networkingPrivate.getProperties(
 248         this.guid, this.getPropertiesCallback_.bind(this));
 249   },
 250
 251   /**
 252    * networkingPrivate.getProperties callback.
 253    * @param {!CrOnc.NetworkStateProperties} state The network state properties.
 254    * @private
 255    */
 256   getPropertiesCallback_: function(state) {
 257     this.networkState = state;
 258     if (!state) {
 259       // If state becomes null (i.e. the network is no longer visible), close
 260       // the page.
 261       MoreRouting.navigateTo('internet');
 262     }
 263   },
 264
 265   /**
 266    * @param {!chrome.networkingPrivate.NetworkConfigProperties} onc The ONC
 267    *     network properties.
 268    * @private
 269    */
 270   setNetworkProperties_: function(onc) {
 271     if (!this.guid)
 272       return;
 273     chrome.networkingPrivate.setProperties(this.guid, onc, function() {
 274       if (chrome.runtime.lastError) {
 275         // An error typically indicates invalid input; request the properties
 276         // to update any invalid fields.
 277         this.getNetworkDetails_();
 278       }
 279     }.bind(this));
 280   },
 281
 282   /**
 283    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 284    * @return {string} The text to display for the network name.
 285    * @private
 286    */
 287   getStateName_: function(state) {
 288     return (state && state.Name) || '';
 289   },
 290
 291   /**
 292    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 293    * @return {string} The text to display for the network name.
 294    * @private
 295    */
 296   getStateClass_: function(state) {
 297     return this.isConnectedState_(state) ? 'connected' : '';
 298   },
 299
 300   /**
 301    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 302    * @return {string} The text to display for the network connection state.
 303    * @private
 304    */
 305   getStateText_: function(state) {
 306     // TODO(stevenjb): Localize.
 307     return (state && state.ConnectionState) || '';
 308   },
 309
 310   /**
 311    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 312    * @return {boolean} True if the state is connected.
 313    * @private
 314    */
 315   isConnectedState_: function(state) {
 316     return state && state.ConnectionState == CrOnc.ConnectionState.CONNECTED;
 317   },
 318
 319   /**
 320    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 321    * @return {boolean} Whether or not to show the 'Connect' button.
 322    * @private
 323    */
 324   showConnect_: function(state) {
 325     return state && state.Type != CrOnc.Type.ETHERNET &&
 326            state.ConnectionState == CrOnc.ConnectionState.NOT_CONNECTED;
 327   },
 328
 329   /**
 330    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 331    * @return {boolean} Whether or not to show the 'Activate' buttonb.
 332    * @private
 333    */
 334   showActivate_: function(state) {
 335     if (!state || state.Type != CrOnc.Type.CELLULAR)
 336       return false;
 337     var activation = state.Cellular.ActivationState;
 338     return activation == CrOnc.ActivationState.NOT_ACTIVATED ||
 339            activation == CrOnc.ActivationState.PARTIALLY_ACTIVATED;
 340   },
 341
 342   /**
 343    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 344    * @return {boolean} Whether or not to show the 'View Account' button.
 345    * @private
 346    */
 347   showViewAccount_: function(state) {
 348     // Show either the 'Activate' or the 'View Account' button.
 349     if (this.showActivate_())
 350       return false;
 351
 352     if (!state || state.Type != CrOnc.Type.CELLULAR || !state.Cellular)
 353       return false;
 354     var cellular = state.Cellular;
 355
 356     // Only show if online payment URL is provided or the carrier is Verizon.
 357     if (cellular.Carrier != CARRIER_VERIZON) {
 358       var paymentUrl = cellular.PaymentPortal && cellular.PaymentPortal.Url;
 359       if (!paymentUrl)
 360         return false;
 361     }
 362
 363     // Only show for connected networks or LTE networks with a valid MDN.
 364     if (!this.isConnectedState_(state)) {
 365       var technology = cellular.NetworkTechnology;
 366       if (technology != CrOnc.NetworkTechnology.LTE &&
 367           technology != CrOnc.NetworkTechnology.LTEAdvanced) {
 368         return false;
 369       }
 370       if (!cellular.MDN)
 371         return false;
 372     }
 373
 374     return true;
 375   },
 376
 377   /**
 378    * @return {boolean} Whether or not to enable the network connect button.
 379    * @private
 380    */
 381   enableConnect_: function(state) {
 382     if (!state || !this.showConnect_(state))
 383       return false;
 384     if (state.Type == CrOnc.Type.CELLULAR && CrOnc.isSimLocked(state))
 385       return false;
 386     // TODO(stevenjb): For VPN, check connected state of any network.
 387     return true;
 388   },
 389
 390   /**
 391    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 392    * @return {boolean} Whether or not to show the 'Disconnect' button.
 393    * @private
 394    */
 395   showDisconnect_: function(state) {
 396     return state && state.Type != CrOnc.Type.ETHERNET &&
 397            state.ConnectionState != CrOnc.ConnectionState.NOT_CONNECTED;
 398   },
 399
 400   /**
 401    * Callback when the Connect button is clicked.
 402    * @private
 403    */
 404   onConnectClicked_: function() {
 405     chrome.networkingPrivate.startConnect(this.guid);
 406   },
 407
 408   /**
 409    * Callback when the Disconnect button is clicked.
 410    * @private
 411    */
 412   onDisconnectClicked_: function() {
 413     chrome.networkingPrivate.startDisconnect(this.guid);
 414   },
 415
 416   /**
 417    * Callback when the Activate button is clicked.
 418    * @private
 419    */
 420   onActivateClicked_: function() {
 421     chrome.networkingPrivate.startActivate(this.guid);
 422   },
 423
 424   /**
 425    * Callback when the View Account button is clicked.
 426    * @private
 427    */
 428   onViewAccountClicked_: function() {
 429     // startActivate() will show the account page for activated networks.
 430     chrome.networkingPrivate.startActivate(this.guid);
 431   },
 432
 433   /**
 434    * Event triggered for elements associated with network properties.
 435    * @param {!{detail: { field: string, value: Object}}} event
 436    * @private
 437    */
 438   onNetworkPropertyChange_: function(event) {
 439     var field = event.detail.field;
 440     var value = event.detail.value;
 441     if (field == 'APN') {
 442       this.setNetworkProperties_({Cellular: {APN: value}});
 443       return;
 444     }
 445     if (field == 'SIMLockStatus') {
 446       this.setNetworkProperties_({Cellular: {SIMLockStatus: value}});
 447       return;
 448     }
 449   },
 450
 451   /**
 452    * Event triggered when the IP Config or NameServers element changes.
 453    * @param {!{detail: {field: string,
 454    *                    value: string|CrOnc.IPConfigProperties}}} event
 455    *     The network-ip-config or network-nameservers change event.
 456    * @private
 457    */
 458   onIPConfigChange_: function(event) {
 459     if (!this.networkState)
 460       return;
 461
 462     var field = event.detail.field;
 463     var value = event.detail.value;
 464
 465     // Set just the IP Config properties that need to change.
 466     var onc = {};
 467     if (field == 'IPAddressConfigType') {
 468       if (onc.IPAddressConfigType == value)
 469         return;
 470       onc.IPAddressConfigType = value;
 471     } else if (field == 'NameServersConfigType') {
 472       if (onc.NameServersConfigType == value)
 473         return;
 474       onc.NameServersConfigType = value;
 475     } else if (field == 'StaticIPConfig') {
 476       if (onc.IPAddressConfigType == CrOnc.IPConfigType.STATIC &&
 477           onc.StaticIPConfig) {
 478         var matches = true;
 479         for (var key in value) {
 480           if (onc.StaticIPConfig[key] != value[key]) {
 481             matches = false;
 482             break;
 483           }
 484         }
 485         if (matches)
 486           return;
 487       }
 488       onc.IPAddressConfigType = CrOnc.IPConfigType.STATIC;
 489       onc.StaticIPConfig = onc.StaticIPConfig || {};
 490       for (key in value)
 491         onc.StaticIPConfig[key] = value[key];
 492     } else if (field == 'NameServers') {
 493       if (onc.NameServersConfigType == CrOnc.IPConfigType.STATIC &&
 494           onc.StaticIPConfig && onc.StaticIPConfig.NameServers == value) {
 495         return;
 496       }
 497       onc.NameServersConfigType = CrOnc.IPConfigType.STATIC;
 498       onc.StaticIPConfig = onc.StaticIPConfig || {};
 499       onc.StaticIPConfig.NameServers = value;
 500     } else {
 501       console.error('Unexpected change field: ' + field);
 502       return;
 503     }
 504     // setValidStaticIPConfig will fill in any other properties from
 505     // networkState. This is necessary since we update IP Address and
 506     // NameServers independently.
 507     CrOnc.setValidStaticIPConfig(onc, this.networkState);
 508     this.setNetworkProperties_(onc);
 509   },
 510
 511   /**
 512    * Event triggered when the Proxy configuration element changes.
 513    * @param {!{detail: {field: string, value: CrOnc.ProxySettings}}} event
 514    *     The network-proxy change event.
 515    * @private
 516    */
 517   onProxyChange_: function(event) {
 518     var field = event.detail.field;
 519     var value = event.detail.value;
 520     if (field != 'ProxySettings')
 521       return;
 522     this.setNetworkProperties_({ProxySettings: value});
 523   },
 524
 525   /**
 526    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 527    * @return {boolean} True if the shared message should be shown.
 528    * @private
 529    */
 530   showShared_: function(state) {
 531     return state &&
 532            (state.Source == 'Device' || state.Source == 'DevicePolicy');
 533   },
 534
 535   /**
 536    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 537    * @return {boolean} True if the AutoConnect checkbox should be shown.
 538    * @private
 539    */
 540   showAutoConnect_: function(state) {
 541     return state && state.Type != CrOnc.Type.ETHERNET;
 542   },
 543
 544   /**
 545    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 546    * @return {boolean} True if the prefer network checkbox should be shown.
 547    * @private
 548    */
 549   showPreferNetwork_: function(state) {
 550     return state && state.Type != CrOnc.Type.ETHERNET;
 551   },
 552
 553   /**
 554    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 555    * @return {!Array<string>} The fields to display in the info section.
 556    * @private
 557    */
 558   getInfoFields_: function(state) {
 559     /** @type {!Array<string>} */ var fields = [];
 560     if (!state)
 561       return fields;
 562
 563     if (state.Type == CrOnc.Type.CELLULAR) {
 564       fields.push('Cellular.ActivationState',
 565                   'Cellular.RoamingState',
 566                   'RestrictedConnectivity',
 567                   'Cellular.ServingOperator.Name');
 568     }
 569     if (state.Type == CrOnc.Type.VPN) {
 570       fields.push('VPN.Host', 'VPN.Type');
 571       if (state.VPN.Type == 'OpenVPN')
 572         fields.push('VPN.OpenVPN.Username');
 573       else if (state.VPN.Type == 'L2TP-IPsec')
 574         fields.push('VPN.L2TP.Username');
 575       // TODO(stevenjb): ThirdPartyVPN
 576     }
 577     if (state.Type == CrOnc.Type.WIFI)
 578       fields.push('RestrictedConnectivity');
 579     if (state.Type == CrOnc.Type.WIMAX) {
 580       fields.push('RestrictedConnectivity', 'WiMAX.EAP.Identity');
 581     }
 582     return fields;
 583   },
 584
 585   /**
 586    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 587    * @return {!Array<string>} The fields to display in the Advanced section.
 588    * @private
 589    */
 590   getAdvancedFields_: function(state) {
 591     /** @type {!Array<string>} */ var fields = [];
 592     if (!state)
 593       return fields;
 594     fields.push('MacAddress');
 595     if (state.Type == CrOnc.Type.CELLULAR) {
 596       fields.push('Cellular.Carrier',
 597                   'Cellular.Family',
 598                   'Cellular.NetworkTechnology',
 599                   'Cellular.ServingOperator.Code');
 600     }
 601     if (state.Type == CrOnc.Type.WIFI) {
 602       fields.push('WiFi.SSID',
 603                   'WiFi.BSSID',
 604                   'WiFi.Security',
 605                   'WiFi.SignalStrength',
 606                   'WiFi.Frequency');
 607     }
 608     if (state.Type == CrOnc.Type.WIMAX)
 609       fields.push('WiFi.SignalStrength');
 610     return fields;
 611   },
 612
 613   /**
 614    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 615    * @return {!Array<string>} The fields to display in the device section.
 616    * @private
 617    */
 618   getDeviceFields_: function(state) {
 619     /** @type {!Array<string>} */ var fields = [];
 620     if (!state)
 621       return fields;
 622     if (state.Type == CrOnc.Type.CELLULAR) {
 623       fields.push('Cellular.HomeProvider.Name',
 624                   'Cellular.HomeProvider.Country',
 625                   'Cellular.HomeProvider.Code',
 626                   'Cellular.Manufacturer',
 627                   'Cellular.ModelID',
 628                   'Cellular.FirmwareRevision',
 629                   'Cellular.HardwareRevision',
 630                   'Cellular.ESN',
 631                   'Cellular.ICCID',
 632                   'Cellular.IMEI',
 633                   'Cellular.IMSI',
 634                   'Cellular.MDN',
 635                   'Cellular.MEID',
 636                   'Cellular.MIN',
 637                   'Cellular.PRLVersion');
 638     }
 639     return fields;
 640   },
 641
 642   /**
 643    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 644    * @return {boolean} True if there are any advanced fields to display.
 645    * @private
 646    */
 647   hasAdvancedOrDeviceFields_: function(state) {
 648     return this.getAdvancedFields_(state).length > 0 || this.hasDeviceFields_();
 649   },
 650
 651   /**
 652    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 653    * @return {boolean} True if there are any device fields to display.
 654    * @private
 655    */
 656   hasDeviceFields_: function(state) {
 657     var fields = this.getDeviceFields_(state);
 658     return fields.length > 0;
 659   },
 660
 661   /**
 662    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 663    * @return {boolean} True if the network section should be shown.
 664    * @private
 665    */
 666   hasNetworkSection_: function(state) {
 667     return state && state.Type != CrOnc.Type.VPN;
 668   },
 669
 670   /**
 671    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 672    * @param {string} type The network type.
 673    * @return {boolean} True if the network type matches 'type'.
 674    * @private
 675    */
 676   isType_: function(state, type) {
 677     return state && state.Type == type;
 678   },
 679
 680   /**
 681    * @param {?CrOnc.NetworkStateProperties} state The network state properties.
 682    * @return {boolean} True if the Cellular SIM section should be shown.
 683    * @private
 684    */
 685   showCellularSim_: function(state) {
 686     return state && state.Type == 'Cellular' && state.Cellular &&
 687         state.Cellular.Family == 'GSM';
 688   }
 689 });
 690 })();