Merge 417de2f into 753f917

Azure · Sep 27, 2018 · 980a4c2 · 980a4c2
2 parents 753f917 + 417de2f
commit 980a4c2
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 14 deletions.
diff --git a/client/src/app/controls/click-to-edit/click-to-edit.component.html b/client/src/app/controls/click-to-edit/click-to-edit.component.html
@@ -5,7 +5,7 @@
     </div>
 
     <div *ngIf="hiddenText" class="read-only-text hidden-text">
-      {{ 'hiddenValueClickToShow' | translate }}
+      {{ maskText }}
     </div>
   </ng-container>
 

diff --git a/client/src/app/controls/click-to-edit/click-to-edit.component.ts b/client/src/app/controls/click-to-edit/click-to-edit.component.ts
@@ -1,9 +1,12 @@
-import { DropDownComponent } from './../../drop-down/drop-down.component';
-import { TextboxComponent } from './../textbox/textbox.component';
-import { FormControl, FormGroup } from '@angular/forms';
 import { Component, ElementRef, OnInit, Input, AfterViewInit, OnDestroy, ContentChild, ViewChild } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
+import { DropDownComponent } from './../../drop-down/drop-down.component';
+import { TextboxComponent } from './../textbox/textbox.component';
+import { PortalResources } from './../../shared/models/portal-resources';
+
 
 // Used to communicate between click-to-edit components
 export class CustomFormGroup extends FormGroup {
@@ -43,6 +46,7 @@ export class ClickToEditComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() name: string;
   @Input() placeholder: string;
   @Input() hiddenText: boolean;
+  @Input() maskText: string;
 
   // This allows for a given control to affect the state of other controls in the group while not actually being "click-to-edit-able" itself.
   // (i.e. The control's own editable/non-editable state is not affected by the extended fields in the CustomFormGroup its associated with.)
@@ -62,7 +66,9 @@ export class ClickToEditComponent implements OnInit, AfterViewInit, OnDestroy {
   private _focusFunc = (e: FocusEvent) => { this._targetFocusListener(e); };
   private _blurFunc = (e: FocusEvent) => { this._targetBlurListener(e); };
 
-  constructor() { }
+  constructor(translateService: TranslateService) {
+    this.maskText = translateService.instant(PortalResources.hiddenValueClickToShow);
+  }
 
   ngOnInit() {
     this._targetFocusState = 'blurred';

diff --git a/client/src/app/shared/models/portal-resources.ts b/client/src/app/shared/models/portal-resources.ts
@@ -1360,4 +1360,9 @@
     public static newOrExistingVstsAccount = 'newOrExistingVstsAccount';
     public static newOrExistingWebApp = 'newOrExistingWebApp';
     public static deploymentDetails = 'deploymentDetails';
+    public static hideValues = 'hideValues';
+    public static showValues = 'showValues';
+    public static hiddenValueClickToEdit = 'hiddenValueClickToEdit';
+    public static appSettingsEncryptedInfoText = 'appSettingsEncryptedInfoText';
+    public static connectionStringsEncryptedInfoText = 'connectionStringsEncryptedInfoText';
 }
diff --git a/client/src/app/site/site-config/app-settings/app-settings.component.html b/client/src/app/site/site-config/app-settings/app-settings.component.html
@@ -12,7 +12,25 @@ <h3>{{ 'feature_applicationSettingsName' | translate }}</h3>
     [infoText]="loadingFailureMessage">
   </info-box>
 
-  <div class="settings-wrapper">
+  <div class="settings-wrapper collapse-top">
+
+    <ng-container *ngIf="hasWritePermissions && !!groupArray && !loadingFailureMessage">
+
+      <div class="setting-wrapper wide">
+
+        <info-box
+          [infoText]="'appSettingsEncryptedInfoText' | translate">
+        </info-box>
+
+        <radio-selector
+          [options]="showValuesOptions"
+          [defaultValue]="false"
+          (value)="updateShowValues($event)">
+        </radio-selector>
+
+      </div>
+
+    </ng-container>
 
     <!-- ---------------------------------------------------------- TABLE ----------------------------------------------------------- -->
     <table-root tblClass="tbl fixed stretch" [name]="Resources.feature_applicationSettingsName | translate" [items]="groupArray?.controls" #appSettingsTable>
@@ -43,7 +61,7 @@ <h3>{{ 'feature_applicationSettingsName' | translate }}</h3>
         </td>
 
         <td class="two-thirds-col padded-col" table-cell [editable]="true">
-          <click-to-edit [group]="group" name="value">
+          <click-to-edit [group]="group" name="value" [hiddenText]="!showValues" [maskText]="'hiddenValueClickToEdit' | translate">
 
             <textbox [control]="group.controls['value']" [placeholder]="Resources.enterValue | translate"></textbox>
 

diff --git a/client/src/app/site/site-config/app-settings/app-settings.component.ts b/client/src/app/site/site-config/app-settings/app-settings.component.ts
@@ -4,6 +4,7 @@ import { Component, Injector, Input, OnChanges, OnDestroy, SimpleChanges } from
 import { FormArray, FormBuilder, FormGroup, Validators, ValidatorFn } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 import { TranslateService } from '@ngx-translate/core';
+import { SelectOption } from './../../../shared/models/select-option';
 import { SlotConfigNames } from './../../../shared/models/arm/slot-config-names';
 import { ApplicationSettings } from './../../../shared/models/arm/application-settings';
 import { LogService } from './../../../shared/services/log.service';
@@ -37,6 +38,8 @@ export class AppSettingsComponent extends ConfigSaveComponent implements OnChang
   public loadingMessage: string;
   public newItem: CustomFormGroup;
   public originalItemsDeleted: number;
+  public showValues: boolean;
+  public showValuesOptions: SelectOption<boolean>[];
 
   private _validatorFns: ValidatorFn[];
   private _requiredValidator: RequiredValidator;
@@ -58,6 +61,11 @@ export class AppSettingsComponent extends ConfigSaveComponent implements OnChang
 
     this.newItem = null;
     this.originalItemsDeleted = 0;
+
+    this.showValuesOptions = [
+      { displayLabel: this._translateService.instant(PortalResources.hideValues), value: false },
+      { displayLabel: this._translateService.instant(PortalResources.showValues), value: true },
+    ];
   }
 
   protected get _isPristine() {
@@ -377,4 +385,8 @@ export class AppSettingsComponent extends ConfigSaveComponent implements OnChang
     this.newItem.msStartInEditMode = true;
     groups.push(this.newItem);
   }
+
+  updateShowValues(showValues: boolean) {
+    this.showValues = showValues;
+  }
 }
