- remove auth-wrapper and tenant-box components from account package

- configure route providers

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.html

@@ -0,0 +1,62 @@
+<nav
+  class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm flex-column flex-md-row mb-4"
+  id="main-navbar"
+  style="min-height: 4rem"
+>
+  <div class="container">
+    <abp-logo *abpReplaceableTemplate="{ componentKey: service.logoComponentKey }"></abp-logo>
+    <button
+      class="navbar-toggler"
+      type="button"
+      [attr.aria-expanded]="!service.isCollapsed"
+      (click)="service.isCollapsed = !service.isCollapsed"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div
+      class="navbar-collapse"
+      [class.overflow-hidden]="service.smallScreen"
+      id="main-navbar-collapse"
+    >
+      <ng-container *ngTemplateOutlet="!service.smallScreen ? navigations : null"></ng-container>
+
+      <div
+        *ngIf="service.smallScreen"
+        [@collapseWithMargin]="service.isCollapsed ? 'collapsed' : 'expanded'"
+      >
+        <ng-container *ngTemplateOutlet="navigations"></ng-container>
+      </div>
+
+      <ng-template #navigations>
+        <abp-routes
+          *abpReplaceableTemplate="{
+            componentKey: service.routesComponentKey,
+            inputs: {
+              smallScreen: { value: service.smallScreen }
+            }
+          }"
+          class="mx-auto"
+          [smallScreen]="service.smallScreen"
+        ></abp-routes>
+
+        <abp-nav-items
+          *abpReplaceableTemplate="{
+            componentKey: service.navItemsComponentKey
+          }"
+        ></abp-nav-items>
+      </ng-template>
+    </div>
+  </div>
+</nav>
+
+<!-- [@slideFromBottom]="outlet.isActivated && outlet.activatedRoute?.routeConfig?.path" TODO: throws ExpressionChangedAfterItHasBeenCheck when animation is active. It should be fixed -->
+<div class="container">
+  <abp-page-alert-container></abp-page-alert-container>
+  <abp-auth-wrapper
+    *abpReplaceableTemplate="{
+      componentKey: authWrapperKey
+    }"
+  >
+    <router-outlet #outlet="outlet"></router-outlet>
+  </abp-auth-wrapper>
+</div>

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts

@@ -1,14 +1,22 @@
-import { Component } from '@angular/core';
-import { eLayoutType } from '@abp/ng.core';
+import { AfterViewInit, Component } from '@angular/core';
+import { eLayoutType, SubscriptionService } from '@abp/ng.core';
+
+import { LayoutService } from '../../services/layout.service';
 
 @Component({
   selector: 'abp-layout-account',
-  template: `
-    <router-outlet></router-outlet>
-    <abp-confirmation></abp-confirmation>
-  `,
+  templateUrl: './account-layout.component.html',
+  providers: [LayoutService, SubscriptionService],
 })
