@igniteui/angular-templates 17.0.1302 → 17.0.1310-beta.2

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

@@ -0,0 +1,60 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AuthenticationService } from '../services/authentication.service';
+import { ExternalAuthService } from '../services/external-auth.service';
+import { UserService } from '../services/user.service';
+import { RedirectComponent } from './redirect.component';
+
+describe('RedirectComponent', () => {
+  let fixture: ComponentFixture<RedirectComponent>;
+  const activeRouteSpy: any = { snapshot: { data: { value: { provider: {} } } } };
+  const extAuthSpy = jasmine.createSpyObj('ExternalAuthService', ['getUserInfo']);
+  const authSpy = jasmine.createSpyObj('AuthenticationService', ['loginWith']);
+  const userServSpy = jasmine.createSpyObj('UserService', ['setCurrentUser']);
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [RedirectComponent],
+      providers: [
+        { provide: ActivatedRoute, useValue: activeRouteSpy },
+        { provide: ExternalAuthService, useValue: extAuthSpy },
+        { provide: AuthenticationService, useValue: authSpy },
+        { provide: UserService, useValue: userServSpy }
+      ]
+    })
+      .compileComponents();
+  }));
+
+  it('should try external login on init', async () => {
+    const router: Router = TestBed.inject(Router);
+    spyOn(router, 'navigate');
+    extAuthSpy.getUserInfo.and.returnValue(Promise.resolve({ test: '1' }));
+    authSpy.loginWith.and.returnValue(Promise.resolve({
+      error: null,
+      user: { name: 'TEST' }
+    }));
+    fixture = TestBed.createComponent(RedirectComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(extAuthSpy.getUserInfo).toHaveBeenCalled();
+    expect(authSpy.loginWith).toHaveBeenCalledWith({ test: '1' });
+    expect(userServSpy.setCurrentUser).toHaveBeenCalledWith({ name: 'TEST' });
+    expect(router.navigate).toHaveBeenCalledWith(['/profile']);
+  });
+
+  it('should show err on external login', async () => {
+    const router: Router = TestBed.inject(Router);
+    spyOn(router, 'navigate');
+    extAuthSpy.getUserInfo.and.returnValue(Promise.resolve({ test: '1' }));
+    authSpy.loginWith.and.returnValue(Promise.resolve({
+      error: 'Err'
+    }));
+    spyOn(window, 'alert');
+    fixture = TestBed.createComponent(RedirectComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(window.alert).toHaveBeenCalledWith('Err');
+  });
+});

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

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ExternalLogin } from '../models/login';
+import { AuthenticationService } from '../services/authentication.service';
+import { ExternalAuthProvider } from '../services/external-auth-configs';
+import { ExternalAuthService } from '../services/external-auth.service';
+import { UserService } from '../services/user.service';
+
+const routeData = 'value';
+
+@Component({
+  template: '<p>Signing in...</p>'
+})
+export class RedirectComponent implements OnInit {
+  private provider: ExternalAuthProvider;
+
+  constructor(
+    route: ActivatedRoute,
+    private router: Router,
+    private user: UserService,
+    private authService: AuthenticationService,
+    private externalAuthService: ExternalAuthService) {
+    this.provider = route.snapshot.data[routeData].provider as ExternalAuthProvider;
+  }
+
+  async ngOnInit() {
+    const userInfo: ExternalLogin = await this.externalAuthService.getUserInfo(this.provider);
+    const result = await this.authService.loginWith(userInfo);
+    if (!result.error) {
+      this.user.setCurrentUser(result.user!);
+      this.router.navigate(['/profile']);
+    } else {
+      alert(result.error);
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+<form class="input-group-form" id="registrationForm" [formGroup]="registrationForm" (ngSubmit)="tryRegister()">
+  <igx-input-group>
+    <igx-prefix>
+      <igx-icon>assignment_ind</igx-icon>
+    </igx-prefix>
+    <label igxLabel for="given_name">First Name</label>
+    <input igxInput id="given_name" name="given_name" formControlName="given_name" type="text" />
+  </igx-input-group>
+  <igx-input-group>
+    <igx-prefix>
+      <igx-icon>assignment_ind</igx-icon>
+    </igx-prefix>
+    <label igxLabel for="family_name">Last Name</label>
+    <input igxInput id="family_name" name="family_name" formControlName="family_name" type="text" />
+  </igx-input-group>
+  <igx-input-group>
+    <igx-prefix>
+      <igx-icon>alternate_email</igx-icon>
+    </igx-prefix>
+    <label igxLabel for="email">Email</label>
+    <input igxInput id="registerEmail" name="email" formControlName="email" type="text" />
+  </igx-input-group>
+  <igx-input-group>
+    <igx-prefix>
+      <igx-icon>lock</igx-icon>
+    </igx-prefix>
+    <input igxInput id="registerPassword" name="password" type="password" formControlName="password" />
+    <label igxLabel for="password">Password</label>
+  </igx-input-group>
+  <div>
+    <button igxButton="raised" type="submit" igxRipple [disabled]="!registrationForm.valid">SIGN UP</button>
+    <a (click)="showLoginForm()">Have an account?</a>
+  </div>
+</form>

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

@@ -0,0 +1,18 @@
+form {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding: 10px;
+  > * {
+    width: 100%;
+  }
+}
+
+button {
+  width: 100%;
+  margin-top: 10px;
+}
+
+a {
+  cursor: pointer;
+}

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

@@ -0,0 +1,92 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { IgxButtonModule, IgxIconModule, IgxInputGroupModule, IgxRippleModule } from 'igniteui-angular';
+import { AuthenticationService } from '../services/authentication.service';
+import { UserService } from '../services/user.service';
+import { RegisterComponent } from './register.component';
+
+const MAIL_GROUP_NAME = 'email';
+const PASSWORD_GROUP_NAME = 'password';
+const USERNAME_GROUP_NAME = 'given_name';
+const FAMILY_NAME_GROUP_NAME = 'family_name';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+  const authSpy = jasmine.createSpyObj('AuthenticationService', ['register']);
+  const userServSpy = jasmine.createSpyObj('UserService', ['setCurrentUser']);
+  const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        ReactiveFormsModule,
+        RouterTestingModule,
+        IgxButtonModule,
+        IgxIconModule,
+        IgxInputGroupModule,
+        IgxRippleModule
+      ],
+      declarations: [RegisterComponent],
+      providers: [
+        { provide: AuthenticationService, useValue: authSpy },
+        { provide: UserService, useValue: userServSpy },
+        { provide: Router, useValue: routerSpy }
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should submit login data', async () => {
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[USERNAME_GROUP_NAME].setValue('John');
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[MAIL_GROUP_NAME].setValue('test@example.com');
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[PASSWORD_GROUP_NAME].setValue('123456');
+    expect(component.registrationForm.valid).toBeTruthy();
+    component.registrationForm.controls[FAMILY_NAME_GROUP_NAME].setValue('Doe');
+    spyOn(component.registered, 'emit');
+    authSpy.register.and.returnValue(Promise.resolve({
+      error: null,
+      user: { name: 'John Doe' }
+    }));
+    await component.tryRegister();
+    expect(authSpy.register).toHaveBeenCalledTimes(1);
+    expect(authSpy.register).toHaveBeenCalledWith({
+      given_name: 'John',
+      family_name: 'Doe',
+      email: 'test@example.com',
+      password: '123456'
+    });
+    expect(userServSpy.setCurrentUser).toHaveBeenCalledWith({ name: 'John Doe' });
+    expect(component.registered.emit).toHaveBeenCalled();
+    expect(routerSpy.navigate).toHaveBeenCalledWith(['/profile']);
+    authSpy.register.and.returnValue(Promise.resolve({
+      error: 'Reg error'
+    }));
+    spyOn(window, 'alert');
+    await component.tryRegister();
+    expect(window.alert).toHaveBeenCalledWith('Reg error');
+  });
+
+  it(`should properly emit when 'showLoginForm' is called`, () => {
+    spyOn(component.viewChange, 'emit');
+    component.showLoginForm();
+    expect(component.viewChange.emit).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,48 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { Register } from '../models/register';
+import { AuthenticationService } from '../services/authentication.service';
+import { UserService } from '../services/user.service';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss']
+})
+export class RegisterComponent {
+
+  public registrationForm: FormGroup;
+
+  @Output()
+  viewChange: EventEmitter<any> = new EventEmitter();
+  @Output()
+  registered: EventEmitter<any> = new EventEmitter();
+
+  constructor(private authentication: AuthenticationService,
+    private fb: FormBuilder,
+    private userService: UserService,
+    private router: Router) {
+    this.registrationForm = this.fb.group({
+      given_name: ['', Validators.required],
+      family_name: ['', Validators.nullValidator],
+      email: ['', Validators.required],
+      password: ['', Validators.required]
+    });
+  }
+
+  async tryRegister() {
+    const response = await this.authentication.register(this.registrationForm.value as Register);
+    if (!response.error) {
+      this.userService.setCurrentUser(response.user!);
+      this.router.navigate(['/profile']);
+      this.registered.emit();
+    } else {
+      alert(response.error);
+    }
+  }
+
+  showLoginForm() {
+    this.viewChange.emit();
+  }
+}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/services/authentication.service.ts

@@ -0,0 +1,42 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { ExternalLogin, Login } from '../models/login';
+import { Register } from '../models/register';
+import { LoginResult, User } from '../models/user';
+import { parseUser } from './jwt-util';
+
+/** Authentication API Service */
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthenticationService {
+
+  constructor(private http: HttpClient) { }
+
+  /** Send basic credentials to login endpoint. */
+  public async login(userData: Login): Promise<LoginResult> {
+    return this.loginPost('/login', userData);
+  }
+
+  /** Send user info from 3rd party provider to external login endpoint. */
+  public async loginWith(userInfo: ExternalLogin): Promise<LoginResult> {
+    return this.loginPost('/extlogin', userInfo);
+  }
+
+  /** Send user info to register endpoint. */
+  public async register(userData: Register): Promise<LoginResult> {
+    return this.loginPost('/register', userData);
+  }
+
+  protected async loginPost(endpoint: string, userData: any): Promise<LoginResult> {
+    let user: User;
+    try {
+      const data = await this.http.post(endpoint, userData).toPromise() as string;
+      user = parseUser(data);
+    } catch (e: any) {
+      return { error: e.message };
+    }
+
+    return { user };
+  }
+}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/services/external-auth-configs.ts

@@ -0,0 +1,18 @@
+export enum ExternalAuthProvider {
+  Facebook = 'Facebook',
+  Google = 'Google',
+  Microsoft = 'Microsoft'
+}
+
+export interface ExternalAuthConfig {
+  stsServer: string;
+  client_id: string;
+  scope: string;
+  provider: ExternalAuthProvider;
+  redirect_url: string;
+  response_type: string;
+  post_logout_redirect_uri: string;
+  post_login_route: string;
+  auto_userinfo: boolean;
+  max_id_token_iat_offset_allowed_in_seconds: number;
+}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/services/external-auth.service.ts

@@ -0,0 +1,128 @@
+import { Location } from '@angular/common';
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { OidcConfigService, OidcSecurityService } from 'angular-auth-oidc-client';
+import { ExternalLogin } from '../models/login';
+import { AuthProvider } from '../providers/auth-provider';
+import { FacebookProvider } from '../providers/facebook-provider';
+import { GoogleProvider } from '../providers/google-provider';
+import { MicrosoftProvider } from '../providers/microsoft-provider';
+import { ExternalAuthConfig, ExternalAuthProvider } from './external-auth-configs';
+import { LocalStorageService } from './local-storage';
+
+export enum ExternalAuthRedirectUrl {
+  Facebook = 'redirect-facebook',
+  Google = 'redirect-google',
+  Microsoft = 'redirect-microsoft'
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExternalAuthService {
+  protected providers: Map<ExternalAuthProvider, AuthProvider> = new Map();
+  public get activeProvider(): ExternalAuthProvider {
+    return this.localStorage.getItem('extActiveProvider') as ExternalAuthProvider;
+  }
+  public set activeProvider(provider: ExternalAuthProvider) {
+    this.localStorage.setItem('extActiveProvider', provider);
+  }
+
+  constructor(
+    private router: Router,
+    private oidcSecurityService: OidcSecurityService,
+    private oidcConfigService: OidcConfigService,
+    private location: Location,
+    private localStorage: LocalStorageService) {
+  }
+
+  public hasProvider(provider?: ExternalAuthProvider) {
+    if (provider) {
+      return this.providers.has(provider);
+    }
+    return this.providers.size > 0;
+  }
+
+  public addGoogle(clientID: string) {
+    const googleConfig: ExternalAuthConfig = {
+      provider: ExternalAuthProvider.Google,
+      stsServer: 'https://accounts.google.com',
+      client_id: clientID,
+      scope: 'openid email profile',
+      redirect_url: this.getAbsoluteUrl(ExternalAuthRedirectUrl.Google),
+      response_type: 'id_token token',
+      post_logout_redirect_uri: '/',
+      post_login_route: 'redirect',
+      auto_userinfo: false,
+      max_id_token_iat_offset_allowed_in_seconds: 30
+    };
+    this.providers.set(
+      ExternalAuthProvider.Google,
+      new GoogleProvider(this.oidcConfigService, this.oidcSecurityService, googleConfig)
+    );
+  }
+
+  public addFacebook(clientID: string) {
+    const fbConfig: ExternalAuthConfig = {
+      client_id: clientID,
+      redirect_url: ExternalAuthRedirectUrl.Facebook
+    } as ExternalAuthConfig;
+
+    this.providers.set(
+      ExternalAuthProvider.Facebook,
+      new FacebookProvider(fbConfig, this.router)
+    );
+  }
+
+  public addMicrosoft(clientID: string) {
+    const msConfig: ExternalAuthConfig = {
+      provider: ExternalAuthProvider.Microsoft,
+      stsServer: 'https://login.microsoftonline.com/consumers/v2.0/',
+      client_id: clientID,
+      scope: 'openid email profile',
+      redirect_url: this.getAbsoluteUrl(ExternalAuthRedirectUrl.Microsoft),
+      response_type: 'id_token token',
+      post_logout_redirect_uri: '/',
+      post_login_route: '',
+      auto_userinfo: false,
+      max_id_token_iat_offset_allowed_in_seconds: 1000
+    };
+    this.providers.set(
+      ExternalAuthProvider.Microsoft,
+      new MicrosoftProvider(this.oidcConfigService, this.oidcSecurityService, msConfig)
+    );
+  }
+
+  public login(provider: ExternalAuthProvider) {
+    const extProvider = this.providers.get(provider);
+    if (extProvider) {
+      this.activeProvider = provider;
+      extProvider.login();
+    }
+  }
+
+  /** TODO, use setActiveProvider only? */
+  public async getUserInfo(provider: ExternalAuthProvider): Promise<ExternalLogin> {
+    const extProvider = this.providers.get(provider);
+    if (extProvider) {
+      const userInfo = await extProvider.getUserInfo();
+      userInfo.externalProvider = provider;
+      return userInfo;
+    }
+    return Promise.reject(null); // TODO ?
+  }
+
+  /**
+   * logout
+   */
+  public logout() {
+    if (this.activeProvider) {
+      this.providers.get(this.activeProvider)!.logout();
+    }
+  }
+
+  /** Returns an absolute URL like <app root URL>/path */
+  protected getAbsoluteUrl(path: string) {
+    return window.location.origin + this.location.prepareExternalUrl(path);
+  }
+}

package/igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/services/fake-backend.service.ts

@@ -0,0 +1,154 @@
+import {
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+  HttpResponse,
+  HTTP_INTERCEPTORS
+} from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, of, throwError } from 'rxjs';
+import { dematerialize, materialize, mergeMap } from 'rxjs/operators';
+import { ExternalLogin } from '../models/login';
+import { Register } from '../models/register';
+import { UserJWT } from '../models/user';
+import { encodeBase64Url } from './jwt-util';
+import { LocalStorageService } from './local-storage';
+import msKeys from './microsoft-keys';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BackendInterceptor implements HttpInterceptor {
+  users: StorageUser[] = [];
+
+  constructor(private localStorage: LocalStorageService) { }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const storedUsers = this.localStorage.getItem('users');
+    this.users = storedUsers ? JSON.parse(storedUsers) : [];
+    return of(null).pipe(mergeMap(() => {
+      // login user
+      if (request.url.endsWith('/login') && request.method === 'POST') {
+        return this.loginHandle(request);
+      }
+
+      // register user
+      if (request.url.endsWith('/register') && request.method === 'POST') {
+        const user = this.getStorageUser(request);
+        return this.registerHandle(user);
+      }
+
+      // login user with external provider
+      if (request.url.endsWith('/extlogin') && request.method === 'POST') {
+        const user = this.getStorageExtUser(request);
+        return this.registerHandle(user, true);
+      }
+
+      // Microsoft-specific OIDC discovery URI
+      if (request.url.endsWith('ms-discovery/keys') && request.method === 'GET') {
+        return of(new HttpResponse({ status: 200, body: msKeys }));
+      }
+
+      return next.handle(request);
+    }))
+      .pipe(materialize())
+      .pipe(dematerialize());
+  }
+
+  registerHandle(newUser: StorageUser, update = false) {
+    const duplicateUser = this.users.find(user => user.email === newUser.email);
+    if (duplicateUser && !update) {
+      return throwError({ error: { message: 'Account with email "' + newUser.email + '" already exists' } });
+    }
+    if (update && duplicateUser) {
+      Object.assign(duplicateUser, newUser);
+    } else {
+      this.users.push(newUser);
+    }
+    this.localStorage.setItem('users', JSON.stringify(this.users));
+
+    const body = this.getUserJWT(newUser);
+
+    return of(new HttpResponse({ status: 200, body: this.generateToken(body) }));
+  }
+
+  loginHandle(request: HttpRequest<any>) {
+    const foundUser = this.users.find(user => {
+      return user.email === request.body.email;
+    });
+    // authenticate
+    if (foundUser) {
+      const body = this.getUserJWT(foundUser);
+
+      return of(new HttpResponse({ status: 200, body: this.generateToken(body) }));
+    } else {
+      return throwError({ status: 401, error: { message: 'User does not exist!' } });
+    }
+  }
+
+  private getStorageUser(request: HttpRequest<any>): StorageUser {
+    const user = request.body as Register;
+    let fullName = user.given_name;
+    fullName += user.family_name ? ` ${user.family_name}` : '';
+    return {
+      id: String(this.users.length + 1),
+      name: fullName,
+      email: user.email,
+      given_name: user.given_name,
+      family_name: user.family_name,
+      picture: ''
+    };
+  }
+
+  private getStorageExtUser(request: HttpRequest<any>): StorageUser {
+    const user = request.body as ExternalLogin;
+    return {
+      id: user.id,
+      name: user.name,
+      email: user.email,
+      given_name: user.given_name || user.name.split(' ').shift()!,
+      family_name: user.family_name || user.name.split(' ').pop()!,
+      picture: user.picture,
+      externalToken: user.externalToken,
+      externalProvider: user.externalProvider
+    };
+  }
+
+  private getUserJWT(user: StorageUser): UserJWT {
+    return {
+      exp: Math.floor(new Date().getTime() / 1000) + (7 * 24 * 60 * 60),
+      name: user.name,
+      given_name: user.given_name,
+      family_name: user.family_name,
+      email: user.email,
+      picture: user.picture
+    };
+  }
+
+  /** Note: This is used for example purposes only and does NOT generate a valid JWT w/ base64Url encoding */
+  private generateToken(payload: any): string {
+    const header = {
+      alg: 'Mock',
+      typ: 'JWT'
+    };
+    return encodeBase64Url(header) + '.' + encodeBase64Url(payload) + '.mockSignature';
+  }
+}
+
+interface StorageUser {
+  id: string;
+  name: string;
+  email: string;
+  given_name: string;
+  family_name: string;
+  picture?: string;
+  externalToken?: string;
+  externalProvider?: string;
+}
+
+export const BackendProvider = {
+  provide: HTTP_INTERCEPTORS,
+  useClass: BackendInterceptor,
+  multi: true
+};