diff --git a/client/src/app/site/site-config/connection-strings/connection-strings.component.html b/client/src/app/site/site-config/connection-strings/connection-strings.component.html
@@ -12,13 +12,31 @@ <h3>{{ 'connectionStrings' | translate }}</h3>
     [infoText]="loadingFailureMessage">
   </info-box>
 
-  <info-box
-    *ngIf="isFunctionApp"
-    [infoText]="('funcConnStringsInfoText' | translate)"
-    [infoLink]="FwLinks.funcConnStringsLearnMore">
-  </info-box>
+  <div class="settings-wrapper collapse-top">
+
+    <ng-container *ngIf="hasWritePermissions && !!groupArray && !loadingFailureMessage">
+
+      <div class="setting-wrapper wide">
+
+        <info-box
+          *ngIf="isFunctionApp"
+          [infoText]="('funcConnStringsInfoText' | translate)"
+          [infoLink]="FwLinks.funcConnStringsLearnMore">
+        </info-box>
+
+        <info-box
+          [infoText]="'connectionStringsEncryptedInfoText' | translate">
+        </info-box>
+
+        <radio-selector
+          [options]="showValuesOptions"
+          [defaultValue]="false"
+          (value)="updateShowValues($event)">
+        </radio-selector>
+
+      </div>
 
-  <div class="settings-wrapper">
+    </ng-container>
 
     <!-- ---------------------------------------------------------- TABLE ----------------------------------------------------------- -->
     <table-root tblClass="tbl fixed stretch" [name]="Resources.connectionStrings | translate" [items]="groupArray?.controls" #connectionStringsTable>