-export class AccountLayoutComponent {
+export class AccountLayoutComponent implements AfterViewInit {
   // required for dynamic component
   static type = eLayoutType.account;
+
+  authWrapperKey = 'Account.AuthWrapperComponent';
+
+  constructor(public service: LayoutService) {}
+
+  ngAfterViewInit() {
+    this.service.subscribeWindowSize();
+  }
 }

npm/ng-packs/packages/account/src/lib/components/auth-wrapper/auth-wrapper.component.html → npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.html

@@ -1,16 +1,18 @@
 <div class="row">
   <div class="mx-auto col col-md-5">
-    <ng-container *ngIf="(isMultiTenancyEnabled$ | async) && isTenantBoxVisible">
-      <abp-tenant-box *abpReplaceableTemplate="{ componentKey: tenantBoxKey }"></abp-tenant-box>
+    <ng-container *ngIf="(service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible">
+      <abp-tenant-box
+        *abpReplaceableTemplate="{ componentKey: service.tenantBoxKey }"
+      ></abp-tenant-box>
     </ng-container>
 
     <div class="abp-account-container">
       <div
-        *ngIf="enableLocalLogin$ | async; else disableLocalLoginTemplate"
+        *ngIf="service.enableLocalLogin$ | async; else disableLocalLoginTemplate"
         class="card mt-3 shadow-sm rounded"
       >
         <div class="card-body p-5">
-          <router-outlet></router-outlet>
+          <ng-content></ng-content>
         </div>
       </div>
     </div>

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthWrapperComponent } from './auth-wrapper.component';
+
+describe('AuthWrapperComponent', () => {
+  let component: AuthWrapperComponent;
+  let fixture: ComponentFixture<AuthWrapperComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AuthWrapperComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthWrapperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthWrapperService } from '@abp/ng.account-core';
+
+@Component({
+  selector: 'abp-auth-wrapper',
+  templateUrl: './auth-wrapper.component.html',
+  providers: [AuthWrapperService],
+})
+export class AuthWrapperComponent implements OnInit {
+  constructor(public service: AuthWrapperService) {}
+
+  ngOnInit(): void {}
+}

npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.html → npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="(currentTenant$ | async) || {} as currentTenant">
+<ng-container *ngIf="(service.currentTenant$ | async) || {} as currentTenant">
   <div class="card shadow-sm rounded mb-3">
     <div class="card-body px-5">
       <div class="row">
@@ -16,7 +16,7 @@
             id="AbpTenantSwitchLink"
             href="javascript:void(0);"
             class="btn btn-sm mt-3 btn-outline-primary"
-            (click)="onSwitch()"
+            (click)="service.onSwitch()"
             >{{ 'AbpUiMultiTenancy::Switch' | abpLocalization }}</a
           >
         </div>
@@ -24,17 +24,17 @@
     </div>
   </div>
 
-  <abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
+  <abp-modal size="md" [(visible)]="service.isModalVisible" [busy]="service.modalBusy">
     <ng-template #abpHeader>
       <h5>Switch Tenant</h5>
     </ng-template>
     <ng-template #abpBody>
-      <form (ngSubmit)="save()">
+      <form (ngSubmit)="service.save()">
         <div class="mt-2">
           <div class="form-group">
             <label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
             <input
-              [(ngModel)]="name"
+              [(ngModel)]="service.name"
               type="text"
               id="name"
               name="tenant"
@@ -53,8 +53,8 @@
       <abp-button
         type="abp-button"
         iconClass="fa fa-check"
-        (click)="save()"
-        [disabled]="currentTenant?.name === name"
+        (click)="service.save()"
+        [disabled]="currentTenant?.name === service.name"
       >
         <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span>
       </abp-button>

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TenantBoxComponent } from './tenant-box.component';
+
+describe('TenantBoxComponent', () => {
+  let component: TenantBoxComponent;
+  let fixture: ComponentFixture<TenantBoxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TenantBoxComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TenantBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+import { TenantBoxService } from '@abp/ng.account-core';
+
+@Component({
+  selector: 'abp-tenant-box',
+  templateUrl: './tenant-box.component.html',
+  providers: [TenantBoxService],
+})
+export class TenantBoxComponent implements OnInit {
+  constructor(public service: TenantBoxService) {}
+
+  ngOnInit(): void {}
+}

npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html

@@ -4,37 +4,37 @@
   style="min-height: 4rem"
 >
   <div class="container">
-    <abp-logo *abpReplaceableTemplate="{ componentKey: logoComponentKey }"></abp-logo>
+    <abp-logo *abpReplaceableTemplate="{ componentKey: service.logoComponentKey }"></abp-logo>
     <button
       class="navbar-toggler"
       type="button"
-      [attr.aria-expanded]="!isCollapsed"
-      (click)="isCollapsed = !isCollapsed"
+      [attr.aria-expanded]="!service.isCollapsed"
+      (click)="service.isCollapsed = !service.isCollapsed"
     >
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="navbar-collapse" [class.overflow-hidden]="smallScreen" id="main-navbar-collapse">
-      <ng-container *ngTemplateOutlet="!smallScreen ? navigations : null"></ng-container>
+    <div class="navbar-collapse" [class.overflow-hidden]="service.smallScreen" id="main-navbar-collapse">
+      <ng-container *ngTemplateOutlet="!service.smallScreen ? navigations : null"></ng-container>
 
-      <div *ngIf="smallScreen" [@collapseWithMargin]="isCollapsed ? 'collapsed' : 'expanded'">
+      <div *ngIf="service.smallScreen" [@collapseWithMargin]="service.isCollapsed ? 'collapsed' : 'expanded'">
         <ng-container *ngTemplateOutlet="navigations"></ng-container>
       </div>
 
       <ng-template #navigations>
         <abp-routes
           *abpReplaceableTemplate="{
-            componentKey: routesComponentKey,
+            componentKey: service.routesComponentKey,
             inputs: {
-              smallScreen: { value: smallScreen }
+              smallScreen: { value: service.smallScreen }
             }
           }"
           class="mx-auto"
-          [smallScreen]="smallScreen"
+          [smallScreen]="service.smallScreen"
         ></abp-routes>
 
         <abp-nav-items
           *abpReplaceableTemplate="{
-            componentKey: navItemsComponentKey
+            componentKey: service.navItemsComponentKey
           }"
         ></abp-nav-items>
       </ng-template>

npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts

@@ -1,54 +1,21 @@
 import { eLayoutType, SubscriptionService } from '@abp/ng.core';
 import { collapseWithMargin, slideFromBottom } from '@abp/ng.theme.shared';
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
-import { fromEvent } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-import { eThemeBasicComponents } from '../../enums/components';
+import { AfterViewInit, Component } from '@angular/core';
+import { LayoutService } from '../../services/layout.service';
 
 @Component({
   selector: 'abp-layout-application',
   templateUrl: './application-layout.component.html',
   animations: [slideFromBottom, collapseWithMargin],
-  providers: [SubscriptionService],
+  providers: [LayoutService, SubscriptionService],
 })
-export class ApplicationLayoutComponent implements AfterViewInit, OnDestroy {
+export class ApplicationLayoutComponent implements AfterViewInit {
   // required for dynamic component
   static type = eLayoutType.application;
 
-  isCollapsed = true;
-
-  smallScreen: boolean; // do not set true or false
-
-  logoComponentKey = eThemeBasicComponents.Logo;
-
-  routesComponentKey = eThemeBasicComponents.Routes;
-
-  navItemsComponentKey = eThemeBasicComponents.NavItems;
-
-  constructor(private subscription: SubscriptionService) {}
-
-  private checkWindowWidth() {
-    setTimeout(() => {
-      if (window.innerWidth < 992) {
-        if (this.smallScreen === false) {
-          this.isCollapsed = false;
-          setTimeout(() => {
-            this.isCollapsed = true;
-          }, 100);
-        }
-        this.smallScreen = true;
-      } else {
-        this.smallScreen = false;
-      }
-    }, 0);
-  }
+  constructor(public service: LayoutService) {}
 
   ngAfterViewInit() {
-    this.checkWindowWidth();
-
-    const resize$ = fromEvent(window, 'resize').pipe(debounceTime(150));
-    this.subscription.addOne(resize$, () => this.checkWindowWidth());
+    this.service.subscribeWindowSize();
   }
-
-  ngOnDestroy() {}
 }

npm/ng-packs/packages/theme-basic/src/lib/components/index.ts

@@ -1,4 +1,6 @@
 export * from './account-layout/account-layout.component';
+export * from './account-layout/auth-wrapper/auth-wrapper.component';
+export * from './account-layout/tenant-box/tenant-box.component';
 export * from './application-layout/application-layout.component';
 export * from './empty-layout/empty-layout.component';
 export * from './logo/logo.component';

npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { eThemeBasicComponents } from '../enums';
+import { SubscriptionService } from '@abp/ng.core';
+import { fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+@Injectable()
+export class LayoutService {
+  isCollapsed = true;
+
+  smallScreen: boolean; // do not set true or false
+
+  logoComponentKey = eThemeBasicComponents.Logo;
+
+  routesComponentKey = eThemeBasicComponents.Routes;
+
+  navItemsComponentKey = eThemeBasicComponents.NavItems;
+
+  constructor(private subscription: SubscriptionService) {}
+
+  private checkWindowWidth() {
+    setTimeout(() => {
+      if (window.innerWidth < 992) {
+        if (this.smallScreen === false) {
+          this.isCollapsed = false;
+          setTimeout(() => {
+            this.isCollapsed = true;
+          }, 100);
+        }
+        this.smallScreen = true;
+      } else {
+        this.smallScreen = false;
+      }
+    }, 0);
+  }
+
+  subscribeWindowSize() {
+    this.checkWindowWidth();
+
+    const resize$ = fromEvent(window, 'resize').pipe(debounceTime(150));
+    this.subscription.addOne(resize$, () => this.checkWindowWidth());
+  }
+}

npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts

@@ -20,6 +20,8 @@ import { ValidationErrorComponent } from './components/validation-error/validati
 import { BASIC_THEME_NAV_ITEM_PROVIDERS } from './providers/nav-item.provider';
 import { BASIC_THEME_STYLES_PROVIDERS } from './providers/styles.provider';
 import { PageAlertContainerComponent } from './components/page-alert-container/page-alert-container.component';
+import { TenantBoxComponent } from './components/account-layout/tenant-box/tenant-box.component';
+import { AuthWrapperComponent } from './components/account-layout/auth-wrapper/auth-wrapper.component';
 
 export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
 
@@ -33,6 +35,8 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt
     CurrentUserComponent,
     LanguagesComponent,
     PageAlertContainerComponent,
+    TenantBoxComponent,
+    AuthWrapperComponent,
   ],
   exports: [
     ...LAYOUTS,