@igniteui/angular-templates 21.1.1492 → 21.1.1500-rc.0

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.component.spec.ts

@@ -1,133 +0,0 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AuthModule } from 'angular-auth-oidc-client';
-import {
-  IgxAvatarComponent,
-  IgxAvatarModule,
-  IgxButtonModule,
-  IgxDialogModule,
-  IgxDropDownModule,
-  IgxIconModule,
-  IgxRippleModule,
-  IgxToggleModule
-} from 'igniteui-angular';
-import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
-import { ExternalAuthService } from '../services/external-auth.service';
-import { UserService } from '../services/user.service';
-import { LoginBarComponent } from './login-bar.component';
-
-@Component({
-  selector: 'app-login-dialog',
-  template: ''
-})
-class TestLoginDialogComponent extends LoginDialogComponent {
-  open() { }
-}
-
-describe('LoginBarComponent', () => {
-  let component: LoginBarComponent;
-  let fixture: ComponentFixture<LoginBarComponent>;
-  class TestUserServSpy {
-    logout() { }
-    get currentUser() { return null; }
-    clearCurrentUser() { return null; }
-  }
-
-  class TestAuthService {
-    logout() { }
-  }
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        NoopAnimationsModule,
-        AuthModule.forRoot(),
-        IgxAvatarModule,
-        IgxButtonModule,
-        IgxDialogModule,
-        IgxDropDownModule,
-        IgxIconModule,
-        IgxRippleModule,
-        IgxToggleModule
-      ],
-      declarations: [LoginBarComponent, TestLoginDialogComponent],
-      providers: [
-        { provide: UserService, useClass: TestUserServSpy },
-        { provide: ExternalAuthService, useClass: TestAuthService }
-      ]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LoginBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should switch between buttons based on logged user ', () => {
-    let buttons = fixture.debugElement.queryAll(By.css('button'));
-    expect(buttons.length).toBe(1);
-    expect(buttons[0].nativeElement.innerText).toBe('Log In');
-    const userServ = TestBed.inject(UserService);
-    spyOnProperty(userServ, 'currentUser', 'get').and.returnValue({
-      picture: 'picture'
-    });
-    fixture.detectChanges();
-    buttons = fixture.debugElement.queryAll(By.css('button'));
-    expect(buttons.length).toBe(1);
-    expect(buttons[0].nativeElement.children.length).toEqual(2);
-    const avatar: IgxAvatarComponent = fixture.debugElement.query(By.css('igx-avatar')).componentInstance;
-    expect(avatar.src).toBe('picture');
-  });
-
-  it('should open dialog on button click (not logged)', () => {
-    // override ViewChild:
-    component.loginDialog = new TestLoginDialogComponent();
-
-    const button = fixture.debugElement.query(By.css('button'));
-    spyOn(component.loginDialog, 'open');
-    button.triggerEventHandler('click', {});
-    expect(component.loginDialog.open).toHaveBeenCalled();
-  });
-
-  it('should open drop down on button click (logged in)', async () => {
-    const userServ = TestBed.inject(UserService);
-    spyOnProperty(userServ, 'currentUser', 'get').and.returnValue({
-      picture: 'picture'
-    });
-    fixture.detectChanges();
-
-    const button = fixture.debugElement.query(By.css('button'));
-    button.triggerEventHandler('click', {});
-    await fixture.whenStable();
-    expect(component.igxDropDown.collapsed).toBeFalsy();
-  });
-
-  it('should handle user menu items', async () => {
-    const userServ = TestBed.inject(UserService);
-    const authServ = TestBed.inject(ExternalAuthService);
-    const router: Router = TestBed.inject(Router);
-    spyOn(router, 'navigate');
-    spyOn(userServ, 'clearCurrentUser');
-    spyOn(authServ, 'logout');
-
-    component.igxDropDown.open();
-    component.igxDropDown.setSelectedItem(0);
-    expect(router.navigate).toHaveBeenCalledWith(['/profile']);
-
-    component.igxDropDown.setSelectedItem(1);
-    expect(router.navigate).toHaveBeenCalledWith(['/home']);
-    expect(userServ.clearCurrentUser).toHaveBeenCalled();
-    expect(authServ.logout).toHaveBeenCalled();
-  });
-});

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.component.ts