@@ -49,7 +67,7 @@ <h3>{{ 'connectionStrings' | translate }}</h3>
         </td>
 
         <td class="two-thirds-col padded-col" table-cell [editable]="true">
-          <click-to-edit [group]="group" name="value" hiddenText="true">
+          <click-to-edit [group]="group" name="value" [hiddenText]="!showValues" [maskText]="'hiddenValueClickToEdit' | translate">
             <textbox [control]="group.controls['value']" [placeholder]="Resources.enterValue | translate"></textbox>
           </click-to-edit>
         </td>

diff --git a/client/src/app/site/site-config/connection-strings/connection-strings.component.ts b/client/src/app/site/site-config/connection-strings/connection-strings.component.ts
@@ -11,6 +11,7 @@ import { ConnectionStringType, ConnectionStrings } from './../../../shared/model
 import { EnumEx } from './../../../shared/Utilities/enumEx';
 import { PortalResources } from './../../../shared/models/portal-resources';
 import { DropDownElement } from './../../../shared/models/drop-down-element';
+import { SelectOption } from './../../../shared/models/select-option';
 import { CustomFormControl, CustomFormGroup } from './../../../controls/click-to-edit/click-to-edit.component';
 import { ArmObj, ResourceId } from './../../../shared/models/arm/arm-obj';
 import { ArmSiteDescriptor } from 'app/shared/resourceDescriptors';
@@ -39,6 +40,8 @@ export class ConnectionStringsComponent extends ConfigSaveComponent implements O
     public FwLinks = Links;
     public newItem: CustomFormGroup;
     public originalItemsDeleted: number;
+    public showValues: boolean;
+    public showValuesOptions: SelectOption<boolean>[];
     public isFunctionApp: boolean;
 
     private _requiredValidator: RequiredValidator;
@@ -58,6 +61,11 @@ export class ConnectionStringsComponent extends ConfigSaveComponent implements O
 
         this.newItem = null;
         this.originalItemsDeleted = 0;
+
+        this.showValuesOptions = [
+            { displayLabel: this._translateService.instant(PortalResources.hideValues), value: false },
+            { displayLabel: this._translateService.instant(PortalResources.showValues), value: true },
+        ];
     }
 
     protected get _isPristine() {
@@ -393,4 +401,8 @@ export class ConnectionStringsComponent extends ConfigSaveComponent implements O
 
         return connectionStringDropDownTypes;
     }
+
+    updateShowValues(showValues: boolean) {
+        this.showValues = showValues;
+    }
 }
diff --git a/client/src/app/site/site-config/site-config.component.scss b/client/src/app/site/site-config/site-config.component.scss
@@ -134,6 +134,10 @@ h3{
     padding-left: 10px;
     position: relative;
 
+    &.collapse-top{
+        margin-top: 0px;
+    }
+
     .settings-load-message{
         padding-top: 15px;
         padding-bottom: 15px;
@@ -150,6 +154,10 @@ h3{
         width: 535px;
         padding-bottom: 15px;
 
+        &.wide{
+            width: 100%;
+        }
+
         &.last{
             padding-bottom: 0px;
         }

diff --git a/server/Resources/Resources.resx b/server/Resources/Resources.resx
@@ -4222,4 +4222,19 @@ Set to "External URL" to use an API definition that is hosted elsewhere.</value>
   <data name="deploymentDetails" xml:space="preserve">
     <value>Deployment Details</value>
   </data>
+  <data name="hideValues" xml:space="preserve">
+    <value>Hide Values</value>
+  </data>
+  <data name="showValues" xml:space="preserve">
+    <value>Show Values</value>
+  </data>
+  <data name="hiddenValueClickToEdit" xml:space="preserve">
+    <value>Hidden value. Click to edit.</value>
+  </data>
+  <data name="appSettingsEncryptedInfoText" xml:space="preserve">
+    <value>Application Settings are encrypted at rest and transmitted over an encrypted channel. You can choose to display them in plain text in your browser by using the controls below.</value>
+  </data>
+  <data name="connectionStringsEncryptedInfoText" xml:space="preserve">
+    <value>Connection Strings are encrypted at rest and transmitted over an encrypted channel. You can choose to display them in plain text in your browser by using the controls below.</value>
+  </data>
 </root>