updated component and added account type

Author: salman90

2-Authorization-I/1-call-graph/README.md

@@ -48,12 +48,14 @@ Here you'll learn about [Access Tokens](https://aka.ms/access-tokens), [acquirin
 
 ## Contents
 
-| File/folder | Description |
-|---------------------------------|-----------------------------------------------------------------------|
-| `src/app/auth-config.ts` | Authentication configuration parameters reside here. |
-| `src/app/app.module.ts` | MSAL-Angular configuration parameters reside here. |
-| `src/app/app-routing.module.ts` | Configure your MSAL-Guard here. |
-| `src/app/graph.service.ts` | Class to call graph API. |
+| File/folder | Description |
+|-----------------------------------------------------------|-----------------------------------------------------------------------|
+| `src/app/auth-config.ts` | Authentication configuration parameters reside here. |
+| `src/app/app.module.ts` | MSAL-Angular configuration parameters reside here. |
+| `src/app/app-routing.module.ts` | Configure your MSAL-Guard here. |
+| `src/app/graph.service.ts` | Class to call graph API. |
+| `src/app/account-switch-account-switch.component.ts` | Contains logic to handle multiple account selection with MSAL.js. |
+
 
 ## Prerequisites
 

2-Authorization-I/1-call-graph/SPA/src/app/account-switch-component/account-switch-component.component.spec.ts

@@ -9,15 +9,16 @@ import {
  RedirectRequest,
  InteractionRequiredAuthError,
  SilentRequest,
+ AccountInfo,
 } from '@azure/msal-browser';
 
 @Component({
  selector: 'app-account-switch-component',
- templateUrl: './account-switch-component.component.html',
- styleUrls: ['./account-switch-component.component.css'],
+ templateUrl: './account-switch.component.html',
+ styleUrls: ['./account-switch.component.css'],
 })
-export class AccountSwitchComponentComponent implements OnInit {
- accounts: any = [];
+export class AccountSwitchComponent implements OnInit {
+ accounts: AccountInfo[] = [];
  constructor(
  @Inject(MAT_DIALOG_DATA) public data: any,
  @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
@@ -26,7 +27,7 @@ export class AccountSwitchComponentComponent implements OnInit {
 
  ngOnInit(): void {}
 
- switchAccount(account: any) {
+ switchAccount(account: AccountInfo | null) {
  const activeAccount = this.authService.instance.getActiveAccount();
  if (!account) {
  this.authService.instance.setActiveAccount(account);

2-Authorization-I/1-call-graph/SPA/src/app/account-switch-component/account-switch-component.component.css renamed to 2-Authorization-I/1-call-graph/SPA/src/app/account-switch/account-switch.component.css

@@ -9,7 +9,10 @@
  Login
  </button>
 
- <button mat-raised-button *ngIf="loginDisplay" [matMenuTriggerFor]="menu">{{name}}</button>
+ <button mat-raised-button color="accent" *ngIf="loginDisplay" [matMenuTriggerFor]="menu">
+ <mat-icon>keyboard_arrow_down</mat-icon>
+ {{name}}
+ </button>
 
  <mat-menu #menu="matMenu">
  <button mat-menu-item (click)="openDialog()">Switch Account</button>

2-Authorization-I/1-call-graph/SPA/src/app/account-switch-component/account-switch-component.component.html renamed to 2-Authorization-I/1-call-graph/SPA/src/app/account-switch/account-switch.component.html

@@ -1,11 +1,18 @@
 import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
 import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
-import { AuthenticationResult, InteractionStatus, InteractionType, PopupRequest, RedirectRequest } from '@azure/msal-browser';
+import {
+ AuthenticationResult,
+ InteractionStatus,
+ InteractionType,
+ PopupRequest,
+ RedirectRequest,
+ AccountInfo,
+} from '@azure/msal-browser';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { clearStorage } from './utils/storage-utils';
 import { MatDialog } from '@angular/material/dialog';
-import { AccountSwitchComponentComponent } from "./account-switch-component/account-switch-component.component"
+import { AccountSwitchComponent } from "./account-switch/account-switch.component"
 
 @Component({
  selector: 'app-root',
@@ -17,7 +24,7 @@ export class AppComponent implements OnInit, OnDestroy {
  loginDisplay = false;
  isIframe = false;
  name: string | undefined;
- accounts : any[] = [];
+ accounts: AccountInfo[] = [];
 
  private readonly _destroying$ = new Subject<void>();
 
@@ -58,18 +65,15 @@ export class AppComponent implements OnInit, OnDestroy {
  this.accounts = this.authService.instance.getAllAccounts();
  }
 
- 
-
  openDialog(): void {
- let dialogRef = this.dialog.open(AccountSwitchComponentComponent, {
+ let dialogRef = this.dialog.open(AccountSwitchComponent, {
  data: {
  accounts: this.accounts,
  },
  });
- dialogRef.afterClosed().subscribe(result => {
- console.log(result);
- })
-
+ dialogRef.afterClosed().subscribe((result) => {
+ console.log(result);
+ });
  }
 
  checkAndSetActiveAccount() {
@@ -90,8 +94,6 @@ export class AppComponent implements OnInit, OnDestroy {
  }
  }
 
-
-
  login() {
  if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
  if (this.msalGuardConfig.authRequest) {

2-Authorization-I/1-call-graph/SPA/src/app/account-switch-component/account-switch-component.component.ts renamed to 2-Authorization-I/1-call-graph/SPA/src/app/account-switch/account-switch.component.ts

@@ -16,6 +16,7 @@ import { AppComponent } from './app.component';
 import { ProfileComponent } from './profile/profile.component';
 import { HomeComponent } from './home/home.component';
 import { ContactsComponent } from './contacts/contacts.component';
+import { AccountSwitchComponent } from './account-switch/account-switch.component';
 
 
 
@@ -42,7 +43,6 @@ import {
 import { msalConfig, loginRequest, protectedResources } from './auth-config';
 import { getClaimsFromStorage } from './utils/storage-utils';
 import { GraphService } from './graph.service';
-import { AccountSwitchComponentComponent } from './account-switch-component/account-switch-component.component';
 
 /**
  * Here we pass the configuration parameters to create an MSAL instance.
@@ -118,9 +118,9 @@ export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  ProfileComponent,
  HomeComponent,
  ContactsComponent,
- AccountSwitchComponentComponent,
+ AccountSwitchComponent,
  ],
- entryComponents: [AccountSwitchComponentComponent],
+ entryComponents: [AccountSwitchComponent],
  imports: [
  BrowserModule,
  AppRoutingModule,