@@ -1,48 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
-import { IgxDropDownComponent, ISelectionEventArgs } from 'igniteui-angular';
-import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
-import { ExternalAuthService } from '../services/external-auth.service';
-import { UserService } from '../services/user.service';
-
-@Component({
-  selector: 'app-login-bar',
-  templateUrl: './login-bar.component.html',
-  styleUrls: ['./login-bar.component.scss']
-})
-export class LoginBarComponent {
-
-  @ViewChild(LoginDialogComponent, { static: true })
-  loginDialog!: LoginDialogComponent;
-
-  @ViewChild(IgxDropDownComponent, { static: true })
-  igxDropDown!: IgxDropDownComponent;
-
-  constructor(
-    public userService: UserService,
-    private authService: ExternalAuthService,
-    private router: Router) {
-  }
-
-  openDialog() {
-    this.loginDialog.open();
-  }
-
-  handleLogout() {
-    this.router.navigate(['/home']);
-    this.userService.clearCurrentUser();
-    this.authService.logout();
-  }
-
-  menuSelect(args: ISelectionEventArgs) {
-    // TODO: Use item value, swap to menu component in the future
-    switch (args.newSelection.index) {
-      case 0:
-        this.router.navigate(['/profile']);
-        break;
-      case 1:
-        this.handleLogout();
-        break;
-    }
-  }
-}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.component.html

@@ -1,6 +0,0 @@
-<igx-dialog #dialog (opened)="onOpen()" [title]="title" [closeOnOutsideSelect]="true">
-  <div class="sign-dialog">
-    <app-login *ngIf="showLogin" (loggedIn)="close()" (viewChange)="toggleView()"></app-login>
-    <app-register *ngIf="!showLogin" (registered)="close()" (viewChange)="toggleView()"></app-register>
-  </div>
-</igx-dialog>

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.component.spec.ts

@@ -1,83 +0,0 @@
-import { Component, DebugElement, EventEmitter, Output } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxDialogModule } from 'igniteui-angular';
-import { LoginDialogComponent } from './login-dialog.component';
-
-@Component({
-  selector: 'app-login, app-register',
-  template: ''
-})
-class TestSignViewComponent {
-  @Output() public viewChange = new EventEmitter();
-  @Output() public loggedIn = new EventEmitter();
-  @Output() public registered = new EventEmitter();
-}
-
-describe('LoginDialogComponent', () => {
-  let component: LoginDialogComponent;
-  let fixture: ComponentFixture<LoginDialogComponent>;
-
-  const checkViews = (): { loginView: DebugElement, registerView: DebugElement } => {
-    const loginView = fixture.debugElement.query(By.css('app-login'));
-    const registerView = fixture.debugElement.query(By.css('app-register'));
-    return { loginView, registerView };
-  };
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [LoginDialogComponent, TestSignViewComponent],
-      imports: [NoopAnimationsModule, IgxDialogModule]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LoginDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should switch views, show login on open', fakeAsync(() => {
-    let result = checkViews();
-    expect(result.loginView).not.toBeNull();
-    expect(result.registerView).toBeNull();
-
-    component.showLogin = false;
-    fixture.detectChanges();
-    result = checkViews();
-    expect(result.loginView).toBeNull();
-    expect(result.registerView).not.toBeNull();
-    expect(component.loginDialog.title).toEqual('Register');
-
-    component.open();
-    tick();
-    fixture.detectChanges();
-    result = checkViews();
-    expect(result.loginView).not.toBeNull();
-    expect(result.registerView).toBeNull();
-    expect(component.showLogin).toBeTruthy();
-    expect(component.loginDialog.title).toEqual('Login');
-  }));
-
-  it('should switch views, close on events', () => {
-    let view: TestSignViewComponent = fixture.debugElement.query(By.css('app-login')).componentInstance;
-    spyOn(component.loginDialog, 'close');
-
-    view.viewChange.emit();
-    expect(component.showLogin).toBeFalsy();
-    view.loggedIn.emit();
-    expect(component.loginDialog.close).toHaveBeenCalledTimes(1);
-    fixture.detectChanges();
-    view = fixture.debugElement.query(By.css('app-register')).componentInstance;
-    view.viewChange.emit();
-    expect(component.showLogin).toBeTruthy();
-    view.registered.emit();
-    expect(component.loginDialog.close).toHaveBeenCalledTimes(2);
-  });
-});

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.component.ts

