UI: upgrade oauth checkboxes to chip buttons

ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html

@@ -29,13 +29,15 @@
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="oauth2SettingsForm" (ngSubmit)="save()">
-        <fieldset class="fields-group tb-margin" [disabled]="isLoading$ | async">
-          <mat-checkbox formControlName="enabled">
-            {{ 'admin.oauth2.enable' | translate }}
-          </mat-checkbox>
-          <mat-checkbox formControlName="edgeEnabled">
-            {{ 'admin.oauth2.edge-enable' | translate }}
-          </mat-checkbox>
+        <fieldset class="fields-group" [disabled]="isLoading$ | async">
+          <div class="tb-form-row no-border column-xs">
+            <mat-chip-listbox formControlName="enabled">
+              <mat-chip-option [value]="true">{{ 'admin.oauth2.enable' | translate }}</mat-chip-option>
+            </mat-chip-listbox>
+            <mat-chip-listbox formControlName="edgeEnabled">
+              <mat-chip-option [value]="true">{{ 'admin.oauth2.edge-enable' | translate }}</mat-chip-option>
+            </mat-chip-listbox>
+          </div>
           <section *ngIf="oauth2SettingsForm.get('enabled').value" style="margin-top: 1em;">
             <ng-container formArrayName="oauth2ParamsInfos">
               <div class="container">

ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts

@@ -205,13 +205,22 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
     this.oauth2SettingsForm = this.fb.group({
       oauth2ParamsInfos: this.fb.array([]),
       enabled: [false],
-      edgeEnabled: [false]
+      edgeEnabled: [{value: false, disabled: true}]
     });
+
+    this.subscriptions.push(this.oauth2SettingsForm.get('enabled').valueChanges.subscribe(enabled => {
+      if (enabled) {
+        this.oauth2SettingsForm.get('edgeEnabled').enable();
+      } else {
+        this.oauth2SettingsForm.get('edgeEnabled').patchValue(false);
+        this.oauth2SettingsForm.get('edgeEnabled').disable();
+      }
+    }))
   }
 
   private initOAuth2Settings(oauth2Info: OAuth2Info): void {
     if (oauth2Info) {
-      this.oauth2SettingsForm.patchValue({enabled: oauth2Info.enabled, edgeEnabled: oauth2Info.edgeEnabled}, {emitEvent: false});
+      this.oauth2SettingsForm.patchValue({enabled: oauth2Info.enabled, edgeEnabled: oauth2Info.edgeEnabled});
       oauth2Info.oauth2ParamsInfos.forEach((oauth2ParamsInfo) => {
         this.oauth2ParamsInfos.push(this.buildOAuth2ParamsInfoForm(oauth2ParamsInfo));
       });

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -283,7 +283,7 @@
           "domain-schema-https": "HTTPS",
           "domain-schema-mixed": "HTTP+HTTPS",
           "enable": "Enable OAuth2 settings",
-          "edge-enable": "Propagate OAuth2 settings to Edge",
+          "edge-enable": "Propagate to Edge",
           "domains": "Domains",
           "mobile-apps": "Mobile applications",
           "no-mobile-apps": "No applications configured",