@igniteui/angular-templates 21.1.1492 → 21.1.14100-alpha.0

package/igx-ts/projects/side-nav-auth/files/src/app/{app.component.ts → app.ts}

@@ -13,16 +13,15 @@ import { filter } from 'rxjs/operators';
 import { NgFor } from '@angular/common';
 
 import { routes } from './app.routes';
-import { LoginBarComponent } from './authentication/login-bar/login-bar.component';
+import { LoginBar } from './authentication/login-bar/login-bar';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
   encapsulation: ViewEncapsulation.None,
   imports: [
-    LoginBarComponent,
+    LoginBar,
     IgxLayoutDirective,
     IgxNavigationDrawerComponent,
     IgxNavDrawerTemplateDirective,
@@ -35,7 +34,7 @@ import { LoginBarComponent } from './authentication/login-bar/login-bar.componen
     IgxNavbarComponent,
     RouterOutlet]
 })
-export class AppComponent implements OnInit {
+export class App implements OnInit {
   public topNavLinks: {
     path: string,
     name: string

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/auth.guard.ts

@@ -1,15 +1,15 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
-import { UserService } from './services/user.service';
+import { UserStore } from './services/user-store';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthGuard implements CanActivate {
-  constructor(private router: Router, private userService: UserService) { }
+  constructor(private router: Router, private userStore: UserStore) { }
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-    if (this.userService.currentUser) {
+    if (this.userStore.currentUser) {
       return true;
     }
     this.router.navigate([''], { queryParams: { returnUrl: state.url } });

package/{igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/authentication.module.spec.ts → igx-ts/projects/side-nav-auth/files/src/app/authentication/authentication-module.spec.ts}

@@ -1,4 +1,4 @@
-import { AuthenticationModule } from './authentication.module';
+import { AuthenticationModule } from './authentication-module';
 
 describe('AuthenticationModule', () => {
   let authenticationModule: AuthenticationModule;

package/{igx-ts-legacy/projects/side-nav-auth/files/src/app/authentication/authentication.module.ts → igx-ts/projects/side-nav-auth/files/src/app/authentication/authentication-module.ts}

@@ -14,14 +14,14 @@ import {
   IgxToggleModule
 } from 'igniteui-angular';
 import { AuthGuard } from './auth.guard';
-import { AuthenticationRoutingModule } from './authentication-routing.module';
-import { LoginBarComponent } from './login-bar/login-bar.component';
-import { LoginDialogComponent } from './login-dialog/login-dialog.component';
-import { LoginComponent } from './login/login.component';
-import { ProfileComponent } from './profile/profile.component';
-import { RedirectComponent } from './redirect/redirect.component';
-import { RegisterComponent } from './register/register.component';
-import { BackendProvider } from './services/fake-backend.service';
+import { AuthenticationRoutingModule } from './authentication-routing-module';
+import { LoginBar } from './login-bar/login-bar';
+import { LoginDialog } from './login-dialog/login-dialog';
+import { Login } from './login/login';
+import { Profile} from './profile/profile';
+import { Redirect } from './redirect/redirect';
+import { Register } from './register/register';
+import { BackendProvider } from './services/fake-backend';
 import { JwtInterceptor } from './services/jwt.interceptor';
 
 @NgModule({
@@ -41,12 +41,12 @@ import { JwtInterceptor } from './services/jwt.interceptor';
     IgxToggleModule
   ],
   declarations: [
-    LoginBarComponent,
-    LoginComponent,
-    LoginDialogComponent,
-    ProfileComponent,
-    RedirectComponent,
-    RegisterComponent
+    LoginBar,
+    Login,
+    LoginDialog,
+    Profile,
+    Redirect,
+    Register
   ],
   providers: [
     AuthGuard,
@@ -56,12 +56,12 @@ import { JwtInterceptor } from './services/jwt.interceptor';
     BackendProvider
   ],
   exports: [
-    LoginBarComponent,
-    LoginComponent,
-    RedirectComponent,
-    RegisterComponent,
-    LoginDialogComponent,
-    ProfileComponent
+    LoginBar,
+    Login,
+    Redirect,
+    Register,
+    LoginDialog,
+    Profile
   ]
 })
 export class AuthenticationModule { }

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/authentication-routing-module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from './auth.guard';
+import { Profile } from './profile/profile';
+import { Redirect } from './redirect/redirect';
+import { ExternalAuthProvider } from './services/external-auth-configs';
+import { ExternalAuthRedirectUrl } from './services/external-auth';
+
+const authRoutes: Routes = [
+  { path: 'profile', component: Profile, canActivate: [AuthGuard] },
+  { path: ExternalAuthRedirectUrl.Google, component: Redirect, data: { provider: ExternalAuthProvider.Google } },
+  { path: ExternalAuthRedirectUrl.Facebook, component: Redirect, data: { provider: ExternalAuthProvider.Facebook } },
+  { path: ExternalAuthRedirectUrl.Microsoft, component: Redirect, data: { provider: ExternalAuthProvider.Microsoft } }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(authRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AuthenticationRoutingModule { }

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/index.ts

@@ -1,9 +1,9 @@
 export * from './auth.guard';
-export * from './authentication-routing.module';
-export * from './authentication.module';
+export * from './authentication-routing-module';
+export * from './authentication-module';
 export * from './models/login';
-export * from './models/register';
+export * from './models/register-info';
 export * from './models/user';
-export * from './services/authentication.service';
-export * from './services/external-auth.service';
-export * from './services/user.service';
+export * from './services/authentication';
+export * from './services/external-auth';
+export * from './services/user-store';

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/login/{login.component.html → login.html}

@@ -18,12 +18,12 @@
     <button igxButton="raised" type="submit" igxRipple [disabled]="!loginForm.valid">LOG IN</button>
     <a id="register" (click)="showRegistrationForm()">Create new account?</a>
   </div>
-  <div class="social-login" *ngIf="authService.hasProvider()">
-    <button type="button" *ngIf="authService.hasProvider(providers.Facebook)" class="facebook" igxButton="raised"
+  <div class="social-login" *ngIf="externalAuth.hasProvider()">
+    <button type="button" *ngIf="externalAuth.hasProvider(providers.Facebook)" class="facebook" igxButton="raised"
       (click)="signUpFb()">Sign Up Facebook</button>
-    <button type="button" *ngIf="authService.hasProvider(providers.Google)" class="google" igxButton="raised"
+    <button type="button" *ngIf="externalAuth.hasProvider(providers.Google)" class="google" igxButton="raised"
       (click)="signUpG()">Sign Up Google</button>
-    <button type="button" *ngIf="authService.hasProvider(providers.Microsoft)" class="microsoft" igxButton="raised"
+    <button type="button" *ngIf="externalAuth.hasProvider(providers.Microsoft)" class="microsoft" igxButton="raised"
       (click)="signUpMS()">Sign Up Microsoft</button>
   </div>
 </form>

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/login/{login.component.spec.ts → login.spec.ts}

@@ -1,42 +1,42 @@
 import { DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 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 { IgxButtonModule, IgxIconModule, IgxInputGroupModule, IgxRippleModule } from 'igniteui-angular';
-import { AuthenticationService } from '../services/authentication.service';
+import { Authentication } from '../services/authentication';
 import { ExternalAuthProvider } from '../services/external-auth-configs';
-import { ExternalAuthService } from '../services/external-auth.service';
-import { UserService } from '../services/user.service';
-import { LoginComponent } from './login.component';
+import { ExternalAuth } from '../services/external-auth';
+import { UserStore } from '../services/user-store';
+import { Login } from './login';
 
 const MAIL_GROUP_NAME = 'email';
 const PASSWORD_GROUP_NAME = 'password';
 
-describe('LoginComponent', () => {
-  let component: LoginComponent;
-  let fixture: ComponentFixture<LoginComponent>;
-  const extAuthSpy = jasmine.createSpyObj('ExternalAuthService', ['login', 'hasProvider']);
-  const authSpy = jasmine.createSpyObj('AuthenticationService', ['login']);
-  const userServSpy = jasmine.createSpyObj('UserService', ['setCurrentUser']);
+describe('Login', () => {
+  let component: Login;
+  let fixture: ComponentFixture<Login>;
+  const extAuthSpy = jasmine.createSpyObj('ExternalAuth', ['login', 'hasProvider']);
+  const authSpy = jasmine.createSpyObj('Authentication', ['login']);
+  const userServSpy = jasmine.createSpyObj('UserStore', ['setCurrentUser']);
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [LoginComponent, ReactiveFormsModule, RouterTestingModule, NoopAnimationsModule,
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Login, ReactiveFormsModule, RouterTestingModule, NoopAnimationsModule,
         IgxInputGroupModule, IgxButtonModule, IgxIconModule, IgxRippleModule],
       providers: [
-        { provide: ExternalAuthService, useValue: extAuthSpy },
-        { provide: AuthenticationService, useValue: authSpy },
-        { provide: UserService, useValue: userServSpy }
+        { provide: ExternalAuth, useValue: extAuthSpy },
+        { provide: Authentication, useValue: authSpy },
+        { provide: UserStore, useValue: userServSpy }
       ]
     })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LoginComponent);
+    fixture = TestBed.createComponent(Login);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/login/{login.component.ts → login.ts}

@@ -5,20 +5,19 @@ import { Router } from '@angular/router';
 import { IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective,
   IgxInputDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';
 
-import { AuthenticationService } from '../services/authentication.service';
+import { Authentication } from '../services/authentication';
 import { ExternalAuthProvider } from '../services/external-auth-configs';
-import { ExternalAuthService } from '../services/external-auth.service';
-import { UserService } from '../services/user.service';
+import { ExternalAuth } from '../services/external-auth';
+import { UserStore } from '../services/user-store';
 
 @Component({
   selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss'],
-  standalone: true,
+  templateUrl: './login.html',
+  styleUrl: './login.scss',
   imports: [ReactiveFormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective,
     IgxInputDirective, IgxButtonDirective, IgxRippleDirective, NgIf]
 })
-export class LoginComponent {
+export class Login {
   public loginForm: FormGroup;
   @Output() public viewChange: EventEmitter<any> = new EventEmitter();
   @Output() public loggedIn: EventEmitter<any> = new EventEmitter();
@@ -26,8 +25,8 @@ export class LoginComponent {
   public providers = ExternalAuthProvider;
 
   constructor(
-    public authService: ExternalAuthService, private authentication: AuthenticationService,
-    private userService: UserService, private router: Router, fb: FormBuilder
+    public externalAuth: ExternalAuth, private authentication: Authentication,
+    private userStore: UserStore, private router: Router, fb: FormBuilder
   ) {
     this.loginForm = fb.group({
       email: ['', Validators.required],
@@ -36,22 +35,22 @@ export class LoginComponent {
   }
 
   signUpG() {
-    this.authService.login(ExternalAuthProvider.Google);
+    this.externalAuth.login(ExternalAuthProvider.Google);
   }
 
   signUpMS() {
-    this.authService.login(ExternalAuthProvider.Microsoft);
+    this.externalAuth.login(ExternalAuthProvider.Microsoft);
   }
 
   signUpFb() {
-    this.authService.login(ExternalAuthProvider.Facebook);
+    this.externalAuth.login(ExternalAuthProvider.Facebook);
     this.loggedIn.emit();
   }
 
   async tryLogin() {
     const response = await this.authentication.login(this.loginForm.value);
     if (!response.error) {
-      this.userService.setCurrentUser(response.user!);
+      this.userStore.setCurrentUser(response.user!);
       this.router.navigate(['/profile']);
       this.loginForm.reset();
       // https://github.com/angular/angular/issues/15741

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/{login-bar.component.html → login-bar.html}

@@ -1,9 +1,9 @@
-<button *ngIf="!userService.currentUser" igxRipple="white" igxButton="flat" igxButtonColor="white"
+<button *ngIf="!userStore.currentUser" igxRipple="white" igxButton="flat" igxButtonColor="white"
   (click)="openDialog()">Log In</button>
 
-<button class="login-button" *ngIf="userService.currentUser" igxRipple="white" igxButton="flat" igxButtonBackground="c"
+<button class="login-button" *ngIf="userStore.currentUser" igxRipple="white" igxButton="flat" igxButtonBackground="c"
   igxButtonColor="white" [igxToggleAction]="options">
-  <igx-avatar [initials]="userService.initials ?? ''" [src]="userService.currentUser.picture ?? ''"
+  <igx-avatar [initials]="userStore.initials ?? ''" [src]="userStore.currentUser.picture ?? ''"
     [roundShape]="true" size="small" bgColor="white">
   </igx-avatar>
   <igx-icon>keyboard_arrow_down</igx-icon>

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
@@ -15,15 +15,14 @@ import {
   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';
+import { LoginDialog } from '../login-dialog/login-dialog';
+import { ExternalAuth } from '../services/external-auth';
+import { UserStore } from '../services/user-store';
+import { LoginBar } from './login-bar';
 
 @Component({
   selector: 'app-login-dialog',
   template: '',
-  standalone: true,
   imports: [RouterTestingModule,
 	  IgxAvatarModule,
 	  IgxButtonModule,
@@ -33,25 +32,25 @@ import { LoginBarComponent } from './login-bar.component';
 	  IgxRippleModule,
 	  IgxToggleModule]
 })
-class TestLoginDialogComponent extends LoginDialogComponent {
+class TestLoginDialog extends LoginDialog {
   open() { }
 }
 
-describe('LoginBarComponent', () => {
-  let component: LoginBarComponent;
-  let fixture: ComponentFixture<LoginBarComponent>;
+describe('LoginBar', () => {
+  let component: LoginBar;
+  let fixture: ComponentFixture<LoginBar>;
   class TestUserServSpy {
     logout() { }
     get currentUser() { return null; }
     clearCurrentUser() { return null; }
   }
 
-  class TestAuthService {
+  class MockExternalAuth {
     logout() { }
   }
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
         NoopAnimationsModule,
@@ -63,19 +62,19 @@ describe('LoginBarComponent', () => {
         IgxIconModule,
         IgxRippleModule,
         IgxToggleModule,
-		LoginBarComponent,
-		TestLoginDialogComponent
+		LoginBar,
+		TestLoginDialog
       ],
       providers: [
-        { provide: UserService, useClass: TestUserServSpy },
-        { provide: ExternalAuthService, useClass: TestAuthService }
+        { provide: UserStore, useClass: TestUserServSpy },
+        { provide: ExternalAuth, useClass: MockExternalAuth }
       ]
     })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LoginBarComponent);
+    fixture = TestBed.createComponent(LoginBar);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -88,8 +87,8 @@ describe('LoginBarComponent', () => {
     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({
+    const userStore = TestBed.inject(UserStore);
+    spyOnProperty(userStore, 'currentUser', 'get').and.returnValue({
       picture: 'picture'
     });
     fixture.detectChanges();
@@ -102,7 +101,7 @@ describe('LoginBarComponent', () => {
 
   it('should open dialog on button click (not logged)', () => {
     // override ViewChild:
-    component.loginDialog = new TestLoginDialogComponent();
+    component.loginDialog = new TestLoginDialog();
 
     const button = fixture.debugElement.query(By.css('button'));
     spyOn(component.loginDialog, 'open');
@@ -111,8 +110,8 @@ describe('LoginBarComponent', () => {
   });
 
   it('should open drop down on button click (logged in)', async () => {
-    const userServ = TestBed.inject(UserService);
-    spyOnProperty(userServ, 'currentUser', 'get').and.returnValue({
+    const userStore = TestBed.inject(UserStore);
+    spyOnProperty(userStore, 'currentUser', 'get').and.returnValue({
       picture: 'picture'
     });
     fixture.detectChanges();
@@ -124,12 +123,12 @@ describe('LoginBarComponent', () => {
   });
 
   it('should handle user menu items', async () => {
-    const userServ = TestBed.inject(UserService);
-    const authServ = TestBed.inject(ExternalAuthService);
+    const userStore = TestBed.inject(UserStore);
+    const externalAuth = TestBed.inject(ExternalAuth);
     const router: Router = TestBed.inject(Router);
     spyOn(router, 'navigate');
-    spyOn(userServ, 'clearCurrentUser');
-    spyOn(authServ, 'logout');
+    spyOn(userStore, 'clearCurrentUser');
+    spyOn(externalAuth, 'logout');
 
     component.igxDropDown.open();
     component.igxDropDown.setSelectedItem(0);
@@ -137,7 +136,7 @@ describe('LoginBarComponent', () => {
 
     component.igxDropDown.setSelectedItem(1);
     expect(router.navigate).toHaveBeenCalledWith(['/home']);
-    expect(userServ.clearCurrentUser).toHaveBeenCalled();
-    expect(authServ.logout).toHaveBeenCalled();
+    expect(userStore.clearCurrentUser).toHaveBeenCalled();
+    expect(externalAuth.logout).toHaveBeenCalled();
   });
 });

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

@@ -3,29 +3,28 @@ import { Router } from '@angular/router';
 import { NgIf } from '@angular/common';
 import { IgxDropDownComponent, ISelectionEventArgs, IgxRippleDirective, IgxButtonDirective, IgxToggleActionDirective,
   IgxAvatarComponent, IgxIconComponent, IgxDropDownItemComponent } 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 { LoginDialog } from '../login-dialog/login-dialog';
+import { ExternalAuth } from '../services/external-auth';
+import { UserStore } from '../services/user-store';
 
 @Component({
   selector: 'app-login-bar',
-  templateUrl: './login-bar.component.html',
-  styleUrls: ['./login-bar.component.scss'],
-  standalone: true,
+  templateUrl: './login-bar.html',
+  styleUrl: './login-bar.scss',
   imports: [NgIf, IgxRippleDirective, IgxButtonDirective, IgxToggleActionDirective, IgxAvatarComponent, IgxIconComponent,
-    IgxDropDownComponent, IgxDropDownItemComponent, LoginDialogComponent]
+    IgxDropDownComponent, IgxDropDownItemComponent, LoginDialog]
 })
-export class LoginBarComponent {
+export class LoginBar {
 
-  @ViewChild(LoginDialogComponent, { static: true })
-  loginDialog!: LoginDialogComponent;
+  @ViewChild(LoginDialog, { static: true })
+  loginDialog!: LoginDialog;
 
   @ViewChild(IgxDropDownComponent, { static: true })
   igxDropDown!: IgxDropDownComponent;
 
   constructor(
-    public userService: UserService,
-    private authService: ExternalAuthService,
+    public userStore: UserStore,
+    private externalAuth: ExternalAuth,
     private router: Router) {
   }
 
@@ -35,8 +34,8 @@ export class LoginBarComponent {
 
   handleLogout() {
     this.router.navigate(['/home']);
-    this.userService.clearCurrentUser();
-    this.authService.logout();
+    this.userStore.clearCurrentUser();
+    this.externalAuth.logout();
   }
 
   menuSelect(args: ISelectionEventArgs) {

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

@@ -1,14 +1,13 @@
 import { Component, DebugElement, EventEmitter, Output } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } 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';
+import { LoginDialog } from './login-dialog';
 
 @Component({
   selector: 'app-login, app-register',
   template: '',
-  standalone: true,
   imports: [IgxDialogModule]
 })
 class TestSignViewComponent {
@@ -17,9 +16,9 @@ class TestSignViewComponent {
   @Output() public registered = new EventEmitter();
 }
 
-describe('LoginDialogComponent', () => {
-  let component: LoginDialogComponent;
-  let fixture: ComponentFixture<LoginDialogComponent>;
+describe('LoginDialog', () => {
+  let component: LoginDialog;
+  let fixture: ComponentFixture<LoginDialog>;
 
   const checkViews = (): { loginView: DebugElement, registerView: DebugElement } => {
     const loginView = fixture.debugElement.query(By.css('app-login'));
@@ -27,15 +26,15 @@ describe('LoginDialogComponent', () => {
     return { loginView, registerView };
   };
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-       imports: [NoopAnimationsModule, IgxDialogModule, LoginDialogComponent, TestSignViewComponent]
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+       imports: [NoopAnimationsModule, IgxDialogModule, LoginDialog, TestSignViewComponent]
     })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LoginDialogComponent);
+    fixture = TestBed.createComponent(LoginDialog);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -2,17 +2,16 @@ import { Component, ViewChild } from '@angular/core';
 import { IgxDialogComponent } from 'igniteui-angular';
 import { NgIf } from '@angular/common';
 
-import { RegisterComponent } from '../register/register.component';
-import { LoginComponent } from '../login/login.component';
+import { Register } from '../register/register';
+import { Login } from '../login/login';
 
 @Component({
   selector: 'app-login-dialog',
-  templateUrl: './login-dialog.component.html',
-  styleUrls: ['./login-dialog.component.scss'],
-  standalone: true,
-  imports: [IgxDialogComponent, NgIf, LoginComponent, RegisterComponent]
+  templateUrl: './login-dialog.html',
+  styleUrl: './login-dialog.scss',
+  imports: [IgxDialogComponent, NgIf, Login, Register]
 })
-export class LoginDialogComponent {
+export class LoginDialog {
   public showLogin = true;
   public get title() { return this.showLogin ? 'Login' : 'Register'; }
   @ViewChild(IgxDialogComponent, { static: true })

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/models/{register.ts → register-info.ts}

@@ -1,4 +1,4 @@
-export interface Register {
+export interface RegisterInfo {
   given_name: string;
   family_name: string;
   email: string;

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { UserStore } from '../services/user-store';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.html',
+  styleUrl: './profile.scss'
+})
+export class Profile {
+  constructor(public userStore: UserStore) { }
+}