@@ -1,30 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import { IgxDialogComponent } from 'igniteui-angular';
-
-@Component({
-  selector: 'app-login-dialog',
-  templateUrl: './login-dialog.component.html',
-  styleUrls: ['./login-dialog.component.scss']
-})
-export class LoginDialogComponent {
-  public showLogin = true;
-  public get title() { return this.showLogin ? 'Login' : 'Register'; }
-  @ViewChild(IgxDialogComponent, { static: true })
-  public loginDialog!: IgxDialogComponent;
-
-  open() {
-    this.loginDialog.open();
-  }
-
-  close() {
-    this.loginDialog.close();
-  }
-
-  onOpen() {
-    this.showLogin = true;
-  }
-
-  toggleView() {
-    this.showLogin = !this.showLogin;
-  }
-}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/models/login.ts

@@ -1,16 +0,0 @@
-export interface Login {
-  email: string;
-  password: string;
-}
-
-/** Used to send sign in info provided by an external login */
-export interface ExternalLogin {
-  id: string;
-  name: string;
-  given_name?: string;
-  family_name?: string;
-  email: string;
-  picture?: string;
-  externalToken: string;
-  externalProvider?: string;
-}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/models/register.ts

@@ -1,6 +0,0 @@
-export interface Register {
-  given_name: string;
-  family_name: string;
-  email: string;
-  password: string;
-}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/models/user.ts

@@ -1,20 +0,0 @@
-/** Data transfer model expected from backend API JWT-s */
-export interface UserJWT {
-  // using registered/public claims per https://www.iana.org/assignments/jwt/jwt.xhtml
-  exp: number;
-  name: string;
-  given_name: string;
-  family_name: string;
-  email: string;
-  picture?: string;
-}
-
-/** Client user model */
-export interface User extends UserJWT {
-  token: string;
-}
-
-export interface LoginResult {
-  user?: User;
-  error?: string;
-}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/profile/profile.component.html

@@ -1,3 +0,0 @@
-<h3>
-  Hello {{this.userService.currentUser!.name.toUpperCase()}}, you are now logged in!
-</h3>

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/profile/profile.component.spec.ts

