chrome/browser/resources/settings/internet_page/network_apnlist.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 Polymer element for displaying and modifying a list of cellular
   7  * access points.
   8  */
   9 Polymer({
  10   is: 'network-apnlist',
  11
  12   properties: {
  13     /**
  14      * The current state for the network matching |guid|.
  15      * @type {?CrOnc.NetworkStateProperties}
  16      */
  17     networkState: {
  18       type: Object,
  19       value: null,
  20       observer: 'networkStateChanged_'
  21     },
  22
  23     /**
  24      * The CrOnc.APNProperties.AccessPointName value of the selected APN.
  25      */
  26     selectedApn: {
  27       type: String,
  28       value: ''
  29     },
  30
  31     /**
  32      * Selectable list of APN dictionaries for the UI. Includes an entry
  33      * corresponding to |otherApn| (see below).
  34      * @type {!Array<!CrOnc.APNProperties>}
  35      */
  36     apnSelectList: {
  37       type: Array,
  38       value: function() { return []; }
  39     },
  40
  41     /**
  42      * The user settable properties for a new ('other') APN. The values for
  43      * AccessPointName, Username, and Password will be set to the currently
  44      * active APN if it does not match an existing list entry.
  45      * @type {!CrOnc.APNProperties}
  46      */
  47     otherApn: {
  48       type: Object,
  49       value: function() { return {}; }
  50     },
  51
  52     /**
  53      * Array of property names to pass to the Other APN property list.
  54      * @type {!Array<string>}
  55      */
  56     otherApnFields_: {
  57       type: Array,
  58       value: function() {
  59         return ['AccessPointName', 'Username', 'Password'];
  60       },
  61       readOnly: true
  62     },
  63
  64     /**
  65      * Array of edit types to pass to the Other APN property list.
  66      */
  67     otherApnEditTypes_: {
  68       type: Object,
  69       value: function() {
  70         return {
  71           'AccessPointName': 'String',
  72           'Username': 'String',
  73           'Password': 'String'
  74         };
  75       },
  76       readOnly: true
  77     },
  78   },
  79
  80   /** @const */ DefaultAccessPointName: 'none',
  81
  82   /**
  83    * Polymer networkState changed method.
  84    */
  85   networkStateChanged_: function() {
  86     if (!this.networkState || !this.networkState.Cellular)
  87       return;
  88
  89     var activeApn = null;
  90     var cellular = this.networkState.Cellular;
  91     if (cellular.APN && cellular.APN.AccessPointName)
  92       activeApn = cellular.APN;
  93     else if (cellular.LastGoodAPN && cellular.LastGoodAPN.AccessPointName)
  94       activeApn = cellular.LastGoodAPN;
  95     this.setApnSelectList_(activeApn);
  96   },
  97
  98   /**
  99    * Sets the list of selectable APNs for the UI. Appends an 'Other' entry
 100    * (see comments for |otherApn| above).
 101    * @param {?CrOnc.APNProperties} activeApn The currently active APN value.
 102    * @private
 103    */
 104   setApnSelectList_: function(activeApn) {
 105     var apnList = this.networkState.Cellular.APNList || [];
 106     var result = apnList.slice();
 107     var activeApnInList = result.some(
 108         function(a) { return a.AccessPointName == activeApn.AccessPointName; });
 109
 110     var otherApn = {};
 111     if (!activeApnInList && activeApn)
 112       Object.assign(otherApn, activeApn);
 113     else
 114       Object.assign(otherApn, this.otherApn);
 115
 116     // Always use 'Other' for the name of custom APN entries (the name does
 117     // not get saved).
 118     otherApn.Name = 'Other';
 119     otherApn.AccessPointName =
 120         otherApn.AccessPointName || this.DefaultAccessPointName;
 121     this.set('otherApn', otherApn);
 122     result.push(otherApn);
 123
 124     this.set('apnSelectList', result);
 125     this.set('selectedApn',
 126              activeApn.AccessPointName || this.otherApn.AccessPointName);
 127   },
 128
 129   /**
 130    * We need to update the select value after the dom-repeat template updates:
 131    * 1. Rebuilding the template options resets the select value property.
 132    * 2. The template update occurs after any property changed events.
 133    * TODO(stevenjb): Remove once we use cr-dropdown-menu which (hopefully)
 134    * won't require this.
 135    * @private
 136    */
 137   onSelectApnUpdated_: function() {
 138     this.$.selectApn.value = this.selectedApn;
 139   },
 140
 141   /**
 142    * Event triggered when the selectApn seleciton changes.
 143    * @param {Event} event The select node change event.
 144    * @private
 145    */
 146   onSelectApnChange_: function(event) {
 147     var apn = event.target.value;
 148     // Don't send a change event for 'Other' until the 'Save' button is clicked,
 149     // unless it has been changed from the default.
 150     if (!this.isOtherSelected_(this.networkState, apn) ||
 151         this.otherApn.AccessPointName != this.DefaultAccessPointName) {
 152       this.sendApnChange_(apn);
 153     }
 154   },
 155
 156   /**
 157    * Event triggered when any 'Other' APN network property changes.
 158    * @param {!{detail: { field: string, value: string}}} event
 159    * @private
 160    */
 161   onOtherApnChange_: function(event) {
 162     this.set('otherApn.' + event.detail.field, event.detail.value);
 163     // Don't send a change event for 'Other' until the 'Save' button is clicked.
 164   },
 165
 166   /**
 167    * Event triggered when the Other APN 'Save' button is clicked.
 168    * @param {Event} event
 169    * @private
 170    */
 171   onSaveOther_: function(event) {
 172     this.sendApnChange_(this.selectedApn);
 173   },
 174
 175   /**
 176    * Send the apn-change event.
 177    * @param {!CrOnc.APNProperties} selectedApn
 178    * @private
 179    */
 180   sendApnChange_: function(selectedApn) {
 181     var apnList = this.networkState.Cellular.APNList || [];
 182     var apn = this.findApnInList(apnList, selectedApn);
 183     if (apn == undefined) {
 184       apn = {
 185         'AccessPointName': this.otherApn.AccessPointName,
 186         'Username': this.otherApn.Username,
 187         'Password': this.otherApn.Password
 188       };
 189     }
 190     this.fire('apn-change', {field: 'APN', value: apn});
 191   },
 192
 193   /**
 194    * @param {?CrOnc.NetworkStateProperties} networkState
 195    * @param {string} selectedApn
 196    * @return {boolean} True if the 'other' APN is currently selected.
 197    * @private
 198    */
 199   isOtherSelected_: function(networkState, selectedApn) {
 200     if (!networkState || !networkState.Cellular)
 201       return false;
 202     var apnList = networkState.Cellular.APNList || [];
 203     var apn = this.findApnInList(apnList, selectedApn);
 204     return apn == undefined;
 205   },
 206
 207   /**
 208    * @param {!CrOnc.APNProperties} apn
 209    * @return {string} The most descriptive name for the access point.
 210    * @private
 211    */
 212   apnDesc_: function(apn) {
 213     return apn.LocalizedName || apn.Name || apn.AccessPointName;
 214   },
 215
 216   /**
 217    * @param {!Array<!CrOnc.APNProperties>} apnList
 218    * @param {string} accessPointName
 219    * @return {CrOnc.APNProperties|undefined} The entry in |apnList| matching
 220    *     |accessPointName| if it exists, or undefined.
 221    * @private
 222    */
 223   findApnInList: function(apnList, accessPointName) {
 224     for (var a of apnList) {
 225       if (a.AccessPointName == accessPointName)
 226         return a;
 227     }
 228     return undefined;
 229   }
 230 });