base.ts - Renamed fields and added comments to IPermissionScope.

auth.ts - Removed setting of the scope.requested field. That value is UI driven.
scopes-dialog.component - Removed setScopesEnabledTarget, no longer used. Renamed fields on IPermissionScope. Properly filter the set of requested scopes

Author: MIchaelMainer

src/app/authentication/auth.ts

@@ -90,7 +90,8 @@ export function initAuth(options: IExplorerOptions, apiService: GraphService, ch
       const scopes = getScopes();
       scopes.push('openid');
       for (const scope of PermissionScopes) {
-        scope.enabled = scope.enabledTarget = scopes.indexOf(scope.name.toLowerCase()) !== -1;
+        // scope.consented indicates that the user or admin has previously consented to the scope.
+        scope.consented = scopes.indexOf(scope.name.toLowerCase()) !== -1;
       }
     }
   });
@@ -190,7 +191,7 @@ export function haveValidAccessToken(): boolean {
   return session && session.access_token && session.expires > currentTime;
 }
 
-window['tokenPlease'] = function() {
+window['tokenPlease'] = function () {
   const authResponse = hello('msft').getAuthResponse();
   if (authResponse) {
     return authResponse.access_token;

src/app/base.ts

@@ -32,19 +32,39 @@ export type AuthenticationStatus = 'anonymous' | 'authenticating' | 'authenticat
 
 export type RequestType = 'GET' | 'PUT' | 'POST' | 'GET_BINARY' | 'POST' | 'PATCH' | 'DELETE';
 
+/***
+ * Represents a scope.
+ */
 export interface IPermissionScope {
-  name: string;
-  description: string;
-  longDescription: string;
-  preview: boolean;
-  admin: boolean;
-
-  enabled?: boolean;
-
-  /**
-   * Used in the scopes dialog for checking/unchecking before scope is actually enabled in the token.
-   */
-  enabledTarget?: boolean;
+    /**
+     * The scope name.
+     */
+    name: string;
+    /**
+     * A short description of the scope.
+     */
+    description: string;
+    /**
+     * A long description of the scope.
+     */
+    longDescription: string;
+    /**
+     * Specifies whether the scope is currently in preview.
+     */
+    preview: boolean;
+    /**
+     * Specifies whether the property is only consent-able via admin consent.
+     */
+    admin: boolean;
+    /**
+     * Specifies whether the user has already consented to the scope.
+     */
+    consented?: boolean;
+    /**
+     * Specifies whether the user wants to request this scope. Used in the scopes
+     * dialog for checking/unchecking before scope is actually enabled in the token.
+     */
+    requested?: boolean;
 }
 
 export interface IGraphApiCall {

src/app/scopes-dialog/scopes-dialog.component.html

@@ -14,18 +14,17 @@
                     <td class="scopeRow">
                         <div class="c-checkbox">
                             <label class="c-label">
-                                <input
-                                    type="checkbox"
-                                    [disabled]="scope.enabled"
-                                    (change)="toggleScopeEnabled(scope)"
-                                    name="checkboxId1"
-                                    value="value1"
+                                <!-- scope.consented indicates that the user or admin has previously consented to the scope.-->
+                                <input type="checkbox" 
+                                    [disabled]="scope.consented"
+                                    (change)="toggleRequestScope(scope)"
+                                    name="checkboxId1" 
+                                    value="value1" 
                                     [attr.aria-label]="getScopeLabel(scope.name)"
                                     [tabindex]=""
-                                >
-
+                                    >
                                 <span aria-hidden="true" [title]="scope.description">{{scope.name}}
-                                    <i class="consented-label" *ngIf="scope.enabled">{{getStr('Consented')}}</i>
+                                    <i class="consented-label" *ngIf="scope.consented">{{getStr('Consented')}}</i>
                                     <i class="preview-label" *ngIf="scope.preview">{{getStr('Preview')}}</i>
                                 </span>
                             </label>

src/app/scopes-dialog/scopes-dialog.component.ts

@@ -54,7 +54,6 @@ export class ScopesDialogComponent extends GraphExplorerComponent implements Aft
 
   public ngAfterViewInit(): void {
     this.sortScopesList();
-    ScopesDialogComponent.setScopesEnabledTarget();
     (window as any).launchPermissionsDialog = ScopesDialogComponent.showDialog;
     this.scopesListTableHeight = window
       .getComputedStyle(this.scopesTableList.nativeElement, null).getPropertyValue('height');
@@ -75,7 +74,7 @@ export class ScopesDialogComponent extends GraphExplorerComponent implements Aft
   public scopeListIsDirty(): boolean {
 
     // Determine whether the scope list has changed. The scope list has changed if isDirty = true.
-    const isDirty = PermissionScopes.filter((s) => s.enabled !== s.enabledTarget).length > 0;
+    const isDirty = PermissionScopes.filter((s) => s.requested === true).length > 0;
 
     // Reduce the size of the scopes table list by the size of the message bar. We only want to make this
     // Change the first time that the selected scope list is changed.
@@ -104,9 +103,9 @@ export class ScopesDialogComponent extends GraphExplorerComponent implements Aft
   */
   public requestingAdminScopes(): boolean {
 
-    // Determine whether a scope that requires admin consent has been selected. An admin consent scope has been
+    // Determine whether a scope that requires admin consent has been requested. An admin consent scope has been
     // Selected if isDirty = true.
-    const isDirty = PermissionScopes.filter((s) => s.admin && s.enabledTarget).length > 0;
+    const isDirty = PermissionScopes.filter((s) => s.admin && s.requested).length > 0;
 
     // Reduce the size of the scopes table list by the size of the message bar. We only want to make this
     // Change the first time that the selected scope list is changed.
@@ -132,18 +131,18 @@ export class ScopesDialogComponent extends GraphExplorerComponent implements Aft
   }
 
   /**
-   * Toggles whether the scope has been targeted to be enabled. This will be used to determine whether we
-   * need to request consent for this scope.
+   * Toggles whether the scope will be requested. This occurs in the Modify Permissions UI by selecting a checkbox.
+   * This will be used to determine whether we will request consent for this scope.
    * @param scope The scope to toggle its enabled state.
    */
-  public toggleScopeEnabled(scope: IPermissionScope) {
-    scope.enabledTarget = !scope.enabledTarget;
+  public toggleRequestScope(scope: IPermissionScope) {
+    scope.requested = !scope.requested;
 
     // Track whether we have any admin scopes selected in the UI to be enabled for the user.
-    if (scope.admin && scope.enabledTarget) {
+    if (scope.admin && scope.requested) {
       this.selectedTargetedAdminScopes.push(scope);
       this.hasSelectedAdminScope = true;
-    } else if (scope.admin && !scope.enabledTarget) {
+    } else if (scope.admin && !scope.requested) {
       this.selectedTargetedAdminScopes = this.selectedTargetedAdminScopes.filter((e) => e !== scope);
       if (this.selectedTargetedAdminScopes.length === 0) {
         this.hasSelectedAdminScope = false;
@@ -169,15 +168,17 @@ export class ScopesDialogComponent extends GraphExplorerComponent implements Aft
       response_type: 'token',
       nonce: 'graph_explorer',
       prompt: 'select_account',
-      // This, login_hint: AppComponent.explorerValues.authentication.user.emailAddress, // breaks MSA login
-      scope: PermissionScopes.filter((scope) => scope.enabledTarget).map((scope) => scope.name).join(' '),
+      /* Login hint not applied via AppComponent.explorerValues.authentication.user.emailAddress
+      /* as it breaks MSA login. */
+      scope: PermissionScopes.filter((scope) => scope.requested && !scope.consented)
+        .map((scope) => scope.name)
+        .join(' '),
     };
 
     hello('msft').login(loginProperties);
   }
 
   public static showDialog() { // tslint:disable-line
-    ScopesDialogComponent.setScopesEnabledTarget();
 
     const el = document.querySelector('#scopes-dialog');
     const fabricDialog = new fabric.Dialog(el);
@@ -187,12 +188,4 @@ export class ScopesDialogComponent extends GraphExplorerComponent implements Aft
       component: mwf.Checkbox,
     }]);
   }
-
-  public static setScopesEnabledTarget() { // tslint:disable-line
-    // Populate enabledTarget
-    for (const scope of PermissionScopes) {
-      scope.enabledTarget = scope.enabled;
-    }
-  }
-
 }