@@ -1,28 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { UserService } from '../services/user.service';
-import { ProfileComponent } from './profile.component';
-
-describe('ProfileComponent', () => {
-  let component: ProfileComponent;
-  let fixture: ComponentFixture<ProfileComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ProfileComponent],
-      providers: [
-        { provide: UserService, useValue: { currentUser: { name: 'test' } } }
-      ]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ProfileComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/profile/profile.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-import { UserService } from '../services/user.service';
-
-@Component({
-  selector: 'app-profile',
-  templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss']
-})
-export class ProfileComponent {
-  constructor(public userService: UserService) { }
-}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/providers/auth-provider.ts

@@ -1,8 +0,0 @@
-import { ExternalLogin } from '../models/login';
-
-export interface AuthProvider {
-  config(): void;
-  login(): void;
-  getUserInfo(): Promise<ExternalLogin>;
-  logout(): void;
-}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/providers/base-oidc-provider.ts

@@ -1,71 +0,0 @@
-import {
-  AuthWellKnownEndpoints,
-  OidcConfigService,
-  OidcSecurityService,
-  OpenIDImplicitFlowConfiguration
-} from 'angular-auth-oidc-client';
-import { take } from 'rxjs/operators';
-import { ExternalLogin } from '../models/login';
-import { ExternalAuthConfig } from '../services/external-auth-configs';
-import { AuthProvider } from './auth-provider';
-
-/** Base provider for OpenID Connect (OIDC) https://openid.net/connect/ */
-export abstract class BaseOidcProvider implements AuthProvider {
-  constructor(
-    protected oidcConfigService: OidcConfigService,
-    protected oidcSecurityService: OidcSecurityService,
-    protected externalStsConfig: ExternalAuthConfig) { }
-
-  public config() {
-    const openIDImplicitFlowConfiguration = new OpenIDImplicitFlowConfiguration();
-    openIDImplicitFlowConfiguration.stsServer = this.externalStsConfig.stsServer;
-    openIDImplicitFlowConfiguration.redirect_url = this.externalStsConfig.redirect_url;
-    openIDImplicitFlowConfiguration.client_id = this.externalStsConfig.client_id;
-    openIDImplicitFlowConfiguration.response_type = this.externalStsConfig.response_type;
-    openIDImplicitFlowConfiguration.scope = this.externalStsConfig.scope;
-    openIDImplicitFlowConfiguration.post_logout_redirect_uri = this.externalStsConfig.redirect_url;
-    openIDImplicitFlowConfiguration.post_login_route = this.externalStsConfig.post_login_route;
-    openIDImplicitFlowConfiguration.auto_userinfo = this.externalStsConfig.auto_userinfo;
-    openIDImplicitFlowConfiguration.max_id_token_iat_offset_allowed_in_seconds =
-      this.externalStsConfig.max_id_token_iat_offset_allowed_in_seconds;
-
-    const authWellKnownEndpoints = new AuthWellKnownEndpoints();
-    authWellKnownEndpoints.setWellKnownEndpoints(this.oidcConfigService.wellKnownEndpoints);
-    this.oidcSecurityService.setupModule(openIDImplicitFlowConfiguration, authWellKnownEndpoints);
-  }
-
-  public login() {
-    this.oidcConfigService.onConfigurationLoaded.pipe(take(1)).subscribe(() => {
-      this.config();
-      this.oidcSecurityService.authorize();
-    });
-    this.oidcConfigService.load_using_stsServer(this.externalStsConfig.stsServer);
-  }
-
-  public getUserInfo(): Promise<ExternalLogin> {
-    let resolve: (val: ExternalLogin) => void;
-    let reject: () => void;
-    const user = new Promise<ExternalLogin>((res, rej) => {
-      resolve = res;
-      reject = rej;
-    });
-    this.oidcConfigService.onConfigurationLoaded.pipe(take(1)).subscribe(() => {
-      this.config();
-      this.oidcSecurityService.onAuthorizationResult.subscribe(() => {
-        this.oidcSecurityService.getUserData().subscribe(userData => {
-          resolve(this.formatUserData(userData));
-        });
-      });
-      this.oidcSecurityService.authorizedImplicitFlowCallback();
-    });
-    this.oidcConfigService.load_using_stsServer(this.externalStsConfig.stsServer);
-    return user;
-  }
-
-  public logout() {
-    this.oidcSecurityService.logoff();
-  }
-
-  /** Format received user data per provider claims */
-  protected abstract formatUserData(userData: { [key: string]: any; }): ExternalLogin;
-}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/providers/facebook-provider.ts

@@ -1,56 +0,0 @@
-import { Router } from '@angular/router';
-import { ExternalLogin } from '../models/login';
-import { ExternalAuthConfig } from '../services/external-auth-configs';
-import { AuthProvider } from './auth-provider';
-
-export class FacebookProvider implements AuthProvider {
-  private user?: ExternalLogin;
-
-  constructor(private externalStsConfig: ExternalAuthConfig, private router: Router) { }
-
-  public config() {
-    // Requiring HTTPS for Facebook Login
-    // https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/
-    FB.init({
-      appId: this.externalStsConfig.client_id,
-      xfbml: false,
-      version: 'v3.1'
-    });
-  }
-
-  public login() {
-    const accessToken = 'accessToken';
-    this.config();
-    FB.login((response) => {
-      if (response.authResponse) {
-        FB.api(
-          '/me?fields=id,email,name,first_name,last_name,picture',
-          (newResponse: { [key: string]: any; }) => {
-            this.user = {
-              id: newResponse.id,
-              name: newResponse.name,
-              given_name: newResponse.first_name,
-              family_name: newResponse.last_name,
-              email: newResponse.email,
-              picture: newResponse.picture,
-              externalToken: FB.getAuthResponse()[accessToken]
-            };
-            this.router.navigate([this.externalStsConfig.redirect_url]);
-          });
-      } else {
-        console.log('User cancelled login or did not fully authorize.');
-      }
-    }, { scope: 'public_profile' });
-  }
-
-  public getUserInfo(): Promise<ExternalLogin> {
-    if (!this.user) {
-      throw "User not logged in";
-    }
-    return Promise.resolve(this.user);
-  }
-
-  public logout() {
-    FB.logout((response) => { });
-  }
-}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/providers/google-provider.ts

@@ -1,23 +0,0 @@
-import { ExternalLogin } from '../models/login';
-import { BaseOidcProvider } from './base-oidc-provider';
-
-export class GoogleProvider extends BaseOidcProvider {
-  /**
-   * Format user data per provider claims:
-   * https://developers.google.com/identity/protocols/OpenIDConnect
-   * https://developers.google.com/+/web/api/rest/openidconnect/getOpenIdConnect
-   */
-  protected formatUserData(userData: { [key: string]: any; }): ExternalLogin {
-    const login: ExternalLogin = {
-      id: userData.sub,
-      name: userData.name,
-      email: userData.email,
-      given_name: userData.given_name,
-      family_name: userData.family_name,
-      picture: userData.picture,
-      externalToken: this.oidcSecurityService.getToken()
-
-    };
-    return login;
-  }
-}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/providers/microsoft-provider.ts

@@ -1,44 +0,0 @@
-import { ExternalLogin } from '../models/login';
-import { BaseOidcProvider } from './base-oidc-provider';
-
-export class MicrosoftProvider extends BaseOidcProvider {
-  public static keysURL = 'ms-discovery/keys';
-
-  /** ADD endpoint specific tenant + ID, used when connecting users from work or school accounts.
-   * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-protocols-oidc#fetch-the-openid-connect-metadata-document
-   */
-  public tenant = 'consumers';
-  public tenantID = '';
-
-  public config() {
-    if (this.tenant !== 'consumers') {
-      // Replace common discovery URL issuer with correct tenant ID for token validation:
-      this.oidcConfigService.wellKnownEndpoints.issuer =
-        this.oidcConfigService.wellKnownEndpoints.issuer.replace('{tenantid}', this.tenantID);
-    }
-
-    // Microsoft OIDC doesn't support CORS for keys discovery URIs, intended for backend
-    // See https://stackoverflow.com/a/44688644
-    // Example implementation:
-    // tslint:disable-next-line:max-line-length
-    // https://blogs.msdn.microsoft.com/mihansen/2018/07/12/net-core-angular-app-with-openid-connection-implicit-flow-authentication-angular-auth-oidc-client/
-    // https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-protocols-oidc
-    this.oidcConfigService.wellKnownEndpoints.jwks_uri = MicrosoftProvider.keysURL;
-    super.config();
-  }
-
-  /**
-   * Format user data response from available claims:
-   * https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens#payload-claims
-   */
-  protected formatUserData(userData: { [key: string]: any; }): ExternalLogin {
-    const login: ExternalLogin = {
-      id: userData.oid,
-      name: userData.name,
-      email: userData.email,
-      externalToken: this.oidcSecurityService.getToken()
-
-    };
-    return login;
-  }
-}